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. APP(通信)接口定义

  2. canvas实现验证码

    在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写. 但是在前端,用canva或者SV ...

  3. 2017-12-22 日语编程语言"抚子"-第三版实现初探

    前文日语编程语言"抚子" - 第三版特色初探仅对语言的语法进行了初步了解. 之前的语言原型实现尝试(如编程语言试验之Antlr4+JavaScript实现"圈4" ...

  4. CSS--理解块级格式上下文（BFC）

    1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box(块级元素)参与, ...

  5. python 类函数，实例函数，静态函数

    一.实现方法 class Function(object): # 在类定义中定义变量 cls_variable = "class varibale" def __init__(se ...

  6. 使用 ISO镜像配置 本地yum 源（RHEL, CentOS, Fedora等适用）

    使用 ISO镜像配置 本地yum 源(RHEL, CentOS, Fedora等适用)   1.上传ISO镜像和挂载 1) 上传Centos7.2 ISO镜像到 /usr/local/src目录 2) ...

  7. 关于CSS的一些基础内容

    最近用到了CSS,刚好学学.CSS(Cascading Style Sheet)中文名层叠样式表,用于为html文档添加样式控制,也是一种计算机语言. 一.CSS语法a)CSS规则由选择器和声明组成, ...

  8. 模拟开户接口，使用python脚本实现批量用户开通

    1.目的 通过模拟接口方法,实现批量用户开通 2.分析 A.接口含body和head部分,其中body中的某些变量为必填字段,包含用户的信息. B.用户信息清单可以整理成ott_after_check ...

  9. Linux (Fedora 28) 如何查看 CPU 温度

    机器突然负载有点高,查看CPU 温度的方法: 1.yum install lm_sensors; 2.sensors-detect 3.sensors   这些需要机器具备相应的设备,如果在虚拟机运行 ...

  10. [MapReduce_add_2] MapReduce 实现年度最高气温统计

    0. 说明 编写 MapReduce 程序实现年度最高气温统计 1. 气温数据分析 气温数据样例如下: ++023450FM-+000599999V0202701N015919999999N00000 ...