一般我们都认为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. angularJS1笔记-(13)-自定义指令(controller和controllerAs实现通信)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. sql update set from 的用法 (转)

    关键字: update set from 下面是这样一个例子: 两个表a.b,想使b中的memo字段值等于a表中对应id的name值     表a:id, name               1   ...

  3. Genymotion-ARM-Translation_v1.1安装报“an error occured while deploying the file”

    如上图,在将Genymotion-ARM-Translation_v1.1.zip拖动Genymotion虚拟机中报了图中错误,在百度后找到了解决办法,下面是我的操作步骤 1.下载re管理器之类的ap ...

  4. pygame学习笔记(4)——声音

    转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi pygame.mixer是一个用来处理声音的模块,其含义为“混音器”.游戏中对声音的处理一般包括制造声音和播放声音 ...

  5. sublime Text 插件收录

    插件 1.SublimeText3常用快捷键和优秀插件 2.常用的sublime text 3插件-1 主题 1.https://www.jianshu.com/p/1a1113213faf 2.ht ...

  6. response和request的setCharacterEncoding区别

    一.request.setCharacterEncoding():是设置从request中取得的值或从数据库中取出的值. 指定后可以通过getParameter()则直接获得正确的字符串,如果不指定, ...

  7. UVAlive4080_Warfare And Logistics

    给一个无向图,求出两个值,所有点到所有其他点的最短距离和,任意删除一条边后的这个值. 数据规模是100点1000边. 白书例题,不多说了直接对于每个点求出最短路树,对于每条边,如果它不是最短路树上的边 ...

  8. matlab gradient 和 prctile

    介绍两个matlab小函数: 1.gradient 借用别人的例子:例:>> x=[6,9,3,4,0;5,4,1,2,5;6,7,7,8,0;7,8,9,10,0]x =     6  ...

  9. vyos 基础配置

    vyos 基础配置 http://www.lowefamily.com.au/2015/11/29/using-a-vyos-router-with-hyper-v/1/http://thomasvo ...

  10. BZOJ 2844: albus就是要第一个出场

    2844: albus就是要第一个出场 Time Limit: 6 Sec  Memory Limit: 128 MBSubmit: 1134  Solved: 481[Submit][Status] ...