一、box-sizing
box-sizing有两个值:
当给一个盒子设置box-sizing: border-box;的时候,那么当前这个盒子的实际大小就是我们设置的宽度和高度的大小。
当给一个盒子设置box-sizing: content-box的时候,那么当前这个盒子的实际大小=盒子的内容区域(宽度和高度)+边框+内边距。
二、浮动
浮动的使用:
如果要实现图片和文字环绕的效果,我们给图片设置浮动即可。
- 因为文字不会受浮动的影响,所以文字不会被浮动的元素覆盖。
- 文字所在的标签依然会受到浮动的影响。
清除浮动的方式:
在网页布局中,如果一个父容器没有设置高度,同时该父容器中的子元素都设置了浮动,那么就会导致与父容器并列显示的容器跑到当前父容器的底部。如果遇到以上问题,我们需要清除浮动(将浮动的元素影响消除掉)
(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,那么子元素的行高=父元素文字大小*父元素设置的行值【先计算后继承】
◆如果父元素设置的行高值是百分比,那么子元素的行高=父元素文字大小*父元素设置的行值【先计算后继承】
◆如果父元素设置的行高值是具体值不带单位,那么子元素的行高=子元素文字大小*父元素设置的行值【先继承后计算】