1. 1. display**
    1. 1.1. 举例说明——块级元素、行内元素
    2. 1.2. 总结
  2. 2. Block, inline, inline-block
    1. 2.1. block, inline, inline-block 总结
Table of Contents ▼

CSS 小白知识点-布局

过年那天写的,写了一半出去玩了,没写完,啦啦啦

display**

在去Google 块级元素行内元素有什么区别之前,先搞明白CSS中的displaydisplay是控制布局的关键,所有元素以什么样的角色展现,都是由display来控制的。

The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline.——MDN/CSS/display

我们说过,页面中的每个元素都是一个盒子,但盒子也分不同的类型,blockinline,就是大多数元素的默认类型。元素以什么样的方式展现出来,不是根据它是什么元素,而是由display属性决定。

举例说明——块级元素、行内元素

常说的块级元素行内元素实际包含两个方面:

  1. HTML的嵌套规则

    一般块级元素可以包含行内元素和其他块级元素,而行内元素内不可嵌套块级元素

  2. 用户代理默认display属性值

    W3C为元素指定了默认的display值,用户代理(浏览器)根据W3C的标准,实现默认的样式规则。

    W3C标准:

    浏览器默认样式

    注: HTML5中已经没有行内元素和块级元素的概念,详细参见Content categories,块级元素大致相当于HTML5中的Flow Elements,行内元素相当于Phrasing Elements

总结

  • 元素以什么样的盒子渲染,是通过display属性控制,而非元素类型
  • 浏览器默认样式为每个元素设置了display默认值
  • display默认值是inline(比如,某些浏览器不认识HTML5中的标签,这些元素的display属性值就很悲剧都成inline了)
  • 通过display仅仅是改变元素的显示方式,并非改变元素类型

display还有很多属性值,感兴趣的参看MDN display章节

Block, inline, inline-block

这三个属性值是布局中无论如何你都避免不了的,看看它们的区别,分别看看一个p标签display属性值为blockinlineinline-block的区别:

HTML

<body>
    <div>
      block, inline, inline-block举例:接下来是一个p标签:<p>display: block</p>,这是p标签之后的内容。
    </div>
    <div>
      block, inline, inline-block举例:接下来是一个p标签,display设置为inline:<p class="inline">display: inline;</p>,这是p标签之后的内容。
    </div>
    <div>
      block, inline, inline-block举例:接下来是一个p标签,display设置为inline-block:<p class="inline-block">display: inline-block</p>,这是p标签之后的内容。
    </div>

</body>

CSS

div{
  margin-bottom: 3em;
  border: 1px dotted #77C2D4;
}

p{
  height: 2em;
  width: 50%;
  margin-top: 1em;
  padding: 0 1em;
  border: 1px dotted #F9454E;
}
.inline{
  display: inline;
}
.inline-block{
  display: inline-block;
}

效果图

第一个p标签,默认是blockheightwidthmargin-toppadding-left均有效,单独占一行,注意它的margin-left/right和width的关系!

第二个p标签,dislplay: inlineheightwidthmargin-top都无效了

第三个p标签,display: inline-block。一切正常,而且不换行

block, inline, inline-block 总结

block

  • (默认)宽度:等于父元素content的宽度
  • (默认)高度:由子元素高度确定
  • width、height 可设置
  • 单独占一行

inline

  • 设置widthheight无效
  • marginpadding 垂直方向上设置无效
  • 只要宽度足够,从左往右(对于从左往右阅读的语言)挨个排列

inline-block

inline-block继承了inlineblock的特点,W3chools的总结简直完美:

An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.

  • 可设置widthheight
  • marginpadding垂直方向上有效
  • 不换行

The Display Declaration这篇文章有更多的display属性的演示和说明