一盒子模型
先来吐槽，学过android的应该知道：控件的宽和高指定了就不会改变，内容和padding共同分配这块区域，margin不属于控件的一部分。然而前端概念就多了：css宽高仅仅是内容区域的宽高，盒子的大小是：内容区域+2*padding+2*border+2*margin。标签的大小是:内容区域宽高+2*padding+2*border。(android 好像是按照IE的规则去做的，不过在被前端淘汰了~)
1.1body也有margin
<body>标签有必要强调一下。很多人以为<body>标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是<document>，即浏览器。而<body>是<document>的儿子。浏览器给<body>默认的margin大小是8个像素，此时<body>占据了整个页面的一大部分区域，而不是全部区域。
1.2认识weight和height
盒子的宽高！= css中写的宽高，css中写的仅仅是内容的占用区域。
1.3认识padding
padding有四个方向，所以我们能够分别描述4个方向的padding。
写法一：
padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;写法二：综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）
padding:30px 20px 40px 100px;- 如果写了四个值，则顺序为：上、右、下、左。
- 如果只写了三个值，则顺序为：上、右、下。??和右一样。
- 如果只写了两个值，则上、右边、和上一样、和右一样。
1.4认识border
border就是边框。边框有三个要素：像素（粗细）、线型、颜色。
border是一个大综合属性。比如说：
border:1px solid red;
就是把4个边框，都设置为1px宽度、线型实线、red颜色。
1.5margin
标准文档流中垂直方向margin有塌陷问题；
margin尽量不要用在父子之间，最好用在兄弟之间；
margin 0 auto；是让盒子居中，要求有明确的宽度；
二标准文档流的特性
我们在前边的文章中也说道过一些关于文档流的特性，这里系统归纳一下：
- 无论多少个空格、换行、tab，都会折叠为一个空格。
- 同行内高低不齐，底部对齐。
- 行内元素和块级元素的区别。
行内元素：
与其他行内元素并排；
不能设置宽、高。默认的宽高，就是文字的宽高（行内替换元素除外）。
paddingtop paddingbottom margintop marginbottom 设置无效，效果看上去有效的也不会影响其他元素的位置（img除外）
块级元素：
霸占一行，不能与其他任何元素并列；
能接受宽高。如果不设置宽度，那么宽度将默认变为父亲的100%,高度是包裹内容。
三行内元素和块级元素转换
我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。
块级元素可以转换为行内元素：
一旦，给一个块级元素（比如div）设置：
display: inline;
那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
- 此时这个div不能设置宽度、高度；
- 此时这个div可以和别人并排了。
行内元素转换为块级元素：
同样的道理，一旦给一个行内元素（比如span）设置：
display: block;
那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：
- 此时这个span能够设置宽度、高度
- 此时这个span必须霸占一行了，别人无法和他并排
- 如果不设置宽度，将撑满父亲
四浮动
标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？视乎根据现有的标准文档流规定没法实现。办法是：移民！脱离标准流！
css中一共有三种手段，使一个元素脱离标准文档流：
- （1）浮动
- （2）绝对定位
- （3）固定定位
浮动基本准则是（切记）：划定一块一块的区域，每个区域内浮动。如果每个元素都去浮动，容易照成混乱。
接下来总结一下通过浮动特性，来更好的使用浮动布局：- 浮动的元素脱离标准文档流，并且不再区分行内和块级，都可以设置宽高
- 浮动的元素互相贴靠。
- 浮动元素有字围效果
- 收缩性：div浮动，宽度就变成了包裹内容。
会发现浮动会影响标签标准文档流的特性，有时候开发需要清除这样的影响
方法一：给浮动元素的祖先元素加高度
如果一个元素要浮动，那么它的祖先元素一定要有高度。
有高度的盒子，才能关住浮动。（记住这句过来人的经验之语）
方法二：clear:both;
如果祖先高度是0，那么意味着浮动没有被关住，但是不想让后边标签因为管不住而受到影响，就需要在后边标签属性上加上clear:both；这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了。两个父标签之间没有间隙了。一个父亲是不能被浮动的儿子撑出高度的。
方法三：隔墙法；
上面这个例子中，为了防止第二个div贴靠到第二个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性；同时，既然这个新的div无法设置margin属性，两个父盒子之间还是没有高度。一个父亲是不能被浮动的儿子撑出高度的。
方法四：内墙法；内墙法可以给它所在的家撑出高度。
方法五：overflow:hidden;给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。
