不知道有多少老前端像我这样,在项目中很少使用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. FarPoint.Win.Spread 常规操作

    FarPoint.Win.Spread.FpSpread fSpread = new FarPoint.Win.Spread.FpSpread();             //设置 行数.列数    ...

  2. GOROOT,GOPATH,GOBIN,project

    GOROOT,GOPATH,GOBIN,project目录   我们接下来一个一个来看关于Go语言中的三个目录的详细解释先通过go env查看go的环境变量(我这里是mac的环境,所以可能和你的不同) ...

  3. TPS54232-------电源管理芯片

    TPS54232 DC DC开关稳压器 电源管理芯片 放大器俗称功放 注意看芯片的次序1~8是如何排布的,这个规律一般是固定的 也许我们整理多了就能发现引脚的宽度和长度都是规格好的. 下面是封装: 所 ...

  4. UVA 488 - Triangle Wave 水~

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  5. 微信小程序实现运动步数排行(可删除)

    wxml <!-- 向左滑动删除功能 --> <view class="item-box"> <view class="items" ...

  6. Java ThreadLocal Example(java中的ThreadLocal例子)

    Java ThreadLocal is used to create thread local variables. We know that all threads of an Object sha ...

  7. Python模块学习笔记— —random

    Python中的random模块用于生成随机数. random.random 函数原型 random.random() 生成一个范围在[0,1)的随机浮点数. import random print ...

  8. STL algorithm算法mov,move_backward(38)

    move原型: std::move template <class InputIterator, class OutputIterator> OutputIterator move (In ...

  9. 使用MongoDb连接数据库服务器

    链接MongoDb数据库服务器的字符串格式: mongodb://[username:password@]host1[:port1][,host2[:port2],...[,hostN[:portN] ...

  10. 使用wepy开发微信小程序商城第三篇:购物车(布局篇)

    使用wepy开发微信小程序商城 第三篇:购物车(布局篇) 前两篇如下: 使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 基于上两篇内容,开始 ...