box-sizing 的作用

Pines_Cheng 發布于2019-04-23 11:54 / 458人閱讀

摘要：和被包含在定義的和之內。這是當文檔處于模式時使用的盒模型。注意，填充和邊框將在盒子內例如導致在瀏覽器中呈現的寬度為的盒子。文章乃參考轉載其他博客所得，僅供自己學習作筆記使用

box-sizing：content-box | border-box

content-box：

padding和border不被包含在定義的width和height之內。對象的實際寬度等于設置的width值和border、padding之和，即 ( Element width = width + border + padding )

此屬性表現為標準模式下的盒模型。

border-box：

padding和border被包含在定義的width和height之內。對象的實際寬度就等于設置的width值，即使定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width )

此屬性表現為怪異模式下的盒模型。

box-sizing 屬性可以被用來調整這些表現:

content-box? 是默認值。如果你設置一個元素的寬為100px，那么這個元素的內容區會有100px寬，并且任何邊框和內邊距的寬度都會被增加到最后繪制出來的元素寬度中。

border-box?告訴瀏覽器去理解你設置的邊框和內邊距的值是包含在width內的。也就是說，如果你將一個元素的width設為100px,那么這100px會包含其它的border和padding，內容區的實際寬度會是width減去border?+ padding的計算值。大多數情況下這使得我們更容易的去設定一個元素的寬高。

border-box??width?和?height?屬性包括內容，內邊距和邊框，但不包括外邊距。這是當文檔處于 Quirks模式時Internet Explorer使用的盒模型。注意，填充和邊框將在盒子內 , 例如,?.box {width: 350px; border: 10px solid black;}?導致在瀏覽器中呈現的寬度為350px的盒子。內容框不能為負，并且被分配到0，使得不可能使用border-box使元素消失。?

這里的維度計算為：?width = border + padding + 內容的? width，?height = border + padding + 內容的 height。

文章乃參考、轉載其他博客所得，僅供自己學習作筆記使用！！！

云服務器 GPU云服務器云端的作用域名的作用云計算的作用 php的作用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1336.html

讀《css世界》筆記（1）

摘要：流體布局下的寬度分離原則寬度分離原則就是將獨立占用一層標簽而利用流動性在內部自適應呈現。為了不影響之前的布局我們需要重新計算的寬度。但是不支持屬性還是需要手動計算值。使用不建議使用通配符設置盒模型。 css流體布局下的寬度分離原則寬度分離原則就是將width獨立占用一層標簽,而border、margin、padding利用流動性在內部自適應呈現。為什么要寬度分離分離是為了便于維護...

浠ラ箍 2019-08-30 15:56 評論0 收藏0
CSS 盒模型與box-sizing

摘要：一盒模型一個頁面由許多元素組成，而每一個元素都可以表示為一個矩形的盒子，盒模型正是描述這些矩形盒子的存在。外邊距區域用空白區域擴展邊框區域，以分開相鄰的元素。的開源框架就全局設置了，由此可見盒模型的是比較受歡迎的。一、盒模型一個web頁面由許多html元素組成，而每一個html元素都可以表示為一個矩形的盒子，CSS盒模型正是描述這些矩形盒子的存在。 MDN的描述： When laying...

番茄西紅柿 2019-04-23 13:42 評論0 收藏0
CSS3中的box-sizing

摘要：的作用了解完這兩種盒模型后，在介紹一下，他一共有種值，，。就是繼承父元素的值，這里不做介紹。比如我們想做一個內邊距，邊框為，最終包括邊框寬度為的，之前的做法是先算出內容寬。懂得如何運用box-sizing之前，必須需要了解一下常規盒模型和怪異盒模型（IE盒模型）。我們都知道盒模型從里到外主要包括：content，padding，border，margin。如下圖：showImg(...

RaoMeng 2019-08-30 15:53 評論0 收藏0