4.盒子模型

4.1什么是盒子模型

margin：外边距
border：边框
padding：内边距

body默认有个外边距

但是我们可以自己设置它，把默认边框去掉，让它更美观一点

/*常见操作，*号是通用符*/
*{
    margin: 0;
    padding: 0;
    text-decoration: none;     
  }

乱搞了一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*常见操作*/
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;

        }

        /*border：粗细，颜色，样式*/
        #box{
            width: 300px;
            border: 1px solid rebeccapurple;
        }

        form{
            background: #C850C0;
        }
        h2{
            background: aqua;
        }

        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        div:nth-of-type(2) input{
            border: 3px solid black;
        }
        div:nth-of-type(3) input{
            border: 3px solid black;
        }
    </style>

</head>
<body>
<div id="box">



    <h2>会员登录</h2>
    <form action="#" method="get">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>

        <div>
            <span>密码：</span>
            <input type="text">
        </div>

        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>

    </form>

</div>
</body>
</html>

效果图

4.3外边距margin

可以设置上下左右

padding也可以

也可以一次性写完

上，右，下，左，顺时针排列

外边距用处--div居中

使用前提：要在一个块元素（div）中

margin: 0 auto;

比如给了你一个50 * 50px的格子，那你的总体大小就要是上面那几个加起来等于50 * 50px，而不是单单你的内容（可能是一张图片，输入框什么的）就占50 * 50px

4.4圆角边框

border-radius: 250px 100px 50px 0px;

左上，右上，右下，左下，顺时针排列

上面的效果图

圆圈：圆角 = 半径 + 边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 300px;
      height: 300px;
      border: 30px solid rebeccapurple;
      border-radius:  180px
    }
  </style>

</head>
<body>

<div></div>

</body>
</html>

这里的圆角应该是360 / 2 = 180px
这里就举个例子，还可以画很多图形，利用width，height，border-radius等
属性可以画出不同的图形

多百度

这里举个小米200w商标的例子

但是感觉还是不太像，可能不止这么简单吧

4.5盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

blur和spread填一个就行了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    img{

        width: 100px;
        height: 100px;
        border-radius: 20px;
        box-shadow: 10px 10px 100px blue;
    }
  </style>

</head>
<body>

<div>
    <img src="image/1.png" alt="小米商标" >
</div>

</body>
</html>

效果图

5.浮动

5.1标准文档流

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

窗口化的时候排列仍然正常，不应该飘出去

5.2display

一般来说，块元素可以包含行内元素，但是行内元素不能包括块元素
多个行内元素可以显示在同一行，块元素不能
display可以解决这个问题

display 属性规定元素应该生成的框的类型
记三个值就够了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 3px solid blueviolet;
        }
        span{
            width: 100px;
            height: 100px;
            border: 3px solid blueviolet;
        }
    </style>
</head>
<body>
<div>
    块元素
</div>

<span>
    行内元素
</span>
</body>
</html>

没加display属性的时候

在span标签里加了display:block之后

span{
            width: 100px;
            height: 100px;
            border: 3px solid blueviolet;
            display: block;
        }

在div标签里加上inline之后

 div{
            width: 100px;
            height: 100px;
            border: 3px solid blueviolet;
            display: inline;
        }

当两个都加上inline-block之后就可以显示在同一行了

div{
    width: 100px;
    height: 100px;
    border: 3px solid blueviolet;
    display: inline-block;
     }
span{
     width: 100px;
     height: 100px;
     border: 3px solid blueviolet;
     display: inline-block;
    }

补充：div那里改成inline也可以显示在一行，因为都是行内元素了
none就是整个消失，不演示了

5.3浮动float

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

一个直观的感觉
当你窗口化网页的时候，元素位置会变化

全屏时候是一行

窗口化的时候，变成一列了

默认的，上面这种情况就类似于左浮动

右浮动就是往页面右边靠

在你窗口化的时候也是贴着右边

5.4父级边框塌陷

这个的意思就是在你有元素浮动的时候，父级边框在下面一层的情况

红色的是父级边框

如何解决这个问题
1.固定并加长父级元素高度

#father{
    border: 3px solid red;
    height: 800px;
    width: 1500px;
}

因为父级元素高度很高，无论你怎么浮动都在父级边框之内
2.增加一个空的div标签并且让他不浮动

<div class="frr"></div>

---

