浅谈css（块级元素、行级元素、盒子模型）
一、块级元素的特点
1、默认显示在父标签的左上角
2、默认占满一行（占满整个文档流） 文档流是将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
二、行内元素（内联元素）的特点
1、大小受到文字区域的影响，不受到width、height影响。
2、行内元素不会独自占满一行。
例：
1 <div id="d1"> 2 这是块级元素 3 </div> 4 <span id="d2"> 5 这是行内元素 6 </span>
1 <style type="text/css"> 2 #d1{ 3 width:100px; 4 height:100px; 5 background:#FF9966; 6 border:1px solid red; 7 } 8 #d2{ 9 width:100px; 10 height:100px; 11 background:#FFFF33; 12 border:1px solid #0000CC; 13 } 14 </style>
三、常用的块级元素和行内元素
1、块级元素（div、table、ul li、ol li、hr、h1~h6、p）
2、行内元素（a、img、span、input）
四、块级元素和行内元素互转
1、块级==》行内: display：inline;
2、行内==》块级: display：block;
3、块具有行内元素和块级元素的特点：display：inline-block; （width、height受到影响。不会单独占满一行）
例：块级-行内 display：inline;
1 <div id="d1"> 2 这是块级元素1 3 </div> 4 <div id="d2"> 5 这是块级元素2 6 </div>
添加前效果：
1 <style type="text/css"> 2 #d1{ 3 width:100px; 4 height:100px; 5 background:#FF9966; 6 border:1px solid red; 7 } 8 #d2{ 9 width:100px; 10 height:100px; 11 background:#FFFF33; 12 border:1px solid #0000CC; 13 } 14 </style>
添加display：inline;后效果
1 <style type="text/css"> 2 #d1{ 3 width:100px; 4 height:100px; 5 background:#FF9966; 6 border:1px solid red; 7 display:inline; 8 } 9 #d2{ 10 width:100px; 11 height:100px; 12 background:#FFFF33; 13 border:1px solid #0000CC; 14 display:inline; 15 } 16 </style>
例：行内-块级 display：inline;（通常a标签用的比较多）
1 <div id="d1"> <a herf="#">普通行内元素</a> </div> 2 <hr align="left" width="250px"/> 3 <div id="d2"> <a herf="#">行内元素变成块级元素</a> </div>
1 <style type="text/css"> 2 #d1 { 3 width:250px; 4 height:30px; 5 line-height:30px; 6 text-align:center; 7 border:1px solid red; 8 } 9 hr { 10 border:1px dashed #990000; 11 } 12 #d2 a { 13 text-decoration:none; 14 color:#000000; 15 display:block; 16 width:250px; 17 height:30px; 18 line-height:30px; 19 background:#CC6699; 20 padding:2px; 21 text-align:center; 22 } 23 #d2 a:hover { 24 text-decoration:none; 25 color:#FFFFFF; 26 display:block; 27 width:250px; 28 height:30px; 29 line-height:30px; 30 background:#0033FF; 31 padding:2px; 32 cursor:pointer; 33 text-align:center; 34 } 35 </style>
五、盒子模型
CSS盒子模式:内容(content)、填充(padding)、边框(border)、边界(margin)。
盒子模型是html网页制作中非常重要的布局方式。现在流行的网页制作都是采用盒子模型布局。
padding（内间距）
1、padding:10px; //表示 上下左右的内间距都是10px;
2、padding:10px 20px; //表示 上下10px 左右20px;
3、padding:10px 15px 20px; 表示 上10px 左右15px 下20px;
4、padding：5px 10px 15px 20px; 表示 上5px 右10px 下15px 左20px;
margin(外间距)
1、margin-top：上间距
2、margin-bottom：下间距
3、margin-left：左间距
4、margin-right：右间距
常用居模块的水平居中使用：margin：0px auto;margin与padding如何进行区分，其实说白了padding 就是内容与边框的空隙。而margin则是模块与模块的空隙。
