CSS圆角边框的使用和传统网页布局的三种方式之浮动的介绍

今天是CSS的第四天，学习了圆角边框的使用还有浮动，主要掌握浮动的特性和如何清除浮动！
今日框架：

今日重点：
一、边框和阴影
1、圆角边框（border-radius）：在边框的四周有一个圆形转角，让盒子视觉效果更好
1）做圆：border-radius: 50%; （正方形盒子是圆形 / 长方形盒子是椭圆）
2）做圆角矩形：border-radius: 高度的一半;（长方形盒子（宽 > 高））
3）设置不同的圆角：border-radius: 10px 20px 30px 40px; 左上 → 右上 → 右下 → 左下（顺时针）
2、盒子阴影（box-shadow）
1）盒子阴影属性：前两个数是方向，后两个数是半径，然后是颜色，最后一个几乎用不到。

2）盒子阴影不会影响盒子大小
3）div 可以使用 :hover；伪类是状态 / div 同样存在鼠标经过状态
3、文字阴影（text-shadow）
1）文字阴影属性：前两个数是方向，第三个数是半径，然后是颜色。

二、浮动（float）：用于创建浮动框，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
1、传统网页布局三种方式
1）标准流（文档流）:
(1)标签按照规定好的默认方式排列（块级元素、行内元素）
(2)标准流是最基本的布局方式。
2）浮动
3）定位
2、为什么需要浮动？
1）让多个块级元素（不改变显示方式）水平排成一行
2）让两个块级元素一个左对齐，一个右对齐
3、浮动的布局准则：
1）多个块级元素纵向排列 —— 标准流
2）多个块级元素横向排列 —— 浮动
4、浮动的方向：左浮动：float: left; 右浮动：float: right
5、浮动的特性：
1）脱离标准流(脱标)：
（1）脱离标准普通流的控（浮）移动到指定位置（动），俗称脱标；
（2）浮动的盒子不再保留原先的位置，后续的盒子会占据被浮动盒子原有的位置
2）浮动元素一行显示
（1）如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列；
（2）浮动的元素是互相靠在一起的（不会有缝隙）；
（3）如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
3）浮动元素具有行内块特性
（1）任何元素都可以使用浮动，添加浮动之后具有行内块元素相似的特性；
（2）如果没有给块级盒子设置宽度，默认宽度是父级盒子的宽度，浮动之后宽度由内容来决定；
（3）浮动的盒子之间是没有缝隙的，是紧挨着一起的，行内元素同理。
6、浮动元素经常搭配标准流的父元素
1）标准流的父盒子排列上下位置，这样标准流父盒子可以约束浮动的子盒子，按照我们布局要求在父盒子内排列；
2）浮动的子盒子负责在父盒子中横向排列，里面填写内容。
7、浮动小结：
1）应用场景：（1）标准流父盒子负责上下
（2）浮动子盒子负责左右
（3）内容套在子盒子内部，子盒子最好不要既负责布局，又要负责内容
2）（1）浮动的元素会脱标，下方的盒子会占据原有的位置；
（2）父盒子中的所有亲儿子盒子一起浮动
3）浮动相比较 inline-block 的优势：
（1）没有缝隙，可以精确控制盒子之间的距离；
（2）顶端对齐（inline-block 会按照文字对齐方式对齐）
4）注：（1）务必要控制好每个盒子的宽度；
（2）用调试工具检查盒子位置；
（3）* {margin: 0; padding: 0} 不要忘
（4）结构永远最重要。
8、常见的网页布局
1）常见的网页布局目标：（1）认知通栏和版心 （2）盒子套盒子
2）浮动的两个注意点：
（1）子浮父不浮：浮动和标准流的父盒子搭配。
** 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。**
（2）兄弟一起浮：一个元素浮动了，理论上其余的兄弟元素也要浮动。
** 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。**
9、清除浮动：
1）为什么清除浮动：（1）父级没有高度； （2）子盒子浮动了； (3)影响下面布局了，我们就应该清除浮动了
注：如果在开发时，不方便给父盒子指定高度，子盒浮动后（脱标），不占有原有位置，导致父盒子高度为 0，最终影响到下方的盒子。
2）如果子盒子全部浮动，父盒子的高度不能被撑开，盒子浮动后，会脱标，一旦脱标，原有位置不再保留。
3）清除浮动本质以及额外标签法（clear: both;）：清除浮动元素脱标后造成的影响
清除浮动后，父盒子可以根据浮动的子盒子自动检测高度，父盒子有了高度，就不会对下方的标准流造成影响了。
（1）额外标签法： 在浮动元素末尾添加一个空的 div
设置该 div 的样式为 clear: both;
优点：通俗易懂 / 书写方便 / W3C 推荐
缺点：添加许多无意义的标签，结构化较差
（2）清除浮动之父元素 overflow： 给父元素添加 overflow 属性，将其属性设置为 hidden、auto、scroll 都可以；
通常设置 overflow: hidden；
优点：代码简单 / 好记忆
缺点：无法显示溢出部分，面试会被追问
（3）清除浮动之 after 伪元素：

（4）清除浮动之双伪元素：

10、清除浮动总结：
1）为什么清除浮动？
子盒子浮动 → 脱离原有位置 → 父级没有高度 → 影响后续标准流盒子
2）清除浮动的方法：

重点单词：
float：浮动；浮点数
clearfix：清除浮动
overflow：泛滥，溢出
hidden：躲藏，隐藏
list-style：none 取消无序列表的小点
有关CSS三大特性及盒子模型，border；padding及margin的介绍可点击a=href"https://www.cnblogs.com/kk199578/p/13923017.html"