居中方式

水平居中

• 内联元素水平居中

/*利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。*/
.center {
    text-align: center;
}

• 块级元素水平居中

/*通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。*/
.center-block {
    margin: 0 auto;
}

• 利用display: flex

/*利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式，本例中设置子元素水平居中显示。*/
.flex-center {
    display: flex;
    justify-content: center;
}

垂直居中

• 通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。

#v-box {
    height: 120px;
    line-height: 120px;
}

• table

.center-table {
    display: table;
}

.v-cell {
    display: table-cell;
    vertical-align: middle;
}

水平垂直居中

• grid

.parent {
    height: 140px;
    display: grid;
}

.child {
    margin: auto;
}

• flex

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

• 绝对定位

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

src 与 href 的区别

src ⽤于替换当前元素，href⽤于在当前⽂档和引⽤资源之间确⽴联系。

src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在
请求 src 资源时会将其指向的资源下载并应⽤到⽂档内，例如 js 脚本，img 图⽚和 frame 等元素

<script src ="js.js"></script> 当浏览器解析到该元素时，会暂停其他资源的下载和处理，

直到将该资源加载、编译、执⾏完毕，图⽚和框架等元素也如此，类似于将所指向资源嵌⼊当前标
签内。这也是为什么将js脚本放在底
部⽽不是头部

href 是 Hypertext Reference 的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂
档（链接）之间的链接，如果我们在⽂档中添加

<link href="common.css" rel="stylesheet"/> 那么浏览器会识别该⽂档为 css ⽂件，就会
并⾏下载资源并且不会停⽌对当前⽂档的处理。这也是为什么建议使⽤ link ⽅式来加载 css ，⽽不
是使⽤ @import ⽅式

link 标签也使用不了 src 属性

BFC是什么？

BFC（会计格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒 子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题。 BFC是值浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布 局，这个渲染区域只对块级元素起作用

flex 1 auto

属性	等价写法	计算方式
flex: 1	flex: 1 1 0	​​按比例分配所有空间​​（包括内容空间和剩余空间），基准尺寸为 0
flex: auto	flex: 1 1 auto	​​先按内容分配空间，再分配剩余空间​​，基准尺寸为内容尺寸（auto）

关键总结 • ​​flex: 1​​：强制从 0开始分配，适合严格比例布局。

• ​​flex: auto​​：尊重内容初始尺寸，适合动态平衡内容与剩余空间。

选择依据：是否需要忽略内容尺寸来强制等分？是 → flex: 1；否 → flex: auto。