特异度

特异度：选择器的特殊程度

越特殊，优先级越高

计算特异度：先分类，分别计算id，类（或伪类），标签个数

覆盖在开发中的用处：可以设计基础样式，用到特殊样式时可以给该元素一个额外的class，通过样式覆盖，把样式覆盖掉。

覆盖一个css样式的方法：

• 使用!important标记来强制指定一个样式。例如： p{color:blue !important;}
• 使用父元素选择器。如果将一个样式绑定到父元素上，就可以覆盖子元素的样式。例如： div p{color:red;}
• 使用特殊选择器。例如使用id选择器： #myid{color:green;}

继承

继承：某些属性会自动继承其父元素的计算值，除非显式指定一个值。

和文字相关的属性一般可以继承，比如color

和盒模型相关的不可继承，比如width

想要不可继承的属性变成可继承的：显式继承（使用inherit关键字）

初始值

• 从父级一层一层往上找无法找到某一属性的值时，使用初始值
• 不可继承的属性未被设置时

css中，每个属性都有一个初始值

可以使用initial关键字显式重置为初始值

CSS求值过程

1.进行筛选，得到一组能够匹配到的css规则（声明值）

2.选择出优先级最高的一个属性值，得到层叠值

3.层叠值为空时，使用继承或初始值，得到指定值

4.将一些相对值或关键字转换成绝对值，得到计算值

5.进一步转换，得到使用值

6.将小数像素值转为整数等

布局

布局：

• 确定内容的大小和位置的算法
• 依据元素、容器、兄弟节点和内容等信息来计算

布局方式：常规流、浮动、绝对定位

常规流：行级，块级，表格布局，FlexBox，Grid布局

盒模型：

width:指定content box宽度

height:指定content box高度

padding：指定元素四个方向的内边距

border：指定容器边框样式、粗细、颜色；三种属性：border-width,border-style,border-color；四个方向：border-top,border-bottom,border-right,border-left

margin：指定元素四个方向的外边距。可以使用margin:auto来实现水平居中。

margin collapse:在css中，两个或多个相邻的普通流中的盒子在垂直方向上的外边距会发生叠加

overflow：高宽限定时，可以控制溢出的内容。默认为visible;hidden将溢出内容截掉;scroll内容滚动;auto超出就滚动

块级vs行级

块级：不和其他盒子并列摆放

行级：和其他行级盒子一起放在一行或拆开成多行

块级元素：生成块级盒子，有body,article,div,main等

行级元素：生成行级盒子，有span,em,strong等

display属性

block：块级盒子

inline：行级盒子

inline-block：本身是行级，可以设置高宽，作为一个整体不会被拆分成多行

none：排版时完全忽略

常规流

行级排版上下文

只包含行级盒子的容器会创建一个IFC(Inline Formatting Context)

排版规则：

• 盒子在一行内水平摆放
• 一行放不下，换行显示
• text-align决定水平对齐
• vertical-align决定垂直对齐
• 避开浮动元素

块级排版上下文

排版规则：

• 盒子从上到下摆放
• 垂直margin合并
• BFC(Block Formatting Context)盒子内的margin不会和外面的合并
• BFC不会与浮动元素重叠

Flex

控制子级盒子的摆放流向、摆放顺序、盒子高宽、水平垂直方向的对齐、是否允许拆行

单一方向

Grid

划分格子(使用grid-template)，摆放元素(通过网格线指定位置,grid-area)

Float浮动

用来控制图片，以达到其他元素（特别是文字）实现环绕图片的效果

position

static

relative：在常规流中。相对定位

absolute：脱离了常规流，相对于最近的非static祖先定位。绝对定位

fixed：脱离了常规流，相对于窗口定位。绝对定位

个人总结

CSS是一种用于网页样式设计的语言，通过学习CSS，我深刻理解了样式的重要性。在学习过程中，我学习到了CSS的基础知识，盒模型的相关属性，常规流、float浮动和绝对定位三种布局方式等。使用CSS会将网页的内容从其呈现方式中分离，可以使用相同的HTML代码，但应用不同的CSS样式表来创建多种不同的外观方案，还可以在样式表中定义字体、大小、颜色等文本属性，使文本块更清晰、易于读取，使用CSS还可以一次定义所有相关的样式，且能够在样式表中随时进行修改和更新等等。CSS是Web设计和开发中不可或缺的一部分。后续需要进行css页面布局的实践，通过实践深入了解其中的一些知识和方法。