對于一些css樣式的巧妙方法進(jìn)行總結(jié)(推薦)

針對之前遇到過的一些特殊樣式的實(shí)現(xiàn),我今天做個(gè)總結(jié),目的有二:一是將這些方法記錄下來,以便將來需要用到時(shí)查找使用。二為將這些大神們智慧的結(jié)晶發(fā)揚(yáng)光大,讓廣大前端程序猿們能夠少走彎路。此貼為更新帖,以后若有好的css樣式技巧,小哥我會不定期更新。
一、塊元素水平垂直居中(特別鳴謝:鑫生活。鑫哥出品必屬精品!小弟膜拜)
對于一個(gè)塊元素的水平垂直居中,水平居中的方式不必多說,一般用margin:auto;等方法即可實(shí)現(xiàn)。而對于垂直居中,盡管有vertical-align:middle屬性,但是由于其只適用于table標(biāo)簽中,而table標(biāo)簽效果不好控制的特點(diǎn)大家都懂。。。因此,我們一般常用的方法是:將子級元素設(shè)定inline-block屬性,并將其行高屬性:line-height的值設(shè)定為與父級元素相同的高度。在這里,我想推廣一種方法,源自“鑫生活”
http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/
代碼如下:
html方面:
- <body>
- <div class="big">
- <div class="small"></div>
- </div>
- </body>
css方面:
- .big{
- width:500px;
- height:500px;
- border:1px solid red;
- position:relative;
- }
- .small{
- width:200px; /*自己元素寬高可任意設(shè)定 */
- height:200px;
- position:absolute;left:0px;top:0px;rightright:0px;bottombottom:0px;
- margin:auto;
- }
在上述代碼中,子級元素的寬高是任意設(shè)定的。都可以實(shí)現(xiàn)此元素在父級元素中水平垂直居中顯示。在父級元素中,我們用了position的relative屬性。在子級元素中,我們將它的position屬性設(shè)定為absolute后,將四個(gè)方向的值都設(shè)定為0px。并且讓他的margin值自適應(yīng)。從審查元素中我們可以發(fā)現(xiàn),如此設(shè)定后,子級元素的margin區(qū)域會充滿整個(gè)父級元素,并且左右margin值是相等的,上下margin值亦如此。但是這并不符合,當(dāng)代碼數(shù)值有沖突時(shí),優(yōu)先解析top值及l(fā)eft值的規(guī)律。因?yàn)榫烤故鞘裁丛?,小ge也不得而知。。如果有大神知曉,還望不吝賜教。但是這不失為一種好的辦法,希望大家活學(xué)活用。
二、after偽類清浮動
通常我們在對塊元素設(shè)浮動以后,需要對其清浮動,以免布局混亂。常見的清浮動方法主要有兩種:1)、在后面的子元素css中寫"clear:both;"。2)在浮動元素的父級元素中寫"overflow:hidden"?,F(xiàn)在,我們可以用第三種方法,利用after偽類寫一個(gè)浮動屬性,這樣只要有需要清楚浮動的地方,我們就給其父元素加上這樣一個(gè)浮動屬性就可以了。
代碼如下:
- .clearfix:after{
- content:"";
- display:table; /*利用table不允許浮動的屬性來清除浮動。也可以替換成"overflow:hidden;"*/
- clear:both;
- }
以上這篇對于一些css樣式的巧妙方法進(jìn)行總結(jié)(推薦)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
原文地址:http://www.cnblogs.com/androidshouce/archive/2016/07/14/5669044.html
相關(guān)文章
- 下面小編就為大家?guī)硪黄胏ss樣式的書寫格式詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-03
Web前端開發(fā)css基礎(chǔ)樣式總結(jié)(推薦)
下面小編就為大家?guī)硪黄猈eb前端開發(fā)css基礎(chǔ)樣式總結(jié)(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-02- 本特效是一款使用CSS3幀動畫來制作的炫酷404頁面動畫效果的代碼。該404頁面以書架為主題,歡迎下載使用2016-07-28
- 下面小編就為大家?guī)硪黄狧TML CSS樣式基礎(chǔ)(必看篇)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-23
- 這篇文章主要介紹了CSS更改鼠標(biāo)為手狀樣式的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-20
- 下面小編就為大家?guī)硪黄猚ss樣式圖片、漸變、相關(guān)小知識(必看)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-14
- 下面小編就為大家?guī)硪黄獪\談CSS樣式權(quán)值。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-05