6 CSS 元素显示模式
元素显示模式就是元素(标签)以什么方式进行显示,比如<div>
自己占一行,比如一行可以放多个<span>
。网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页
6.1 块级元素
- 显示特点:
- 独占一行(一行只能显示一个)
- 宽度默认是父元素的宽度,高度默认由内容撑开
- 可以设置宽高
- 是一个容器及盒子,里面可以放行内或者块级元素
- 代表标签:div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer.....
- 注意:
- 文字类的元素内不能使用块级元素
<p>
标签主要用于存放文字,因此<p>
里面不能放块级元素,特别是不能放<div>
- 同理,
<h1>~<h6>
等都是文字类块级标签,里面也不能放其他块级元素
6.2 行内元素
- 显示特点:
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
- 代表标签:a、span 、b、u、i、s、strong、ins、em、del......
6.3 行内块元素
- 显示特点:
- 一行可以显示多个
- 可以设置宽高
- 代表标签:
- input、textarea、button、select......
- 特殊情况:img标签有行内块元素特点,但是Chrome调试工具中显示结果是inline
6.4 元素显示模式转换
- 目的:改变元素默认的显示特点,让元素符合布局要求
- 语法:
属性 | 效果 | 使用频率 |
---|---|---|
display:block | 转换成块级元素 | 较多 |
display:inline-block | 转换成行内块元素 | 较多 |
display:inline | 转换成行内元素 | 极少 |