box-sizing

人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。

当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。

这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>box-sizing</title>

    <style>

        /** {

            box-sizing: border-box;

            -webkit-box-sizing: border-box;

            -moz-box-sizing: border-box;

            -ms-box-sizing: border-box;

            -o-box-sizing: border-box;

        }*/

        .simple {

            width: 400px;

            height: 200px;

            border: 1px solid red;

            margin: 20px auto;

            box-sizing: border-box;

            -webkit-box-sizing: border-box;

            -moz-box-sizing: border-box;

            -ms-box-sizing: border-box;

            -o-box-sizing: border-box;

        }

        .fancy {

            width: 400px;

            height: 200px;

            border: 1px solid red;

            margin: 20px auto;

            padding: 50px;

            box-sizing: border-box;

            -webkit-box-sizing: border-box;

            -moz-box-sizing: border-box;

            -ms-box-sizing: border-box;

            -o-box-sizing: border-box;

        }

    </style>

</head>

<body>

    <div id="simple" class="simple">我是simple</div>

    <div id="fancy" class="fancy">我和simple一样大了</div>

    <script>

        var oDiv1 = document.querySelector('#simple');

        console.log(oDiv1.offsetWidth, oDiv1.offsetHeight);

        var oDiv2 = document.querySelector('#fancy');

        console.log(oDiv2.offsetWidth, oDiv2.offsetHeight);

    </script>

</body>

</html>

结果：

既然没有比这更好的方法，一些CSS开发者想要页面上所有的元素都有如此表现。

所以开发者们把以下CSS代码放在他们页面上：

* {

            box-sizing: border-box;

            -webkit-box-sizing: border-box;

            -moz-box-sizing: border-box;

            -ms-box-sizing: border-box;

            -o-box-sizing: border-box;

        }

这样可以确保所有的元素都会用这种更直观的方式排版。

不过 box-sizing 是个很新的属性，目前你还应该像我上面例子中那样使用 -webkit-和 -moz- 前缀。

这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的。

原文地址：http://zh.learnlayout.com/box-sizing.html

学习CSS布局 - box-sizing的更多相关文章

  1. 《学习CSS布局》学习笔记

    近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...

  2. “学习CSS布局” 笔记

    学习网址:http://zh.learnlayout.com/no-layout.html 本文仅为学习笔记,内容非原创. position 默认值:static 没有添加额外属性的relative和 ...

  3. 学习CSS布局 - dispaly属性

    "display"属性 display 是CSS中最重要的用于控制布局的属性. 每个元素都有一个默认的 display 值,这与元素的类型有关. 对于大多数元素它们的默认值通常是  ...

  4. 学习CSS布局 - position例子

    position例子 通过具体的例子可以帮助我们更好地理解“position”.下面是一个真正的页面布局. 结果: 代码如下: <!DOCTYPE html> <html lang= ...

  5. 学习CSS布局 - position

    position 为了制作更多复杂的布局,我们需要讨论下 position 属性. 它有一大堆的值,名字还都特抽象,别提有多难记了. 让我们先一个个的过一遍,不过你最好还是把这页放到书签里. 先看下运 ...

  6. 学习CSS布局 - 盒模型

    盒模型 在我们讨论宽度的时候,我们应该讲下与它相关的另外一个重点知识:盒模型. 当你设置了元素的宽度,实际展现的元素却超出你的设置: 这是因为元素的边框和内边距会撑开元素. 看下面的例子,两个相同宽度 ...

  7. 学习CSS布局 - 没有布局

    如果你只想把所有内容都塞进一栏里,那么不用设置任何布局也是OK的. 然而,如果用户把浏览器窗口调整的很大,这时阅读网页会非常难受: 读完每一行之后,你的视觉焦点要从右到左移动一大段距离. 试着调整下浏 ...

  8. 学习CSS布局 - max-width

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 学习CSS布局 - margin: auto;

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. JavaScript有这几种测试

    译者按: 也许你讨厌测试,但是你不得不面对它,所以至少区分一下单元测试.集成测试与功能测试?对吧... 原文: What are Unit Testing, Integration Testing a ...

  2. objectLiteral.js

    // 1.任意参数的加法运算 function add(){ var sum = 0 for(var i=0;i<arguments.length;i++){ if(!isNaN(argumen ...

  3. blfs（systemv版本）学习笔记-编译安装配置dhcpcd

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! dhcpcd项目地址:http://www.linuxfromscratch.org/blfs/view/8.3/basicne ...

  4. Navicat安装及简单使用

    一.安装 下载完之后,直接解压出来就能用,看一下解压之后的目录: 双击打开下面这个文件(可以把它添加一个桌面快捷方式,或者添加到任务栏): 然后会提示你输入注册码: 回到navicat的解压出来的文件 ...

  5. thymeleaf-extras-db 0.0.1发布，select标签加载数据的新姿势

    在写thymeleaf页面的时候,我为了偷懒,不想为每个select下拉列表框都写一个接口,于是这个懒人jar诞生了.该jar的核心功能是直接通过thymeleaf页面的自定义标签的属性,直接运行sq ...

  6. Java数据解析---JSON

    一.Java数据解析分为:XML解析和JSON解析 XML解析即是对XML文件中的数据解析,而JSON解析即对规定形式的数据解析,比XML解析更加方便 JSON解析基于两种结构: 1.键值对类型 { ...

  7. Web API 方法的返回类型、格式器、过滤器

    一.Action方法的返回类型 a) 操作方法的返回类型有四种:void.简单或复杂类型.HttpResponseMessage类型.IHttpActionResult类型. b) 如果返回类型为vo ...

  8. Expo大作战(四十一)【完】--expo sdk 之 Assets，BarCodeScanner，AppLoading

    Expo大作战系列完结! 简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与 ...

  9. Video.js web视频播放器

    免费视频播放器videojs中文教程 Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于vide ...

  10. IP地址及子网划分

    1.IP地址 2.子网掩码 网络号全转为1,主机号全转为0,之后再转化为10进制表示. 3.无分类编址