溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何巧妙的使用css樣式

發(fā)布時(shí)間：2021-09-14 17:13:33 來(lái)源：億速云 閱讀：122 作者：柒染 欄目：web開發(fā)

今天就跟大家聊聊有關(guān)對(duì)于一些css樣式的巧妙方法進(jìn)行總結(jié)(推薦)，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

一、塊元素水平垂直居中

對(duì)于一個(gè)塊元素的水平垂直居中，水平居中的方式不必多說(shuō)，一般用margin:auto;等方法即可實(shí)現(xiàn)。而對(duì)于垂直居中，盡管有vertical-align:middle屬性，但是由于其只適用于table標(biāo)簽中，而table標(biāo)簽效果不好控制的特點(diǎn)大家都懂。。。因此，我們一般常用的方法是：將子級(jí)元素設(shè)定inline-block屬性，并將其行高屬性：line-height的值設(shè)定為與父級(jí)元素相同的高度。

html方面：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <body>  
　　　　<div class="big">  
　　　　　　<div class="small"></div>  
　　　　　</div>  
　　</body>

css方面：

CSS Code復(fù)制內(nèi)容到剪貼板


  2. .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;   
　　　　   
}

在上述代碼中，子級(jí)元素的寬高是任意設(shè)定的。都可以實(shí)現(xiàn)此元素在父級(jí)元素中水平垂直居中顯示。在父級(jí)元素中，我們用了position的relative屬性。在子級(jí)元素中，我們將它的position屬性設(shè)定為absolute后，將四個(gè)方向的值都設(shè)定為0px。并且讓他的margin值自適應(yīng)。從審查元素中我們可以發(fā)現(xiàn)，如此設(shè)定后，子級(jí)元素的margin區(qū)域會(huì)充滿整個(gè)父級(jí)元素，并且左右margin值是相等的，上下margin值亦如此。但是這并不符合，當(dāng)代碼數(shù)值有沖突時(shí)，優(yōu)先解析top值及l(fā)eft值的規(guī)律。因?yàn)榫烤故鞘裁丛恚e也不得而知。。如果有大神知曉，還望不吝賜教。但是這不失為一種好的辦法，希望大家活學(xué)活用。

二、after偽類清浮動(dòng)

通常我們?cè)趯?duì)塊元素設(shè)浮動(dòng)以后，需要對(duì)其清浮動(dòng)，以免布局混亂。常見的清浮動(dòng)方法主要有兩種：1）、在后面的子元素css中寫"clear:both;"。2）在浮動(dòng)元素的父級(jí)元素中寫"overflow:hidden"?，F(xiàn)在，我們可以用第三種方法，利用after偽類寫一個(gè)浮動(dòng)屬性，這樣只要有需要清楚浮動(dòng)的地方，我們就給其父元素加上這樣一個(gè)浮動(dòng)屬性就可以了。

代碼如下：

JavaScript Code復(fù)制內(nèi)容到剪貼板


  2. .clearfix:after{   
  
　　　　　content:"";   
  
　　　　　display:table;   /*利用table不允許浮動(dòng)的屬性來(lái)清除浮動(dòng)。也可以替換成"overflow:hidden;"*/    
  
　　　　　clear:both;   
  
　　　　　}

這種方法有個(gè)好處，即可以將其寫入reset中，之后可以多次調(diào)用。

看完上述內(nèi)容，你們對(duì)對(duì)于一些css樣式的巧妙方法進(jìn)行總結(jié)(推薦)有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手