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

Posted c.

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了三分钟快速了解CSS Display的属性:Block,Inline,Inline-Block相关的知识,希望对你有一定的参考价值。

文章目录

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

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

Block

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

块级元素的特点:

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

示例:

<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标签等等。

行内元素的特点

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

比如我们可以把之前的例子改造为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元素字体居中了*/


以上是关于三分钟快速了解CSS Display的属性:Block,Inline,Inline-Block的主要内容,如果未能解决你的问题,请参考以下文章

常忽略的css技巧

BFC

十分钟快速弄清楚 CSS Position 定位

三分钟快速了解Spring中的工厂模式

三分钟快速了解法国波尔多产区的葡萄酒AOC/AOP等级

display的属性值测试