CSS 盒子模型
看透网页布局的本质

网页布局过程:
- 先准备好相关的网页元素,网页元素基本都是盒子 Box。
- 利用 CSS 设置好盒子样式,然后摆放到相应位置。(最核心)
- 往盒子里面装内容。
网页布局核心:利用 CSS 摆盒子。
📄️ 盒模型 Box Model
- 盒模型 | MDN (mozilla.org)
🗃️ 内容区域 content area
6 items
🗃️ 内边距区域 Padding area
2 items
🗃️ 边框区域 Border area
4 items
📄️ 边框圆角 border-radius
- border-radius | MDN (mozilla.org)
🗃️ 外边距区域 Margin area
5 items
🗃️ 外轮廓 outline
5 items
📄️ 盒子阴影 box-shadow
- box-shadow | MDN (mozilla.org)
📄️ 文字阴影 text-shadow
- text-shadow | MDN (mozilla.org)
📄️ 设置盒子模型 box-sizing
- box-sizing | MDN (mozilla.org)
📄️ 元素的水平居中
在一些需求中,需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block)
📄️ 可替换元素
可替换元素 | MDN (mozilla.org)
📄️ 行内非替换元素
- 以下属性对行内级非替换元素不起作用
📄️ 作业练习
小米商城商品卡片