css3系列之box-sizing

box-sizing

box-sizing: 俗称ie6 的混杂模式的盒子模型。 首先来了解一下 ie6 的混杂模式和我们常用盒子模型有什不一样

正常模式下: 我们设置的 width 和 height 就是盒子的 colinux系统安装ntent 区的大小但是在 ie6 的混杂模式下,设置的 width 和 height 就是盒子的整体 width height。

ie6 的混杂模型呢,你设置的 宽, 和 高,就是盒子的大小的最终宽高, 并不会因为你添加了计算二级成绩查询 padding 和 border 而改变


                                            css3系列之box-sizing

要用 混杂模式渲染的 元素, 就添加上, box-sizing:border-box 即可。

box-sizing:

  参数: content-box (默认值,也就是 我们正常模式)

      border-box (ie6 的混杂模式)

为啥叫 ie6的混杂模式呢计算二级? 因为他确实跟 ie 有关, 在以前 ie6 的渲染盒子模型,就是按照这个标准来渲染的。 到了后来,w3输入框跑到上面了怎么办c标准出来了之后就换成 正盒子模型的概念常模式了。 w3c 觉得,ie6 的这个渲染盒子的模式不错, 就跟ie 说,诶? 你这个模式不错,可以给我用用吗? ie 说,行啊。 然后就把他 添加到css3 里面去了。

说了这么多,这个模式,在什么场景下适用呢? 其实,我们在开发的过程中,会遇到一些需求, 就是你已经布局好了,但是又要加入padding 或者 border, 这个时候,一定会影响计算机整个的布linux操作系统基础知识局, 因为你的宽高linux操作系统基础知识什么的,都已经设置好了,再添加,就会挤出去。 这个时候,想添加上 padding 或者 padding 不影linux操作系统基础知识响原来的布局的话, 就可以用上了。 也不用刻意的去计算宽高 加上 padding 需要减多少。

下面举两个小例子:


                                            css3系列之box-sizing


                                            css3系列之box-sizing

像 上面这linux种,宽,或者 高不确定的情况下, 又要添加 padding 和 border, 又要保证布局不改变盒子模型都包括什么, 使用 box-sizing:border-box。 是很好的选择

有一情况, 比如产品经理告诉你说,添加一个 input 输入盒子模型有几种框 高30px,宽是300px, 文字要跟输入框的上下左右要有10px 的间隙,我们一般设置间隙吧,都是宽高比怎么算用padding实现的。

那么,我们一般拿到这个需求的时候一顿操作猛如虎:


                                            css3系列之box-sizing


                                            css3系列之box-sizing