其实一直没仔细研究过CSS3新增的这个属性box-sizing，只是经常会看到其它网页和公司项目里面有用到这个属性，然后就百度找到了一篇不错的介绍

　　https://www.jianshu.com/p/e2eb0d8c9de6

　　 要想清楚这个属性的作用，首先要理解盒子模型

　　盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）

　　可以把每一个容器，比如div，都看做是一个盒子模型

　　比如你给一个div设置宽高为500px，但实际你设置的只是content，之后你又设置了padding:10px;border:1px solid red;

　　这时div的宽高就会变为544px（content 500px + padding 40px + border 4px）

　　相当于一个元素的实际宽高是由：　padding + border + content  组成

　

　　①：没有设置box-sizing:border-box属性，宽高会加上padding和border的值，需要我们手动去计算，

　　　　减去padding和border的值，并调整content的值，以免超过给定的宽高

　　　　比如下图，我给父元素parent设置宽高为500px，背景色为黑色；然后给子元素设置宽高为478px，并设置内边距10px,红色边框1px，背景颜色为灰色

　　　　此时子元素的宽高为500px（content 478px + padding 40px + border 4px）所以就覆盖了父元素的黑色背景，只能看到子元素的灰色背景

　　

　　②：加了box-sizing:border-box属性，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里

　　　　盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整

　　上面的示例①是标准盒子模型，一般浏览器也都默认为标准盒子模型。即：box-sizing:content-box

　　上面的示例②是怪异盒子模型，一般根据实际项目需要自行设置。即：box-sizing:border-box

　　测试代码（上面可能说的不太清楚，下面的示例代码实验一下你就懂了）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .parent {

                position: relative;

                margin: 0 auto;

                width: 500px;

                height: 500px;

                background-color: #000;

            }

            .son {

                box-sizing: border-box;

                position: absolute;

                top: 0;

                right: 0;

                bottom: 0;

                left: 0;

                margin: auto;

                padding: 10px;

                width: 478px;

                height: 478px;

                border: 1px solid red;

                background-color: #ccc;

            }

        </style>

    </head>

    <body>

        <div class="parent">

            <div class="son">

            </div>

        </div>

    </body>

</html>

box-sizing:border-box的作用的更多相关文章

  1. Vagrant 手册之 box - 创建基础 box

    原文地址 有一种特殊的 box 被称为"base box".这些 box 包含 Vagrant 运作所需的最低限度,通常不是对现有的 Vagrant 环境("base b ...

  2. 关于line box，inline box，line-height，vertical-align之间的关系

    1.content area 围绕着文字的一种box,高度由font-size和font-family决定.在chrome控制器里,你用鼠标志向某个内敛元素,显示的高度值. 2.inline box的 ...

  3. [UE4]Vertical Box结合Horizontal Box创建出类似微信的经典手机界面

    头部标题,中部为自动填充,底部为一个Horizontal Box,其中的“通讯录”文字比较宽,需要设置Size.Fill=1.5

  4. 解读SSD中的Default box（Prior Box）

    1:SSD更具体的框架如下: 2: Prior Box 缩进在SSD中引入了Prior Box,实际上与anchor非常类似,就是一些目标的预选框,后续通过softmax分类+bounding box ...

  5. [04-05]box框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式

    实际占有的宽 = width + 2padding(内边距) + 2border(边框) + 2margin(外边距) 实际占有的高 = height + 2padding + 2border + 2 ...

  6. 微信小程序弹出可填写框两种方法

    方法一: html页面: < view class = "container" class = "zn-uploadimg" > < butt ...

  7. 第二章 你第首个Electron应用　| Electron in Action(中译)

    本章主要内容 构建并启动Electron应用 生成package.json,配置成Electron应用 在你的项目中包含预先构建Electron版本 配置package.json以启动主进程 从主进程 ...

  8. CSS/CSS3语法新特性笔记

    CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...

  9. CSS 框模型( Box module )

    框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...

  10. KB006: CSS 框模型( Box module )

    框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...

随机推荐

  1. 吴裕雄 python深度学习与实践（14）

    import numpy as np import tensorflow as tf import matplotlib.pyplot as plt threshold = 1.0e-2 x1_dat ...

  2. CSS表单3 光标样式 (每个位置鼠标放上去的样式不同)

    <!DOCTYPE html> <html>     <head>         <title>单选按钮对齐</title>        ...

  3. 大数据入门到精通11-spark dataframe 基础操作

    // dataframe is the topic 一.获得基础数据.先通过rdd的方式获得数据 val ny= sc.textFile("data/new_york/")val ...

  4. php生成红包

    <?php /** * 随机生成红包金额 * @param $n 红包个数 * @param $sum 总金额 整数 * @param $index_max 最大金额在数组中索引 * @para ...

  5. as3.0 嵌入字体的用法

    var txt:TextField = new TextField();//创建文本 txt.embedFonts=true;//确定嵌入字体 var font:Font=new MyFont();/ ...

  6. 【转】GT 的性能测试方案解析

    前言 本文将整理腾讯GT各个性能测试项的测试方法,目的是为了帮助移动性能专项测试同学快速过一遍腾讯GT各个性能数据是如何获取的.另外对腾讯GT还不了解或者不知道它能做什么的同学可以看看这篇文章:htt ...

  7. 微信小程序记账本进度二

    二.1,下载微信web开发者工具 2,使用新注册的账号登录,并创建工程

  8. php设计模式-工厂模式(一)

    <?php abstract class Creator{ /* startFactory 返回一个具体的产品 factoryMethod 返回对象 */ protected abstract ...

  9. 2.Redis五种数据结构

    2.Redis五种数据结构2.1 预备2.1.1 全局命令2.1.2 数据结构和内部编码2.1.3 单线程架构2.2 字符串2.2.1 命令2.2.2 内部编码2.2.3 典型使用场景2.3 哈希2. ...

  10. Java SSM 框架相关基础面试题

    一.Spring 面试题 1. Spring 在 SSM 中起什么作用? Spring 是轻量级框架,作用是作为 Bean 工厂,用来管理 Bean 的声明周期和框架集成. Spring 的两大核心: ...