其实一直没仔细研究过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. Mac 系统下 mysql 的安装与配置

    1.mysql 的安装 1)官网下载 mysql 安装包:http://www.mysql.com/downloads/ 2)下载后解压打开安装包,点击 pkg 文件进行安装 3)注意:最后一步弹窗会 ...

  2. linux显示历史命令history

    history history//显示历史命令

  3. git克隆远程仓库的时候断电了，使用git-fetch断点续传

    今天下载tensorflow serving 模型,但是因为主机电源线太长了,不知是我自己搞的还是同事,断电了都, 网速捉急,下载了挺长时间的,一看,git clone 到中途竟然断电,不过查看,还好 ...

  4. cdnbest区域自定义配置里添加防xss攻击配置

    把下面代码复制进去即可: <!--#start 300 --><config> <response action='allow' > <table name= ...

  5. WMS专业术语&系统功能操作培训

    逻辑层:公司.分部.地区物理层:仓库.1个仓库只能属于思维的1个地区.命名规则:SCPRD_WMWHSE1货主:纳思达多货主:1个仓库可以配置1个或多个货主SKU:物料代码(stock keeping ...

  6. python 网络编程 缓冲和粘包

    tcp:属于长连接,与一个客户端进行连接了以后,其他的客户端要等待,要连接另外一个,必须优雅的断开前面这个客户端的连接. 允许地址重用:在bind IP地址和端口之前加上,# server.setso ...

  7. CSS3 white-space属性

    white-space 属性设置如何处理元素内的空白. 可能的值 值 描述 normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的 <pre> ...

  8. Why is it called “armature” instead of “skeleton”? or perhaps “rig”?

    Great question, I’ve always assumed armature/skeleton to be the same thing, here’s a quote from an a ...

  9. 2018 ICPC青岛网络赛 B. Red Black Tree(倍增lca好题)

    BaoBao has just found a rooted tree with n vertices and (n-1) weighted edges in his backyard. Among ...

  10. Java 基础之--注解Annotation详解

    自定义注解入门: public @interface Annotation01 { //set default value ""; String value() default & ...