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. Python 简单的多线程聊天

    # client 端 import socket ip_port = ('127.0.0.1', 8091) sk = socket.socket() sk.connect(ip_port) prin ...

  2. ionic3打包不能prod的问题

    在最近的项目中,我ionic3采用了懒加载,来提高性能.但是当我普通打包的时候,正常成功了,但是加上--prod的时候,就报错了. 报错如下: 大概意思就是page是声明的一部分,然后请在更高级声明之 ...

  3. windows 2012 r2企业版没有界面

    windows 2012 R2系统进去以后只有CMD命令窗口,没有图形化界面,除了cmd其余的全部是黑的.在网上搜了很多,都是大同小异的解决方法,但根本解决不了.今天再这里分享的这个方法很简单,不用重 ...

  4. 对比学IT---路由器和linux流量统计的差别

    1. 路由器使用MQC来统计端口入出方向,特定特征的数据流. 显示policy 的统计信息 配置policy: #traffic classifier vlan5traffic operator an ...

  5. Java强引用、软引用、弱引用及虚引用深入探讨

    强引用.软引用.弱引用和虚引用深入探讨 为了更灵活的控制对象的生命周期,在JDK1.2之后,引用被划分为强引用.软引用.弱引用.虚引用四种类型,每种类型有不同的生命周期,它们不同的地方就在于垃圾回收器 ...

  6. 表单元素的required,autocomplete,list用法

    required: 当在一个表单元素如:input中加上required属性时,点击提交表单按钮,针对input会弹出一个默认的警告信息,如下图: 代码如下: <form id="my ...

  7. Python CNN卷积神经网络代码实现

    # -*- coding: utf-8 -*- """ Created on Wed Nov 21 17:32:28 2018 @author: zhen "& ...

  8. 11-OpenLDAP主从同步

    OpenLDAP主从同步 阅读视图 部署环境 OpenLDAP服务器初始化 配置主服务器同步策略 配置从服务器 OpenLDAP主从同步验证 故障诊断 1. 部署环境 本文以两台服务器为蓝本演示其同步 ...

  9. sqlserver序列定时初始化

    1.创建序列 2.序列初始化存储过程 create procedure proDemo as begin alter sequence dbo.序列名 restart with 0; end 3.创建 ...

  10. Linux文件和目录的粘滞位(sticky bit)

    今天维护系统时发现一个非常诡异的问题:AAA用户和BBB用户同属AAA组,但用AAA用户创建的文件,权限设置为777后,还是不能用BBB用户删除.诡异! 几经周转,发现AAA用户创建文件位置的上层目录 ...