Display布局-后端老鸟学前端（一）

一、Display简介

　　display 属性规定是否/如何显示元素。每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 inline{行内元素} 或 block（块级元素）。

常用的行内元素有：
。它的特点是：</p> <ul> <li style="list-style-type: none"> <ul> <li>　　和其他元素都在一行上；</li> <li>　　高度、行高和顶以及底边距都不可改变，宽度就是它的文字或图片的宽度，不可改变；</li> <li>　　可以设置padding，margin的属性值，top，left，bottom，right不能设置。</li> </ul> </li> </ul> <p>　　常用的块级元素有：<h1>~<h6> <p> <div> <ul> <ol> <li>等，其中 <div> 标签是最典型的块元素。它的特点是：</p> <ul> <li style="list-style-type: none"> <ul> <li>　　总是在新行上开始，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度；</li> <li>　　高度，行高以及顶和底边距都可控制，宽度是它的容器的100%，除非设定一个宽度；</li> <li>　　可以设置padding，margin的属性值，top，left，bottom，right都能够产生边距效果。</li> </ul> </li> </ul> <p><span style="font-size: 18px"><strong> 二、Display常用布局</strong></span></p> <p><strong>　　<span style="font-size: 16px">1、inline-block</span></strong></p> <p><strong>　　</strong>inline-block看上去是inline和block是一个混合产物，实际上确是如此，将块级元素显示为行内块状元素，设置该属性后，其他的行内块级元素会排列在同一行。</p> <p>　　<span style="font-size: 16px"><strong>2、grid</strong></span></p> <p>　　<code>grid</code>布局即网格布局，是一种新的<code>css</code>模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种<code>css</code>二维布局。</p> <p>　　<span style="font-size: 16px"><strong>3、flex</strong></span></p> <p>　　Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。</p> <p><span style="font-size: 18px"><strong>三、Flex布局</strong></span></p> <p><strong>　　</strong>本文重点讲解flex布局。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，Flex布局因其灵活性、通用性，将成为未来布局的首选方案。</p> <p>　　采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。</p> <p>　　<span style="font-size: 16px"><strong> （1）容器属性</strong></span></p> <p> 　　<span style="font-size: 16px"><strong>3.1.1 flex-direction属性</strong></span></p> <p>　　flex-direction属性决定主轴的方向（即项目的排列方向）。属性值如下：</p> <table style="height: 239px; width: 807px" border="0"> <tbody> <tr> <td>值</td> <td>说明</td> <td>备注</td> </tr> <tr> <td>column-reverse</td> <td>主轴为垂直方向，起点在下沿</td> <td>默认值</td> </tr> <tr> <td>column</td> <td>主轴为垂直方向，起点在上沿</td> <td> </td> </tr> <tr> <td>row</td> <td>主轴为水平方向，起点在左端</td> <td> </td> </tr> <tr> <td>row-reverse</td> <td>主轴为水平方向，起点在右端</td> <td> </td> </tr> </tbody> </table> <p>　　效果如下图：</p> <p></p> <p><strong>　　<span style="font-size: 16px">3<strong>.1</strong>.2 flex-wrap属性</span></strong></p> <p><strong>　　</strong>默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。属性值如下：</p> <table style="height: 188px; width: 796px" border="0"> <tbody> <tr> <td>值</td> <td>说明</td> <td>备注</td> </tr> <tr> <td> <pre class="prettyprint prettyprinted"><span class="pln">nowrap </span></pre> </td> <td>不换行</td> <td>默认值</td> </tr> <tr> <td> <pre class="prettyprint prettyprinted"><span class="pln">wrap </span></pre> </td> <td>换行，第一行在上方</td> <td> </td> </tr> <tr> <td> <pre class="prettyprint prettyprinted"><span class="pln">wrap<span class="pun">-<span class="pln">reverse</span></span></span></pre> </td> <td>换行，第一行在下方</td> <td> </td> </tr> </tbody> </table> <p>　　效果如下图：</p> <p></p> <p> </p> <p> 　　<span style="font-size: 16px"><strong>3<strong>.1</strong>.3 flex-flow</strong></span></p> <p>　　flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。</p> <p>　　<span style="font-size: 16px"><strong>3<strong>.1</strong>.4 justify-content</strong></span></p> <p>　　justify-content属性定义了项目在主轴上的对齐方式。属性值如下：</p> <table style="height: 254px; width: 818px" border="0"> <tbody> <tr> <td>值</td> <td>说明</td> <td>备注</td> </tr> <tr> <td>flex-start</td> <td>左对齐</td> <td>默认值</td> </tr> <tr> <td>flex-end</td> <td>右对齐</td> <td> </td> </tr> <tr> <td>center</td> <td>居中</td> <td> </td> </tr> <tr> <td>space-between</td> <td>两端对齐，项目之间的间隔都相等</td> <td> </td> </tr> <tr> <td>space-around</td> <td>每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍</td> <td> </td> </tr> </tbody> </table> <p>　　效果如下图：</p> <p></p> <p>　　<span style="font-size: 16px"><strong>3<strong>.1</strong>.5 align-items</strong></span></p> <p>　　align-items属性定义项目在交叉轴上如何对齐。属性值如下：</p> <table style="height: 237px; width: 760px" border="0"> <tbody> <tr> <td>值</td> <td>说明</td> <td>备注</td> </tr> <tr> <td>flex-start</td> <td>交叉轴的起点对齐</td> <td> </td> </tr> <tr> <td>flex-end</td> <td>交叉轴的终点对齐</td> <td> </td> </tr> <tr> <td>center</td> <td>交叉轴的中点对齐</td> <td> </td> </tr> <tr> <td>baseline</td> <td>项目的第一行文字的基线对齐</td> <td> </td> </tr> <tr> <td>stretch</td> <td>如果项目未设置高度或设为auto，将占满整个容器的高度</td> <td>默认值</td> </tr> </tbody> </table> <p>　　效果如下图：</p> <p></p> <p><strong>　　3<strong>.1</strong>.6 align-content</strong></p> <p>　　align-content属性定义了多根主轴线的对齐方式（<strong>flex-wrap：</strong>wrap<span class="pun">、</span><span class="pln">wrap<span class="pun">-<span class="pln">reverse</span></span></span>）。如果项目只有一根轴线，该属性不起作用。属性值如下：</p> <table style="height: 288px; width: 728px" border="0"> <tbody> <tr> <td>值</td> <td>说明</td> <td>备注</td> </tr> <tr> <td>flex-start</td> <td>与交叉轴的起点对齐</td> <td> </td> </tr> <tr> <td>flex-end</td> <td>与交叉轴的终点对齐</td> <td> </td> </tr> <tr> <td>center</td> <td>与交叉轴的中点对齐</td> <td> </td> </tr> <tr> <td>space-between</td> <td>与交叉轴两端对齐，轴线之间的间隔平均分布</td> <td> </td> </tr> <tr> <td>space-around</td> <td>每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍</td> <td> </td> </tr> <tr> <td>stretch</td> <td>轴线占满整个交叉轴</td> <td>默认值</td> </tr> </tbody> </table> <p>　　效果如下图：</p> <p></p> <p> 　　（2）<strong>容器项目</strong></p> <p><strong>　　3.2.1 order</strong></p> <p>　　order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。</p> <p>　　效果如下图：</p> <p></p> <p><strong>　　3.2.2 flex-grow</strong></p> <p>　　flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。</p> <p>　　如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</p> <p>　　效果如下图：</p> <p></p> <p>　　</p> <p><strong>　　3.2.3 flex-shrink</strong></p> <p>　　flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。</p> <p>　　如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。</p> <p> 　　效果如下图：</p> <p></p> <p><strong>　　3.2.4 flex-basis</strong></p> <p>　　 flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。</p> <p><strong>　　3.2.5 flex</strong></p> <p>　　 flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。</p> <p>　　该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。</p> <p>　　建议优先使用这个属性，而不是单独写三个分离的属性</p> <p><strong>　　3.2.6 align-self</strong></p> <p>　　 align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。属性值如下：</p> <table style="height: 232px; width: 606px" border="0"> <tbody> <tr> <td>值</td> <td>说明</td> <td>备注</td> </tr> <tr> <td>auto</td> <td>继承父元素的align-items属性，如果没有父元素，则等同于stretch</td> <td>默认值</td> </tr> <tr> <td>flex-start</td> <td>交叉轴的起点对齐</td> <td> </td> </tr> <tr> <td>flex-end</td> <td>交叉轴的终点对齐</td> <td> </td> </tr> <tr> <td>center</td> <td>交叉轴的中点对齐</td> <td> </td> </tr> <tr> <td>baseline</td> <td>项目的第一行文字的基线对齐</td> <td> </td> </tr> <tr> <td>stretch</td> <td>如果项目未设置高度或设为auto，将占满整个容器的高度</td> <td> </td> </tr> </tbody> </table> <p>文章参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html</p> </div>  <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid100-0.html' class='tagbtn' target='_blank'>CSS</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div>  <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565125.html">DOM修改使用DOM操作CSS</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564642.html">HTML和CSS</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564529.html">1.css布局技巧</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564254.html">Scss支持多主题切换的方案实现</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563647.html">google icons 的使用和 css 设置图标为 loading 状态</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-560668.html">node-scss npm的时候报错</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-559517.html">CSS设置文字超出部分自动换行</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-557603.html">整理gulp自动化构建工具(包含PostCss)</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-557273.html">CSS背景属性</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-557438.html">css中溢出的处理</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-552285.html">51-Web基础-CSS</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-552278.html">CSS3与页面布局学习总结（四）——页面布局大全</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div>   </div>  </div> <div class="col-lg-3 col-12 p-0 ps-lg-2">     <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div>  </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>