本文深入探讨了CSS中与尺寸和位置相关的核心概念。文章详细介绍了CSS盒模型、块级盒子和内联盒子的特性、标准盒模型和怪异盒模型的区别,以及浮动和定位的使用技巧。对于想要全面理解CSS布局原理的开发者来说,这篇文章提供了系统而深入的学习材料。
CSS 盒模型的注意点
- Padding 不能为负值，而 Margin 可以为负值
- 背景色会平铺到非 Margin 区域（Content + Padding + Border）
- Margin-top 传递到父元素的现象和解决方案
- 给父元素加边框
- BFC
- 用 padding-top 替代 margin-top
- Margin 上下叠加的解决方案
- margin-top 和 margin-bottom 上下叠加的问题和解决方案
- 只给一个元素加 margin-top 或 margin-bottom
- 用现代布局方式：flex、grid
块级盒子和内联盒子
CSS 有两种不同表现的盒子：块级盒子（Block）、内联盒子（Inline）
- 块级盒子: div, p, h1…
- 内联盒子: span, a, strong
块级盒子的特性
- 独占一行
- 支持所有样式
- 不写宽度时，会和父容器的宽度相同
- 所占区域是一个矩形
内联盒子的特性
- 盒子不会产生换行
- 有些样式不支持，如 width，height
- 不写宽度的时候，宽度由内容决定
- 所占的区域不一定是矩形
- 内联标签之间会有一些空隙
标准盒模型和怪异盒模型
标准模型
如果你给盒子设置 width 和 height，实际设置的是 content box。padding 和 border 再加上设置的宽高一起决定整个盒子的大小。 Content-Box = width, height + content
怪异盒模型
在怪异模型中，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分 Border-Box = width, height + content + padding + border
应用
- 量尺寸时不需要再去计算一些值
- 解决一些需要设置百分比和盒模型值
浮动
清除浮动的方式
- Clear 属性
- BFC
- 空标签
- .clearfix::after{}
浮动特性注意点
- 只会影响后面的元素
- 文本不会被浮动元素覆盖
- 具备内联盒子的特性：宽度由内容决定
- 具备块级盒子的特性：支持所有样式
- 浮动放不下：会自动换行
定位
Position 的值
- sticky
- static
- fixed
- relative
- absolute
绝对定位的特性
- 绝对定位的元素脱离的文档流，绝对定位的元素不占空间
- 具备内联盒子的特性：宽度由内容决定
- 具备块级盒子的特性：支持所有样式
- 绝对定位的元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对去可视区。
固定定位的特性
- 固定定位和绝对定位相似，但会固定在可视区中
- 具备内联盒子的特性：宽度由内容决定
- 具备块级盒子的特性：支持所有样式
- 固定定位不受祖先元素影响
黏性定位的特性
黏性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前是相对定位，跨越阈值后是固定定位