位置：首頁(yè) > 軟件操作教程 > 編程開發(fā) > CSS > 問(wèn)題詳情

CSS3 方框大小調(diào)整box-sizing

提問(wèn)人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-19

    box-sizing屬性是CSS3中BOX屬性之、而且box-sizing屬性和box-model的關(guān)系非同一般。box-sizing屬性也遵循了盒子模型的原理，它允許以特定的方式定義匹配某個(gè)區(qū)域的特定元素。

    例如，需要并排放置兩個(gè)帶邊框的框，可將box-sizing設(shè)置為border-box。這樣瀏覽器呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中7語(yǔ)法如下：

    box-sizing: content-130x1 border- box | inherit:

    box-sizing的屬性可以是以下幾種：

    ?content-box：這是由CSS2.1規(guī)定的寬度和高度行為。寬度和高度分別應(yīng)用到元素的內(nèi)容框。 在寬度和高度之外，繪制元素的內(nèi)邊距和邊框。

    ?border-box：為元素設(shè)定的寬度和高度決定了元素的邊框盒。為元素指定的任何內(nèi)邊距和邊框 都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到 內(nèi)容的寬度和高度。

    ?inherit：規(guī)定應(yīng)從父元素繼承box-sizing屬性的值。

    下面主要介紹border-box值的用法。例如，在頁(yè)面中需要手動(dòng)畫出一個(gè)按鈕div ( 200*50 ), 在按鈕中間有一個(gè)圓形的div(30*30),現(xiàn)在要讓這個(gè)圓形的div在方形的按鈕上居中。按照傳統(tǒng)的做法，只能去設(shè)置圓形div的margin以達(dá)到讓其居中的目的，還要考慮到它的父級(jí)是否也有margin值，否則會(huì)產(chǎn)生外邊距合并的問(wèn)題。傳統(tǒng)的做法需要考慮的方面太多，不方便。

     其實(shí)；可以換一種思路，不對(duì)圓形div進(jìn)行操作，而是讓方形按鈕擁有內(nèi)邊距。可以使用box-sizing屬性設(shè)置內(nèi)邊距。

    【例題】使用box-sizing屬性

    代碼如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.btn{

width: 200px;

height: 50px;

border-radius: 10px;

background: #f46;

margin:10px;

position:relative;

}

.d2{

padding:10px 85px;

width: 30px;

height: 30px;

}

.circle{

width: 30px;

height: 30px;

border-radius: 15px;

background: #fff;

}

.c1{

top:10px;

left:85px;

position:absolute;

}

.d3{

box-sizing: border-box;

padding:10px 85px;

}

</style>

</head>

<body>

<div class="btn d1">

<div class="circle c1"></div>

</div>

<div class="btn d2">

<div></div>

</div>

<div class="btn d3">

<div></div>

</div>

</body>

</html>

image.png

繼續(xù)查找其他問(wèn)題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部