- 盒模型
- 基本格式化-包含块
- float的使用，以及float与position的差异
- 详解position
- 实现元素居中
盒模型（Box model）
html文档中的每个元素都被描述成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，模型称为盒模型。盒模型有四个边界来描述：margin(外边距)，border(表框)，padding(内边距)，content(内容区域)，如图：
-
元素所占水平位置大小（W3C 与 IE6及6以下的区别）
W3C 的规范：元素的宽度=margin-left+border-left+padding-left+content（内容宽度）+padding-right+border-right+margin-right
IE6及IE6以下规范：元素的宽度=margin-left+content（包括border-left+padding-left+content（内容宽度）+padding-right+border-right）+margin-right=margin-left+content+margin-right
-
CSS3 box-sizing
box-sizing有三个值：content-box |border-box|inherit
-
- inherit:字如其名，就是会继承父元素的box-sizing的属性值就好
- content-box：高度宽度分别应用到元素的内容框上，例：
.demo{
box-sizing: content-box;
margin: 20px;
padding: 15px;
100px;
}
这里的width：100px=content的宽度；其实表达的意思和W3C是一致的。当然有一只也有不一致，如下：
-
- border-box：元素设定的宽度和高度决定了元素的边框盒
.demo{ box-sizing: border-box; margin: 20px; padding: 15px; 100px; }
这里的100px=border-left+padding-left+content+padding-right+border-right
- border-box：元素设定的宽度和高度决定了元素的边框盒
基本格式化-包含块
浏览器在显示页面时，元素框的定位和尺寸的计算，都是取决于一个矩形的边界，这个矩形，被称作包含块（containing block）。元素生成的框会扮演他后代元素包含块的角色。每个元素都有属于他的包含块。
跟元素的包含块称为初始包含块
-
- 在HTML中，根元素是html（有的会用使用body元素）
- 初始包含块的direction属性与根元素相同。
- 初始包含块的宽度可以由根元素width属性指定。如果该属性是“auto”，用户端提供原始宽度（即浏览器窗口宽度）。
- 同样，初始包含块的高度可以由根元素height属性指定。如果属性是“auto”，包含块的高度将调整以适应文档内容（高度有内容决定）
其他元素：
如果该元素的position为relative或static，他的包含块有最近的块级、单元格或是行内块祖先元素的内容框。（一般情况是父元素的内容框）
-
- 如果元素的position为fixed，包含块有浏览器窗口创建，就是浏览器窗口
- 如果position为absolute，包含块由最近的position属性为非static的祖先创建。（一般情况下是relative）
- 如果该祖先元素是块元素，那么包含块的区域应该是该祖先元素的内边距边界
- 如果祖先是行内元素面，包含块取决于祖先元素的direction属性
- 如果不存在这样的祖先元素，则元素的包含块为初始包含块。
float的使用，以及float与position的差异
float浮动，出现的意义其实是用来让文字环绕图片。在平常的使用中，也只是在布局的过程。添加浮动（float:left /right；不浮动则是：float：none）会让元素脱离文档流，然后浮动在容器左边或是右边。
<div class="box1">框1</div>
<div class="box3">这是一段文字这是一段有情怀的文字这是一段有故事的文字
这是一段文字这是一段有情怀的文字这是一段有故事的文字
这是一段文字这是一段有情怀的文字这是一段有故事的文字</div>
.box{
margin: 0 auto; border: 2px solid #ccc; 500px; height: 100px;
}
.box1{
100px; height: 50px; background-color: #ffaa00 ; float:left;
}
既然有高度塌陷，就有弥补的办法--清除浮动
-
- 直接 <div style="clear: both"></div>当作最后一个子标签放在父标签中，兼容性强，只是有点浪费的感觉
-
.fix{overflow: hidden;zoom: 1;}比较简洁兼容性也强，可选。 -
.fix:after{ display:block; content:'.'; clear:both; line-height:0; visibility:hidden;}
float与position的区别:
- float是相对定位的，当使用百分比来描述div的尺寸时，整个页面会随浏览器的大小和分辨率的变化而变化
- position则需要精确的像素单位px确定位置，不能随浏览器大小改变而改变页面，会自动出现滚动条。
position
任何元素都可以定位，不过绝对定位元素会生成一个块级框，而无论什么元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
属性值：relative | absolute | fixed | static | inherit
<div id="parent">
<div id="box1">box1</div>
<div id="box2">box2</div>
</div>
- relative：
上面box1和box2是同级关系，如果设定box1是relative属性，代码如下：
#box1{
position: relative;
padding: 5px;
top: 5px;
left: 5px;
}
这样理解好了，如果不设置relative属性，box1的位置按照正常文档流，但是当他设置了position为relative后，将根据top，right，left，bottom的值进行位置的移动。不过这一切的移动都是基于对象的margin的左上侧。
- absolute：生成绝对定位元素，相对于static定位以外的第一个元素进行定位。
-
- box1的父元素（就是parent，只要是父级对象）也设置了，position属性，且position属性为 absolute或是relative时，box1就按照这个父级元素进行句对定位，这里是从父元素padding开始的地方（padding左上角）进行定位。这样box1就不在原来的文档流中，就box2就获得box1的位置。
- 如果没有一个有position属性的父对象，就以body为定位对象，就是按照浏览器窗口进行定位。
- fixed：生成决对定位元素，相对浏览器窗口进行定位
- fixed就是特殊的absolute，即fixed以body为定位对象，按照浏览器的窗口进行定位。
- static：默认值。没有定位，元素在正常流中。
- inherit：从父元素继承position属性的值
实现元素居中
居中，当然有水平居中和垂直居中
水平居中
- 行内元素
常用的行内元素a/img/unput/span等，标签内的HTML文本也属于此类。水平居中通过给父元素设置text-align:center就行。
- 块级元素
- 有宽度的块级元素：“margin-left/right ”的值为“auto”就能实现居中。
- 不定宽度块级元素
- 改变块级元素的display为inline或是inline-block，然后使用 text-align：center实现居
- 给父元素设置float，position:relative和left：50%，子元素设置 position:relative和left:-50%实现水平居中
垂直居中
- 单行文本元素：直接通过父元素的height和line-height高度一致来实现
- 父元素多行文本：设置display：table-cell，verticalalign：middle
总结
很多东西是从自己的认识上来写的，还有看到其他博客后的的理解。写的时候才知道太多多东西还有待提高，以后继续努力才是。