HTML5语义化元素和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>

2.4

如何实现骰子的三个点:

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

posted @ 2022-09-08 20:43 Eric-Shen 阅读(143) 评论(0) 编辑收藏举报

刷新页面返回顶部

Eric-Shen

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

一、h5语义化元素

二、CSS弹性布局

2.1容器的六个属性

2.2项目的6个属性

公告