CSS基础知识汇总{主要内容：浮动特点，网页布局，清除浮动}

一、box-sizing
box-sizing有两个值：
当给一个盒子设置box-sizing: border-box;的时候，那么当前这个盒子的实际大小就是我们设置的宽度和高度的大小。
当给一个盒子设置box-sizing: content-box的时候，那么当前这个盒子的实际大小=盒子的内容区域（宽度和高度）+边框+内边距。
二、浮动
浮动的使用：
如果要实现图片和文字环绕的效果，我们给图片设置浮动即可。

1. 因为文字不会受浮动的影响，所以文字不会被浮动的元素覆盖。
2. 文字所在的标签依然会受到浮动的影响。

清除浮动的方式：
在网页布局中，如果一个父容器没有设置高度，同时该父容器中的子元素都设置了浮动，那么就会导致与父容器并列显示的容器跑到当前父容器的底部。如果遇到以上问题，我们需要清除浮动（将浮动的元素影响消除掉）
（1）使用clear属性清除浮动
clear:left | right | both;
首先在浮动的元素后面直接添加一个空标签

给当前这个用来清除浮动的空标签设置clear:both; 属性即可

（2）使用伪元素清除浮动（after）[推荐使用这种方式]

（3）给父元素设置overflow:hidden;
◆注意如果父元素中没有定位的元素，那么我们可以使用这种方式
◆如果父元素中有定位的元素且该定位的元素超出了父容器，那么不能使用这种方式。
三、overflow

四、盒子阴影


五、边框圆角

如果希望设置一个椭圆的效果：只要设置水平半径和垂直半径不一样就可以了。（默认情况下，如果我们设置一个值，那么代表水平半径和垂直半径是相等的）

六、边框合并

七、行高单位

目前我们在设置css样式中凡是涉及到单位问题，我们通通使用px.
行高单位：
px em 百分比 不带任何单位
例如：
line-height: 20px;
line-height: 2em:
line-height: 200%:
line-height: 2;
☞ 给单独一个标签设置行高，行高不同单位的不同效果：

◆如果设置的行高是以px为单位，那么最后文字的行高值就是我们设置的值，与文字大小无关。

◆如果设置的行高是以em为单位，那么最后文字的行高=设置的文字大小*设置的行高值，与文字大小有关。

◆如果设置的行高值是百分比，那么最后的文字行高=文字大小*设置的行高值

◆如果设置的行高值是个具体数字不带任何单位，那么最后的文字行高=文字大小*设置的行高值

☞如果给父元素设置行高，子元素的行高情况：

◆如果父元素设置的行高单位是px,那么子元素的行高=父元素设置的行高值（继承性）

◆如果父元素设置的行高值是em,那么子元素的行高=父元素文字大小*父元素设置的行值【先计算后继承】

◆如果父元素设置的行高值是百分比,那么子元素的行高=父元素文字大小*父元素设置的行值【先计算后继承】

◆如果父元素设置的行高值是具体值不带单位,那么子元素的行高=子元素文字大小*父元素设置的行值【先继承后计算】