HTML、CSS笔记

2024年3月2日 157次阅读来源: RThong

盒模型

在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边与内容边。

在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

外边距合并

块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，这种行为称为外边距塌陷(margin collapsing)，有的地方翻译为外边距合并。

相邻的兄弟元素：相邻的两个兄弟元素之间的外边距会塌陷。
块级父元素与其第一个/最后一个子元素：如果块级父元素中，上边框宽度及上内边距距离为0时，此时这个块级父元素和其第一个子元素就会发生上外边距合并现象。
空块元素：如果存在一个空的块级元素，其 border、padding、inline content、height、min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。

BFC

它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系
创建BFC的方式如下：

根元素或其它包含它的元素（html标签）
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素的 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
overflow 值不为 visible 的块元素
弹性项 (display: flex 或 inline-flex元素的子元素)
网格项 (display: grid 或 inline-grid 元素的子元素)

BFC作用

水平居中

子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。

子元素为

行内元素：对父元素设置text-align:center;
定宽块状元素: 设置左右margin值为auto;
不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;
通用方案: flex布局，对父元素设置display:flex;justify-content:center;

垂直居中

垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。
父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height
父元素一定，子元素为多行内联文本：设置父元素的display:table-cell，再设置vertical-align:middle;
块状元素:设置子元素position:absolute 并设置top、bottom为0，父元素要设置定位为static以外的值，margin:auto;
通用方案: flex布局，给父元素设置{display:flex; align-items:center;}。