深入理解CSS

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

1.重点内容

这是继前一节了解CSS后的另一节关于CSS的课程。这次课主要讲述了前端的常用属性和属性值，CSS的取值机制和目前主流的布局方式。

2.重要的知识点

CSS选择器的特异度问题
CSS的继承和初始值
CSS的取值流程
布局
盒子模型相关属性
盒子模型
行级排版上下文(IFC)
块级排版上下文(BFC)
FlexBox布局
Grid布局
Position属性

3.详尽的知识点

CSS选择器的特异度问题

CSS选择器选中的元素越特殊，其选择器的特异度就越高，在渲染页面时优先级是最高的。

特异度的比较

统计选择器id，(伪)类，标签的个数

eg:

选择器	id(#)	(伪)类(.)	标签(tag-name)	优先级
#nav .list li a:link	1	2	2	122
.hd ul.links a	0	2	2	022

可以简单的将总数乘上权重后加起来，最后的优先级就可以简单比较出来。

CSS的继承和初始值

有些属性会自动继承其父元素的计算值，若进行了显式指定，则按指定后的属性渲染。

通过设置属性值为inherit来显式继承其父元素对应的属性。

未设置的属性值默认为初始值。

通过initial来重置成初始值。

CSS的取值流程

筛选后得到声明值
层叠后得到层叠值
层叠值为空时，使用继承或初始值，得到指定值
转化后得到计算值
进一步转换后得到使用值
最后的小数转换得到实际值

布局

常规流
- 行级
- 块级
- 表格布局
- FlexBox
- Grid布局
浮动
绝对定位

盒子模型相关属性

content-box模型 | border-box模型

属性名	可取值
width	长度，百分数，auto
height	长度，百分数，auto
padding	长度，百分数，auto
border	长度
margin	长度，百分数，auto

盒子模型

Block Level Box	Inline Level Box
不会出现并列情况	和其他盒子放一行或多行
全部适用	width，height不适用
块级元素	行级元素
生成块级盒子	生成行级盒子，分散在多个行盒子中
body,article,dic,main,section,h1-6,p,ul,li...	span,em,strong,cite,code...
display:block	display:inline

行级排版上下文(IFC)

当只包含行级盒子时，容器会创建一个IFC

IFC的排版规则

盒子在一行内水平摆放
一行不够时换行
text-align决定水平是否对齐
vertical-align决定是否垂直对齐
会避开浮动元素

块级排版上下文(BFC)

当满足以下条件时，会创建一个BFC

根元素
浮动，绝对定位，inline-block
Flex子项，Grid子项
overflow不为visible的块级盒子
display设置为flow-root

BFC的排版规则

盒子从上到下摆放
垂直margin合并
BFC内部盒子的margin不会合并
会避开浮动元素

FlexBox布局

相关属性

justify-content:设置主轴的排列方式

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

align-items:设置侧轴的排列方式

align-items: flex-start | flex-end | center | stretch | baseline

flexibility:设置子项的弹性

flex: flex-grow | flex-shrink | flex-basis

其中flex属性可以缩写成一行:

flex: flex-grow flex-shrink flex-basis

Grid布局

相关属性

grid-template-columns:划分实例的宽度

grid-template-rows:划分实例的高度

grid-area:划分实例的区域大小

grid-area: row-start/column-start/row-end/column-end

Position属性

名称	说明
static	默认值，非定位元素
relative	相对于自身原位置的便宜，不脱离文档流，其他元素不受影响
absolute	绝对定位，脱离文档流，相对于非static的祖先元素定位，不会对其他元素造成影响
fixed	相对于窗口绝对定位，脱离文档流

4.课后总结

CSS作为给网页添加样式以及动画的一门语言，在前端开发中不应该被轻视。其中Flex布局和Grid布局作为目前主流的前端布局样式，应该做到多写，多想，多学习，才能不断进步前进。

和其他编程语言一样，CSS同样也需要长时间的练习和锻炼才能做到心中有画面，之后能通过正确快速的排版构建起美观大方的页面。

深入理解CSS | 青训营笔记