css知识笔记（五）——css样式设置小技巧
水平居中設(shè)置-行內(nèi)元素
如果被設(shè)置元素為文本、圖片等行內(nèi)元素時(shí)，水平居中是通過給父元素設(shè)置?text-align:center?來實(shí)現(xiàn)的。如下代碼：
html代碼：
<body><div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中顯示。</div> </body>css代碼：
<style>div.txtCenter{text-align:center;} </style>水平居中設(shè)置-定寬塊狀元素
當(dāng)被設(shè)置元素為塊狀元素時(shí)用 text-align：center 就不起作用了，這時(shí)也分兩種情況：定寬塊狀元素和不定寬塊狀元素。
第一種方法：滿足定寬和塊狀兩個(gè)條件的元素是可以通過設(shè)置“左右margin”值為“auto”來實(shí)現(xiàn)居中的。我們來看個(gè)例子就是設(shè)置?div?這個(gè)塊狀元素水平居中：
html代碼：
<body><div>我是定寬塊狀元素，哈哈，我要水平居中顯示。</div> </body>css代碼：
<style> div{border:1px solid red;/*為了顯示居中效果明顯為 div 設(shè)置了邊框*/ width:500px;/*定寬*/margin:20px auto;/* margin-left 與 margin-right 設(shè)置為 auto */ } </style>也可以寫成：
margin-left:auto; margin-right:auto;注意：元素的“上下 margin” 是可以隨意設(shè)置的。
第二種方法：改變塊級元素的 dispaly 為 inline 類型，然后使用 text-align:center 來實(shí)現(xiàn)居中效果。如下例子：
html代碼：
<body> <div class="container"><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul> </div> </body>css代碼：
<style> .container{text-align:center; } .container ul{list-style:none;margin:0;padding:0;display:inline; } .container li{margin-right:8px;display:inline; } </style>這種方法相比第一種方法的優(yōu)勢是不用增加無語義標(biāo)簽，簡化了標(biāo)簽的嵌套深度，但也存在著一些問題：它將塊狀元素的 display 類型改為 inline，變成了行內(nèi)元素，所以少了一些功能，比如設(shè)定長度值。
方法三：通過給父元素設(shè)置 float，然后給父元素設(shè)置 position:relative 和 left:50%，子元素設(shè)置 position:relative 和 left:-50% 來實(shí)現(xiàn)水平居中。
代碼如下：
<body> <div class="container"><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul> </div> </body>css代碼：
<style> .container{ float:left;position:relative;left:50% }.container ul{list-style:none;margin:0;padding:0; position:relative;left:-50%; } .container li{float:left;display:inline;margin-right:8px;} </style>這種方法可以保留塊狀元素仍以 display:block 的形式顯示，優(yōu)點(diǎn)不添加無語議表標(biāo)簽，不增加嵌套深度，但它的缺點(diǎn)是設(shè)置了 position:relative，帶來了一定的副作用。
這三種方法使用得都非常廣泛，各有優(yōu)缺點(diǎn)，具體選用哪種方法，可以視具體情況而定。
垂直居中-父元素高度確定的單行文本
父元素高度確定的單行文本的豎直居中的方法是通過設(shè)置父元素的?height?和?line-height?高度一致來實(shí)現(xiàn)的。如下代碼：
<div class="container">hi,imooc! </div>css代碼：
<style> .container{height:100px;line-height:100px;background:#999; } </style>垂直居中-父元素高度確定的多行文本
父元素高度確定的多行文本、圖片、塊狀元素的豎直居中的方法有兩種：
方法一：使用插入 table (包括tbody、tr、td)標(biāo)簽，同時(shí)設(shè)置 vertical-align：middle。
說到豎直居中，css 中有一個(gè)用于豎直居中的屬性 vertical-align，但這個(gè)樣式只有在父元素為 td 或 th 時(shí)，才會生效。所以又要插入 table 標(biāo)簽了。下面看一下例子：
html代碼：
<body> <table><tbody><tr><td class="wrap"> <div><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p> </div> </td></tr></tbody></table> </body>css代碼：
table td{height:500px;background:#ccc}因?yàn)?td 標(biāo)簽?zāi)J(rèn)情況下就默認(rèn)設(shè)置了 vertical-align 為 middle，所以我們不需要顯式地設(shè)置了。
?方法二：在 chrome、firefox 及 IE8 以上的瀏覽器下可以設(shè)置塊級元素的 display 為 table-cell，激活 vertical-align 屬性，但注意 IE6、7 并不支持這個(gè)樣式。
html代碼：
<div class="container"><div><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p></div> </div>css代碼：
<style> .container{height:300px;background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/vertical-align:middle;/*IE8以上及Chrome、Firefox*/ } </style>這種方法的好處是不用添加多余的無意義的標(biāo)簽，但缺點(diǎn)也很明顯，它的兼容性不是很好，不兼容 IE6、7。
隱性改變display類型
有一個(gè)有趣的現(xiàn)象就是當(dāng)為元素（不論之前是什么類型元素，display:none 除外）設(shè)置以下 2 個(gè)句之一：
元素會自動(dòng)變?yōu)橐?span style="color:rgb(178,34,34)">?display:inline-block?的方式顯示，當(dāng)然就可以設(shè)置元素的 width 和 height 了且默認(rèn)寬度不占滿父元素。
如下面的代碼，a 標(biāo)簽是行內(nèi)元素，所以設(shè)置它的 width 是 沒有效果的，但是設(shè)置為 position:absolute 以后，就可以了。
<div class="container"><a href="#" title="">進(jìn)入課程請單擊這里</a> </div>css代碼
<style> .container a{position:absolute;width:200px;background:#ccc; } </style>————————————————————————————————————————————————————————————————————————————
以上內(nèi)容參考自慕課網(wǎng)：http://www.imooc.com
總結(jié)
以上是生活随笔為你收集整理的css知识笔记（五）——css样式设置小技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 绝密蜈蚣剧情介绍
- 下一篇： 成都欢乐谷冰雪世界开放时间