CSS3 框大小(box-sizing)

使用CSS3框大小調整功能，您可以指定元素的有效寬度。

使用框大小(box-sizing)重新定義框寬度

默認情況下，元素的盒子可見/呈現在網頁上的實際寬度或高度依賴于它width或height，padding和border屬性值。例如，如果您對一個寬度為100%的

元素應用了一些內邊距和邊框，那么水平滾動條就會出現，如下面的示例所示。

示例.box?{

width:?100%;

padding:?20px;

border:?5px?solid?#f08080;

}測試看看?/?

這是Web設計人員長期面臨的非常普遍的問題。但是，CSS3引入了box-sizing屬性來解決此問題，并使CSS布局更加簡單直觀。該box-sizing屬性以如下方式更改默認CSS框模型，即將元素上的任何元素padding或border指定的元素布局并繪制在內容區域內，以使元素的渲染寬度和高度等于指定的CSS width和height屬性。

示例.box?{

width:?100%;

padding:?20px;

border:?5px?solid?#f08080;

box-sizing:?border-box;

}測試看看?/?

如果看到此示例的輸出，則會發現滾動條已消失。

注意：使用CSS box-sizing屬性時，通過從指定的width和height屬性中減去各邊的邊框和填充寬度，可以計算出內容區域的寬度和高度。

使用Box-Sizing創建布局

通過CSS box-sizing屬性，使用百分比創建多列布局變得非常簡單。現在，您不必擔心元素框的最終大小，而無需在其上添加邊框或邊框。

下面的示例將創建一個兩列布局，其中每列具有相等的寬度，并使用float屬性并排放置。

示例.box?{

width:?50%;

padding:?20px;

background:?#f2f2f2;

float:?left;

box-sizing:?border-box;

}測試看看?/?

同樣，您可以使用此簡單技術創建更復雜的布局。

示例.box?{

width:?30%;

padding:?20px;

margin-left:?5%;

background:?#f2f2f2;

float:?left;

box-sizing:?border-box;

}

.box:first-child?{

margin-left:?0;

}測試看看?/?

總結

以上是生活随笔為你收集整理的html边框大一点,CSS3 框大小(box-sizing)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。