H5标签
在IE9（包括IE9）之前都需要转换成块级元素 display：block
在移动端就不需要考虑兼容问题。 H5+css3可以放心的在移动端使用。
1.nav 定义导航
2.header 表示网页的头部。通常是一些导航信息或者标题。
3.article 表示一块独立的部分。
4.aside 对article的内容进行信息的辅助解释。次要信息，比如博客网站中的侧边公告，或者广告，分类等信息。
5.section 文档中的一个节点或者区域。
6.footer 页面的底部。通常是链接或版权信息
7.hgroup
BFC
之前遇到的一些问题：
1.外边框塌陷
2.外边框重合
3.浮动对普通元素的影响
BFC：block formatting context 块级格式化上下文。
官方解释为：它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。BFC提供了一个环境，HTML元素在这阁环境中会按照一定规则进行布局。
说人话：BFC的目的就是形成一个独立的空间，在这个空间内的子元素不会在布局上影响到外面的元素。
如何生成BFC
方法1：overflow 不为visible，可以让属性为：hidden auto scroll。
方法2：浮动 float不为none。只要设置了浮动，当前元素就拥有了BFC属性。
方法3：定位 绝对定位和固定定位。 默认和相对定位不会创建BFC空间。
方法4：display inline-block table-cell flex inline-flex
BFC应用：
1.解决margin塌陷
2.父类高度塌陷
3.阻止元素被浮动元素遮盖
三栏布局
圣杯布局
- 在主体内部外面嵌套了一个div
- center在结构上靠前
- center，left，right都浮动
- 清除浮动
- 在body网页中设置最小宽度
- left、right设置固定宽度，center不设置固定高度默认为父框100%.
- left设置margin-left为负值父框100%，移动到center最左边
- right设置margin-left为负值自身宽度，移动到center的最右边
- 此时center内容会被left遮盖
- center设置padding左右为left、right固定宽度
- left、right相对定位，偏移量为自身宽度
双飞翼布局
- 在主体内部外面嵌套了一个div
- center在结构上靠前
- center，left，right都浮动
- 清除浮动
- 在body网页中设置最小宽度
- left、right设置固定宽度，center不设置固定高度默认为父框100%.
- left设置margin-left为负值父框100%，移动到center最左边
- right设置margin-left为负值自身宽度，移动到center的最右边
- 在center中添加一个div 假如类名为home
- home设置margin上下为0 ，左右为left、right固定宽度
弹性盒子
- 在主体内部外面嵌套了一个div
- left、right、center放在一个盒子中，并使其变为弹性盒子
- left、right设置固定宽度，center不设置固定高度默认为父框100%.
- center设置flex-grow为1，left、right不设置默认为0
- 再设置 left、right、center顺序，使用order，从小到大，越小越靠前
移动端
分辨率：屏幕中像素的数量 PC端常见的分辨率 1920*1080。
手机分辨率一般比较高、
问题：
如果用手机的真实分辨率去呈现网页，网页整体看起来会特别小。
苹果乔布斯在推出iPhone4的时候，为了让页面完整显示在手机上，推出了视口这个概念,让手机浏览器默认为980px。
当前这个980就是视口的宽度。
移动端布局：
1.响应式
2.分别开发两套代码
响应式布局
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局
实现方式：使用媒体查询
eg：@media screen（还可以为print…）and[与] (not[或] ,[or 非，使用","表示])（条件）{…}
当使用min-width最小宽度也就是大于等于时，数值小的写在前面
视口：
布局视口 网页的宽度
视觉视口 用户可以看到的网站的区域
理想视口 视觉视口=布局视口
不同的移动设备因为分辨率，屏幕尺寸等问题，造成视觉视口不同，那么理想视口也会不同。
流式布局
又称百分比布局，子盒子的某些属性可以使用百分比设置，参照物为父盒子的宽或高
边框宽度不可以设置成百分比
定位盒子参照百分比对象
