不知道有多少老前端像我这样，在项目中很少使用box-sizing这个属性值。因为CSS2.1中只有content-box这一种盒子模式，在CSS3还没有流行的时候，大家在工作中大量基于这种盒子模式写CSS样式，导致很多老前端即使是现在也默认使用content-box这种模式，很少手动写box-sizing属性声明border-box盒子模式。最近在工作中发现，合理使用border-box确实可以提升开发速度。下面介绍一种工作中遇到的使用border-box的地方。

　　一个单页应用，我们的公共样式把页面的body背景色给设定好了，其中有一个页面需要另一种背景色，而且要全部覆盖整个浏览器视窗。自然的，我们先把width和height声明为100%。但设计图里的页面与浏览器视窗四周都有10px的边距，无论是设置margin还是padding，都会在浏览器里出现滚动条。这是因为子元素的width和height的百分比是基于父元素的content计算的，在content-box模式下，导致子元素的盒子整体尺寸超过了父元素，所以出现了滚动条。以前，因为自己习惯用content-box，所以用CSS表达式calc(100% - 20px)来hack掉。但若大量使用CSS表达式会影响页面性能的。因此，这个时候使用border-box就是一个很好的选择。子元素的width值已经包含了padding值，所以设置padding不会导致滚动条的出现。

参考: css样式的百分比都相对于谁？

不要放弃使用border-box的更多相关文章

  1. CSS魔法堂：重拾Border之——不仅仅是圆角

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  2. CSS魔法堂：重拾Border之——图片作边框

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  3. CSS魔法堂：重拾Border之——解构Border

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  4. CSS魔法堂：小结一下Box Model与Positioning Scheme

    前言  对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考.  <CSS魔法堂:重新认识Box Model.IFC.B ...

  5. CSS 框模型( Box module )

    框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...

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

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

  7. CSS3 笔记一（Rounded Corners/Border Images/Backgrounds）

    CSS3 Rounded Corners The border-radius property is a shorthand property for setting the four border- ...

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

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

  9. BFC(Box,Formatting,Context) —— 块级格式化上下文

    Box:CSS布局的基本单位 Formatting context是页面中的一块渲染区域,最常见的是BFC和IFC,CSS3增加了GFC和FFC BFC定义:块级格式化上下文,它是一个独立的渲染区域, ...

  10. KB006: CSS 框模型( Box module )

    框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...

随机推荐

  1. ECMall 25个 数据库表 说明文档

    ecm_acategory //文章分类表 字段 类型 Null 默认 注释 cate_id int(10) 否   自增ID号,分类ID号 cate_name varchar(100) 否   分类 ...

  2. 2016最热门的PHP框架（一共五款）

    摘要: 兄弟连IT教育作为全国最大的PHP培训机构,迄今已有10年的教育历史.6大特色课程:PHP编程.安卓培训.JAVAEE+大数据.UI设计.HTML5培训.云计算架构师,在目前IT市场特别火,每 ...

  3. jquery如何实现表单post方式提交

    jquery如何实现表单post方式提交 一.总结 一句话总结:即使js给form对象提供了submit()方法,那也不意为表单中可以不写提交按钮这个元素,即form表单依然需要五脏俱全才可以使用js ...

  4. Kinect开发笔记之三Kinect开发环境配置具体解释

            0.前言:        首先说一下我的开发环境,Visual Studio是2013的,系统是win8的64位版本号,SDK是Kinect for windows SDK 1.8版本 ...

  5. workerman-chat（PHP开发的基于Websocket协议的聊天室框架）（thinkphp也是支持socket聊天的）

    workerman-chat(PHP开发的基于Websocket协议的聊天室框架)(thinkphp也是支持socket聊天的) 一.总结 1.下面链接里面还有一个来聊的php聊天室源码可以学习 2. ...

  6. POJ 2785 4 Values whose Sum is 0 Hash！

    http://poj.org/problem?id=2785 题目大意: 给你四个数组a,b,c,d求满足a+b+c+d=0的个数 其中a,b,c,d可能高达2^28 思路: 嗯,没错,和上次的 HD ...

  7. NoSql中的B-tree、B+tree和LSM-tree 分类： B7_HBASE 2015-03-15 18:27 85人阅读 评论(0) 收藏

    总结: 1.B+树将数据完全排序,读数据时很快,但当要修改数据时,就需要将新入数据下面的数据重新排位,特别是当写入的数据排在较高的位置时,需要大量的移位操作才能完成写入. 2.SLM牺牲部分的读性能, ...

  8. ORACLE PL/SQL 中序列(sequence)的简易使用方法介绍

    如果我是C罗 原文 ORACLE PL/SQL 中序列(sequence)的简易使用方法介绍 sequence在ORACLE中应用十分广泛,就是序列号的意思,会自动增加指定变数,如逐次增加1或者2或者 ...

  9. Apache+tomcat的整合 分类： C_OHTERS 2014-05-07 15:08 293人阅读 评论(0) 收藏

    http://blog.csdn.net/stefyue/article/details/6918542 为什么要做这个整合呢?当然,首先想到是就是Apache和Tomcat的区别.正因为有区别,有各 ...

  10. jquery 多选框 checkbox 获取选中的框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...