这是我参与「第四届青训营」笔记创作活动的第三天

二、深入CSS

选择器的特异度（Specificity）

.btn.primary可以覆盖.btn的属性

继承

显示继承

* {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

.some-widget {
    box-sizing: content-box;
}

inherit 让不可继承的属性变成可继承

初始值

CSS中，每个属性都有一个初始值
- background-color 的初始值为 transparent
- margin-left 的初始值为 0
可以使用 initial 关键字显式重置为初始值
- background-color:initial

属性的求值过程流程图

布局

布局(Layout)是什么？

布局的相关技术

盒模型

width

指定 content box 宽度
取值为长度、百分数、auto
auto 由浏览器根据其它属性确定
百分数相对于容器的 content box 宽度

height

指定 content box 高度
取值为长度、百分数、auto
auto 取值由内容计算得来
百分数相对于容器的 content box 高度
容器有指定的高度时，百分数才生效

内边距

padding

指定元素四个方向的内边距
百分数相对于容器宽度

border

指定容器边框样式、粗细和颜色
边框变化动态例子见以下链接
cdpn.io/webzhao/deb…

border 总结

当四条边框颜色不同的动态例子见以下链接
cdpn.io/webzhao/deb…

margin

指定元素四个方向的外边距
取值可以是长度、百分数、auto
百分数相对于容器宽度

使用 margin:auto 水平居中

margin collapse

margin 在垂直方向有边距合并，取间距大的留下

box-sizing:border-box

.a —— width: 100%
".a"表示的这段文字的宽度为100%
".a"的容器实际占宽超过100%
故而会有溢出屏幕的状况从而生出滚动条

.b —— box-sizing:border-box —— width: 100%
".b"表示的 width: 100% 包含了 border 和 padding 在内
故而内容小于100%

box-sizing:border-box 很常用

深入CSS|青训营笔记