一般我们都认为border和padding都包含在width或height之内。

而现代标准的浏览器一般都认为width和height仅仅包含content,刨去了border和padding区域。

它有两个值可以取

1.content-box:width/height = border + padding + content

2.border-box: width/height = content

兼容性写法

.test{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}

CSS3实战之box-sizing的更多相关文章

  1. 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.

    笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...

  2. CSS3实战手册(第3版)(影印版)

    <CSS3实战手册(第3版)(影印版)> 基本信息 原书名:CSS3: The Missing Manual, 3E 作者: David Sawyer McFarland 出版社:东南大学 ...

  3. CSS3实战开发 表单发光特效实战开发

    首先,我们先准备好html代码: <!doctype html> <html> <head> <meta charset="utf-8"& ...

  4. CSS3实战开发:使用CSS3实现photoshop的过滤效果

    原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...

  5. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  6. CSS3实战开发: 折角效果实战开发

    <!DOCTYPE html> <html> <head> <meta charset="utf-9"> <meta name ...

  7. 160427、CSS3实战笔记--多列布局

    通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.—北京机械工业出版社2011.5   多列布局适合纯文字版式设计,如报纸内和杂志类网页布局,不适合做网页结构布 ...

  8. 【01】《响应式Web设计:HTML5和CSS3实战》

    [01]   (魔芋:已看完.) [01]<响应式Web设计:HTML5和CSS3实战>(全).pdf 共246页.   2013年1月出版.   读后感:适合入门的书籍,对于响应式布局, ...

  9. [原创]webapp/css3实战,制作一个《炉石传说》宣传页

    在移动网页,尤其是webapp中常需要用到大量的css3动画,来获得良好交互体验 我之前帮朋友做了一个,可惜没帮上忙现在和大家分享一下 目标是要做一个<炉石传说>游戏的介绍宣传页面,文字内 ...

  10. 推荐25个帮助你提高技能的 CSS3 实战教程

    使用 CSS,你能够以极高的效率和易用性创造出美丽的设计.而目前流行的 CSS3 技术更加强大,能够创造更多丰富的效果和功能,而不需要任何外部插件.今天,我为大家收集了25个很有用的 CSS 教程,技 ...

随机推荐

  1. 【奇奇怪怪的bug系列】微信小程序

    今天修改代码的时候,发现了一件让我很恐慌的事情,在app.json中修改页面路径顺序不起作用了: 这样我根本就看不到页面的效果啊??? 在折腾了半天后,才发现是一个比较乌龙的事情:昨天修改完首页后顺手 ...

  2. GDI+缩放图片

    uses WinAPI.GDIPAPI, WinAPI.GDIPOBJ; var  Bitmap1: TGPBitmap;  Bitmap2: TBitmap;  Graphic: TGPGraphi ...

  3. selenium之数据驱动框架应用WPS个人中心自动签到

    wps在注册后,有个每日签到的功能,签到后有几率送wps的专属金币[稻米],为了免费获得,又不想每天都是人工去执行签到动作,所以用selenium写了个小脚本,准备用数据驱动框架来完成这个事情,数据驱 ...

  4. jmeter 多线程组间变量共享

    jmeter的线程组之间是相互独立的,各个线程组互不影响,所以线程组A中输出的参数,是无法直接在线程组B中被调用的. 但是有时为了方便管理,我们可能是把各个接口单独存放在不同的线程组中.拿Cookie ...

  5. IDEA2018 license

    2018-06-01更新 更新了webstorm 3.2之后发现居然又不能用了,现用 http://idea.congm.in  可以激活 新增一个 http://idea.toocruel.net

  6. php 的stdClass类的简单实用

    <?php $person = new stdClass(); $person->name = "yu"; $person->sex = "man&qu ...

  7. Delphi : keydown与keypress的区别,组合键

    Shift 是一个集合变量. type TShiftState = set of (ssShift, ssAlt, ssCtrl, ssLeft, ssRight, ssMiddle, ssDoubl ...

  8. LAMP 环境下添加多个虚拟主机(网站)

    Ubuntu系统 #在/var/www目录下新建两个文件夹bbs和oa,执行完以上命令后,/var/www目录下有bbs.oa三个文件夹,名称与二级域名对应,分别存放三个系统的php文件,这样便于日后 ...

  9. mysql测试索引在表中的作用

    //未完成 参考书:(完成对缓存中执行计划的查看对比 P133~) Microsoft SQL Server 2008技术内幕:T-SQL查询 实验内容 单表中的索引使用 1.建表 create ta ...

  10. web接口测试中需要测试的几个点

    本文导读: web接口测试用例要包括欲测试的功能.应输入的数据和预期的输出结果,只有在数据能正确流入.流出模块的前提下,其他测试才有意义.下面介绍在web测试接口时一些需要注意的点 1.接口返回 数据 ...