这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天 本节课主要是讲了css选择器的特异度、继承、初始值、布局和display的一些属性。
<article>
<h1 class="title">
拉森火山国家公园
</h1>
</article>
<style>
.title {
color: blue;
}
article h1 {
color: red;
}
</style>
由以上代码，可以引申出一个问题，哪个css规则生效？
以上问题可以归于选择器的特异度
继承
定义：某些属性会自动继承其父元素的计算值，除非显示指定一个值
显示继承代码如下
* {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
.some-widget {
box-sizing: content-box;
}
初始值
- css中，每个属性都有一个初始值
- Background-color的初始值为 transparent
- margin-left的初始值为0
- 可以使用 initial 关键字显示重置为初始值
- Background-color: initial
布局
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
布局涉及到行级、块级、表格布局、flex和grid，还有浮动和绝对定位
盒子详解：
width:
- 指定content box宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其它属性确定
- 百分数相对于容器的content box宽度
height:
- 指定content box高度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对于容器的content box高度
- 容器有指定的高度时，百分数才生效
padding:
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
border:
- 指定容器边框样式、粗细和颜色
margin:
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
块级:
- 不和其它盒子并列摆放
- 适用所有的盒模型属性
- 生成块级盒子
- body article div main section h1-6 p ul li display: block
行级:
- 和其他盒子排列一行或拆分成多行
- 盒模型中的width、height不适用
- 生成行级盒子，内容分散在多个行盒中
- span em strong cite code display: inline
display属性
| 值 | 解释 |
|---|---|
| block | 块级盒子 |
| inline | 行级盒子 |
| inline-block | 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行 |
| none | 忽略即可 |
