理解boxsizing

什么是css盒模型？css盒模型包括如下属性：内容(content)，填充(padding)，边框(border)，边界(margin).

这些东西我们可以拿日常生活中的列子来打比方，比如我现在在京东买了一台显示器，那么就会以盒子打包过来，那么显示器就是我们说的内容(content)，而填充(padding)就是怕盒子里面的显示器损坏而添加的泡沫或者其他坑震的辅料，边框（border）就是盒子本身了，至于边界(margin)则是盒子摆放的时候不能全部堆在一起，要留一定的空隙保持通风。比如如下：

因此 盒子的宽度 = width + padding(left, right) + border(left, right)
盒子的高度 = height + padding(top, bottom) + border(top, bottom)

注意：当我们想设置盒子的宽度为200px的时候会出现一个问题是：css设置的宽度仅仅是内容区的宽度，而不是盒子的宽度，所以当我们使用css设置width=200px的时候，是设置内容的宽度为200px,而不是盒子的宽度，因此盒子的宽度还需要加上padding和border，因此导致盒子的宽度会大于200px。因此当我们设置盒子的宽度的时候，需要使用css的计算的宽度 减去 padding - border ，
最后就是内容的宽度，使用css设置内容的宽度了。但是使用 css3中的 box-sizing, 它会帮我们解决这个问题。

box-sizing的属性如下：
border-box, content-box, inherit

box-sizing: border-box 的理解：可以这么理解，当我们使用css设置元素的宽度的时候，并且使用了 box-sizing：border-box 这个属性的时候，那么css设置的宽度就是盒子的宽度，
当padding和border发生变化的时候，content(内容区)的宽度会自适应。

box-sizing: content-box的理解；使用了 box-sizing: content-box的时候，当我们使用css设置元素宽度的时候，实际就是内容(content)的宽度，当我们增加padding和border的时候
，会使盒子的宽度变大，导致布局不能自适应。

box-sizing: inherit的理解：继承 父元素 box-sizing属性的值, 其实效果和 box-sizing: content-box 类似。

浏览器支持程度；IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-， 因此可以如下定义：

*, *:before, *:after {

　-moz-box-sizing: border-box;

　-webkit-box-sizing: border-box;

　box-sizing: border-box;

}

实列demo如下：

<!DOCTYPE html>

 <html>

    <head>

        <meta charset="utf-8">

        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

        <meta content="yes" name="apple-mobile-web-app-capable">

        <meta content="black" name="apple-mobile-web-app-status-bar-style">

        <meta content="telephone=no" name="format-detection">

        <meta content="email=no" name="format-detection">

        <title>标题</title>

        <link rel="shortcut icon" href="/favicon.ico">

        <style>

          .container { width: 100%; margin-bottom: 40px; overflow: hidden;}

          .left, .content, .right { float: left; }

          .left { width: 20%; background-color: red;}

          .content { width: 60%; background-color: yellow; box-sizing: border-box; padding: 0 20px;}

          .right {width: 20%; background-color: blue; }

          .left2, .content2, .right2 { float: left; }

          .left2 { width: 20%; background-color: red;}

          .content2 { width: 60%; background-color: yellow; box-sizing: content-box; padding: 0 20px;}

          .right2 {width: 20%; background-color: blue; }

          .left3, .content3, .right3 { float: left; }

          .left3 { width: 20%; background-color: red;}

          .content3 { width: 60%; background-color: yellow; box-sizing: inherit; padding: 0 20px;}

          .right3 {width: 20%; background-color: blue; }

        </style>

    </head>

    <body>

      <h2>box-sizing: border-box 的demo</h2>

      <div class='container'>

        <div class="left">left</div>

        <div class="content">content</div>

        <div class="right">right</div>

      </div>

      <h2>box-sizing: content-box 的demo</h2>

      <div class='container'>

        <div class="left2">left</div>

        <div class="content2">content</div>

        <div class="right2">right</div>

      </div>

      <h2>box-sizing: inherit 的demo</h2>

      <div class='container'>

        <div class="left3">left</div>

        <div class="content3">content</div>

        <div class="right3">right</div>

      </div>

    </body>

</html>

