首頁 > web前端 > css教學 > 主體

css樣式的巧妙方法進行總結

高洛峰
發布: 2017-03-07 14:29:30
原創
1291 人瀏覽過

針對之前遇到過的一些特殊樣式的實現,我今天做個總結,目的有二:一是將這些方法記錄下來,以便將來需要用到時查找使用。二為將這些大神們智慧的結晶發揚光大,讓廣大前端程式猿們能夠少走彎路。此貼為更新帖,以後若有好的css樣式技巧,小哥我會不定期更新。

一、塊元素水平垂直居中(特別鳴謝:鑫生活。鑫哥出品必屬精品!小弟膜拜)

#對於一個塊元素的水平垂直居中,水平居中的方式不必多說,一般用margin:auto;等方法即可實現。而對於垂直居中,儘管有vertical-align:middle屬性,但是由於其只適用於table標籤中,而table標籤效果不好控制的特點大家都懂。 。 。因此,我們一般常用的方法是:將子級元素設定inline-block屬性,並將其行高屬性:line-height的值設定為與父級元素相同的高度。在這裡,我想推廣一種方法,源自於「鑫生活」 

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>
    <p class="big">
      <p class="small"></p>
     </p>
  </body>
登入後複製



#css方面:

.big{   
    width:500px;   
    height:500px;   
    border:1px solid red;   
    position:relative;   
    }   
  .small{   
    width:200px; /*自己元素宽高可任意设定 */
    height:200px;   
    position:absolute;left:0px;top:0px;rightright:0px;bottombottom:0px;   
    margin:auto;   

}
登入後複製

在上述程式碼中,子級元素的寬高是任意設定的。都可以實現此元素在父級元素中水平垂直居中顯示。在父級元素中,我們用了position的relative屬性。在子級元素中,我們將它的position屬性設定為absolute後,將四個方向的值都設定為0px。並且讓他的margin值自適應。從審查元素中我們可以發現,如此設定後,子級元素的margin區域會充滿整個父級元素,並且左右margin值是相等的,上下margin值亦如此。但這並不符合,當程式碼數值有衝突時,優先解析top值及left值的規律。因為究竟是什麼原理,小ge也不得而知。 。如果有大神知曉,還望不吝賜教。但這不失為一種好的辦法,希望大家活學活用。

###二、after偽類清浮動#############通常我們在對區塊元素設浮動以後,需要對其清除,以免佈局混亂。常見的清浮動方法主要有兩種:1)、在後面的子元素css中寫"clear:both;"。 2)在浮動元素的父級元素中寫"overflow:hidden"。現在,我們可以用第三種方法,利用after偽類寫一個浮動屬性,這樣只要有需要清楚浮動的地方,我們就給其父元素加上這樣一個浮動屬性就可以了。 ######程式碼如下:######
.clearfix:after{   

     content:"";   

     display:table;   /*利用table不允许浮动的属性来清除浮动。也可以替换成"overflow:hidden;"*/

     clear:both;   

     }
登入後複製
#########這種方法有個好處,就是可以寫入reset中,之後可以多次呼叫。 ######以上這篇對於一些css樣式的巧妙方法進行總結(推薦)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持PHP中文網。 ######更多css樣式的巧妙方法進行總結相關文章請關注PHP中文網! ###
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!