Web网页制作-知识点（4）——CSS盒子模型、弹性盒模型（flex box)、文档流、浮动、清除浮动、定位、圆角、阴影一：https://developer.aliyun.com/article/1531002
overflow清除浮动
如果有父级塌陷，并且同级元素也收到了影响，可以使用overflow清除浮动。
这种情况下，父布局不能设置高度。
<head> <style> .container{ border:1px solid red; width:350px; overflow:hidden; clear:both; } .box{ width:100px; height:100px; background-color:#fff176; float:left; margin:5px; } .nav{ width:100px; height:100px; background-color:red; } </style> </head> <body> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="nav"></div> </body>
伪对象方式
如果有父级塌陷，并且同级元素也收到了影响，还可以使用伪对象方式处理，为父标签添加伪类after，设置空的内容，并使用clear：both；这种情况下，父布局也不能设置高度。
<head> <style> .container{ border:1px solid red; width:350px; } .container::after{ content:""; display:block; clear:both; } .box{ width:100px; height:100px; background-color:#fff176; float:left; margin:5px; } .nav{ width:100px; height:100px; background-color:red; } </style> </head> <body> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="nav"></div> </body>
定位
定义
position属性指定了元素的定位类型。
| 值 | 描述 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
| sticky | 黏性定位 |
其中，绝对定位、固定定位和黏性定位会脱离文档流。
设置定位之后，可以使用四个方向值进行调整位置：left、top、right、bottom。
相对定位
相对于默认位置进行偏移，即定位基点是元素的默认位置。
<head> <style> .box{ width:200px; height:200px; background-color:red; position:relative; left:100px; } </style> </head> <body> <div class="box"></div> </body>
绝对定位
absolute相对于上级元素（一般是父元素）进行偏移，有一个很重要的限制条件：定位基点不能是static定位（static是position属性的默认值，每个块元素占据自己的区块，元素之间互不重叠），否则定位基点就会变成整个网页的根元素html。
换句话说，absolute要在父元素设置了relative（除了static）的情况下才能使用（“子绝父相”）。
<head> <style> .box1{ width:200px; height:200px; background-color:red; position:absolute; left:50px; } .box2{ width:300px; height:300px; background-color:green; } .box{ width:500px; height:500px; background-color:#F0F; position:relative; left:100px; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> </div> </body>
固定定位
相对于视口（浏览器窗口）进行偏移，基点是浏览器窗口，且不会随着窗口滚动而变化。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .box1{ width:200px; height:200px; background-color:red; position:fixed; left:50px; } .box2{ width:300px; height:300px; background-color:green; } h3{ line-height:500px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <h3>6</h3> <h3>6</h3> <h3>6</h3> <h3>6</h3> <h3>6</h3> </body>
不随滚动而移动，固定在浏览器窗口中。
注意：设置定位之后，相对定位和绝对定位是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档。这就是前面为什么说absolute的定位基点不能是static定位。
黏性定位
相对于视口进行黏性固定，当属性到黏性定位所在位置时就会黏住固定。（此时相当于固定定位的效果）与固定定位不同的是，黏性定位要先到指定的位置再固定，而固定定位一开始就固定。
Z-index
z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。（比较权重的大小，权重大的在顶层。）
<head> <style> .box1{ width:200px; height:200px; background-color:red; position:absolute; z-index:2; } .box2{ width:300px; height:300px; background-color:green; position:absolute; z-index:1; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body>
CSS3新特性
圆角
使用CSS3border-radius属性，你可以给任何元素制作“圆角”。
border-radius属性，可以使用以下规则：
- 四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
- 三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角
- 两个值：第一个值为左上角和右下角，第二个值为右上角与左下角
- 一个值：四个圆角值相同
<head> <style> div{ margin:10px; } .box1{ width:200px; height:150px; background-color:#8AC007; padding:20px; border-radius:15px 50px 30px 5px; } .box2{ width:200px; height:150px; background-color:#8AC007; padding:20px; border-radius:15px 50px 30px; } .box3{ /*50%与100%的效果一致*/ border-radius:50%; background:#8AC007; padding:20px; width:200px; height:150px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body>
阴影
box-shadow向框添加一个或多个阴影。
box-shadow：h-shadow v-shadow blur color;
| 值 | 描述 |
| h-shadow | 必选，水平阴影的位置 |
| v-shadow | 必选，垂直阴影的位置 |
| blur | 可选，模糊距离 |
| color | 可选，阴影的颜色 |
<head> <style> .box{ width:200px; height:200px; background-color:#8ac007; margin:50px; box-shadow:10px 10px green; } </style> </head> <body> <div class="box"></div> </body>
给阴影加模糊效果
<head> <style> .box{ width:200px; height:200px; background-color:#8ac007; margin:50px; box-shadow:10px 10px 5px green; } </style> </head> <body> <div class="box"></div> </body>
三个方向的阴影效果
<head> <style> .box{ width:200px; height:200px; background-color:#8ac007; margin:50px; box-shadow:0 10px 30px rgb(0,0,0,.5); } </style> </head> <body> <div class="box"></div> </body>
