一、块元素：
特点：
1、默认显示在页面的左上角，内容也是默认在左上角
2、默认单独占满一行（占满整个文档流）
常用的块级元素：
p、h1-h6、ul li、ol li、div、hr、table、
二、行内元素（内联元素）：
特点：
1、大小受到文字区域的影响，height、width在行内元素中不起作用
2、行内元素不会单独占满一行
常用的行内元素：
a、span、img、input
三、块级元素与行内元素的相互转换
1、display:inline; 块级转成行内元素
2、display:block; 行内元素转成块级元素
3、display:inline-block; 具有行内元素和块级元素特点:
（1）width、height会受到影响
（2）不会单独占满一行
四、浮动（float)
1、float: left right
2、清除浮动：clear:lift、right、both (清除两边的浮动)
注意要点：块与块之间，浮动的影响，可以用clear来清除
实例：
<html> <head> <title>float 浮动</title> <style type="text/css"> #d1,#d2 { height:100px; width:100px; border:solid 2px #F00; float:left; } #d3 { height:100px; width:100px; border:solid 2px #F00; clear:left; float:left; } #d4 { height:100px; width:100px; border:solid 2px #F00; float:left; } </style> </head> <body> <div id="d1">浮动1</div> <div id="d2">浮动2</div> <div id="d3">浮动3</div> <div id="d4">浮动4</div> </body> </html>
效果：
通过运用 float 块元素的浮动
用clear 清除块元素浮动之间的影响，从而实现块与块并排。
五、盒子模型
要点：如何做布局？边框、内间距、外间距，需要掌握好，就像拼图。
1）、边框样式的覆盖
例：
#d1 { height:100px; width:100px; border:solid 1px #FOF; border-top:dashed 1px #00F; border-bottom:dashed 1px #00F; }
2）、内间距
要点：撑开
padding
padding:10px; 上下左右撑开10px
padding:10px 20px; 上下、左右
padding:10px 10px 20px; 上、左右、下
padding:10px 15px 20px 25px; 上、右、下、左
例：
<html> <head> <title>padding 特点</title> <style type="text/css"> #d1 { height:100px; width:100px; border:solid 2px #F00; padding:10px; } </style> </head> <body> <div id="d1">特点</div> </body> </html>
效果：
如果这时想设置边框高度和宽度为100px的话,代码如下：
<html> <head> <title>padding 特点</title> <style type="text/css"> #d1 { height:80px; width:80px; border:solid 2px #F00; padding:10px; } </style> </head> <body> <div id="d1">特点</div> </body> </html>
效果：
要注意更改后的边框，是从下方和右减少。
3）、外边距
margin
要点：外边距指的是块与外面的边距，
一图看懂内、外边距
留意：padding 对行内元素是支持的，margin只支持左右，不支持上下。
六、定位 （绝对定位与相对定位）
1、绝对定位：position:adsolute;
1）、当设置为绝对定位之后，将脱离文档流，不会占满一行，并且不会受到float的影响。
2）、当设置为绝对定位的时候，元素的方位就受到窗体的top,left,right,bottom的影响。
技巧：
元素设置为绝对定位后，可通过top,left,right,bottom来控制元素在窗体中的方位。
2、相对定位：position:relative;
1）、当设置为相对定位时，元素没有脱离文档流。float可以对其影响。
2）、当设置为相对定位时，方位top,left,right,bottom是相对于元素的父元素，由于标签并没有脱离文档流，所以它四周的标签是占着位置的。
绝对定位与相对定位的区别：一个是脱离文档流，一个是没有脱离文档流。
3、固定定位：position:fixed;
1）、通过top,left,right,bottom来控制元素在窗体中的固定的方位
2）、脱离文档流，不受float的影响。