三分钟快速了解CSS Display的属性：Block,Inline,Inline-Block

文章目录

三分钟快速了解CSS Display的属性：Block,Inline,Inline-Block
- Block
- Inline
- Inline-block
- Block,Inline,Inline-Block的左右对齐方法

三分钟快速了解CSS Display的属性：Block,Inline,Inline-Block

元素的类型可以分为块级元素和行内元素两大类，但是还有一种比较特殊的元素：行内块级元素。

Block

块级元素就是在网页中以块的形式出现的，以块的形式出现的意思就是元素显示为矩形区域.除了<div>之外，还有 <h1>到 <h6>， <p>， <form>， <header>， <footer>， <section>， <article>都是块元素。独占一行支持宽高，不设置宽度时，宽度为父元素宽度

块级元素的特点：

在页面中以矩形区域显示。
自上而下排列，独占一行。
可以直接添加宽高
一般情况下可以作为其他元素或内容的容器

示例：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, nesciunt sapiente aliquid reprehenderit voluptas sequi enim earum iusto, itaque culpa nulla dolore, vitae unde qui quaerat? Rem magni animi dolor!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, in sapiente. Similique ea illo ipsa tenetur soluta ad commodi. Labore molestias vero atque illum dolorum! Facilis nisi sint commodi quam?</p>

p {width: 50%;background-color: yellow;
}

从上图可以看出来p标签是块元素，独自占据一行，即使宽度设置为一半，下面的p标签的元素也不会上移动到右边。

Inline

此元素会被显示为内联元素或者叫做行内元素.不支持宽高，内容撑开宽度。例如最典型的span,a,strong标签等等。

行内元素的特点

在页面显示也是矩形
一行内逐个显示（横排显示）
不可以直接添加宽高，大小由内容撑开
行内样式遵循盒子模型的规则可以设置内外边距、边框、背景，但是个别属性会出现问题。

比如我们可以把之前的例子改造为inline的。

p {display: inline;width: 50%; /*不起作用*/background-color: yellow;
}

我们再来看看一个<strong>示例：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, nesciunt <strong>sapiente </strong>aliquid reprehenderit voluptas sequi enim earum iusto, itaque culpa nulla dolore, vitae unde qui quaerat? Rem magni animi dolor!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, in sapiente. Similique ea illo ipsa tenetur soluta ad commodi. Labore molestias vero atque illum dolorum! Facilis nisi sint commodi quam?</p>

p {width: 50%;padding: 20px;margin: 30px;border: 1px solid green;background-color: yellow;
}strong {background-color: red;border: 1px solid green;width: 100px; /*无效设置*/height: 100px;/*无效设置*/margin: 10px; /*只有左右起作用*/padding: 5px; }

当然我们也可以把这个strong标签改成block元素。

strong {background-color: red;border: 1px solid green;width: 100px; /*无效设置*/height: 100px;/*无效设置*/margin: 10px; /*只有左右起作用*/padding: 5px; display: block;}

Inline-block

内联区块元素或者叫行内块元素。设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性，又保持了inline元素不换行的特性。不设置宽度时，内容撑开宽度，非独占一行，支持宽高。

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, nesciunt <strong>sapiente </strong>aliquid reprehenderit voluptas sequi enim earum iusto, itaque culpa nulla dolore, vitae unde qui quaerat? Rem magni animi dolor!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, in sapiente. Similique ea illo ipsa tenetur soluta ad commodi. Labore molestias vero atque illum dolorum! Facilis nisi sint commodi quam?<a href="#">More</a>
</p>

p {width: 50%;padding: 20px;margin: 30px;border: 1px solid green;background-color: yellow;
}strong {background-color: red;border: 1px solid green;width: 100px; /*无效设置*/height: 100px; /*无效设置*/margin: 10px; /*只有左右起作用*/padding: 5px;
}a {display: inline-block;width: 80px;height: 40px;line-height: 40px;text-align: center;background-color: black;color: white;border-radius: 4px; /*设置圆角*/text-decoration: none; /*移除超链接底线 */
}

Block,Inline,Inline-Block的左右对齐方法

<div>Block</div>
<span>Inline</span>
<br>
<strong>Inline-block</strong>

div {width: 50%;/*让block元素居中*/margin-left: auto;margin-right: auto;/*让block元素居中*/
}
strong {display: inline-block;
}
div,
span,
strong {background-color: black;color: white;text-align: center;
}body {text-align: center; /*通过设置text-align: center 可以让上面的inline和inline-block的字体相对于body来说是居中显示的，但是block设置了宽度，所以只是相对于block元素字体居中了*/
}