CSS布局
行内元素和块级元素
- 块级元素：独占一行（一行只能显示一个）；宽度默认是父元素的宽度，高度默认由内容撑开；可以设置宽高。
- 行内元素：一行可以显示多个；宽度和高度默认由内容撑开；不可以设置宽高。
- 行内块元素：一行可以显示多个；可以设置宽高。img和表单元素是特殊的行内块。
display属性
display 属性规定元素应该生成的框的类型。
| display属性类型 | 是否能并排显示 | 是否能设置宽高 | 当不设置width属性时 | 举例 |
|---|---|---|---|---|
| 块级元素 | 否 | 是 | width自动撑满 | div、section、header、h系列、li、ul等 |
| 行内元素 | 是 | 否 | width自动收缩 | a、span、em、b、u、i等 |
行内元素和块级元素的相互转换
- 使用
display:block;即可将元素转为块级元素 - 使用
display:inline;即可将元素转为行内元素，将元素转为行内元素的应用不多见 - 使用
display:inline-block;即可将元素转为行内块
浮动
浮动（float）可以让元素脱离文档流，影响周围元素的布局。
弹性盒子
Flexbox 是CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，可以快速实现元素的对齐、分布和空间分配。
定位
CSS 定位布局（position）是控制元素在页面中位置的核心技术之一。通过定位，可以实现元素脱离文档流、 层叠、固定在特定位置布局效果（定位跟位置有关）
Last updated on