溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關對于一些css樣式的巧妙方法進行總結(推薦)，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
一、塊元素水平垂直居中
對于一個塊元素的水平垂直居中，水平居中的方式不必多說，一般用margin:auto;等方法即可實現。而對于垂直居中，盡管有vertical-align:middle屬性，但是由于其只適用于table標簽中，而table標簽效果不好控制的特點大家都懂。。。因此，我們一般常用的方法是：將子級元素設定inline-block屬性，并將其行高屬性：line-height的值設定為與父級元素相同的高度。
html方面：
XML/HTML Code復制內容到剪貼板
<body> <div class="big"> <div class="small"></div> </div> </body>
css方面：
CSS Code復制內容到剪貼板
.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偽類寫一個浮動屬性，這樣只要有需要清楚浮動的地方，我們就給其父元素加上這樣一個浮動屬性就可以了。
代碼如下：
JavaScript Code復制內容到剪貼板
.clearfix:after{
content:"";
display:table; /*利用table不允許浮動的屬性來清除浮動。也可以替換成"overflow:hidden;"*/
clear:both;
}這種方法有個好處，即可以將其寫入reset中，之后可以多次調用。
看完上述內容，你們對對于一些css樣式的巧妙方法進行總結(推薦)有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
