# 一、inline 元素、block 元素、inline-block 元素的具体解释
# inline 元素
inline
元素全称Inline Elements
。一个内联元素不会开始新的一行,并且只占有必要的宽度。
特点:
- 和其他元素都在一行上。
- 元素的高度、宽度、行高及顶部和底部边距不可设置。
- 元素的宽度就是它包含的文字或图片的宽度,不可改变。
# block 元素
block
元素全称 Block-level Elements
,一个块级元素总是开始新的一行,并且占据可获得的全部宽度(左右都会尽可能的延伸到它能延伸的最远)
特点:
- 每个块级元素都从新的一行开始,并且其后的元素也另起一行。(一个块级元素独占一行);
- 元素的高度、宽度、行高以及顶和底边距都可设置;
- 元素宽度在不设置的情况下,是它本身父容器的 100%(和父元素的宽度一致),除非设定一个宽度。
# inline-block 元素
inline-block 元素,它像内联元素,但具有宽度和高度。
特点:
- 和其他元素都在一行上;
- 元素的高度、宽度、行高以及顶和底边距都可设置
# 二、常见的 inline 元素、block 元素、inline-block 元素
- 常见的 inline 内联元素:
span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select、small、sub、sup,strong、u(下划线)、button(默认 display:inline-block))
- 常见的 block 块级元素:
div、p、h1…h6、ol、ul、dl、table、address、blockquote、form
- 常见的 inline-block 内联块元素:
img、input
# 三.inline 元素、block 元素、inline-block 元素的区别
块级元素会独占一行,而内联元素和内联块元素则会在一行内显示。
块级元素和内联块元素可以设置 width、height 属性,而内联元素设置无效。
块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。
各种居中问题 →