關於元素box-sizing屬性

時間 2019-11-18

標籤關於元素 box sizing 屬性简体版

原文原文鏈接

CSS解決border影響元素寬高的問題（box-sizing屬性）

問題

咱們在用 CSS 進行頁面佈局時，常常會給元素指定寬高。在沒有邊框時（border爲0）每每父元素的寬高是子元素寬高的和。可是在添加邊框寬度後若是不調整元素寬度，會致使佈局錯亂。css

例如咱們想要下面這樣的效果：

一個寬度爲 600px 的父元素下有三個 200px 的子元素。

能夠這樣實現：html

<body> <div class="container"> <div class="item one"></div> <div class="item two"></div> <div class="item three"></div> </div> </body>

.container{ width: 600px; height: 400px; display: flex; flex-wrap: wrap; background-color: blue; } .item{ width: 200px; height: 400px; } .one{ background-color: #bbb; } .two{ background-color: #777; } .three{ background-color: #444; }

可是若是添加邊框後：

.item{ width: 200px; height: 400px; border: 2px solid red; }

會出現這種狀況：

致使這種狀況出現的緣由就是 border 的寬度並不在元素的 200px 範圍內，當增長 border 後實際上元素的寬度變爲了 204px（200+2+2）。這樣父元素的寬度不夠就會致使子元素換行。markdown

解決方案

解決這種問題有兩種方案，第一種就是按照變化修改元素的寬高屬性。（固然不推薦，只有不懂css的新手纔會這麼幹。/* 雖然我原來這麼幹過 */）佈局

正確的解決方案就是修改 box-sizing 屬性。將 box-sizing 設置爲 border-box 便可。flex

.item{ width: 200px; height: 400px; border: 2px solid red; box-sizing: border-box; }

這樣就達到了咱們想要的效果，並且不須要修改元素寬高。
atom

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。