标签：
一、Display。元素显示模式。
1.none。隐藏元素，并且不保留元素原有的空间。
1 <style type="text/css"> 2 .none, .none-show { 3 width: 300px; 4 height: 32px; 5 background-color: #569968; 6 } 7 8 .none:hover + .none-show { 9 display: none; 10 } 11 </style>
2.inline。行内元素。特点：不自动换行，不可调整大小。
1 <div style="display: inline;background-color: #bfff00">这是div元素。</div> 2 <div style="display: inline;background-color: #bfff00">这是div元素。</div>
3.block。块元素。特点：自动换行，可调整大小。
1 <a href="" style="display: block;width: 180px;height: 28px;background-color: #ff6348;">这是a标签</a> 2 <a href="" style="display: block;width: 180px;height: 28px;background-color: #ff6348;">这是a标签</a>
4.inline-block。行内块元素。特点：不自动换行，可调整 大小。
这是p标签
这是p标签
1 <p style="display: inline-block;width: 180px;height: 28px;background-color: #1190ff">这是p标签</p> 2 <p style="display: inline-block;width: 180px;height: 28px;background-color: #1190ff">这是p标签</p>
二、float，元素浮动。特点，脱离标志文档流。
1 <style> 2 .box { 3 width: 500px; 4 height: 200px; 5 border: 1px solid #000; 6 } 7 8 .left, .right { 9 width: 100px; 10 height: 200px; 11 text-align: center; 12 font-size: 32px; 13 line-height: 200px; 14 } 15 16 .left { 17 float: left; 18 background-color: #ff6348; 19 } 20 21 .right { 22 float: right; 23 background-color: #ff6568; 24 } 25 </style> 26 27 <div class="box"> 28 <div class="left">left</div> 29 <div class="right">right</div> 30 </div>
/* 清除浮动：clear */
1 clear：left | right | both ；
三、position，定位。
1.static，静态。不发生位移。
2.relative，相对定位。以自身为参考点，进行位移。
3.absolute，绝对定位。以最接近的父类定位为参考点，进行位移。
4.fixed，固定定位。以浏览器窗口为参考点。
1 <style> 2 .position { 3 position: relative; 4 } 5 6 .static, .relative, .absolute, .fixed { 7 width: 100px; 8 height: 100px; 9 margin: 20px 0; 10 background-color: #ffae13; 11 font-size: 26px; 12 text-align: center; 13 } 14 15 .relative { 16 position: relative; 17 top: 50px; 18 left: 30px; 19 background-color: #ff6568; 20 } 21 22 .absolute { 23 position: absolute; 24 top: -50px; 25 left: 60px; 26 background-color: #4199ff; 27 } 28 29 .fixed { 30 position: fixed; 31 left: 100px; 32 background-color: #00ff89; 33 } 34 </style> 35 36 <div class="position"> 37 <div class="static">static</div> 38 <div class="relative">relative</div> 39 <div class="absolute">absolute</div> 40 <div class="fixed">fixed</div> 41 </div>
5.z-index。非静态元素的层次等级。数值越大，越浮于顶层。
默认值：0。
标签：
原文地址：http://www.cnblogs.com/darcrand-blog/p/5777743.html
