（三）CSS-HTML 知识点梳理

知识点梳理

• 选择器的权重和优先级
• 盒模型
• 盒子大小计算
• margin 的重叠计算
• 浮动 float
• 浮动布局概念
• 清理浮动
• 定位 position
• 文档流概念
• 定位分类
• fixed 定位特点
• 绝对定位计算方式
• flex 布局
• 如何实现居中对齐？
• 理解语义化
• CSS3 动画
• 重绘和回流

选择器的权重和优先级

权重分为四级，分别是：

1. 代表内联样式，如 style=”xxx” ，权值为 1000；
2. 代表 ID 选择器，如 #content ，权值为 100；
3. 代表类、伪类和属性选择器，如 .content 、 :hover 、 [attribute] ，权值为 10；
4. 代表元素选择器和伪元素选择器，如 div 、 p ，权值为 1。

需要注意的是：通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以
他们的权值都为 0。 权重值大的选择器其优先级也高，相同权重的优先级又遵循后定义覆盖前面定义的
情况。
复制代码

盒模型

在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。而整个盒子的宽度是：
（内容宽度 + border 宽度 + padding 宽度 + margin 宽度）之和。这样我们改四个中的其中一个，都
会导致盒子宽度的改变，box-sizing:border-box可以解决这个问题

div 是 display:block ，宽度会充满整个父容器
这个div 是个盒子模型，我们手动增大 margin 、 border 或 padding 其中一项的宽度
值，都会导致内容宽度的减少；
为盒子指定样式： box-sizing:border-box可以解决这个问题，
这时候的width是内容 + padding + 边框的宽度（不包括 margin ）
复制代码

纵向 margin 重叠

margin 的这一特性——纵向重叠

两者不一样大的话，大的会把小的“吃掉

浮动float

float 被设计出来的初衷是用于文字环绕效果，即一个图片一段文字，图片 float:left 之后，文字会环
绕图片。但是，后来大家发现结合 float + div 可以实现之前通过 table 实现的网页布局，因此就被“误用”于网
页布局了

破坏性-导致父盒子塌陷

float 的破坏性 —— float 破坏了父标签的原本结构，使得父标签出现了坍塌现象。导致这一现象的最根
本原因在于：被设置了 float 的元素会脱离文档流

包裹性

为 div 设置了 float 之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。变得紧凑了，宽度发生了变化，把内容中的三个字包裹了——这就是包裹性

div 虽然体现了包裹性，但是它的 display 样式是没有变化的，还是 display: block 。

清空格

<div style="border: 2px solid blue; padding:3px;">
    <img src="https://juejin.cn/post/image/1.png"/>
    <img src="https://juejin.cn/post/image/2.png"/>
    <img src="https://juejin.cn/post/image/3.png"/>
    <img src="https://juejin.cn/post/image/4.png"/>
</div>

为 img 增加了 float:left 的样式，这就使得 img 之间没有了
空格，4 个 img 紧紧挨着。
“清空格”这一特性的根本原因是 float 会导致节点脱离文档流结构。它都不属于文档流结构了，那么它
身边的什么换行、空格就都和它没了关系，它就尽量往一边靠拢，能靠多近就靠多近，这就是清空格的
本质。


复制代码

clearfix

.clearfix:after {
content: '';
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* 兼容 IE 低版本 */
}

复制代码

定位position

position 用于网页元素的定位，可设置 static/relative/absolute/fixed 这些值，其中 static 是默认值，

relative

会导致自身位置的相对变化，而不会影响其他元素的位置、大小。
relative 元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。

复制代码

absolute

1.absolute 元素脱离了文档结构。和 relative 不同，其他三个元素的位置重新排列了。只要元素会
脱离文档结构，它就会产生破坏性，导致父元素坍塌。（此时你应该能立刻想起来，float 元素也
会脱离文档结构。）
<p>第一段文字</p>
<p>第二段文字</p>
<p style="background: yellow">第三段文字</p>
<p>第四段文字</p>
2.absolute 元素具有“包裹性”。之前 <p> 的宽度是撑满整个屏幕的，而此时 <p> 的宽度刚好是内容
的宽度。
3.absolute 元素具有“跟随性”。虽然 absolute 元素脱离了文档结构，但是它的位置并没有发生变
化，还是老老实实地呆在它原本的位置，因为我们此时没有设置 top、left 的值。
4.absolute 元素会悬浮在页面上方，会遮挡住下方的页面内容。
5.absolute 的定位：会递归查找该元素的所有父元素，如果找到一个设置了
position:relative/absolute/fixed 的元素，就以该元素为基准定位，如果没找到，就以浏览器边
界定位。
复制代码

fixed

其实 fixed 和 absolute 是一样的，唯一的区别在于：absolute 元素是根据最近的定位上下文确定位
置，而 fixed 根据 window （或者 iframe）确定位置。
fixed 元素的定位是相对于 window （或者 iframe）边界的，和其他元素没有关系。但是它具有破坏
性，会导致其他元素位置的变化。
复制代码

flex布局

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴

主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做
cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main
size，占据的交叉轴空间叫做 cross size。

复制代码

1. flex-direction 可决定主轴的方向，有四个可选值：

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

2. justify-content 属性定义了项目在主轴上的对齐方式，值如下：

• flex-start（默认值）：向主轴开始方向对齐。
• flex-end：向主轴结束方向对齐。
• center： 居中。
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

3. align-items 属性定义项目在交叉轴上如何对齐，值如下：

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度

水平居中

inline 元素用 text-align: center;

block 元素可使用 margin: auto;

绝对定位元素可结合 left 和 margin 实现，但是必须知道宽度。

垂直居中

inline 元素可设置 line-height 的值等于 height 值

绝对定位元素，可结合 left 和 margin 实现，但是必须知道尺寸。
优点：兼容性好
缺点：需要提前知道尺寸

绝对定位可结合 transform 实现居中。
优点：不需要提前知道尺寸
缺点：兼容性不好


绝对定位结合 margin: auto ，不需要提前知道尺寸，兼容性好。
复制代码

理解语义化

所谓“语义”就是为了更易读懂，这要分两部分：

1. 让人（写程序、读程序）更易读懂
2. 让机器（浏览器、搜索引擎）更易读懂

拿搜索引擎来说，爬虫下载到我们网页的 HTML 代码，它如何更好地去理解网页的内容呢？—— 就是
根据 HTML 既定的标签。 h1 标签就代表是标题； p 里面的就是段落详细内容，权重肯定没有标题高；
ul 里面就是列表； strong 就是加粗的强调的内容 …… 如果我们不按照 HTML 语义化来写，全部都用
<div> 标签，那搜索引擎将很难理解我们网页的内容。


复制代码

CSS3 动画

重绘和回流

• 重绘：指的是当页面中的元素不脱离文档流，而简单地进行样式的变化，比如修改颜色、背景等，浏览器重新绘制样式
• 回流：指的是处于文档流中 DOM 的尺寸大小、位置或者某些属性发生变化时，导致浏览器重新渲染部分或全部文档的情况

回流要比重绘消耗性能开支更大
一些属性的读取也会引起回流，比如读取某个
DOM 的高度和宽度，或者使用 getComputedStyle 方法。在写代码的时候要避免回流和重绘。
复制代码