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

2022/9/8 23:54:39

本文主要是介绍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容器的六个属性

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

 

 

 

 

 

 

2.2项目的6个属性

  1. order:  order属性定义项目的排列顺序。数值越小,在一行中排列越靠前,默认为0。
  2. flex-grow:  flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。只有在 flex 元素主轴才宽度小于主轴宽度会生效

  3. flex-shrink:  flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。只有在 flex 元素总和超出主轴才会生效

  4. flex-basis:  flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。它可以设为跟widthheight属性一样的值(比如350px),则项目将占据固定空间。
  5. flex:flex属性是flex-growflex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。   也就是说,如果我们使用这个属性,那么会先根据flex-basis计算项目占据了主轴的空间,然后再根据flex-grow等于0表示不放大,但是会通过flex-shink,可能会缩小;
  6. 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>

 



这篇关于HTML5语义化元素和CSS 弹性布局的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程