今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助。

  box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题。CSS中的盒模型(Box model)分为两派,一派是W3C的标准模型,一派是IE的传统模型。那它们之间有什么不同的呢?首先需要明确它们都是对元素计算尺寸的模型,具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系;而不同的地方就在于两者的计算方法不一至:(下面引用一些公式向大家展示一下两者的不同之处)

W3C的标准盒模型

IE传统盒模型(IE6以下不含IE6版本或“QuirksMode下IE5.5+”

  接下来直接看看box-sizing的应用吧。

box-sizing属性可以分为两个值:content-box(default),border-box。

content-box,border和padding不计算入width之内

border-box,border和padding计算入width之内

(注1:ie8+浏览器支持content-box和border-box;ff则支持全部三个值)

(注2:使用时,有些浏览器还是需要加上自己的前缀,Mozilla需要加上-moz-,Webkit内核需要加上-webkit-,Presto内核-o-,IE8-ms-)

栗子,接住:

<style type="text/css">
.content-box{
  -webkit-box-sizing:content-box;
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px solid #E6A43F;
  background: blue;
}
.border-box{
  -webkit-box-sizing:border-box;
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px solid #3DA3EF;
  background: yellow;
}
</style>

我是在谷歌下运行的,所以加了-webkit-前缀,效果如下:

蓝色加边框:总宽150px,高150px

黄色加边框:总宽100px,高100px

通过这一栗子,相信大家弄清楚了这两个。与刚才给大家提及的两派盒子模型联系看看,总结得出:content-box相当于W3C下的模式,而border-box则为传统IE下的模式了。这样大家就可以解决一些布局上的难题了吧。当然,box-sizing的更多实际运用,在这里就不多说了,在次抛砖而已,献上。

CSS中box-sizing属性的理解与部分用法的更多相关文章

  1. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  2. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

  3. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  4. css中的定位属性position(转)

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  5. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  6. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  7. CSS中的display属性

    CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...

  8. 举例详解CSS中的cursor属性

    这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...

  9. css中的列表属性

    list-style-type设定引导列表的符号类型,可以设置多种符号类型,值为disc.circle.square等 list-style-image使用图像作为定制列表的符号 list-style ...

  10. CSS中的!important属性用法

    关于CSS的运用技巧有很多, 今天主要探讨一下CSS中 !important 这个属性的用法.在CSS的使用中,遇到最多的问题就是不同浏览器之间的兼容问题. 由于IE并不严格执行W3C标准, 而又几乎 ...

随机推荐

  1. 转!!windows记事本保存“联通” 编码问题

    原博文网址:http://blog.csdn.net/Zhiyuan_Ma/article/details/51838054 简单分析: 这是微软记事本的一个BUG,准确点就是unicode编码的问题 ...

  2. 【LeetCode】Hamming Distance

    问题网址 https://leetcode.com/problems/hamming-distance/ 就是一个异或后,求1的位数的问题. 看到问题之后,首先困扰是: int能不能求异或?是不是要转 ...

  3. [原创] Easy SysLite V1.2 (2016.5.29更新,新增加WIN10支持,一个程序适配所有系统减肥)

    [原创] Easy SysLite V1.2 (2016.5.29更新,新增加WIN10支持,一个程序适配所有系统减肥) nohacks 发表于 2016-5-29 17:12:51 https:// ...

  4. JQuery筛选器全系列介绍

    jQuery提供了强大的选择器让我们获取对象.在这边,我人为地将jQuery选择器分为两大部分:选择对象和筛选条件.选择对象表示要获取什么对象,筛选条件是对获取的对象进行筛选,最终留下符合某些特征的对 ...

  5. mmorpg手游中的战斗系统

    目前的项目是一款mmorpg手游, 非常不幸的是,当前战斗系统的实现非常脆弱, 也毫无技巧可言.具体存在如下问题: 1.战斗层逻辑与自动战斗AI逻辑混在一起, 互相纠缠. 2.战斗层自身逻辑混乱不堪, ...

  6. testlink部署与迁移

    几个特殊的文件: 1.D:\xampp\htdocs\testlink\config.inc  安装配置文件,此处需要修改安装目录(g_repositoryPath.log_path) 2.D:\xa ...

  7. org.apache.catalina.webresources.Cache.getResource Unable to add the resource

    org.apache.catalina.webresources.Cache.getResource Unable to add the resource at xxx to the cache be ...

  8. BZOJ1828 [Usaco2010 Mar]balloc 农场分配

    直接贪心,我们把线段按照右端点从小到大排序,然后一个个尝试插入即可... 来证明贪心的正确性: 不妨设贪心得到的答案集合为$S$,最优解的答案集合为$T$ 若$S$不是最优解,那么$S \not= T ...

  9. js localStorage 设置和取值

    定义 Storage 对象,对象有get(取值), set(设置), add(加入新值)三个方法 const Storage = {} Storage.get = function (name) { ...

  10. 作业调度框架 Quartz 学习笔记(三) -- Cron表达式 (转载)

    前面两篇说的是简单的触发器(SimpleTrigger) , SimpleTrigger 只能处理简单的事件出发,如果想灵活的进行任务的触发,就要请出 CronTrigger 这个重要人物了. Cro ...