1. 元素显示模式
1.1. 块级元素
- 属性\:display\:block
-
显示特点:
- 1. 独占一行
- 2. 宽度是父元素的宽度,高度默认由内容撑开
- 3. 可以设置宽高
-
代表标签:
- div p 标题 ul li form footer nav header
1.2. 行内元素
- 属性: display\:inline
-
显示特点:
- 1.一行可以显示多个
- 2.宽度和高度默认由内容撑开
- 3.不可以设置宽高
-
代表标签:
- a span i
1.3. 行内块元素
- 属性: display\:inline-block
-
显示特点:
- 1.一行可以显示多个
- 2.可以设置宽高
-
代表标签
- input textarea button select
-
特殊情况
- img标签有行内块元素的特点,但是调试工具显示为inline
1.4. 元素显示模式转换
- 目的:改变元素默认的现实特点,让元素符合布局要求
- 语法
属性 | 效果 | 使用频率 |
---|---|---|
display\:block | 转换为块级元素 | |
display\:inline-block | 转化为行内块元素 | |
display\:inline |
1.5. 嵌套规范注意点
- 块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等,但是
p标签中不要嵌套div,p,h等块级元素
- a标签内部可以嵌套任意元素
Comments NOTHING