首页 > 其他分享> 文章详细

HTML5语义化元素和CSS 弹性布局

2022-09-08 21:05:16 阅读：227 来源： 互联网

标签：化元素 flex 项目元素 HTML5 对齐 display CSS 属性

一、h5语义化元素

h5语义化
语义元素仅仅是界面结构的体现，并不会对内容有本质的影响。

header元素，两种用法：
第一表示网页的页眉，第二在一块内容里表示内容的标题。
按照h5的规定，每一个header元素里应该显示或隐式的包含某个级别的标题，即包含标题元素<h>，如果想隐式的包含，应该使用display:none

nav元素，里面放的应该是当前文档需要的链接。
并不是所有的链接都需要放到nav元素里，比如footwr元素就常用来在底部添加一个不常用到的没必要放在nav元素里的链接。

aside元素，不仅可以表示侧栏，也可以表示与周围文本没有联系的内容。
用作网页的侧栏时表示，整个网页的附加内容，通常是广告区域，分享链接，或者侧边搜索等。
用作文章的侧栏时，可以表示文章的附加内容，解释说明某个观点，相关内容链接等。

section标签元素，适合标记的内容区块。

<article>
<h1>标题</h1>
<p>
<!-- 内容 -->
</p >
<figure>
< img src="#" alt="插图">
<figcaption>这是一个插图</figcaption>
</figure>
</article>

main元素
这个是页面的主题内容，它是body元素的子标签，

article元素
<article>表示一个完整的、自成一体的内容块。如文章或新闻报道。<article>应包含完整的标题、文章署名、发布时间、正文。当语义与表现发生冲突，例如有时需要将文章分多个页面显示，那么需要把每个页面的文章区域都用<article>标记。

文章中包含插图时，使用新的语义元素<figure>标签。

上述情况下，<figcaption>包含了关于插图的详细解释，则<img>的alt属性可以略去

footer元素，有规定，元素里内容只可以包含版权，来源信息，法律限制这些文本或链接

还有div元素，很多时候如果语义化元素仍然不满足需求，比如想在页脚里加上footer元素不支持包裹的其他内容，我们还是可以使用div元素做页脚。

二、CSS弹性布局

首先我们知道，css的基础就是元素的盒子模型；

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

现在，我们使用flex布局，每一个元素如果使用display：flex，就表示这个盒子成为了弹性盒子；

display:flex和display:inline-flex的区别:

1.display:flex;不会让容器本身取消它的块装的属性(块状属性是独占一行的)，但它的子元素会变成行内块的的属性；但是它的孙子属性，不会变成行内块的属性；

2.display: inline-flex;父级是变成行内块元素，他的子元素也是行内块元素，并且自动换行

如果有一个元素，开启了display：flex，那么这个元素就变成了容器；它的子元素自动成为容器成员，都会变成行内块的属性并且被称作项目；

2.1容器的六个属性

flex-direction：主轴的方向；它决定了项目的排列方向，它有以下4个值；
1. 1. row（默认值）：主轴为水平方向，起点在左端。
  2. row-reverse：主轴为水平方向，起点在右端。
  3. column：主轴为垂直方向，起点在上沿。
  4. column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap：一行排不下时是否换行；默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
1. nowrap（默认值）：一行排不下时不换行，等比列缩小；
2. wrap：换行，且第一行在上面
3. wrap-reverse：换行，且第一行在下面
flex-flow：时flexdirection和flex-wrap的缩写；默认值是flex-flow：row ，nowrap
justify-content：属性定义了项目在主轴上的对齐方式。
1. - flex-start（默认值）：左对齐
  - flex-end：右对齐
  - center：居中
  - space-between：两端对齐，项目之间的间隔都相等。
  - space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items：align-items属性定义项目在交叉轴上如何对齐。
1. - flex-start：交叉轴的起点对齐。
  - flex-end：交叉轴的终点对齐。
  - center：交叉轴的中点对齐。
  - baseline: 项目的第一行文字的基线对齐。
  - stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content：align-content属性定义了多行子元素时的对齐方式。如果项目只有一行，该属性不起作用。
1. - flex-start：与交叉轴的起点对齐。
  - flex-end：与交叉轴的终点对齐。
  - center：与交叉轴的中点对齐。
  - space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  - space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  - stretch（默认值）：轴线占满整个交叉轴。

2.2项目的6个属性

order： order属性定义项目的排列顺序。数值越小，在一行中排列越靠前，默认为0。
flex-grow： flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。只有在 flex 元素主轴才宽度小于主轴宽度会生效
flex-shrink： flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。只有在 flex 元素总和超出主轴才会生效
flex-basis： flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。也就是说，如果我们使用这个属性，那么会先根据flex-basis计算项目占据了主轴的空间，然后再根据flex-grow等于0表示不放大，但是会通过flex-shink，可能会缩小；
align-self：align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

2.3总结：

我们看到，其实大部分属性还是针对项目（容器成员）的，比如容器的属性flex-derictive决定的还是项目的排列顺序；

而且我觉得，容器属性的优先级是比较高的，

在这里，我们main容器定义了三个子项目，每个项目里又有7个孙子项目；

我们可以看到，第二，孙子项目并灭有成为行内块元素，所以父元素定义为flex容器后，只会把直系子元素变成行内块元素的项目；

第二，我们设置了flex：0 1 500px；

说明给每个子项目都设置的元素宽度500px，也就是说它占据主轴的空间为500px，然后又都是可以缩小的；

但是，当我们的flex-wrap为wrap即允许换行后，我们发现，三个子项目并没有缩小，而是都换行了，所以说，容器的属性优先级还是高于项目属性优先级的，能换行就都换行了。

当然，当我们把flex-wrap设置为nowrap不允许换行后，发现三个子项目确实等比例缩小了。

第三，当我们设置了flex： 0 0 500px：

说明我们不允许项目缩小，这个时候，已经超出了浏览器屏幕的宽度，怎么办？出现了滚动条。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .main {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
      .firstDiv {
        /* display: flex; */
        border: 10px solid;
        background-color: green;
        flex: 0 1 500px;
      }
      .secondDiv {
        /* display: flex; */
        border: 10px solid;
        background-color: red;
        flex: 0 1 500px;
      }
      .thirdDiv {
        /* display: flex; */
        border: 10px solid;
        background-color: blue;
        flex: 0 1 500px;
      }
    </style>
  </head>
  <body>
    <header>标题但没有h元素</header>
    <aside>tree</aside>
    <main class="main">
      <div class="firstDiv">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
      </div>
      <div class="secondDiv">
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
      </div>
      <div class="thirdDiv">
        <div>31</div>
        <div>32</div>
        <div>33</div>
        <div>34</div>
        <div>35</div>
        <div>36</div>
        <div>37</div>
      </div>
    </main>
    <footer>版权所有</footer>

    <script></script>
  </body>
</html>

标签：化元素,flex,项目,元素,HTML5,对齐,display,CSS,属性
来源： https://www.cnblogs.com/EricShen/p/16670582.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML5语义化元素和CSS 弹性布局

一、h5语义化元素

二、CSS弹性布局

2.1容器的六个属性

2.2项目的6个属性