前端之CSS 布局

1. 显示方式：display

• 设置元素的显示方式
• display: block | inline | inline-block | none

1.1. block 块级元素

• 默认宽度为父元素宽度
• 可设置宽高
• 换行显示
• 默认元素：div、p、h1~h6、ul、form..

1.2. inline 行级元素

• 默认宽度为内容宽度
• 不可设置宽高
• 同行显示
• 默认元素：span、a、label、cite、em....

1.3. inline-block

• 默认宽度为内容宽度
• 可设置宽高
• 同行显示
• 整快换行
• 默认元素：input、textarea、select、button...

none

• 设置元素不显示

2. 定位

• position 设置定位方式
• top、right、buttom、left、z-index 设置位置

2.1. position

• 设置定位方式
• static（默认、静态的） | relative | absolute | fixed

2.1.1 relative 相对定位

• 任在文档轮流中
• 参照物为元素本身

2.1.2 absolute 绝对定位

• 默认宽度为内容宽度
• 脱离文档流
• 参照物为第一定位祖先或根元素

2.1.3 fixed 固定定位

• 默认宽度为内容宽度
• 脱离文档流
• 参照物为视窗

3. float

• 默认宽度为内容宽度
• 脱离文档流
• 向指定方向一直移动
• float的元素在同一文档流
• float元素半脱离文档流（元素脱离文档流、内容在文档流）