box-sizing属性

简介: box-sizing属性

box-sizing属性中有三个属性值,分别是cocontentnten-box,border-box,infinite.

border-box  是css3新增。 widthheight属性包括内容,内边距和边框,但不包括外边距

他的计算公式是

  1. width = border + padding + 内容宽度
  2. height = border + padding + 内容高度

他的实际引用方式

 
 
 
box-sizing:border-box;

content-box   width和height属性只包括于内容,与内边距和边框以及外边距无关。

他的计算公式是

1,width=内容宽度

2,height=内容高度

他的实际引用方式

 
 
 
box-sizing:content-box;
 
 
 

第三个值是infinite,他的意思是继承父元素的box-sizing属性

目录
相关文章
|
2月前
|
前端开发 容器
box—sizing 属性的了解
box—sizing 属性的了解
67 0
|
2月前
|
前端开发
box-sizing属性
box-sizing属性
31 0
|
3月前
box-sizing属性值
box-sizing属性值。
30 13
|
3月前
|
机器学习/深度学习 计算机视觉 索引
bounding box
【9月更文挑战第14天】
31 3
|
2月前
|
前端开发
content-box和border-box是什么?
content-box和border-box是什么?
138 0
|
3月前
box-shadow属性
box-shadow属性。
140 8
|
6月前
|
前端开发
CSS中的边框属性:border、border-width、border-color、border-style 详解
CSS中的边框属性:border、border-width、border-color、border-style 详解
521 44
|
7月前
|
前端开发
CSS:为什么看起来content-box更合理,但还是经常使用border-box?
CSS:为什么看起来content-box更合理,但还是经常使用border-box?
141 2
|
7月前
|
前端开发
如何将一个盒子模型变成border-box?
如何将一个盒子模型变成border-box?
42 0
|
7月前
|
前端开发
对box-sizing的了解
对box-sizing的了解
91 0