前端 day 03

今日内容详细

一、盒子模型

Ⅰ-1、所有的标签都可以看成是一个快递盒

  1. 两个快递盒之间的距离         标签之间的距离                  外边距(margin)
  2. 快递盒的厚度                       标签的边框                        边框(border)
  3. 盒子内物体距离盒子内壁      内部文本与边框的距离        内边距(padding)
  4. 物体自身的大小                    标签内部的内容                  内容(content)

Ⅱ-2、需要掌握的操作

  margin-top:20px;  

  margin-left:100px;  

  margin-right:100px;  

  margin-bottom:100px;  

Ⅲ-3、body标签自带8px的外边距

  margin:0;           简写形式，作用于上下左右   

  margin:10px 20px;      从左到右的参数依次控制的是  上下  左右 

  margin:10px 20px 30px;   从左到右的参数依次控制的是  上 左右 下 

  margin:10px 20px 30px 40px;  从左到右依次是  上 右 下 左

Ⅳ-4、margin还可以让内部标签居中展示

  margin:100px auto  仅限于水平方向

Ⅴ-5、padding使用方式与margin一致

二、浮动布局 

Ⅰ-1、浮动的语法结构

  float:left\right   页面布局必不可少的操作

Ⅱ-2、解决父标签塌陷

  浮动会造成父标签塌陷，这是一个不好的现象，因为会引起歧义，解决浮动造成的父标签塌陷

.clearfix:after {
                content:'';
                display:block;
                clear:both;
          }

   提前写好上述的css操作，遇到标签塌陷就给标签添加clearfix类值即可

   ‘’浏览器针对文本是优先展示的(浮动的元素如果遮挡会想办法展示)‘’

 三、溢出属性

Ⅰ-1、overflow:参数         通过参数去控制溢出的属性

  参数：

           visible   默认值，内容不会被修剪，会呈现在元素框之外
  hidden 内容会被修剪，并且其余内容是不可见的
    scroll 内容会被修建，但是浏览器弧线是滚动条
    auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
    inherit   规定应该从父元素继承，overflow属性的值

Ⅱ-2、圆形头像制作的方式

div {
            height: 50px;
            width: 50px;
            border: 5px solid gold;
            border-radius: 50%;
            overflow: hidden;
        }
div img {
    max-width: 100%;
}

 四、定位操作  

Ⅰ-1、定位参数

static(静态) 所有的标签默认都不能通过定位修改位置，必须要切换成下面三种之一
relative(相对定位) 相对于标签原来的位置做定位
absolute(绝对定位) 基于已经定位过的父标签做定位(如果没有父标签则以body为参照)
fixed(固定定位) 相对于浏览器窗口做定位

Ⅱ-2、代码操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d3 {
        height:100px;
        width: 100px;
        border: 5px solid black;
        position:fixed;
        right: 100px;
        bottom: 300px;
    }
  </style>
</head>
<body>
<div style="height:1000px;background-color: red"></div>
<div style="height:1000px;background-color: yellow"></div>
<div style="height:1000px;background-color: blue"></div>
<div id="d3"></div>
</body>
</html>

五、z-index

  浏览器界面其实是一个三维坐标系，z轴指向用户

  opacity:用来定义透明的效果，取值范围是0~1，0是完全透明，1是完全不透明

六、纯手打页面练习

  1.先分析页面结构

    然后使用div和span构建出基本骨架

  2.给标签起id和class便于后续查找并修改样式

    id与class的命名也要做到见名知意

  3.正儿八经的写不同的语言应该存储不同的文件

    html文件、css文件、js文件

七、JavaScript简介

  1.跟java没有关系  纯蹭热度

  2.JavaScript与ECMAScript区别

  3.版本迭代

  4.JavaScript 是一门编程语言(NodeJS)

  5.html页面两种引入js的方式

  6.两种注释语法       //      /**/

  7.建议的结束符号是分号

 

八、JS变量与常量

  支持编写js代码的地方

    1.pycharm

    2.浏览器

  在JS中声明变量和常量都需要使用关键字

    

   var 全局有效
   let  如果在局部名称空间中使用，那么仅在局部名称空间有效
 const 定义常量

九、JS数据类型之数值类型

  在js中查看数据类型可以使用  typeof

  在js中整型浮点型统称为数值类型number

    parseInt()

    parseFloat()

  Nan:Not A Number  不是一个数字

十、JS数据类型之字符串类型

  字符串string

var name = 'jason'
var name = "jason"
var name = `jason`   模板字符串

作业：

posted @ 2022-08-24 16:29  W-Y-N  阅读(37)  评论(0)    收藏  举报