元素类别
1.块元素 （换行）
特点：可以设置宽高，无宽高时默认占一行，换行
2.行内（内嵌）元素（不换行）
特点：不可以设置宽高，宽高就是内容，不换行
span 常用于段落特定文字样式
Img input 是一个有块元素属性的内嵌元素
代码书写时，标签换行，会导致相邻元素出现间隙（空格）
浮动（float）
网页布局第一准则：
多个块级元素纵向排列-标准流，多个块级元素横向排列-浮动
浮动元素特性：
1.浮动元素会脱离标准流/文档流（脱标） （浮动的盒子不在保留原先的位置）
2.浮动元素会一行内显示并且顶部对齐
3.浮动的元素会具有行内块元素的特性
***任何元素使用 浮动后 具备行内块元素的特点 可以设置宽高
***通栏的盒子（与浏览器一样宽） 不需要设置宽度 只设置高度即可
***大盒子里 一般一浮动全浮动
父元素里的子元素全部浮动，父元素高度塌陷
解决办法，清除浮动：
1.给父元素设置高度
2.添加额外的最后的子标签 div 并设置CSS属性：clear:both;
3.给父元素设置 overflow:hidden
4.父级伪元素清除
.cleardiv:after{
content='';
display:block;
claer:both;
}
5.父级双伪元素清除
.clearfix:before,.clearfix:after{
content='';
display:table;
}
.clearfix:after{
claer:both;
}
/*适配IE6,IE7*/
.clearfix{
*zoom:1;
}
盒子模型
每一个布局元素都可以看做一个盒子（容器）
从内到外：内容–>内边距–>边框–>外边距
padding：内边距 border：边框 改变容器大小 如果子元素没有设置width/height 则不会改变父元素盒子大下
margin：外边距 改变盒子位置
margin 左右相加 上下取最大值（文档流） 如果脱标：依旧是相加
百分比 相对于父元素的宽度（padding margin 的上下左右）
宽度高度的百分比 相对于 父元素的宽高
合并相邻的边框：border-collapse : collapse ;
圆角矩形设置：border-radius: 宽度的一半 50%
子元素 未浮动时 设置margin-top 会把父元素下拉（margin-top 会作用于父元素上）：
解决办法：
1.子元素浮动
2.父元素overflow:hidden;
3.父元素添加内容
4.父元素添加上内边距
5.父元素添加边框
div水平居中的方式：
margin:auto; （div必须设置宽度）