CSS知识点总结（六）

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是一个超文本引用，建立当前元素和文本之间的连接，并不会阻塞页面解析