CSS知识点总结
一、子元素的margin值对父元素的影响
若父元素宽100px
,子元素宽20px
,左右margin
分别为60px
和50px
,此时,子元素在什么位置。
第一直觉我们会认为子元素会影响到外面的父元素,而事实上子元素的右margin并没有起到作用:
.margin-box {
box-sizing: content-box;
width: 100px;
height: 100px;
background-color: blanchedalmond;
}
.son-box {
width: 20px;
height: 20px;
background-color: chocolate;
margin-left: 60px;
margin-right: 50px;
}
.inline-b {
display: inline-block;
}
<div class="margin-box inline-b">
<div class="son-box"></div>
</div>
<div class="margin-box inline-b">
</div>
ps:外面父盒子与右边盒子之间有缝隙是因为两者是行内元素
二、:empty伪类的使用
当使用:empty
伪类时,只有当元素内容为空时,改样式才会生效,因此可以用该伪类来控制父元素是否展示,如:当没有子元素时,父元素可以展示为dispaly:none;
三、CSS高耗能属性
以下属性的性能消耗较大,建议减少使用次数
- box-shadow
- nth:child
- border-radius
四、src和href的区别
src
指向外部资源的位置,将外部资源嵌入到当前元素当中去,同时还会阻塞页面的解析href
是一个超文本引用,建立当前元素和文本之间的连接,并不会阻塞页面解析