display block是什么意思?怎么用?常见的块级元素、行内元素、行内块元素
https://www.php.cn/css-tutorial-412196.html
https://blog.csdn.net/weixin_46536890/article/details/114876226
设置display:block就是将元素显示为块级元素。
一、块级元素 block
1. 特点:
自动换行
独占一行
可设置宽高
默认宽度为父元素的宽度
2.常见块级元素
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre,HTML5新增的header、section、aside、footer等
3.注意
- 块级元素可以嵌套任意元素
- 块级文字元素中不能放入其他块级元素,比如: p中不要嵌套div、p、h
对于所有的块级元素来说都是不需要用display:block来定义的,因为块级元素的默认属性就是block;所以display:block比较常用于像是<a>和<span>等不是块级元素的元素中。
对span设置宽高是没有用的,而且内容都处于同一行,用display:block定义,就可以明显看出设置是有用的。
![](https://img2023.cnblogs.com/blog/1892002/202302/1892002-20230202113536498-270335456.png)
二、行内元素 inline
1.特点
无法自动换行
一行可放多个
不可设置宽高
默认宽度是本身内容宽度
行内元素的paddding可以设置
margin只能够设置水平方向的边距,即:margin-left和margin-right,设置margin-top和margin-bottom无效
2.常见行内元素
span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select、small、sub、sup,strong、u(下划线)、button(默认display:inline-block)
3.注意
行内元素尽量只放行内元素与行内块元素,链接里边不能再放链接,特殊情况a可以嵌套任意元素。
三、行内块元素 inline-block
1.特点
综合块级元素与行内元素的特性,可设宽高(默认是内容宽高),也可以设置内外边距
2.常见行内块元素
img 、input 、td
四、标签之间的转换
display:inline(转为行内元素)/inline-block(转为行内块元素)/block(转为块元素)/none(隐藏 不显示)
注意:当元素浮动(float)时会转化成行内块元素特点。