Web前端学习 05

复习：
1.盒子模型
2.content-box,border-box
width:100px height:100px; padding:10px;border-width:10px
3.如果box-sizing为content-box时，元素的width,height不包含内边距和边框
如果box-sizing为box-box时，元素的width,height包含内边距和边框

浮动和定位
1.浮动的基本使用
2.浮动的特性
3.清浮动
4.问题及如何解决
5.定位

一.非标准文档流
w3c标准文档流：
1.空格 换行在编译时都会成为一个空格，除非写在同一行
2.底边对齐,高矮不齐
3.block，inline,inline-block
4.标签与标签之间可能会相互影响

脱离标准文档流：
float
定位:z-index

文档流：瀑布从上到下
脱离文档流：ps图层

浮动特性：
1.脱标
2.贴靠，无论是块级标签还是行级标签，都是贴靠的状态
3.字围

清除浮动：
1.给父级元素添加高度
2.clear:both
3.隔墙法

问题：父级高度没有设置时，高度是由子级内容撑开的，但是如果子级使用了浮动，父级的高度就会坍塌
解决：新建BFC,
常见是 1.overflow:hidden 2.float:left

总结：
1.浮动的基本用法
2.特性
3.清除浮动
4.父级高度坍塌
5.京东布局