LearnWeb10-CSS04-盒子模型
[!summary]+
HTML 和 CSS 中,所有的元素都是基于一个个的 Box 去渲染的,理解盒子模型的设计,才能知道如何进行布局,从而使的页面按照希望的样子呈现,该定义实际上和 HTML 的块级元素和内联元素使完全相对应的。需要注意两者之间的关联性。
块级盒子(Block Box)和内联盒子(Inline Box)
块级盒子和 HTML 中的块级元素使相互对应的,例如 h
和 p
有以下的特点:
- 与其他元素之间会换行
- 因为换行,在内联的方向上(也就是行)会占据所有可用空间,即绝大多数情况下和父容器一样宽。
- width 和 height 属性均可发挥总用
- 内边距(padding), 外边距(margin)和边框(border)会将其他元素从当前盒子周围“推开”
内联盒子和 HTML 中的内联元素相互对应,例如 span
, em
, strong
等,有以下的特点:
- 不会换行
- width 和 height 属性不起作用
- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于
inline
状态的盒子推开。 - 水平方向的内边距、外边距以及边框会被应用且会把其他处于
inline
状态的盒子推开。
如果希望切换元素的内联或者块级属性,可以通过对盒子的 display 属性设置进行切换,对应的属性值为 inline
和 block
,而更有趣的,如果我们希望不换行,但是内联中的 width
和 height
属性起到作用,可以使用 inline-box
属性。
Inline-box 属性在导航栏/链接元素中很常见,我们通过增大内容区域来使得链接存在更大的命中区域,同时不影响别的元素的呈现。
在这里还会看到片一个十分常见的盒子属性 flex
其通常会将外部的显示类型转换为 block,但是内部的显示类型设置为 flex,对其内部的各个子元素,都将转换为 flex 元素,并基于 flex 即弹性盒子的规则进行布局,可以生成更灵活的界面,这个后面在排版部分针对性的了解,这里简单介绍如下:
- flex 会将内部的元素默认沿着行的方向均分切成几个 box,但是具体的切分可以根据后续的属性进行定义。
- 如果希望 flex 的外部为内联的,则使用 inline-flex 属性。