不知道有多少老前端像我这样，在项目中很少使用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. amazeui学习笔记--css（布局相关3）--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

  2. flask的使用（一）

    1.程序基本的说明 #-*-encoding=utf--*- 从flask中引入类 from flask import Flask ,render_template import config 初始化 ...

  3. window.print()打印网页（一）

    有时候需要将网页内容打印到纸上,最简单的一种方法是用window对象的print方法. window.print()默认打印当前网页的所有部分.(除了背景,默认打印都是白底黑字,如果有特别的设置 要另 ...

  4. UVA 11859 - Division Game

    看题传送门 题目大意 有一个n * m的矩阵,每个元素均为2~10000之间的正整数,两个游戏者轮流操作.每次可选一行中的1个或者多个大于1的整数把它们中的每个数都变成它的某个真因子,比如12可以变成 ...

  5. 10.3、android输入系统_必备Linux编程知识_任意进程双向通信(scoketpair+binder)

    3. 任意进程间通信(socketpair_binder) 进程每执行一次open打开文件,都会在内核中有一个file结构体表示它: 对每一个进程在内核中都会有一个task_struct表示进程,这个 ...

  6. 转 OC温故:类的三大特性(封装，继承，多态)

    原文标题:OC学习篇之---类的三大特性(封装,继承,多态) 我们都知道,面向对象程序设计中的类有三大特性:继承,封装,多态,这个也是介绍类的时候,必须提到的话题,那么今天就来看一下OC中类的三大特性 ...

  7. Java 学习（19）：Java 多线程编程

    Java 多线程编程 Java 给多线程编程提供了内置的支持.一个多线程程序包含两个或多个能并发运行的部分.程序的每一部分都称作一个线程,并且每个线程定义了一个独立的执行路径. 多线程是多任务的一种特 ...

  8. js自动记忆用户名（可以设置cookie多存几天）

    js自动记忆用户名(可以设置cookie多存几天) 一.总结 1.记住密码:因为cookie是存在本地的,也可以多存几天,所以记住密码的操作只需要读取cookie,将其中的账号密码直接显示在输入框就好 ...

  9. idea+springboot+freemarker热部署（转）

    今天在学习springboot集成freemarker模板引擎修改代码时,发现每次修改一次freemarker文件时,都必须重启下应用,浏览器刷新才能显示修改后的内容,这样效率太低,每次启动一次应用都 ...

  10. 利用java反射将结果集封装成为对象和对象集合

    java反射机制是什么 反射机制是在运行状态中,可以知道任何一个类的属性和方法,并且调用类的属性和方法: 反射机制能够做什么 1.判断运行对象的所属类 2.构造任意一个类的对象 3.获取任意一个类的属 ...