盒子模型
网页的核心本市就是用CSS摆盒子
div，span，a等都是盒子
盒子的五个属性:width，height（内容的宽度和高度），padding（内边框），border（边框），margin（外边框）
IE盒子中:width和height指的是内容区域加上border和padding的宽度，高度
<body>标签也有margin，默认8个像素
认识padding:padding区域可以有颜色
padding有四个方向,top,bottom,left bottom,right
padding-top: 30px;
综合写法:padding;上，右，下，左顺时针方向，空格隔开
若综合写没写完时候，比如只写了右边没写左边，那么左边的和右边的相等
后写的会覆盖掉之前写的
有些元素默认带有padding，所以为了便于控制，会清除默认padding 用*清除掉
*{margin: 0; padding: 0} 但是*的效率不高，用并集选择器罗列所有标签并清除
认识border
边框，三要素：像素，线型（solid，dashed...），颜色
border拆分
（1）按三要素拆开 border-width，style，color
（2）按方向拆开 border-top，right，bottom，left
border属性是由三个小属性综合而成，如果一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序。
浮动
CSS有三种传统布局方式（1）普通流（2）浮动（3）定位
标准流：标签默认方式排序
块级元素独占一行，从上到下 div，hr，p，ul，ol，form，table
行内元素按照顺序从左到右,碰到父类边缘则自动换行 span，a，i，em等
标准流是最基本的布局方式
浮动（float）css里用的最多的属性
多个块级元素横向排列找浮动
多个块级元素纵向排列找标准流
性质
（1）脱离标准流
第一种情况 让div可以同一行
第二种情况 给行内元素设置为float，即使不转为块元素，也可以设置宽和高
（2）浮动元素会一行内显示并且元素顶部对齐
（3）浮动的元素具有"字体围绕效果" 例如div浮动，p不浮动，div会挡住p，但是不挡住p中的文字。 永远不是一个东西单独浮动，都是一起浮动。
（4）一个浮动的元素，若没有设置width，那么将自动收缩为内容的宽度。
先用标准的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
一个元素浮动了，理论上其余兄弟也要浮动
浮动的清除
是指清除浮动与浮动之间的影响。
浮动有开始，就要有清除。
如果父盒子本身有高度，则不需要清除浮动
清除浮动方法：
1，选择器{clear：both/left/right} 不允许左右侧有浮动对象。
2，隔墙法
在浮动元素的末尾添加一个空的标签，例如<div style="clear.both"></div>
要求这个新的空标签必须是块级元素
隔墙法好用，但是第一个div，还是没有高度
内墙法：在里面加一堵墙，可以恢复父元素的高度
3，父级添加overflow:hidden
一个父元素不能被自己浮动的儿子撑出高度，加上之后，就可以被撑出高
margin相关
竖直方向margin之间的值以大的为准
盒子居中：margin：0 auto；
若想要表达父子间的距离，要善于改父标签的padding
133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
