其实一直没仔细研究过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. css：清楚html所有标签自带属性

    相信如果您动手写过网页的话,应该体会到有些标签会自带一些默认的样式,而这些样式或许又是我们不想要的,所以我们可以用以下代码清除所有标签的默认样式   html, body, div, span, ap ...

  2. 通过adb启动app应用

    由于某些原因,我需要自动启动雷电模拟器里面的一个应用.(利用Windows任务计划) 怎么自启动雷电模拟器就不用说了,很简单. 自启动app我倒是不熟悉,我没用安卓方面的知识.再官网论坛上面查到了相关 ...

  3. 550 5.7.1 Client does not have permissions to send as this sender

    收发邮件时出现以上这种情况,系统提示550 5.7.1 Client does not have permissions to send as this sender,这是什么原因赞成的呢? 活动目录 ...

  4. Codeforces Round #439 C. The Intriguing Obsession

    题意:给你三种不同颜色的点,每种若干(小于5000),在这些点中连线,要求同色的点的最短路大于等于3或者不连通,求有多少种连法. Examples Input 1 1 1 Output 8 Input ...

  5. FloatingActionButton FAB 悬浮按钮

    FloatingActionButton简称FAB,这是一种比较美观的按钮: 1.使用前: FAB代表一个App或一个页面中最主要的操作,如果一个App的每个页面都有FAB,则通常表示该App最主要的 ...

  6. 9.22 keep studying

    项目要换用element组件了. element [http://element.eleme.io/1.4/#/zh-CN]是饿了么前端出品的一套基于Vue2.0的组件库,今天看了一下,确实简单好看. ...

  7. linux resin 安装 配置 相关

    resin跟tomcat一样,也是解析jsp网站的,也需要JDK的支持,所以第一步也是安装JDK,安装JDK的方法参考Tomcat中的安装JDK部分.下面介绍安装resin.resin官网http:/ ...

  8. springboot中使用ContextLoaderListener.getCurrentWebApplicationContext()；获取WebApplicationContext为空问题

    WebApplicationContext applicationContext = ContextLoaderListener.getCurrentWebApplicationContext(); ...

  9. predict predict_proba区别的小例子

    predict_proba返回的是一个n行k列的数组,第i行第j列上的数值是模型预测第i个预测样本的标签为j的概率.所以每一行的和应该等于1. 举个例子 >>> from sklea ...

  10. MySQL安装及后续配置

    rpm -qa | grep mysql  检查已安装的mysql版本 rpm -e --nodeps mysql-libs-5.1.71 卸载 tar -zxvf MySQL.tar.gz 解压 安 ...