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属性

目录
相关文章
|
4天前
|
前端开发
如何将一个盒子模型变成border-box?
如何将一个盒子模型变成border-box?
11 0
|
4天前
|
前端开发
CSS:为什么看起来content-box更合理,但还是经常使用border-box?
CSS:为什么看起来content-box更合理,但还是经常使用border-box?
25 2
|
4天前
|
前端开发
对box-sizing的了解
对box-sizing的了解
11 0
|
4天前
|
前端开发
box-sizing: border-box;
box-sizing: border-box;
22 0
|
6月前
|
前端开发 容器
box—sizing 属性的了解
box—sizing 属性的了解
30 0
|
6月前
|
前端开发
CSS3 box-shadow 属性
CSS3 box-shadow 属性
33 0
|
6月前
|
前端开发
css中对 box—sizing 属性的了解
css中对 box—sizing 属性的了解
34 0
|
9月前
CSS3 box-sizing 简单案例
CSS3 box-sizing 简单案例
26 1
|
前端开发 开发者
怪异盒模型border-box真的“一无是处”吗?
虽然w3c制定了标准盒模型,但在 `box-sizing` 属性中却还是保留了怪异盒模型,可能就是希望开发者在不同的场景中适当地运用,前提是如何理解它。
|
前端开发
CSS - box-sizing
CSS - box-sizing
81 0