在标准盒模型下设置的width和height只是内容的宽和高,但在设置了宽和高的情况下若还要设置border、margin、padding等时,会发生溢出的现象,因此需要将盒模型更改。

box-sizing 属性用来改变默认的 CSS 盒模型对元素宽高的计算方式。这个属性可以用于模拟那些非正确支持标准盒模型的浏览器的表现。

1、值

  • content-box

  默认值,标准盒模型。 width 与 height 只包括内容的宽和高, 不包括边框(border),内边距(padding),外边距(margin)。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;

  尺寸计算公式:width = 内容的宽度,height = 内容的高度。宽度和高度都不包含内容的边框(border)和内边距(padding)。

  • border-box (其实box-sizing:border-box就是采用怪异模式下的盒模型来计算宽和高的)。

  width 与 height 包括内边距(padding)与边框(border),不包括外边距(margin)。这是IE 怪异模式(Quirks mode)使用的 盒模型 。注意:这个时候外边距和边框将会包括在盒子中。比如  .box {width: 350px; border: 10px solid black;} 浏览器渲染出的宽度将是350px. 如果计算后的最内部的内容宽度为负值,都会被计算成0,内容还在,所以不可能通过border-box来隐藏元素。

  尺寸计算公式:width = border + padding + 内容的宽度,height = border + padding + 内容的高度。

2、浏览器支持情况

  支持目前的所有Firefox, Chrome, Safari, Opera版本的浏览器以及 IE8+以上的IE浏览器

没有被广泛采用的box-sizing属性的更多相关文章

  1. Objective-C中变量采用@property的各个属性值的含义

    我们在OC中定义变量,可以自己来定义变量的setter方法来设置变量值,用getter方法来获取变量值.但是当变量数量增多时,还采用手动添加setter/getter方法来操作变量,就会使得程序代码量 ...

  2. css display:box 新属性

    一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性 前提:使用如下属性,必须在父代设置displ ...

  3. CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  4. Box Model,边距折叠,内联和块标签,CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

  5. CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  6. 移动端布局,C3新增属性

    <html5拖拽> 1.给元素设置 draggable="true" 属性,这个元素就可以被拖拽了 <拖拽元素事件> 2.ondragstart 拖拽前触发 ...

  7. CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins

    前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...

  8. 重新认识Box Model、IFC、BFC和Collapsing margins

    尊重原创,转载自: http://www.cnblogs.com/fsjohnhuang/p/5259121.html 肥子John^_^ 前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了I ...

  9. CSS部分属性的深入学习

    先上个张鑫旭大神的政治课,来个一棒打醒(手动滑稽): 说说CSS学习中的瓶颈: 虽然自己水平不高,但是对于重构这方面工作一直不怎么喜欢,可能觉得比较没有新意,但是看了大神文章突然有点一棍打醒的感觉,突 ...

  10. CSS Display属性与盒模型

    由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box ...

随机推荐

  1. 洛谷P4413 [COCI2006-2007#2] R2(可持久化平衡树维护NTT)

    题意翻译 设S=(R1+R2)/2,给定R1与S (-1000<=R1,S<=1000)(−1000<=R1,S<=1000) ,求R2. 感谢@Xeonacid 提供的翻译 ...

  2. 打开word2010每次都要配置进度的解决办法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 不小心把ms office2010搞坏了,于是重装ms office2010,结果一打开word文档时总是出现下面的对 ...

  3. Walking on the path of Redis --- Data structure

    废话开篇 相比于其他内存数据库,Redis最大的特点就是拥有丰富的数据结构, 经常被称为Date Structure Server.Redis支持的数据结构包含strings, hashes, lis ...

  4. Windows各种计时器

    (一):OnTimer类 1.打开对应对话框的类向导ClassWizard. 2.在消息映射MessageMaps中添加消息Message:WM_TIMER. 3.程序代码中将自动添加函数OnTime ...

  5. bzoj 1293: [SCOI2009]生日礼物 问题转化 + 性质分析 + 滚动数组优化

    Description 小西有一条很长的彩带,彩带上挂着各式各样的彩珠.已知彩珠有N个,分为K种.简单的说,可以将彩带考虑为x轴,每一个彩珠有一个对应的坐标(即位置).某些坐标上可以没有彩珠,但多个彩 ...

  6. lsync 负载实现代码双向同步

    参考文件: https://www.zyku.net/centos/1713.html 检查错误命令: lsyncd -pidfile /tmp/lsyncd.pid  /etc/lsyncd.con ...

  7. Python数据结构1-----基本数据结构和collections系列

    1.基本数据结构 整型.浮点型.字符串.元祖.列表.字典.集合 2.高级数据结构 (collections模块) (1)计数器(counter):对字典的补充,用于追踪值的出现次数. [具备字典所有的 ...

  8. Project Euler 14 Longest Collatz sequence

    题意:对于任意一个数 N ,寻找在 100,0000 之内按照规则( N 为奇数 N = N * 3 + 1 ,N 为偶数 N = N / 2 ,直到 N = 1 时的步数 )步数的最大值 思路:记忆 ...

  9. POJ 1061 青蛙的约会( 拓欧经典题 )

    链接:传送门 思路:简单拓展欧几里德,分析后可以得到方程 x + m * t = y + n * t + L * s( s控制圈数,t代表跳t次会碰面 ),经过化简可以得到 ( n - m ) * t ...

  10. C#通过SendMessage发送消息,改变其他程序的下拉框控件(ComboBox)的值

    IntPtr cbh= new IntPtr(handle); //ComboBox的句柄 SendMessage(cbh, 0x014D, new IntPtr(-1), "需要选中的下拉 ...