<h2>CSS布局</h2>    <p>布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的盒模型布局和比较新的flex布局实现），希望能给需要的小伙伴带来一些帮助。</p>    <h3>目录</h3>    <ol>     <li> <p>常用居中方法</p>      <ul>       <li> <p>水平居中</p> </li>       <li> <p>垂直居中</p> </li>      </ul> </li>     <li> <p>单列布局</p> </li>     <li> <p>二列&三列布局</p>      <ul>       <li> <p>float+margin</p> </li>       <li> <p>position+margin</p> </li>       <li> <p>圣杯布局（float+负margin）</p> </li>       <li> <p>双飞翼布局（float+负margin）</p> </li>       <li> <p>flex布局</p> </li>      </ul> </li>     <li> <p>总结</p> </li>    </ol>    <h3>1.常用居中方法</h3>    <p>居中在布局中很常见，我们假设DOM文档结构如下，子元素要在父元素中居中：</p>    <pre>  <code class="language-css"><div class="parent">      <div class="child"></div>  </div></code></pre>    <p>水平居中</p>    <p>子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。下面进行分析：</p>    <p><strong>行内元素</strong> ：对父元素设置 text-align:center;</p>    <p>定宽块状元素: 设置左右 margin 值为 auto ;</p>    <p>不定宽块状元素: 设置子元素为 display:inline ,然后在父元素上设置 text-align:center ;</p>    <p>通用方案: flex布局，对父元素设置 display:flex;justify-content:center;</p>    <p>垂直居中</p>    <p>垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。</p>    <p><strong>父元素一定，子元素为单行内联文本</strong> ：设置父元素的 height 等于行高 line-height</p>    <p>父元素一定，子元素为多行内联文本：设置父元素的 display:table-cell 或 inline-block ，再设置 vertical-align:middle ;</p>    <p>块状元素:设置子元素 position:fixed（absolute） ，然后设置 margin:auto ;</p>    <p>通用方案: flex布局，给父元素设置 {display:flex; align-items:center;} 。</p>    <h3>2.单列布局</h3>    <p style="text-align:center"><img src="https://simg.open-open.com/show/12cd0eddc97721987b9f6e41e5a1fc4b.png"></p>    <p>特征：定宽、水平居中</p>    <p>常见的单列布局有两种：</p>    <ul>     <li> <p>一种是 header 、 content 、 footer 宽度都相同，其一般不会占满浏览器的最宽宽度，但当浏览器宽度缩小低于其最大宽度时，宽度会自适应。</p> </li>     <li> <p>一种是 header 、 footer 宽度为浏览器宽度，但 content 以及 header 和 footer 里的内容却不会占满浏览器宽度。</p> </li>    </ul>    <p>对于第一种，对 header 、 content 、 footer 统一设置 width 或 max-width ，并通过 margin:auto 实现居中。</p>    <p>DOM文档:</p>    <pre>  <code class="language-css"><div class="layout">    <div id="header">头部</div>    <div id="content">内容</div>    <div id="footer">尾部</div>  </div></code></pre>    <p>CSS清单:</p>    <pre>  <code class="language-css">.layout{    /*   width: 960px; *//*设置width当浏览器窗口宽度小于960px时，单列布局不会自适应。*/      max-width: 960px;      margin: 0 auto;    }</code></pre>    <p>对于第二种， header 、 footer 的内容宽度为100%，但 header 、 footer 的内容区以及 content 统一设置 max-width ，并通过 margin:auto 实现居中。</p>    <p>DOM文档:</p>    <pre>  <code class="language-css"><div id="header">    <div class="layout">头部</div>  </div>  <div id="content" class="layout">内容</div>  <div id="footer">    <div class="layout">尾部</div>  </div></code></pre>    <p>CSS清单:</p>    <pre>  <code class="language-css">.layout{    /*   width: 960px; *//*设置width当浏览器窗口宽度小于960px时，单列布局不会自适应。*/      max-width: 960px;      margin: 0 auto;    }</code></pre>    <h3>3. 二列&三列布局</h3>    <p><img src="https://simg.open-open.com/show/784022577a47ea5fc449b06de53c4651.png"></p>    <p>二列布局的特征是侧栏固定宽度，主栏自适应宽度。</p>    <p>三列布局的特征是两侧两列固定宽度，中间列自适应宽度。</p>    <p>之所以将二列布局和三列布局写在一起，是因为二列布局可以看做去掉一个侧栏的三列布局，其布局的思想有异曲同工之妙。对于传统的实现方法，主要讨论上图中前三种布局，经典的带有侧栏的二栏布局以及带有左右侧栏的三栏布局，对于flex布局，实现了上图的五种布局。</p>    <p>a. float+margin</p>    <p>原理说明：设置两个侧栏分别向左向右浮动，中间列通过外边距给两个侧栏腾出空间，中间列的宽度根据浏览器窗口自适应。</p>    <p>DOM文档:</p>    <pre>  <code class="language-css"><div id="content">      <div class="sub">sub</div>      <div class="extra">extra</div>      <div class="main">main</div>  </div></code></pre>    <p>布局步骤:</p>    <ol>     <li> <p>对两边侧栏分别设置宽度，并对左侧栏添加左浮动，对右侧栏添加有浮动。</p> </li>     <li> <p>对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。</p> </li>    </ol>    <p>CSS清单:</p>    <pre>  <code class="language-css">.sub{      width: 100px;      float: left;  }  .extra{      width: 200px;      float: right;  }  .main{      margin-left: 100px;       margin-right: 200px;  }</code></pre>    <p>一些说明:</p>    <p>* 注意DOM文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列（圣杯布局和双飞翼布局都会用到）。</p>    <p>* 这种布局方式比较简单明了，但缺点是渲染时先渲染了侧边栏，而不是比较重要的主面板。</p>    <p>二列的实现方法</p>    <p>如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的 margin-right 值，其他操作相同。反之亦然。</p>    <p>b. position+margin</p>    <p>原理说明：通过绝对定位将两个侧栏固定，同样通过外边距给两个侧栏腾出空间，中间列自适应。</p>    <p>DOM文档:</p>    <pre>  <code class="language-css"><div class="sub">left</div>  <div class="main">main</div>  <div class="extra">right</div></code></pre>    <p>布局步骤:</p>    <ol>     <li> <p>对两边侧栏分别设置宽度，设置定位方式为绝对定位。</p> </li>     <li> <p>设置两侧栏的top值都为0，设置左侧栏的left值为0， 右侧栏的right值为0。</p> </li>     <li> <p>对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。</p> </li>    </ol>    <p>CSS清单:</p>    <pre>  <code class="language-css">.sub, .extra {      position: absolute;      top: 0;       width: 200px;  }  .sub {       left: 0;  }  .extra {       right: 0;   }  .main {       margin: 0 200px;  }</code></pre>    <p>一些说明:</p>    <ul>     <li> <p>与上一种方法相比，本种方法是通过定位来实现侧栏的位置固定。</p> </li>     <li> <p>如果中间栏含有最小宽度限制，或是含有宽度的内部元素，则浏览器窗口小到一定程度，主面板与侧栏会发生重叠。</p> </li>    </ul>    <p>二列的实现方法</p>    <p>如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的 margin-right 值，其他操作相同。反之亦然。</p>    <p>c. 圣杯布局(float + 负margin + padding + position)</p>    <p>原理说明：</p>    <p>主面板设置宽度为100%，主面板与两个侧栏都设置浮动，常见为左浮动，这时两个侧栏会被主面板挤下去。通过负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。为了避免侧栏遮挡主面板内容，在外层设置左右padding值为左右侧栏的宽度，给侧栏腾出空间，此时主面板的宽度减小。由于侧栏的负margin都是相对主面板的，两个侧栏并不会像我们理想中的停靠在左右两边，而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局，调整两个侧栏到相应的位置。</p>    <p>DOM文档:</p>    <pre>  <code class="language-css"><div id="bd">               <div class="main"></div>              <div class="sub"></div>              <div class="extra"></div>    </div></code></pre>    <p>布局步骤:</p>    <ol>     <li> <p>三者都设置向左浮动。</p> </li>     <li> <p>设置main宽度为100%，设置两侧栏的宽度。</p> </li>     <li> <p>设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。</p> </li>     <li> <p>设置main的padding值给左右两个子面板留出空间。</p> </li>     <li> <p>设置两个子面板为相对定位，sub的left值为负的sub宽度，extra的right值为负的extra宽度。</p> </li>    </ol>    <p>CSS清单:</p>    <pre>  <code class="language-css">.main {              float: left;             width: 100%;      }     .sub {             float: left;              width: 190px;              margin-left: -100%;                     position: relative;        left: -190px;    }     .extra {              float: left;              width: 230px;              margin-left: -230px;       position: relative;       right: -230px;     }  #bd {              padding: 0 230px 0 190px;      }</code></pre>    <p>一些说明</p>    <ul>     <li> <p>DOM元素的书写顺序不得更改。</p> </li>     <li> <p>当面板的 main 内容部分比两边的子面板宽度小的时候，布局就会乱掉。可以通过设置 main 的 min-width 属性或使用双飞翼布局避免问题。</p> </li>    </ul>    <p>二列的实现方法</p>    <p>如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的 padding-right 值，其他操作相同。反之亦然。</p>    <p>d. 双飞翼布局(float + 负margin + margin)</p>    <p>原理说明：</p>    <p>双飞翼布局和圣杯布局的思想有些相似，都利用了浮动和负边距，但双飞翼布局在圣杯布局上做了改进，在 main 元素上加了一层div, 并设置 margin ,由于两侧栏的负边距都是相对于main-wrap而言，main的margin值变化便不会影响两个侧栏，因此省掉了对两侧栏设置相对布局的步骤。</p>    <p>DOM文档:</p>    <pre>  <code class="language-css"><div id="main-wrap" class="column">        <div id="main">#main</div>  </div>  <div class="sub"></div>          <div class="extra"></div></code></pre>    <p>布局步骤:</p>    <ol>     <li> <p>三者都设置向左浮动。</p> </li>     <li> <p>设置main-wrap宽度为100%，设置两个侧栏的宽度。</p> </li>     <li> <p>设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。</p> </li>     <li> <p>设置main的margin值给左右两个子面板留出空间。</p> </li>    </ol>    <p>CSS清单:</p>    <pre>  <code class="language-css">.main {              float: left;             width: 100%;      }     .sub {             float: left;              width: 190px;              margin-left: -100%;     }     .extra {              float: left;              width: 230px;              margin-left: -230px;    }  .main-wrap {          margin: 0 230px 0 190px;  }</code></pre>    <p>一些说明</p>    <ul>     <li> <p>圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。</p> </li>     <li> <p>双飞翼布局不用设置相对布局，以及对应的left和right值。</p> </li>     <li> <p>通过引入相对布局，可以实现三栏布局的各种组合，例如对右侧栏设置 position: relative; left: 190px; ,可以实现sub+extra+main的布局。</p> </li>    </ul>    <p>二列的实现方法</p>    <p>如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置 main-wrap 的 margin-right 值，其他操作相同。反之亦然。</p>    <p>e. flex布局</p>    <p>以下是五种布局的flex布局代码：</p>    <p>DOM文档：</p>    <pre>  <code class="language-css"><div class="layout">      <aside class="layout__aside">侧边栏宽度固定</aside>      <div class="layout__main">主内容栏宽度自适应</div>  </div>  <div class="layout">      <div class="layout__main">主内容栏宽度自适应</div>      <aside class="layout__aside">侧边栏宽度固定</aside>  </div>  <div class="layout">      <aside class="layout__aside">左侧边栏宽度固定</aside>      <div class="layout__main">主内容栏宽度自适应</div>      <aside class="layout__aside">右侧边栏宽度固定</aside>  </div>  <div class="layout">      <aside class="layout__aside">第1个侧边栏宽度固定</aside>      <aside class="layout__aside">第2个侧边栏宽度固定</aside>      <div class="layout__main">主内容栏宽度自适应</div>  </div>  <div class="layout">      <div class="layout__main">主内容栏宽度自适应</div>      <aside class="layout__aside">第1个侧边栏宽度固定</aside>      <aside class="layout__aside">第2个侧边栏宽度固定</aside>  </div></code></pre>    <p>CSS清单</p>    <pre>  <code class="language-css">.layout {      display: flex;  }  .layout__main {      flex: 1;  }  .layout__aside {      width: 200px;  }</code></pre>    <p>与之前所讲的几种传统布局方案相比，flex布局的代码可谓异常简洁，而且非常通用，利用简单的三行CSS即实现了常见的五种布局。</p>    <h3>总结</h3>    <p>传统的布局方法基于盒状模型，依赖 display 属性 + position 属性 + float 属性，逻辑相对复杂，对于实现一些特殊效果，例如垂直居中，尤其复杂繁琐。而flex布局中的flex容器可以根据实际可用空间动态调整子元素的宽高比和顺序，使元素能够尽可能地利用可用空间，同时也能通过缩小来避免超出。flex布局提供了一套简便、完整、响应式的布局方案。</p>    <p>flex布局将是CSS布局的趋势，还未正式成为标准的gird布局也异常吸睛，于是知乎上很多刚入门的小伙伴</p>    <p> </p>    <p>参考链接</p>    <p><a href="/misc/goto?guid=4959742863507113010" rel="nofollow,noindex">CSS垂直居中和水平居中</a></p>    <p><a href="/misc/goto?guid=4959742863612846563" rel="nofollow,noindex">圣杯布局小结</a></p>    <p><a href="/misc/goto?guid=4959742863690747959" rel="nofollow,noindex">双飞翼布局介绍-始于淘宝UED_慕课猿问</a></p>    <p><a href="/misc/goto?guid=4959742863775693884" rel="nofollow,noindex">我熟知的三种三栏网页宽度自适应布局方法 " 张鑫旭-鑫空间-鑫生活</a></p>    <p><a href="/misc/goto?guid=4959742863867193927" rel="nofollow,noindex">常见的几种布局总结</a></p>    <p> </p>    <p> </p>    <p>来自：https://segmentfault.com/a/1190000008789039</p>    <p> </p>