資訊專欄INFORMATION COLUMN
摘要：自定義屬性變量屬性允許我們在元素的總寬度和高度中包含填充和邊框。屬性解決了這個問題。下面的代碼確保以更直觀的方式調(diào)整所有元素的大小。將其應(yīng)用于所有元素是安全和明智的大小調(diào)整屬性定義如何計算元素的寬度和高度是否應(yīng)該包含填充和邊框
CSS自定義屬性（變量）
CSS box-sizing屬性允許我們在元素的總寬度和高度中包含填充和邊框。
沒有CSS box-sizing屬性默認(rèn)情況下，元素的寬度和高度計算如下： width + padding + border =元素的實際寬度 height + padding + border =元素的實際高度 這意味著：當(dāng)您設(shè)置元素的寬度/高度時，元素通?？雌饋肀饶O(shè)置的大（因為元素的邊框和填充被添加到元素的指定寬度/高度）。 下圖顯示了兩個具有相同指定寬度和高度的
ccs
這個div更小(寬度為300px，高度為100px)。
這個div更大(寬度也是300px，高度也是100px)。
box-sizing屬性解決了這個問題。
使用CSS box-sizing屬性box-sizing屬性允許我們在元素的總寬度和高度中包含填充和邊框。如果box-sizing: border-box;在元素填充上設(shè)置并且邊框包含在寬度和高度中：
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
在線體驗一下
由于使用它的結(jié)果box-sizing: border-box;非常好，許多開發(fā)人員希望他們頁面上的所有元素都以這種方式工作。下面的代碼確保以更直觀的方式調(diào)整所有元素的大小。許多瀏覽器已經(jīng)box-sizing: border-box;用于許多表單元素（但不是全部 - 這就是輸入和文本區(qū)域在寬度上看起來不同的原因：100％;）。將其應(yīng)用于所有元素是安全和明智的：
* {
box-sizing: border-box;
}
CSS Box大小調(diào)整屬性
box-sizing 定義如何計算元素的寬度和高度:是否應(yīng)該包含填充和邊框
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106228.html
摘要：自定義屬性變量屬性允許我們在元素的總寬度和高度中包含填充和邊框。屬性解決了這個問題。下面的代碼確保以更直觀的方式調(diào)整所有元素的大小。將其應(yīng)用于所有元素是安全和明智的大小調(diào)整屬性定義如何計算元素的寬度和高度是否應(yīng)該包含填充和邊框 CSS自定義屬性（變量） CSS box-sizing屬性允許我們在元素的總寬度和高度中包含填充和邊框。 沒有CSS box-sizing屬性 默認(rèn)情況下，元素...
摘要：盒子模型就是在網(wǎng)頁設(shè)計中經(jīng)常用到的技術(shù)所使用的一種思維模型。盒子模型是中一個重要的概念，理解了盒子模型才能更好的排版。標(biāo)準(zhǔn)盒子模型從上圖可以看到標(biāo)準(zhǔn)盒子模型的范圍包括，并且部分不包含其他部分。 概述 網(wǎng)頁設(shè)計中常聽的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模型都具備這些屬性，也主要是這些屬性。 這些屬性我們可以把它...
摘要：使用進(jìn)行布局彈性布局的出現(xiàn)是有原因的。對于大型項目使用預(yù)處理器你一定聽說過它們。預(yù)處理器是的未來。舉個簡單的例子，下面是一個代碼的片段，它使用到了一些變量和函數(shù)預(yù)處理器的唯一的不足之處是它們?nèi)稳恍枰幾g 在本文中，我們想與您分享一個由各大CSS網(wǎng)站總結(jié)推薦的20個有用的規(guī)則和實踐經(jīng)驗集合。有一些是面向CSS初學(xué)者的，有一些知識點是進(jìn)階型的。希望每個人通過這篇文章都能學(xué)到對自己有用的知識...
閱讀 2351·2021-11-24 10:27
閱讀 3592·2019-08-30 15:55
閱讀 3354·2019-08-30 15:53
閱讀 2354·2019-08-29 17:27
閱讀 1444·2019-08-26 13:47
閱讀 3558·2019-08-26 10:28
閱讀 926·2019-08-23 15:59
閱讀 2870·2019-08-23 15:19
