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. 微信小程序开发BUG经验总结

    摘要: 常见的微信小程序BUG! 小程序开发越来越热,开发中遇到各种各样的bug,在此总结了一些比较容易掉进去的坑分享给大家. 1. new Date跨平台兼容性问题 在Andriod使用new Da ...

  2. 14-补充内容：MySQl创建用户和授权

    [转]14-补充内容:MySQl创建用户和授权 权限管理 我们知道我们的最高权限管理者是root用户,它拥有着最高的权限操作.包括select.update.delete.update.grant等操 ...

  3. Leaflet 测试加载高德地图

    <!DOCTYPE html> <html> <head>  <title>Leaflet Quick Start Guide Example</ ...

  4. Gartner2017年BI研究计划曝光，来看看他研究的都是啥？

    文 | 水手哥 本文出自:知乎专栏<帆软数据应用研究院>——数据干货&资讯集中地   近日,Gartner发布了<Analytics and Business Intelli ...

  5. Oracle 11g数据库详细安装过程

    1.Oracle 11g下载 官方网址为:http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.h ...

  6. mybatis学习系列一(mybatis简介/使用）

    1mybatis简介(1) 1.1工具:jbbc,jdbctemplate 功能简单,sql语句编写在java代码里面,硬编码高耦合的方式 1.2 框架:整体解决方案 1.2.1 Hibernate: ...

  7. VirtualBox下安装CentOS7系统

    本文假定你已经知道如何安装VirtualBox虚拟机软件,并且已经安装好了. 首先我们需要准备好centos的iso镜像文件,可以从centos的官网下载. 以下操作使用的VirtualBox版本号是 ...

  8. selenium获取cookie

    参考地址:https://www.cnblogs.com/lingwang3/p/7750156.html # 获取cookie import time from selenium import we ...

  9. sql server自定义函数学习笔记

    sql server中函数分别有:表值函数.标量函数.聚合函数.系统函数.这些函数中除系统函数外其他函数都需要用户进行自定义. 一.表值函数 简单表值函数 创建 create function fu_ ...

  10. SQL去除空格、截取数据的方法：trim、substring

    1.如device表中的identity字段正常的字段长度是32位,但是某些不正常的数据,后面多出空格,需要去掉后面的空格,可执行以下命令: ; ; 2.使用substring函数截取某字段的的其中一 ...