:after和:before在頁面布局中的應用

2017-02-28 2615 3 編輯:深圳網站建設 來源:互聯網

隨著瀏覽器的更新迭代,越來越多的新技術在現在常用的瀏覽器中得到的支持,這也促進了這些屬性的推廣和使用。:after和:before就是其中之一,這兩個偽元素針對目前的常用瀏覽器有良好的支持。

:after和:before兼容IE8及以上ie瀏覽器,以及其他瀏覽器。唯一要注意的就是,在ie8中只能用:after,而不支持::after。因此我們在平常使用的時候直接用單冒號的:after即可。由此可見在以后寫頁面時,我們可以放心大膽的用這兩個偽元素了。那么這兩個偽元素都有哪些特性及應用呢?

:after和:before的特性

:after或:before會在元素內容的后面或前面,元素結束符前或后面插入一個子元素。這個元素就叫做:after或:before。偽元素有一下特性:

1.要配合content使用,否則沒有效果,content可以為空;

2.默認為行內元素,所以默認是不能設置寬高的,如果需要設置,需要像行內元素的處理方式一樣;

3.和其他元素一樣,也會繼承父級的一些可以繼承的屬性;

4.在源碼中找不到偽元素,所以不能通過DOM對他進行操作。

基本形式

selection:after{

content: "";/*可以向里面加內容,也可以為空*/

}

:after和:before用于清除浮動

我們經常會在一些cssreset里面看到一個clearfix,這既是一個通過偽元素實現的清除浮動的方法,代碼如下:

.clearfix:after,

.clearfix:before{

  content:"";

  display:table;

  clear:both;

  height:0;

}

.clearfix{

  zoom:1;/*兼容ie7及以下的ie瀏覽器清除浮動*/

}

使用:after和:before在頁面元素前后插入裝飾性的元素

在頁面設計中常常會在一些內容前面有icon、特殊符號、或者序號等。這些內容如果直接用元素標簽實現的話,用的多了,html中會多出很多看似沒有用的標簽,并顯得代碼內容不夠簡潔清晰。在這些情況下,我們完全可以考慮用偽元素實現同樣的效果。

添加特殊符號或者icon:

/* 添加特殊符號 */

.div1{

    text-align:center;

    margin-top:20px;

    font-size:20px;

}

.div1:before{

    content:"“";

    color:red;

}

.div1:after{

    content:"”";

    color:red;

}

添加序號:

/* 添加序號 */

.list{

  width:300px;

  margin:20px auto; 

  counter-reset: subsection;

}

.list h4:before{

  counter-increment: subsection;

  content:counter(subsection) ":"

}

使用:after和:before實現寬高等比的自適應布局

通過將元素中的子元素定位布局,然后再在元素上面添加偽元素,通過偽元素的padding-top值設置百分比,可以實現元素寬高的等比設置,而不需要通過js計算。核心css代碼如下:

/*需要寬高等比設置的元素*/

.mama{

position: relative;

width: 200px;

background-color: #666;

}

.mama:before{

content: "";

display: block;/*必須設置這個才能實現*/

padding-top:50%;/*相當于設置的是高度是寬度的1/2*/

}

/*子元素*/

.son{

position: absolute;/*子元素使用絕對定位的目的是使子元素的高度不會撐起父級的高度*/

height: 100%;

width: 100%;

}

使用:after和:before使圖片垂直居中

img元素作為行內塊元素,他的水平居中可以跟文字一樣處理,直接使用text-align:center;但是垂直怎么居中呢?其實我們還有一個垂直對齊方式的屬性:vertical-align,可以實現垂直方向的元素對齊方式。當然,直接單獨使用vertical-align:middle并不能使img垂直居中,它的垂直居中,其實是需要一個參照物的,而且這個參照物的高度還必須和父級一樣高。很明顯,我們可以使用偽元素實現這個參照物的功能。實際代碼如下:

.box{

  height:300px;

  width:300px;

  background-color:#999;

  margin:0 auto;

  text-align:center;/*水平居中必須的代碼*/

  font-size:0;/*清除display:inline-block產生的間隙*/

  letter-spacing:-1em;/*清除display:inline-block產生的間隙*/

}

.box img{

  vertical-align:middle;/*垂直居中必須的代碼*/

}

.box:before{

  content:"";

  display:inline-block;

  width:0;/*減少偽元素寬度對布局的影響*/

  height:100%;/*垂直居中必須的代碼*/

  vertical-align:middle;

  font-size:0;

}

總結:

偽元素:after和:before擁有良好瀏覽器兼容性以及廣泛應用。正確合理的使用偽元素,不僅可以簡化html代碼,減少代碼的嵌套層次,還可以在頁面排版布局中起到重要作用

專業的網站建設公司,深正互聯,如您有網站營銷需求,請您關注我們,或者致電13828884598

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