这是我参与「第五届青训营」伴学笔记创作活动的第2天
1.选择器的特异度
选择器特殊的程度
例：
<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
.btn {
display: inline-block;
padding: .36em .8em;
margin-right：.5em;
line-height： 1.5;
text-align: center;
cursor: pointer;
border-radius: .3em;
border: none;
background: #e6e6e6;
color: #333;
}
.btn.primary {
color: #fff;
background: #218de6;
}
</style>
- 展示效果：
2.继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值。
<p>This is a <em>test</em> of <strong>inherit</strong>
</p>
<style>
body {
font-size: 20px;
}
p{
color: blue;
}
em {
color: red;
}
</style>
- 展示效果：
3.显式继承
*{
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
.some-widget{
box-sizing: content-box;
}
4.初始值
- CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
- 可以使用 initial 关键字显式重置为初始值
- background-color：initial
5.CSS求值过程
6.布局是什么？
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
7.布局相关技术
7.1 width
- 指定content box宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其它属性确定
- 百分数相对于容器的content box宽度
7.2 height
- 指定content box高度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对于容器的content box高度
- 容器有指定的高度时，百分数才生效
7.3 padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
7.4 border
- 指定容器边框样式、粗细和颜色
- 三种属性
- border-width
- border-style
- border-color
- 四个方向
- border-top
- border-right
- border-bottom
- border-left
7.5 margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
8.块级vs.行级
| Block Level Box | Inline Level Box |
|---|---|
| 不和其它盒子并列摆放 | 和其他行级盒子一起放在一行或拆开成多行 |
| 适用所有的盒模型属性 | 盒模型中的width、height不适用 |
| 块级元素 | 行级元素 |
| 生成块级盒子 | 生成行级盒子，内容分散在多个行盒中 |
| body、article、div、main、section、h1-6、p、ul、li等 | span、em、strong、cite、code等 |
| display：block | display：inline |
display属性
| block | 块级盒子 |
| inline | 行级盒子 |
| inline-block | 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行 |
| none | 排版时完全被忽略 |
9.常规流Normal Flow
- 根元素、浮动和绝对定位的元素会脱离常规流
- 其它元素都在常规流之内(in-flow)
- 常规流中的盒子，在某种排版上下文中参与布局
9.1行级排版上下文
- Inline Formatting Context (IFC)
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素*
<div>
This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
<img src="https://assets.codepen.io/59477/cat.png" alt="cat">
And <em>Inline Block</em>
</div>
<style>
div {
width: 10em;
//overflow-wrap: break-word;
background: #411;
}
em {
display: inline-block;
width: 3em;
background: #33c;
}
</style>
- 展示效果：
9.2块级排版上下文
- Block Formatting Context (BFC)
- 某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是 visible 的块盒
- display: flow-root;
9.3 BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC 内盒子的margin不会与外面的合并
- BFC 不会和浮动元素重叠
<span>
This is a text and
<div>block</div>
and other text.
</span>
<style>
span {
line-height: 3;
border: 2px solid red;
background: coral;
}
div {
line-height: 1.5;
background: lime;
}
</style>
- 展示效果：
9.4 Flex Box是什么？
- 一种新的排版上下文
- 它可以控制子级盒子的:
- 摆放的流向
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
<div class="container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
<style>
.container {
display: flex;
border: 2px solid #966;
}
.a, .b, .c {
text-align: center;
padding: 1em;
}
.a {
background: #fcc;
}
.b {
background: #cfc;
}
.c {
background: #ccf;
}
</style>
- 展示效果：
9.5主轴与侧轴
9.6 Flexibility
- 可以设置子项的弹性: 当容器有剩余空间时，会伸展;容器空间不够时，会收缩
- flex-grow 有剩余空间时的伸展能力
- flex-shrink 容器空间不足时收缩的能力
- flex-basis 没有伸展或收缩时的基础长度
flex
| flex: 1 | flex-grow: 1 |
| flex:100px | flex-basis:100px |
| flex: 2 1 | flex-grow: 2; flex-shrink: 1 |
| flex:1 100px | flex-grow: 1; flex-basis:100px |
| flex: 20 100px | flex-grow: 2; flex-shrink: 0; flex-basis: 100px |
| flex: auto | flex: 1 1 auto |
| flex: none | flex: 0 0 auto |
9.7 Grid布局？
display:grid
- display: grid 使元素生成一个块级的 Grid 容器
- 使用 grid-template 相关属性将容器划分为网格
- 设置每一个子项占哪些行/列
10.学习CSS的几点建议
- 充分利用 MDN 和 W3C CSS 规范
- 保持好奇心，善用览器的开发者工具
- 持续学习，CSS 新特性还在不断出现
