【Css 基础】-- 块元素和行内元素、行内块元素

1、块元素

display:block

常见的块元素有哪些：

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素

特点：

• 自己独占一行
• 高度，宽度、外边距以及内边距都可以控制。
• 宽度默认是容器（父级宽度）的 100%
• 是一个容器及盒子，里面可以放行内或者块级元素

2、行内元素

display:inline

常见的行内元素有哪些：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> 等，其中 <span> 标签最典型的行内元素，也称内联元素

特点：

• 相邻行内元素在一行上，一行可以显示多个
• 高、宽直接设置是无效的
• 只可以设置水平方向的外边距
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或则其他行内元素

3、行内块元素

display:inline-block

特点：

• 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙，一行可以显示多个。
• 默认宽度就是它本身内容的宽度。
• 高度，行高、外边距以及内边距都可以控制。