關於css box sizing的理解

2021-08-07 23:14:58 字數 268 閱讀 6689

在父元素設定了寬度後,如果兩個子元素設定浮動(float:left/right),佔滿父元素整個寬度(width:50%;),如果子元素加邊框或是內邊距(padding),會造成布局混亂,這時box-sizing的作用就體現出來了

box-sizing 屬性預設是 content-box,意思是 子元素如果加邊框和內邊距,是在子元素的寬度和高度之外繪製,所以造成實際寬度大於父元素了,所以布局會亂

box-sizing:border-box 在子元素寬度和高度內繪製,就不會改變影響整個寬度了

css box sizing 使用場景

1 content box 此值為其預設值,其讓元素維持w3c的標準box model,也就是說元素的寬度 高度 width height 等於元素邊框寬度 border 加上元素內邊距 padding 加上元素內容寬度 高度 content width height 即 element width...

每天乙個CSS(box sizing

content box 是指定box的 寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。示例一 設定div的外邊距為 5px,內邊距為 5px,邊框為 10px,寬為100px,高為100px,我們指定box sizing 為content box grid contain...

關於this 的使用

如有不對的地方請大家指出,呵呵.this 的使用 1.this是指當前物件自己。當在乙個類中要明確指出使用物件自己的的變數或函式時就應該加上this引用。如下面這個例子中 public class a public static void main string args 執行結果 s hellow...