CSS盒屬性如何使用
這篇文章主要介紹“CSS盒屬性如何使用”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“CSS盒屬性如何使用”文章能幫助大家解決問題。
我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站制作、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、壽寧ssl等。為上1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的壽寧網(wǎng)站制作公司
一、塊級(jí)元素在容器中的居中問題：
我們都知道，塊級(jí)元素在默認(rèn)情況下是占據(jù)容器整行的寬度的。如果對(duì)塊級(jí)元素設(shè)置了width和height屬性，又希望塊級(jí)元素在容器內(nèi)部水平居中，需要如何設(shè)置呢？
這里盒屬性為我們提供了下列技巧：
將塊級(jí)元素的左邊界設(shè)置為auto，右邊界設(shè)置為auto即可實(shí)現(xiàn)塊級(jí)元素在容器中的居中。
代碼格式如下所示：
格式1：element{margin-left:auto;margin-right:auto;}
格式2：element{margin:0 auto;}
例1：設(shè)置一個(gè)塊級(jí)元素，id屬性取值為box。將其寬度和高度設(shè)置為200像素，背景顏色設(shè)置為紅色，讓它在頁面中水平居中。
#box{
width:200px; height:200px;
background-color:#ff5857;
margin:0 auto;
}
二、絕對(duì)定位的塊級(jí)元素在頁面中水平垂直居中：
當(dāng)一個(gè)塊級(jí)元素設(shè)置了絕對(duì)定位后，希望這個(gè)塊級(jí)元素出現(xiàn)在頁面的正中心。由于不同的顯示器分辨率不同，如果要適配各種顯示器，就需要將相應(yīng)的位置屬性設(shè)置為50%。
如果將絕對(duì)定位后的塊級(jí)元素的left和top屬性均設(shè)置為50%，則塊級(jí)元素的左上角位置將會(huì)出現(xiàn)在頁面的正中心。我們當(dāng)然是希望塊級(jí)元素的中心出現(xiàn)在頁面的正中心，這又該如何解決呢？
解決方案1：這里盒屬性為我們提供了下列技巧。
將塊級(jí)元素的左邊界調(diào)整為塊級(jí)元素寬度的一半，并設(shè)置為負(fù)值，將上邊界設(shè)置為塊級(jí)元素高度的一半，也設(shè)置為負(fù)值。
例2：設(shè)置一個(gè)塊級(jí)元素，id屬性取值為box。將其寬度設(shè)置為400像素，高度設(shè)置為600像素，背景顏色設(shè)置為紅色，讓它在頁面的正中心出現(xiàn)。
#box{
width:400px; height:600px;
background-color: #ff5857;
position:absolute;
left:50%; top:50%;
margin-left: -200px;
margin-top: -300px;
}
解決方案2：這里盒屬性還為我們提供了第二種技巧。
將塊級(jí)元素的四個(gè)方向的位置屬性均設(shè)置為0，將其margin屬性設(shè)置為auto。
上述例2的CSS代碼改為下列格式：
#box{
width:400px; height:600px;
background-color: #ff5857;
position:absolute;
left:0;top:0;right:0;bottom:0;
margin:auto;
}
三、去掉所有HTML元素的邊界和填充值：
在頁面設(shè)置，尤其是移動(dòng)端開發(fā)時(shí)，有時(shí)需要將HTML中所有元素的邊界和填充值全部去掉。這就需要在頁面鏈接的CSS文件的第一行書寫下列語句：
*{margin:0;padding:0}
其中*代表CSS中的通配選擇器，表示HTML中的所有元素。
當(dāng)然，這樣的操作也會(huì)影響本身就需要具備邊界的標(biāo)記對(duì)，例如
標(biāo)記對(duì)。這就需要再為標(biāo)記對(duì)重新設(shè)置邊界值。這樣一來，整體的代碼如下所示：
*{margin:0;padding:0}
p{margin:10px 0;}
四、去掉無序列表左側(cè)為項(xiàng)目符號(hào)留出的位置：
在設(shè)計(jì)時(shí)，如果需要將無序列表左側(cè)的項(xiàng)目符號(hào)去掉，可以使用list-style-type屬性，將該屬性取值為none就可以去掉左側(cè)的項(xiàng)目符號(hào)。但是我們也同時(shí)會(huì)發(fā)現(xiàn)，使用了這個(gè)屬性之后，項(xiàng)目符號(hào)沒有了，但是項(xiàng)目符號(hào)的位置依然存在。所有的列表項(xiàng)并沒有因?yàn)轫?xiàng)目符號(hào)的消失而成功的移動(dòng)到項(xiàng)目符號(hào)原有的位置處。
這里盒屬性為我們提供了下列技巧：
將無序列表的margin-left設(shè)置為負(fù)值即可調(diào)整列表項(xiàng)向左側(cè)位置處顯示。一般系統(tǒng)為無序列表的項(xiàng)目符號(hào)預(yù)留的是40像素的位置，因此將margin-left屬性設(shè)置為-40像素即可。
ul{
list-style-type:none;
margin-left:-40px;
}
這種用法當(dāng)然也適用于有序列表
關(guān)于“CSS盒屬性如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
文章題目：CSS盒屬性如何使用
文章網(wǎng)址：http://m.jiaotiyi.com/article/pdhhdd.html