其实一直没仔细研究过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. fastJson注解@JSONField使用的一个实例

    1.实体类 package jsonArrayjsonObject.cn; import java.io.Serializable; import java.util.Date; import com ...

  2. funny故事

    name1 = input('请输入一个名字:') name2 = input('请输入一个名字:') vehicle = input('请输入一种车子:') print('\n上近代史的{}刚下课, ...

  3. 零基础爬虫----python爬取豆瓣电影top250的信息（转）

    今天利用xpath写了一个小爬虫,比较适合一些爬虫新手来学习.话不多说,开始今天的正题,我会利用一个案例来介绍下xpath如何对网页进行解析的,以及如何对信息进行提取的. python环境:pytho ...

  4. windows from docker 安装部署spring jar包方法

    1.安装docker for windows,去官网下载就可以了,按照官网安装 2.把jar和dockerfile放在一个目录下(target 目录下) Dockerfile: FROM java:8 ...

  5. VUE项目小试牛刀

    首先安装webstorm:http://www.jetbrains.com/webstorm/  (推荐) 再安装node.js:https://nodejs.org/en/download/  (必 ...

  6. AppleID的双重认证

    [链接]AppleID的双重认证https://support.apple.com/zh-cn/HT204915

  7. Ubuntu 18.04学习笔记

    命令行快捷键 https://blog.csdn.net/wanlhr/article/details/80926804 Ubuntu18.04使用vi命令修改文件并保存 vi /opt/teamvi ...

  8. 【Android】异步加载布局探索

    最近在做的项目页面复杂导致布局嵌套多层,而且又使用了百分比布局(可能主要是这个原因)导致页面加载的时候主线程会被阻塞, 那要想减少主线程阻塞,一来就是简化布局,减轻LayoutInflater的负担, ...

  9. centos7 下安装pycharm

    CentOS 7环境下Pycharm安装流程记录: 1.准备安装文件: 方法1: 使用内置火狐浏览器访问下载最新格式为tar.gz的压缩包 网址:https://www.jetbrains.com/p ...

  10. Hadoop格式化namenode 出错 Error: A JNI error has occurred, please check your installation and try again Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/hadoop/security/authorize/Refr

    一般是修改配置文件:etc/hadoop/hadoop-env.sh的时候出现的错误 export JAVA_HOME=/usr/jdk export HADOOP_COMMON_HOME=~/had ...