在标准盒模型下设置的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. listview 控件

    private void Form1_Load(object sender, EventArgs e) { //设置该listview关联的imagelist listView1.LargeImage ...

  2. RAP、Mock.js、Vue.js、Webpack

    最近做项目使用的是RAP1的接口,但是昨天开始,RAP1 出现了问题,接口都不能用了. 所以补充一下Mock.js的用法,以便在这种突发的情况时候时自己通过Mock的方式来处理接口. npm init ...

  3. hdu3873 Invade the Mars 有限制的最短路

    此段略过.看完题目,觉得这真的是一道好题目.自己有想法,但是实现起来却很难.看题解,写代码,然后写题解,意义何在?我不认为自己总是这么弱.就算抄代码,我也要有自己的理解.菜鸟总会成长. 首先,题目必须 ...

  4. java中参数传递实例

    //在函数中传递基本数据类型,            2. public class Test {         4.     public static void change(int i, in ...

  5. 时间&物质&效率

    由于我的家庭是地道的农民家庭,在上学的时候,父母很辛苦的供我读初中,高中,大学. 现在我想说的是,用时间来换取效率是我求学时最大的遗憾. 举一个例子吧:每次回家坐火车,火车很费时间,假如我不缺钱,完全 ...

  6. 完整安装sqlserver always on集群

    准备工作 1.  四台已安装windows server 2008 r2 系统的虚拟机,配置如下: CPU : 1核 MEMORY : 2GB DISK : 40GB(未分区) NetAdapter ...

  7. Junit使用第二弹

    实例总结 1. 参数化测试 有时一个测试方法,不同的参数值会产生不同的结果,那么我们为了测试全面,会把多个参数值都写出来并一一断言测试,这样有时难免费时费力,这是我们便可以采用参数化测试来解决这个问题 ...

  8. VS命令行的使用

    CD 命令是改变当前路径,但是它不会改变当前盘符,改变盘符要输入 [盘符]: 命令. 如下: Setting environment for using Microsoft Visual Studio ...

  9. QT线程使用收集示例

    关于多线程问题: Qt和Boost做跨平台的线程封装,OpenMP主要做并行计算,让不精通多线程的人也能高效地利用CPU的计算能力.个人倾向于用boost.thread, boost.mpi.   一 ...

  10. Ubuntu 18.04 安装 Xfce桌面和VNC的方法

    首先安装Xfce4桌面环境.Xfce4是在Unix和Unix-like(Linux, FreeBSD)上运行的开源桌面环境,其特点是快速,轻量,同时拥有美观的交互界面,易于使用. Xfce4的安装十分 ...