box sizing指定盒子模型

2021-10-07 05:48:35 字數 398 閱讀 5910

box-sizing有兩個值可指定為content-box,border-box,這樣我們計算盒子大小的方式發生了改變

分為兩種情況:

box-sizing:content-box盒子大小width+padding+border(這也是預設的)

box-sizing:border-box盒子大小為width

如果盒子模型我們改為box-sizing:border-box,那padding和border就不會撐大盒子了(前提是padding 和border不會超過width寬度)

改變盒子模型為盒子大小為width可以全域性:

*

box sizing盒子模型

正常盒模型 正常盒模型,是指塊元素box sizing屬性為content box的盒模型。一般在現代瀏覽器中使用的都是正常盒模型content box,它也是標準 w3c 盒子模型。正常盒模型的大小會以內容優先自動擴充套件,內部子元素超過父元素給定的大小,會將父元素撐大。怪異盒模型 怪異盒模型,是...

盒子模型及box sizing的理解

部落格 盒子模型 標準盒子模型和怪異 ie 盒模型 寬度 width content內容區寬度 width 高度 height 也是內容區的高度 width 盒子的大小 margin paading border width 兩個盒子的之間的padding值的計算 上面盒子的padding bott...

css 盒子模型 以及 box sizing屬性

在標準的盒子模型下,css中 width,padding以及border的關係 關於css中的width和padding以及border的關係。在css中,width和height指的是內容區域的寬度和高度,增加padding,border,和margin不會影響內容區域的尺寸,但是會增加元素框的總...