这是一个很经典的CSS布局问题，新人彻底了解了这个问题，HTML网页布局思维便已把握了七七八八了。

问题

先看一段HTML代码：

<!DOCTYPE html><html><body><h1>这是一个题目</h1>  <div class="wrapper">    <p>这是一个段落</p>    <p>这是一个段落</p>    <p>这是一个段落</p>  </div></body></html>

因为p标签默认是块级元素，宽度默认会占满父容器的100%，所以这个代码默认展示进去的款式是这样的：

问题与这个示例无关，是这样的：如何将三行文本“这是一个段落”合并到一行，从左向右排行显示，且不必移除<p>标签？

最简略的解决方案只须要加一行CSS款式代码：

.wrapper p {  display: inline;}

运行成果如下所示：

为什么简略加一个inline款式就能够解决问题？

晚期网页为了从向至下流式展现内容，依据须要将标签元素默认分为了两类：

  • 块级元素
  • 行内元素

块级元素默认占据父容器的100%宽度，同时能够有高度，在不指定高度的时候，高度由子元素沉积决定。例如div、p、h1~h6等标签，但凡默认在网页中占据全副页面宽度的元素，都是块级元素。

而行内元素用于在一行内从左向右展现小内容，行内元素默认只有宽度，没有高度，并且它们的宽度也是由它们自身的内容所决定的。例如a、br、b、em、img、sub、sup、strong等标签，但凡默认不占据100%父容器宽度的元素，都能够视为行内元素。如果想给行内元素指定高度，能够在父容器上给行元素设置line-height款式。

这两类元素的作用，就是合起来展现一个从上至下顺次展现、每行从左至右顺次排列的流布局，如下所示。

回头看咱们的示例，p标签默认是块级标签，它在渲染时要占满页面容器的100%宽度，所以默认成果三行文本“这是一个段落”是从上向下顺次排列的。

当咱们通过类选择器+标签选择器（.wrapper p），批改了所有p标签的display款式后，行将display款式设置为inline，这时候这个页面内的所有p标签曾经不是块级元素了，都变成了行内元素。

HTML元素是什么块级元素，还是行内元素，实质上是由它们携带的默认的CSS款式决定的，也就是由display等于block或inline决定的，等于block就是块级元素，等于inline就是行内元素。因为CSS能够管制所有HTML元素的款式，事实上咱们甚至能够将任何一个HTML元素批改为其余元素————当然如果真批改的话，这里还波及元素属性的问题，在这里咱们只谈款式。HTML元素默认携带的款式是由其名称决定的，所有元素的默认款式都是能够通过CSS代码批改的。

当给p标签设置了display款式为inline当前，这时候p标签的行为与span标签相似了，于是三行文本“这是一个段落”便是从左向右，在一行内展现了，如果一行展现不了，内容还会主动换行，就像其余行内元素所示意进去的行为那样。

由inline-block决定的行内块级元素

随着网页布局复杂度的晋升，起初又呈现了inline-block款式值，咱们能够批改示例，看一看将display批改为inline-block之后的成果，如下所示。

成果与批改为inline是类似的，在这个示例中看不出什么差异。事实上inline-blcok代表行内的块级元素，这样的元素既能够在一行之内从左向右主动顺次排列，能够领有本人的高度，又能够作为一个部分的小容器，再包容其余子元素。

inline-blcok款式的呈现，代表CSS在网页布局方面曾经没有什么能力短板了，只有网页设计师想不到的，没有CSS实现的布局。

flex布局

但CSS的网页布局能力倒退到这里并没有进行，起初为了更好了解决父容器与子元素的组合款式，flex布局被创造进去了。flex布局可能实现的成果，用以往的CSS也能够实现，但用flex布局的办法实现，代码会更简洁、逻辑会更加清晰、页面的扩展性也更好。

上面作者依然拿下面的示例革新，如果不设置display为inline或inline-block，应用flex布局怎么达到同样的成果呢？也是只增加一行CSS代码就足够了，如下所示。

<!DOCTYPE html><html><body>  <style>  .wrapper {    display: flex;  }</style>  <h1>这是一个题目</h1>  <div class="wrapper">    <p>这是一个段落</p>    <p>这是一个段落</p>    <p>这是一个段落</p>  </div></body></html>

运行成果如下所示：

成果是一样的。

将display设置为flex就代表了启用flex布局。因为默认状况下flex-direction等于row，子元素会像行内元素那样从左向右排行，所以只写一行display等于flex款式代码就能够了。

flex布局能力很弱小，它不仅能够解决从左向右的横向布局，还能够解决从上向下的纵向布局，两个方向的布局应用的是同一套款式语义。

很多人都感觉这套语义记了又忘，切实很难记住，即便是富有经验的网页设计师在许久不手写CSS代码之后，也须要借助工具才能够将款式代码写对。针对开发者的这个痛点，新版本的Chrome浏览器当初提供了这样的一个flex布局辅助设计性能，如下所示，当咱们给元素增加了display等于flex的款式代码后，前面会呈现一个性能按钮，点击它，会开展一个flex布局互动小面板。点击这个面板上具体的排列项，相应的款式代码即会主动生成。

当前不必再记那些难记的款式名称了，有须要的时候调出这个flex布局互动小面板，入手你发财的小手点一点，所有布局代码都能搞定了。

小结

HTML开发次要有两种布局思维：传统div流式布局和flex布局。

还有一种全页面都应用绝对值定位的布局思维，这种布局思维只实用于Web治理后盾或工具Web我的项目等开发场景，对于面向C端用户的场景是不实用的。HTML网页的基本设计哲学是流式布局————整体上从上向下、行内从左向右的流式布局，这种布局能够让HTML内容能够一边加载一边渲染与展现，这是一种很好的设计哲学，不要轻易舍弃这种哲学。

flex布局实质上继承了流式布局的思维，它与流式布局并不抵触，只是丰盛了CSS在父容器子元素组合关系布局上的能力。在网页设计中，当初广泛优先应用flex布局，用最简略的CSS代码达到设计的需要。在具体设计时，配合应用Chrome开发者工具中的flex布局小面板，写起flex布局代码也很容易。

著作权归LIYI所有
基于CC BY-SA 4.0协定
原文链接：https://yishulun.com/posts/20...