标签：
一，块元素
块级元素代码！
#d1,#d2
｛
height:100px;
width:100px;
border:solid 2px #FF0000;
display:inline;
｝
<div="d1"></div> <div="d2"></div>
块元素特点：
1 ，默认显示在父标签（body）的左上角
2 , 块级元素默认占满一行（占满整个文档流）
常见的块级元素：
p标签 h1~~h6 ul li oi li hr table
二 行内元素
常见的行内元素
a span img input
行内元素代码！
#sp1,#sp2 { height:100px; width:100px; border:solid 2px #FF0000;
display:block;
}
<span="sp1">你好</span>
<span="sp2">你好2</span>
行内元素特点：
1，大小受到文字区域影响 不受 heigh width 影响
2，不占一行
span 只对单个文字
3 行内元素变块级元素
display: block
行变块
display:inline
块变行
display:inline-block;
既有块级元素特点有有行内元素特点
（高度 宽度回收到影响
不会单独站一行
）
浮动：float 上下左右
#d1,#d2
｛
height:100px;
width:100px;
border:solid 2px #FF0000;
float:left<!--左浮动-->
<!--float:right 右浮动-->
<!--float:top 上浮动-->
<!--float:bottom 下浮动-->
}
#d3
{
height:100px; width:100px; border:solid 2px #FF0000;
}
<div = "d1">呵呵</div> <div = "d2">哈哈</div>
<div = "d3">哈哈</div>
d3高度宽度没有作用 因为受上面浮动影响 要用 clear:both;清除两边浮动
三，盒子模型
内间距 padding
<div="d1">你好<div>
#d1 { height:100px; width:100px; border:solid 2px #FF0000;
padding:10px;
}
paddding:10px
paddding:10px 20px
padding:10px0 20px 30px 上 左右 下
padding:10px 20px 30px 40px 上 右 下 左
外间距 margin
<div="d1">明天</div>
<div="d2">后天</div>
#d1,#d2 { height:100px; width:100px; border:solid 2px #FF0000;
}
#d2
{
margin-top:10px;
}
行内元素可不可以用 padding margin
<span="d1"></span>
#d1 { border:solid 2px #FF0000;
padding:10px; }
行内元素在padding 有效果
#d1 { border:solid 2px #FF0000;
margin:left; }
<span="d1"></span>
margin在行内元素 只有左右
*｛
padding:0px;
margin:0px;
｝
所有内外间距都等0
四，相对定位 和绝对定位
绝对定位：
1，脱离文档流 不会沾满一行 不受浮动影响
2，当设置了绝对定位元素方位就会受到left right top bottom的影响
相对定位: position:relative;
1 设置相对定位 没有脱离文档流
2 设置相对定位 方位相对与元素父标签的
（由于标签并没有脱离文档流 所以他四周是占这位置）
固定元素 position：fixed
标签：
原文地址：http://www.cnblogs.com/second-2/p/4835759.html
