OK!接下来我们分别说这些元素的意义。首先，什么是块级元素？在html中<div>,
<p>,<h1>,<form>,<ul>和<li>就是块级元素。（ul标签和li标签还记得是什么意思
吧？）设置display:block就是将元素显示为块级元素。如：a{display:block;}
这里就是将内联元素a转换为块状元素，从而使a元素具有块状元素的特点。那么
它有哪些特点呢？1.每个块级元素都从新的一行开始，并且其后的元素也另起一
行。（真特么的霸道，一个块级元素独占一行）2.元素的高度、宽度、行高以及顶
和底边距都可设置。3.元素宽度在不设置的情况下，是它本身父容器的100%（和
父元素的宽度一致），除非设定一个宽度。如需验证的话，最好是设置底色，这样
比较好显现效果。
然后是内联元素。在html中，<span>,<a>,<label>,<strong>和<em>就是典型的内
联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline
将元素设置为内联元素。如：
div{
dispaly:inline;
}
<div>我要变成内联元素</div>
这里就是将块状元素div转换为内联元素，从而使div元素具有内联元素特点。
内联元素的特点又有哪些呢？如下：1.和其他元素都在一行上；2.元素的高度、宽
度及顶部和底部边距不可设置；3.元素的宽度就是它包含的文字或图片的宽度，不
可改变。
这里要注意一个点，就是内联元素之间有一个间距问题。感兴趣可以试验一下。
内联块状元素就是同事具备内联元素，块状元素的特点，代码display:inline-block
就是将元素设置为内联块状元素<img>,<input>标签就是这种内联块状标签。
inline-block元素特点：1.和其他元素都在一行上
2.元素的高度、宽度、行高以
及顶和底边距离都可设置。
然后劲爆的来了。我们来说说盒子模型。那么到底是什么呢？
谢特，我实在不好打字。给你们段视频http://www.imooc.com/video/3225
这段视频是前奏，我们常用的<div>,<ul>,<ol>,<p>,<h>,<table>标签等等这些块
级标签都具备盒子模型的特征。记住几个关键词，有：填充物padding
margin
border而且有四个方向。具体可以百度一下。
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细，样式
和颜色（边框三属性）注意：1.border-style（边框样式）常见样式有：dashed
（虚线）dotted（点线）solid（实线）然后我插一句话，千万不要写错字母。。
2.border-color（边框颜色）中的颜色可设置为十六进制颜色，如：border-color:#888;
前面的井号千万不要忘记！！！3.border-width（边框宽度）中的宽度也可以设置
为：thin|medium|thick（但是不是很常用），最常用的还是px。这里的三个属性
我查询了一下分别的意思是：定义细的边框|默认。定义中等的边框|定义粗的边框
当然，还有两个属性，分别是length和inherit，length是允许您自定义边框的宽度
inherit是规定应该从父元素继承边框宽度。但是最好还是用px，方便我们啊~~~
现在有一个问题，如果有想为p标签单独设置下边框，而其他三遍都不设置边框样
式怎么办呢？css样式中允许只为一个方向的边框设置样式：
div{border-bottom:1px
solid red;}
同样也可以其他三边：上面是：div{border-top:1px solid
red;}
右边是：div{border-right:1px solid red;}
左边是：div{border-left:1px solid
red;}
盒子模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内
定义的宽（width）和高（height），指的是填充以内的内容范围。因此一个元素
实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
元素的高度也是同理
比如：
css代码：
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
html代码：
<body>
<div>文本内容</div>
</body>
元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。
注意：li是块状元素，块状元素有一个特点：在不设置宽度的情况下，是父容器
的100%
元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可以分上下左右
如：div{padding:20px
10px 15px 30px}这里顺序一定不要搞混了。分开写如下：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果一周为都一样的话就直接了当残暴一点：div{padding:10px}
如果上下一样，左右一样的话更简单了：div{padding:10px
20px;}
注意!!!：padding不是文字到边框的距离！是内容到边框的距离，内容的大小是
由width和hight决定的。如果文字过多，会限定width往下写，盒子大小不变，文字超出。
元素与其他元素之间的距离可以使用边界（margin）来设置。边界也可以分为上、
右、下、左。（这里注意了。我上一段没有写注意主要是为了这里来写。因为两
者是一样的！都是上右下左！这叫啥，顺时针，对不对？）代码跟上面的那段差不
多：div{margin:20px
10px 15px 30px;}
分开写也是：
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
如果上右下左的边界都为10px，可以这么写:div{margin:10px;}
如果是上下边界一样为10px，左右是一样为20px，可以写成：div{margin:10px
20px;}
总结一下padding和margin的区别，padding在边框里，margin在边框外。另外就
是一个叫拍腚，一个叫妈个鹰。记住拍腚是拍里面的，老鹰是在外面的。妈个鹰
抓不到它，拍腚，能拍得到。
清楚了css盒模型的基本概念，盒模型类型，我们可以深入探讨网页布局的基本模
型了。布局模型与盒模型一样都是css最基本、最核心的概念。但布局模型在盒模
型基础之上，又不同于我们常说的css布局样式或css布局模板。如果说布局模型是
本，那么css布局模板就是末了，是外在的表现形式。
css包含3种基本的布局模型，用英文概括为：Flow、Layer和Float
在网页中，元素有三种布局模型：
1.流动模型（Flow）
2.浮动模型（Float）
3.层模型（Layer）
先来说说第一个，流动模型。流动（Flow）是默认的网页布局模式。也就是说网页
在默认状态下的html网页元素都是根据流动模型来分布网页内容的。
流动布局模型具有2个比较典型的特征：第一点，块状元素都会在所处的包含元素
内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%
实际上块状元素都会以行的形式占据位置。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示
（内联元素不像块状元素那么霸道独占一行）
块状元素总是那么霸道多少独占一行，如果现在我们想让两个块状元素并排显示，
怎么办呢？那么元素浮动就可以出来实现这个构想了。
任何元素在默认值情况下是不能浮动的，但是可以用css定义为浮动，如div、p、
table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div
id="div2"></div>
当然也可以同时设置两个元素右浮动也可以实现一行显示：
div{
width:200px;
height:200px;
border:2px red solid;
float:right;
}
<div id="div1"></div>
<div
id="div2"></div>
（突然蹦跶出来一个问题，solid是什么意思？不记得的可以往回看看知识点，是
实线。还有虚线(dashed)还有点线(dotted)不记得的一定要往回看！一定随时看）
那么又出现一个问题了，我想回答你们。。爱过。。不对。。。出现的问题是这样
的：如果要设置两个元素一左一右呢？？？当然可以哒~我也萌萌哒~代码如下：
div{
width:200px;
height:200px;
border:2px red
solid;
}
#div1{float:left;}
#div2{float:right}
<div
id="div1"></div>
<div
id="div2"></div>
那么出现最后一个了，也是大boss，什么是层布局模型？层布局模型就像是图像
软件，也是最牛的图（毁）像（图）软（秀）件（秀）PhotoShop中非常流行的图
层编辑功能一样，每个图层能够精确定位操作，但是在网页设计领域，由于网页大
小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便
之处的。下面我们来说说html中的层布局。
如何让html元素在网页中精确定位，就像图像软件Photoshop中的图层一样可以对
每个图层能够精确定位操作，css定义了一组定位（positioning）属性来支持层
布局模型。
层布局模型有三种形式：1.绝对定位（position:absolute）2.相对定位（position
:relative）3.固定定位（position:fixed）
然后我来分别介绍着三种形式。
第一种绝对定位：
如果想为元素设置层模型中的绝对定位，需要设置position:absolute（表示绝对
定位），这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、
bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果
不存在这一的包含块，则相对于body元素，即相当对于浏览器窗口
原文：http://www.cnblogs.com/zj520/p/6290612.html