返回
CSS 深入浅出：盒子模型、选择器权重与布局技巧
前端
2024-02-23 00:01:14
一探 CSS 盒子模型及相关属性
盒子模型
网页元素在 CSS 中被视为盒子，该盒子由以下部分组成：
- 内容区域： 包含元素实际内容的区域。
- 内边距： 内容区域周围的间距。
- 边框： 围绕内边距的线。
- 外边距： 围绕边框的间距。
box-sizing 属性
box-sizing 属性决定了元素的总宽度和总高度如何计算。它的值可以是：
- content-box： 默认值。元素的总宽度和总高度由内容区域、内边距和边框组成，但外边距不包括在内。
- border-box： 元素的总宽度和总高度由内容区域、内边距、边框和外边距组成。
通常，为了获得更可预测的布局，建议使用 border-box 值。
选择器的权重
CSS 选择器按权重排序，较高的权重会覆盖较低的权重。权重根据以下规则计算：
- 内联样式： 1000
- ID 选择器： 100
- 类选择器、伪类选择器： 10
- 标签选择器、属性选择器： 1
例如，一个 ID 选择器（权重为 100）可以覆盖一个类选择器（权重为 10）。
清除浮动
浮动元素会脱离文档流，导致后续元素在浮动元素下方而不是右侧。要清除浮动，可以使用以下方法：
- clear：both； 添加到父元素，清除所有浮动元素。
- overflow：hidden； 添加到父元素，迫使浮动元素退回文档流中。
盒子水平垂直居中
水平居中
- text-align：center； 将文本居中。
- margin：0 auto； 给元素添加左右外边距，使其在父元素中水平居中。
垂直居中
- vertical-align：middle； 对于行内元素，将其垂直居中。
- display：flex； 设置元素为 flexbox，垂直居中内容。
- transform：translateY(-50%)； 将元素向上移动 50% 高度。
参考资料
