如何理解HTML语义化呢？

一段代码的所有段落都使用div包裹，另一段代码使用h1,p,ul,li来包裹，我们会觉得哪个更有语义感呢？

另外全部是div的标签搜索引擎也无法分辨出段落、主次关系。

语义化好处：

让人更容易读懂
让搜索引擎更容易读懂（seo）

那么html元素都有什么呢？

块级：div,h1-h6,table,ul,ol,p....
内联：span,img,input,button.....

（css布局）

盒子模型的宽度如何计算的？

#div{
width: 100px;
padding: 10px;
border: 1px solid pink;
margin: 10px;
}

offsetWidth有多大？

首先offsetWidth = ( 内容宽度+内边距+边框 )，无外边距。因此，答案是122px。

那如果让offsetWidth宽度100px该怎么做。

由此引出box-sizing:border-box.怪异盒子模型。

它的offsetWidth = width = 100px;

margin纵向重叠问题

#div1{
margin-top:10px;
margin-bottom:15px;
}
#div2{
margin-top:10px;
margin-bottom:15px;
}

已知相邻的margin-top和margin-bottom会发生重叠。即使空白的内容div也会重叠。那么由此得出结论，这两个div重叠后的间距是15px(bottom更大)

margin负值问题

margin-top和margin-left负值时，元素向上、向左移动。

margin-right负值，右侧元素左移，自身不受影响。

margin-bottom负值，下方元素上移动，自身不受影响。

什么是BFC?

块级格式化上下文，是一个独立的渲染区域，内部元素的渲染不会影响边界以外的元素。

常见的BFC形成条件

float不是none
position是absolute或fixed
overflow不是visible
display是flex,inline-box

常见应用，容器bfc清除浮动（子元素浮动导致父元素高度塌陷）

float布局

实现圣杯布局(padding留白)和双飞翼布局(margin留白) 主左右

目的：三栏布局，中间最先加载和渲染。两侧内容固定，中间内容随着宽度自适应。一般用pc网页。

手写clearfix.

它是什么?他作用是什么？

举例子：

<div class="container">123</div>
<div class="foot">123</div>

当container在页面中使用浮动时势必会影响下面的footer盒子塌陷或跑到上方，此时如果想要保证浮动前的模样就需清除浮动（可以在container身上使用css语法clear:both）

那也可以使用下面的伪元素形式达到与clear:both相同的效果，继将伪元素内容设置为空，并增添clear:both属性。

.clearfix:after{
    content:"",
    display:table;
    clear:both;
}

flex布局

实现一个三点的色子

常用语法回顾：

flex-direction

justify-content

align-items

flex-wrap

align-self(子元素)

box
  item
  item
  item
box

box使用flex

并且在box上使用space-between,使三个item在盒子中呈一行均匀排列

此时获取.item:nth-child(2)第二个item的元素，使用align-self:center方式将其居中。

再者获取.item:nth-child(3)第三个item元素，使用align-self:flex-end处于末尾。

0307-html、css复习