理解 boxsizing的更多相关文章

  1. 如何理解Box-sizing模型？

    CSS3 box-sizing 属性 http://www.w3school.com.cn/tiy/t.asp?f=css3_box-sizing <style> div.containe ...

  2. content-box和border-box

    理解box-sizing属性border-box,content-box,其实也是理解正常盒模型与异常盒模型. 如果不做特殊说明,我们日常所用的div都是正常盒子模型. 正常盒子模型 正常盒子模型,是 ...

  3. 不用bootstrap，只用CSS创建网格布局

    本文译自[http://j4n.co/blog/Creating-your-own-css-grid-system],英语好的,可直接查看原网页,不需要FQ. 翻译拿不准的地方会有英文原文,方便大家理 ...

  4. content-box与border-box区别

    理解box-sizing属性border-box,content-box,其实也是理解正常盒模型与异常盒模型. 正常盒模型 正常盒模型,是指块元素box-sizing属性为content-box的盒模 ...

  5. 关于box-sizing的理解

    ---恢复内容开始--- box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素. 例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "bord ...

  6. 理解标准盒模型和怪异模式&box-sizing属性

    盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题) DTD规范 盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模 ...

  7. 理解Margin边距塌陷与box-sizing的问题

    父与子塌陷问题 子盒子与父盒子相互影响,margin值会重叠,谁大听谁的 运行结果: box-sizing box-sizing 原始属性值: content-box,该属性对于盒子尺寸来说,并不会让 ...

  8. CSS3教程:box-sizing属性的理解

    说到 IE 的 bug,一个臭名昭著的例子是它对于“盒模型”的错误解释:在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 border 与 padding 都包含在 width 之内.这 ...

  9. 盒子模型简单理解（box-sizing）

    普通解析: 概念图示和公式: html结构 <div class="num1"></div> 1.只写 width.height(写背景是为了区分) .nu ...

随机推荐

  1. C#设计模式六大原则概述

    在面向对象的设计中,我们应当遵循以下六大原则,只有掌握了这些原则,才能更好的理解设计模式. 1:单一职责原则(Single Responsibility Principle 简称 :SRP) : 就一 ...

  2. HTML的语义化和一些简单优化

    1.什么是语义化? 必应网典的解释 语义化是指用合理HTML标记以及其特有的属性去格式化文档内容.通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解. 语义化的(X)HTML文档有助于提升你的 ...

  3. 安卓开发_关于WebView加载页面空白问题

    依据我自己的测试,发现有时候用APP打开网页的时候,有的网页加载成功之前需要很久,有的一下就出来了(比如百度) 当加载时间过长的情况下,这时候显示的是空白界面,其实不是代码问题,只是要打开的这个网页太 ...

  4. TensorFlow深度学习入门

    # -*- coding: utf-8 -*- """ Created on Tue Oct 2 15:49:08 2018 @author: zhen "&q ...

  5. SQL注入介绍

    一.SQL注入概念   1.sql注入是一种将sql代码添加到输入参数中   2.传递到sql服务器解析并执行的一种攻击手法   举例:某个网站的用户名为name=‘admin’.执行时为select ...

  6. Chrome及Chrome内核浏览器改变开发者工具字体大小

    1.打开浏览器,按F12调用开发者工具 2.按Ctrl+数字加号键,可看到字体变大,按Ctrl+数字减号键,字体变小 3.重新启动浏览器后字体仍然保持修改后的字体大小

  7. 网络编程——socket开发

    Socket套接字方法 socket 实例类(8-10分钟) socket.socket(family=AF_INET, type=SOCK_STREAM, proto=0, fileno=None) ...

  8. 11LaTeX学习系列之---LaTeX的特殊字符

    目录 目录 前言 (一)源代码 (二)输出效果 目录 本系列是有关LaTeX的学习系列,共计19篇,本章节是第11篇. 前一篇:10LaTeX学习系列之---Latex的文档结构 后一篇:12LaTe ...

  9. 4.1Python数据类型（1）之数值类型

    返回总目录 目录: 1.数据类型的表现形式: 2.数据进制的转换: 3.数据的常规操作: (一).数据类型的表现形式: (1)整数类型: # 二进制: a = 0b0110 print("二 ...

  10. Hive-1.2.1_02_简单操作与访问方式

    1. Hive默认显示当前使用库 .需要用时,即时配置,在cli执行属性设置,这种配置方式,当重新打开cli时,就会生效: hive> set hive.cli.print.current.db ...