其实一直没仔细研究过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. synchronized 和reentrantlock的优缺点

    reentrantlock的优点 可以添加多个检控条件, 如果使用synchronized,则只能使用一个. 使用 reentrant locks 可以有多个wait()/notify() 队列. [ ...

  2. 合批只是对CPU的优化，与GPU没有任何关系

    如题. 今天细想了下合批这个东西. 合批是节省了CPU的相关准备工作的工作量. 合批后,经过VS,PS,尝试测试,模板测试后,此时已没有了纹理,顶点,索引的概念,只剩下一个个孤立的像素,各像素间没有任 ...

  3. 编程语言的分类及其优缺点，Python标准输入与输出

    一. 编程语言分类 1.机器语言 以0,1的组合作为指令集,用二进制指令来编写程序: 优点:执行效率高 缺点:开发效率低 2.汇编语言 用英文标签代替二进制指令集来编写程序,比机器语言稍微高级,但本质 ...

  4. IOC 和DI（转载）

    IOC 是什么? Ioc—Inversion of Control,即“控制反转”,不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对象内 ...

  5. Demo002 IDEA中Junit单元测试的使用(初级篇)

    推荐JUnit视频教程:JUnit-Java单元测试必备工具. 1.基本理论 1.1 单元测试 单元测试又称模块测试,属于白盒测试,是最小单位的测试.模块分为程序模块和功能模块.功能模块指实现了一个完 ...

  6. @RequestBody配合@JsonFormat注解实现字符串自动转换成Date

    2018年08月28日 16:41:15 混合动力火锅 阅读数:440   在controller中使用@RequestBody可以自动将字符串转换成int或者将int转换成字符串,但是Date类型则 ...

  7. 529. Minesweeper扫雷游戏

    ［抄题］: Let's play the minesweeper game (Wikipedia, online game)! You are given a 2D char matrix repre ...

  8. Head First Servlets & JSP 学习笔记 第十三章 —— 过滤器的威力

    过滤器可能是最强大的Web应用开发工具了! 与Servlet非常类似,过滤器就是Java组件,请求发送到Servlet之前,可以用过滤器截获和处理请求:另外Servlet结束工作之后,但在响应发回给客 ...

  9. JavaSE基础知识（5）—面向对象（5.2类的成员）

    一.属性 1.语法 数据类型 属性名 [= 属性值]; 2.特点 ①属性的数据类型可以为任意类型,包含基本类型或引用类型②属性可以不用手动赋值,有默认值 int——0 double——0.0 char ...

  10. Solr定时导入功能实现

    需要实现Solr定时导入功能的话,我们可以通过使用Solr自身所集成的dataimportscheduler调度器实现 下载对应的jar包,下载地址https://code.google.com/ar ...