.frr{
    clear: both;
    margin: 0;
    padding: 0;
}

注意：这个空标签要放到父级标签里面才行
补充：clear：both--->不允许浮动

个人理解：是因为下面的div框架不允许漂浮，所以浮动元素只能回到父级元素里撑开
3.overflow

在父级标签的属性里面里面加上

overflow: hidden;

4.给父类添加一个伪类(推荐使用)

#father:after{
    content: "";
    display: block;
    clear: both;
}

after选择器：after 选择器在被选元素的内容后面插入内容。

5.5两种方法的对比

display
方向不可控制
float
可控制方向，但是会有父级边框塌陷的问题(因为脱离了标准文档流)

6.定位

6.1相对定位

position:relative
---
top:
left:
bottom:
right:

relative就是相对自己
对于设定的方向，负号表示向设定的方向移动
这里我们自己设定一个案例，显示三个盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      margin: 10px;
      padding: 5px;
      font-size: 15px;
      line-height: 20px;
    }
    #father{
      border: 2px solid purple;
      padding: 0;
    }
    #first{
      border: 2px solid blueviolet;
      background: #7c6e99;
    }
    #second{
      border: 2px solid salmon;
      background: #ffc7c7;
    }
    #third{
      border: 2px solid aquamarine;
      background: #c5eee5;
    }

  </style>
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>

效果图

我们在三个盒子对应的标签中加入position属性

    #first{
      border: 2px solid blueviolet;
      background: #7c6e99;
      position: relative;
      top: -20px;

    }
    #second{
      border: 2px solid salmon;
      background: #ffc7c7;
      position: relative;
      left: -20px;
    }
    #third{
      border: 2px solid aquamarine;
      background: #c5eee5;
      position: relative;
      bottom: -20px;
    }

总结：相对定位就是相对于原来的位置进行指定的偏移，但是仍在标准文档里（通过父级边框没塌陷看出来）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>

    #father{
      border: 2px solid indianred;
      width: 310px;
      height: 310px;
    }

    #father:after{
      content: "";
      display: block;
      clear: both;
    }

    div div{
      width: 100px;
      height: 100px;
      background-color: pink;
      display: inline-block;
      text-align: center;
      font: lighter 15px/97px "微软雅黑"
    }

    #first{
      position: relative;

    }
    #second{
      position: relative;
      right: -100px;
    }
    #third{
      position: relative;
      bottom: -200px;
      left: -200px;
    }
    #fourth{
      position: relative;
      bottom: -100px;
      right: -200px;
    }
    #fifth{
      position: relative;
      
    }
    
    a{
      text-decoration: none;
      color: white;
    }
    div div:hover{
      background-color: dodgerblue;
    }
  </style>


</head>
<body>
<div id="father">
  <div id="first">
    <a href="#">链接1</a>
  </div >
  <div id="second">
    <a href="#">链接2</a>
  </div>
  <div id="third">
    <a href="#">链接3</a>
  </div>
  <div id="fourth">
    <a href="#">链接4</a>
  </div>
  <div id="fifth">
    <a href="#">链接5</a>
  </div>
</div>

</body>
</html>

老师布置的小作业做了一下

调了老半天老是调不好，就没搞了
看了视频才想起来直接

a{
display:block
}

就行了

6.2绝对定位

position:absolute

1.在父级元素没有定位的前提下，相对于浏览器定位
2.父级元素存在定位，会相对于父级元素进行偏移
3.原来位置不会被保留，并且会脱离文档流

滚动滚轮的话，div1会往上走

会往上走的原因是因为div是绝对定位，定死在那个位置了，你往上划页面并不会改变它在整个页面的那个位置

6.3固定定位

position:fixed

而固定定位是固定在整个屏幕某一个位置，比如说固定在屏幕右下角，你怎么划，他都固定在那里不会动

绝对定位就是定位在整个浏览器页面的某个位置，而固定定位就是固定在屏幕的某个位置

油猴那些插件就是固定定位

补充一个点：

div:nth-of-type(1){
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      /*在position: absolute和position: fixed的情况下，0表示它初始在哪边*/
      right: 0;
      bottom: 0;
    }

上面那个div1初始就在右下边

6.4 z-index

感觉就是图层的问题

定义和用法

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

说明
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

z-index: -1;

偷一下别人网站的，实在不想写了

终于搞完了，学js去了

#CSS3 02