盒模型从外到里为：外边距margin,边框border,内边距padding,内容。

1.外边距margin,边框border,内边距padding的属性默认在四个方向上都生效；
指定方向可以加上-top,-left,-right,-bottom
2.内容本身不具有这些属性，只具有width,height。
在IE中width定义的是内容+内边距+边框的宽度,chrome中就只是内容的宽度。

CSS设置元素内容显示的规则从大到小分为display(元素级别),position(定位),float(浮动)

display(元素级别)

HTML元素分为块元素和行内元素。浏览器渲染页面时，碰到行内元素就会向右排列，处理块元素就会向下排列。
它们会按照流的方式从上往下从左往右进行布局，每一个元素都会获得自己的显示位置。
比如<div>、<p>、<ol>、<ul>、<table>、<form>等元素都是块元素。
比如<a>、<span>、<br>、<em>、<strong>等元素都是行内元素。

块元素block特性：
1.独占一行
2.可以设置高度宽度边距属性
3.高度默认与父元素一致
4.可以容纳块元素和行内元素
行内元素inline特性：
1.和其他行内元素按顺序在一行内
2.不能设置高度宽度边距属性
3.宽度就是容纳的文字或图片的宽度
4.只能容纳行内元素和文字

行内元素与块元素也可以相互转化。
在CSS中将行内元素可以通过display: block设置为以块元素的方式显示，这样可以继续设置该元素的长宽等原本不能设置的属性。
同样，我们也可以设置块元素的属性为display: inline，这样块元素就可以在同一行显示了。

display还有其它取值，除了block和inline,其中另外两种很常见的取值为：
none: 隐藏元素；该元素不会被渲染，也不会占位，就像不存在一样。对布局不会产生任何影响。它和visibility属性不一样。把display设置成none不会保留元素本该显示的空间，但是visibility: hidden;还会保留元素。
inline-block：以block的方式渲染，以inline的方式放置；

position(定位)

postion属性具有如下取值：

inhert：规定应该从父元素继承 position 属性的值
static：默认值。没有定位，元素出现在正常的流中，会忽略top, bottom, left, right 或者 z-index等移动元素位置的声明
relative：相对于元素本身正常位置（即static方式下的位置）进行定位，比如right:10px 会让元素的向右侧移动10 像素
absolute：祖先绝对定位，相对于第一个非static的祖先元素进行定位，元素的位置通过left,top, right 以及 bottom属性进行设置。
fixed：窗口绝对定位，相对于浏览器窗口进行定位。元素的位置通过left,top, right 以及 bottom属性进行规定。

float(浮动)

除了absolute和fixed定位，还有一种方法可以使得元素脱离普通文档流，那就是浮动布局属性：float

float的取值一共有四个：

left：向左浮动
right：向右浮动
none：不浮动
inherit：继承父元素值

设置了float属性的元素具有以下一些特点：
1.该元素将变为块级元素，相当于给该元素设置了display: block;。
2.浮动元素的下一个兄弟元素会紧贴到该元素之前的非浮动元素之后；如果下一个兄弟元素如果也设置了同一浮动方向，则会紧随该元素之后显示。
3.如果该元素的下一个兄弟元素中有内联元素（通常是文字），则会围绕该元素显示，形成类似"文字围绕图片"的效果。