【前端自学之路】CSS之行内元素、行内块元素和块元素

HTML元素都被CSS赋予了一定的结构属性,我们称之为 display,常见的有三种类型:

1
2
3
4
5
6
7
display: inline;       // 行内元素
display: inline-block; // 行内块元素

<!-- more -->

display: block; // 块元素
display: none; // 隐藏不可见

我们来解释下这三种有什么区别?分别代表什么意义?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 行内元素
1、默认元素宽度和元素内容宽度保持一致
2、默认可以和其他行内元素同处一行
3、不能设置宽度(width)、高度(height)、上下外边距(margin-top;margin-bottom)

// 块元素
1、默认元素宽度和父元素保持一致,即占一整行 100%
2、默认从新的一行开始,并且独占一行,所以其他元素只能从新一行开始布局
3、可以设置盒子模型的所有属性,包括宽度、高度、外边距

// 行内块元素
行内块元素具有行内元素和块元素的共同特点
1、默认元素宽度和元素内容宽度保持一致
2、默认可以和其他行内元素同处一行
3、可以设置盒子模型的所有属性,包括宽度、高度、外边距

常见的行内元素有哪些:

1
2
3
4
<span></span>
<a></a>
<img />
<input type="" />

常见的块元素有哪些:

1
2
3
4
5
6
7
8
9
10
<body></body>
<div></div>
<ul></ul>
<ol></ol>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

其实这些结构属性是可以相互转换的,只要通过设置 display 为相应的值就可以

坚持原创技术分享,谢谢鼓励我继续创作!