CSS盒屬性如何使用

這篇文章主要介紹“CSS盒屬性如何使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS盒屬性如何使用”文章能幫助大家解決問題。

一、塊級元素在容器中的居中問題：

我們都知道，塊級元素在默認情況下是占據容器整行的寬度的。如果對塊級元素設置了width和height屬性，又希望塊級元素在容器內部水平居中，需要如何設置呢？

這里盒屬性為我們提供了下列技巧：

將塊級元素的左邊界設置為auto，右邊界設置為auto即可實現塊級元素在容器中的居中。

代碼格式如下所示：

格式1：element{margin-left:auto;margin-right:auto;}

格式2：element{margin:0 auto;}

例1：設置一個塊級元素，id屬性取值為box。將其寬度和高度設置為200像素，背景顏色設置為紅色，讓它在頁面中水平居中。

<div id=”box”></div>

#box{

width:200px; height:200px;

background-color:#ff5857;

margin:0 auto;

}

二、絕對定位的塊級元素在頁面中水平垂直居中：

當一個塊級元素設置了絕對定位后，希望這個塊級元素出現在頁面的正中心。由于不同的顯示器分辨率不同，如果要適配各種顯示器，就需要將相應的位置屬性設置為50%。

如果將絕對定位后的塊級元素的left和top屬性均設置為50%，則塊級元素的左上角位置將會出現在頁面的正中心。我們當然是希望塊級元素的中心出現在頁面的正中心，這又該如何解決呢？

解決方案1：這里盒屬性為我們提供了下列技巧。

將塊級元素的左邊界調整為塊級元素寬度的一半，并設置為負值，將上邊界設置為塊級元素高度的一半，也設置為負值。

例2：設置一個塊級元素，id屬性取值為box。將其寬度設置為400像素，高度設置為600像素，背景顏色設置為紅色，讓它在頁面的正中心出現。

<div id=”#box”></div>

#box{

width:400px; height:600px;

background-color: #ff5857;

position:absolute;

left:50%; top:50%;

margin-left: -200px;

margin-top: -300px;

}

解決方案2：這里盒屬性還為我們提供了第二種技巧。

將塊級元素的四個方向的位置屬性均設置為0，將其margin屬性設置為auto。

上述例2的CSS代碼改為下列格式：

#box{

width:400px; height:600px;

background-color: #ff5857;

position:absolute;

left:0;top:0;right:0;bottom:0;

margin:auto;

}

三、去掉所有HTML元素的邊界和填充值：

在頁面設置，尤其是移動端開發時，有時需要將HTML中所有元素的邊界和填充值全部去掉。這就需要在頁面鏈接的CSS文件的第一行書寫下列語句：

*{margin:0;padding:0}

其中*代表CSS中的通配選擇器，表示HTML中的所有元素。

當然，這樣的操作也會影響本身就需要具備邊界的標記對，例如<p></p>標記對。這就需要再為<p></p>標記對重新設置邊界值。

這樣一來，整體的代碼如下所示：

*{margin:0;padding:0}

p{margin:10px 0;}

四、去掉無序列表左側為項目符號留出的位置：

在設計時，如果需要將無序列表左側的項目符號去掉，可以使用list-style-type屬性，將該屬性取值為none就可以去掉左側的項目符號。但是我們也同時會發現，使用了這個屬性之后，項目符號沒有了，但是項目符號的位置依然存在。所有的列表項并沒有因為項目符號的消失而成功的移動到項目符號原有的位置處。

這里盒屬性為我們提供了下列技巧：

將無序列表的margin-left設置為負值即可調整列表項向左側位置處顯示。一般系統為無序列表的項目符號預留的是40像素的位置，因此將margin-left屬性設置為-40像素即可。

ul{

list-style-type:none;

margin-left:-40px;

}

這種用法當然也適用于有序列表<ol></ol>標記對。

關于“CSS盒屬性如何使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。