常见的块级元素和行内元素
一、块级元素
1、块级元素的特点：
（1）、默认显示在父标签的左上角.
（2）、块级元素默认占满一行（沾满整个文档流）。
2、常见的块级元素：
<p>、<h1-h6>、<ulli>、<olli>、<div>、<tabl>、<hr>
二、行内元素（内联元素）
1、行内元素的特点：
（1）、大小受到文字区域的影响，不受到width和height的影响。
（2）、行内元素不会单独占满一行。
2、常见的行内元素：
<a>、<pan> 、<img> 、<input>
三、块级元素和行内元素相互转换
1、display:inline; 块级转成行内元素
2、display:block; 行内元素转成块级元素
3、display:inline-block; 具有行内元素和块级元素特点:（1）width、height会受到影响 （2）不会单独占满一行
行内元素和块级元素的区别:
1.行内元素默认情况下不会独占一行 块级元素占满一行
2.行内元素的高宽（width height）不受属性的影响，只受到其里面内容的多少的影响。而块级元素大小会受到width和height影响。
3.块级元素的margin和padding都正常，内联元素左右maring和左右padding正常，上下不正常不识别，也就是说不能通过margin-top和padding-top来改变行高
关于第3点补充下：
行内元素margin和padding左右间距在各个浏览器中解析的都完整,上下间距那就是杯具,各个浏览器解析还不一样,设置个背景貌似人家又认了,但是他周围的元素当他设置的上下间距不存在,所以在以后的项目中,不给行内元素设置上下的margin和padding了
总结：想让自己独占一行就会块级元素(div,dl,dt,dd,ul,li...)，想让元素和其它元素在一行就用行内元素(span,a,img)，他们之间可以通过样式来转换disply:block;display:inline;
还有一个属性：
display:inline-block;
将对象呈递为内联元素，与其它的元素同处一行，但是内部又呈现出块级元素，也就是可以设置宽和度，打破了块级元素和内联元素的区别.
如果块状元素(div..)表现这种属性,与外部沟通是内联,内部又是块状的可以这样设置(display:inline;zooom:1)或 div{display:inline-block;//先触发layout}div{display:inline;}这两个顺序不能颠倒了,不然就失效了
浮动（float）
1、float: left right
2、清除浮动：clear:both ((清除两边的浮动)
例子：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #d1,#d2{ width:100px; height:100px; border:solid 2px red; float:left; } #d3{ width:100px; height:100px; border:solid 2px red; clear:left; } #d4{ width:100px; height:100px; border:solid 2px red; } </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>
显示的效果1：如果想让3和4并排在一起的话就需要在#d3和#d4各加一个float:left;这样才能浮动！ 【代码如下】： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #d1,#d2{ width:100px; height:100px; border:solid 2px red; float:left; } #d3{ width:100px; height:100px; border:solid 2px red; clear:left; float:left; } #d4{ width:100px; height:100px; border:solid 2px red; 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> 显示效果2：
如果在#d4里面去掉float:left;那么就会没有效果！ 【代码如下】： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #d1,#d2{ width:100px; height:100px; border:solid 2px red; float:left; } #d3{ width:100px; height:100px; border:solid 2px red; clear:left; float:left; } #d4{ width:100px; height:100px; border:solid 2px red; } </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>
显示效果3:在#d4里如果没有效果那么就要通过clear:left;来清除掉，达到效果！（也就是默认的效果 上面图1 所示） 【代码如下】： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #d1,#d2{ width:100px; height:100px; border:solid 2px red; float:left; } #d3{ width:100px; height:100px; border:solid 2px red; clear:left; float:left; } #d4{ width:100px; height:100px; border:solid 2px red; clear: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>
显示效果：
css盒子模型
内间距：padding
padding:10px; 上下左右
padding:10px20px; 上下、左右
padding:10px 20px 10px; 上、左右、下
padding:1px 1px 1px 10px; 上、右、下、左
外间距：margin
margin:10px; 上下左右
margin:10px20px; 上下、左右
margin:10px 20px 10px; 上、左右、下
margin:1px 1px 1px 10px; 上、右、下、左
注意：padding各种情况，对行内元素是支持的，而margin对行内元素只支持左右，不支持上下。
定位（绝对定位、相对定位和固定定位）
1、绝对定位 position:absolute
（1）、当设置为绝对定位之后，脱离了文档流，不会单独占满一行且不会受到浮动（float）的影响
（2）、当设置为绝对定位后，元素的方位受到窗体的top left right bottom的影响。
2、相对定位 positon:relative
（1）、当设置为相对定位时候没有脱离文档流，就会受到浮动（float） 的影响。
（2）、当设置为相对定位的时候，方位（top left right bottom）是相对于元素的父标签，由于标签并没有脱离文档流所以它四周的标签是占着位置的。
3、固定定位 positon:fixed
（1）、当设置为固定定位的时候，脱离了文档流，不会受到浮动的影响会固定在设定的位置。