06-圆角、阴影/文档流、浮动、清除浮动
1.圆角边框+盒子阴影+文字阴影
div { width: 200px; height: 200px; background-color: #222222; /* 圆角边框 */ /* 如果正方形通过圆角边框做一个圆形：让border-radius的长度为盒子的width或height的一半或者50% */ /* 如果是矩形，则设置为height的一半 */ border-radius: 50%; /* border-radius可以简写，分别代表左上，右上，右下，左下，顺时针，可写四个值，也可写2，3个值 */ /* 分开写则为border-top-left-radius等 */ border-radius: 10px 50px; /* 盒子阴影 水平阴影的位置(允许负值、必需) 垂直阴影的位置(允许负值、必需) 模糊距离 阴影尺寸 颜色 外部阴影(可改为内部阴影) */ /* 最后一个属性默认为外阴影(outset)，但是不可以显式写这个单词，否则会导致阴影无效 */ /* 盒子阴影不占用空间，不会影响其他盒子排列 */ box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3); /* 文字阴影 水平阴影的位置(允许负值、必需) 垂直阴影的位置(允许负值、必需) 模糊距离 颜色 */ text-shadow: 5px 5px 6px rgba(0, 0, 255, .3); }
2.网页布局
文档流：
块级元素独占一行，从上到下顺序排列。常用div、hr、p、h1~h6、ul、ol、dl、form、table等
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘自动换行。常用span、a、i、em等
浮动：
如何实现多个块级盒子(div)水平排列成一行？（浮动的最典型应用）
如何实现两个盒子，一个在最左边，一个在最右边？
准则：网页布局多个块级元素纵向排列找标准流，横向排列找浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
<style> .left, .right { float: left; width: 200px; height: 200px; background-color: skyblue; } .right { float: right; } </style> </head> <body> <div class="left">左边</div> <div class="right">右边</div> </body>
浮动特性：
1.浮动元素会脱离文档流
脱离文档流的控制浮动到指定位置
浮动的盒子不再保留原先的位置
<style> .up { float: left; width: 100px; height: 100px; background-color: skyblue; } .down { width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div class="up">上面</div> <div class="down">下面</div> </body>
2.浮动元素会在一行内显示(默认紧贴没有空隙)并且元素顶部对齐。如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
3.浮动元素都具有行内块元素的特性
如：如果块级元素没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的宽度大小根据内容来决定
浮动元素经常和文档流父级搭配使用
为了约束元素位置，网页布局一般采取如下策略：先用文档流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题(浮动的盒子只会影响浮动盒子后面的文档流，不会影响前面的文档流)
<style> .first { width: 100px; height: 100px; background-color: skyblue; } .second { float: left; width: 100px; height: 100px; background-color: red; } .third { width: 200px; height: 200px; background-color: violet; } </style> </head> <body> <div class="first">第一</div> <div class="second">第二</div> <div class="third">第三</div> </body>
为什么要清除浮动：很多情况下父盒子不方便给高度，但是子盒子浮动又不占有位置，所以会导致父盒子高度为0，出现塌陷现象，从而影响到下面的文档流。
清除浮动
本质：清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的文档流了
1.额外标签法
在浮动元素末尾添加一个空的标签，从而使父级高度自适应浮动元素高度
缺点：添加无意义标签，结构化语义化较差
注意：新添加的空标签必须是块级元素
<style> .father { width: 600px; border: 3px solid red; } .first, .second, .third { float: left; width: 200px; height: 200px; background-color: skyblue; } .second { height: 300px; background-color: red; } .third { background-color: violet; } .clear { /* 清除浮动 */ clear: both; } </style> </head> <body> <div class="father"> <div class="first">第一</div> <div class="second">第二</div> <div class="third">第三</div> <div class="clear"></div> </div> </body>
2.父级添加overflow
可以给父级添加overflow属性，将其属性值设置为hidden、auto或scoll
缺点：溢出父元素的内容会消失
<style> .father { width: 600px; border: 3px solid red; /* 添加overflow来清除浮动 */ overflow: hidden; } .first, .second, .third { float: left; width: 200px; height: 200px; background-color: skyblue; } .second { height: 300px; background-color: red; } .third { background-color: violet; } </style> </head> <body> <div class="father"> <div class="first">第一</div> <div class="second">第二</div> <div class="third">第三</div> </div> </body>
3.:after伪元素法
额外标签法的升级版，没有增加标签，结构简单。百度、淘宝、网易等在用
<style> /* 伪元素清除 */ .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7专有 */ *zoom: 1; } .father { width: 600px; border: 3px solid red; } .first, .second, .third { float: left; width: 200px; height: 200px; background-color: skyblue; } .second { height: 300px; background-color: red; } .third { background-color: violet; } </style> </head> <body> <div class="father clearfix"> <div class="first">第一</div> <div class="second">第二</div> <div class="third">第三</div> </div> </body>
4.双伪元素清除浮动
思路类似3，代码更简洁。代表：小米，腾讯
<style> /* 双伪元素清除 */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { /* IE6、7专有 */ *zoom: 1; } .father { width: 600px; border: 3px solid red; } .first, .second, .third { float: left; width: 200px; height: 200px; background-color: skyblue; } .second { height: 300px; background-color: red; } .third { background-color: violet; } </style> </head> <body> <div class="father clearfix"> <div class="first">第一</div> <div class="second">第二</div> <div class="third">第三</div> </div> </body>
