从刚开始接触CSS到现在,一般用的单位都是像素这种绝对的单位。简单方便,而且还不容易出现一些莫名其妙的问题。想必学过CSS,了解了相对单位的童鞋们都应该知道:相对单位于都有一个基准。那么width:100%是相对于谁呢?
一般层级元素
把上面的demo-aprent中加入padding,margin,border值,这些属性的百分比值始终是以父容器的宽度为基准的,而height是以父容器的高度为基准(若父容器没有设置高度,即height值为auto,则浏览器会设置子容器的height属性为auto)
存在定位元素
对于使用position:relative的子类元素而言,width:100%也始终是基于父级元素而并不会基于其上层元素中的relative。
对于绝对定位的子无素,要是其外层的所有元素中都没有用position:relative,则width:100%是基于body,否则就是离基于最近的一个position:relative的元素。
而对于position:fixed的元素,其一直是基于body,所以其宽度100%就是基于body。
我们要弄清楚什么时候合适使用,那我们就要弄清楚它在什么时候多余。说白了就是width什么时候会自动继承。
1.内层子元素必须为块级元素,才有可能出现宽度继承。
2.当父元素宽度确定,子元素不存在浮动,绝对定位,固定定位时,其宽度也能够很好的继承;相反,宽度会零(只有通过里面的内容把其撑开)。
3.当父元素宽度不确定时(宽度是继承而来,或是用的相对单位),不会对继承造成什么影响。
光看不练是没有多大意义的。你可以按照以上的思路来写一下,试一下,或许还有意外惊喜。
来源:千锋html5学院
领取专属 10元无门槛券
私享最新 技术干货