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的基础就是元素的盒子模型;
布局的传统解决方案,基于盒状模型,依赖 display
属性 + position
属性 + float
属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
现在,我们使用flex布局,每一个元素如果使用display:flex,就表示这个盒子成为了弹性盒子;
display:flex和display:inline-flex的区别:
1.display:flex;
不会让容器本身取消它的块装的属性(块状属性是独占一行的),但它的子元素会变成行内块的的属性;但是它的孙子属性,不会变成行内块的属性;
2.display: inline-flex;父级是变成行内块元素,他的子元素也是行内块元素,并且自动换行
如果有一个元素,开启了display:flex,那么这个元素就变成了容器;它的子元素自动成为容器成员,都会变成行内块的属性并且被称作项目;
row
(默认值):主轴为水平方向,起点在左端。row-reverse
:主轴为水平方向,起点在右端。column
:主轴为垂直方向,起点在上沿。column-reverse
:主轴为垂直方向,起点在下沿。flex-wrap
属性定义,如果一条轴线排不下,如何换行。flex-start
(默认值):左对齐flex-end
:右对齐center
: 居中space-between
:两端对齐,项目之间的间隔都相等。space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。align-items
属性定义项目在交叉轴上如何对齐。flex-start
:交叉轴的起点对齐。flex-end
:交叉轴的终点对齐。center
:交叉轴的中点对齐。baseline
: 项目的第一行文字的基线对齐。stretch
(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。align-content
属性定义了多行子元素时的对齐方式。如果项目只有一行,该属性不起作用。flex-start
:与交叉轴的起点对齐。flex-end
:与交叉轴的终点对齐。center
:与交叉轴的中点对齐。space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch
(默认值):轴线占满整个交叉轴。
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>