box-sizing

这是《CSS设计指南》的读书笔记，用于加深学习效果。 display 属性 display 是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。 block div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。 inline img 是一个标准的行内元素。你可以把两个 <img> 标签写在两行，但这并不影响图片再浏览器中的显示效果，它们会并列出现在一行上。而且标签直接的空白（标记中的两个<img>标签虽然分别位于两行，但这并不影响图片在浏览器中显示时的效果。图片是行内元素，所以它们显示的时候就会并列出现在一行上。而且，标签之间的空白（包括制表、回车和空格）都会被浏览器忽略。 a 元素是最常用的行内元素，它可以被用作链接。 none 另一个常用的 display 值是 none。一些特殊元素的默认 display 值是它，例如 script 。display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。

box-sizing属性默认值是content-box；指定了标准的盒模型。 如果替换为box-sizing:border-box，浏览器将会为那个元素应用IE的盒模型，即width和height属性将包含边框(border)和内边距(padding)。当想以百分比形式为元素设置总体尺寸，又想以像素单位指定边框和内边距时，边框盒模型特别有用： <div style="box-sizing:border-box; width:50%; padding:10px; border:2px solid #ddd;"> </div> box-sizing在当前浏览器中都支持，但是还没有不带前缀的通用实现：在chrome和Safari中使用-webkit-box-sizing。在Firefox中使用-moz-box-sizing。在Opera和IE8及其更高版本中，可以不带前缀的使用box-sizing。 边框盒模型在css3中的一个可选方案是使用盒子尺寸的计算值： <div style="width:calc(50%-12px);padding:20px;border:solid 2px #eee;"></div> 在IE9中支持使用calc()计算css的值，在Firefox 4 为-moz-calc()。 定义和用法 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 box-sizing: content-box|border-box|inherit; 值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 inherit 规定应从父元素继承 box-sizing 属性的值。 来源： https://www.cnblogs.com/karila/p/7591163.html

元素添加 box-sizing: border-box; 即可解决 在设置了元素宽度后再加上margin和padding，子元素会超出父元素宽度，肯定有时候是不需要这样的，解决方案：添加 box-sizing属性即可； box-sizing的属性对应有三个值 box-sizing: content-box|border-box|inherit; 1. content-box 这应该就是属于默认的，宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。 2. border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 3. inherit 从父元素继承 box-sizing 属性的值。 来源： https://www.cnblogs.com/rangzhi/p/12193309.html

box-sizing：它是css3的box属性之一 定义 ：允许你以特定的方式定义匹配某个区域的特定元素 值 ：content-box，border-box，inherit 　　content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。 　　border-box：为元素设定的宽度和高度决定了元素的边框盒，为元素指定的任何内边距和边框都将在已设定的宽度和高度内部绘制。 　　inherit：继承父元素的box-sizing的值； box-sizing既然是box的属性之一，那么它当然也要遵循css的Box Model原理，我们要先了解一些Box Model的原理。 Box Model： Box Model分为两种，第一种是W3C的标准模型，另一种是IE的传统模型，他们的相同之处都是对元素计算尺寸的模型，不同之处在于计算的方式不同。 　　 W3C的标准模型： 　　　　外盒尺寸计算： 　　　　　　Element空间高度：content height + padding + border + margin； 　　　　　　Element空间宽度：content width + padding + border + margin； 　　　　内盒尺寸计算： 　　　　　　Element空间高度：content height + padding + border

ss3增添了盒模型box-sizing，属性值有下面三个： content-box ：默认值，让元素维持W3C的标准盒模型。元素的宽度/高度（width/height）（所占空间）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度 /高度（content width/height）即：Element Width/Height = border+padding+content width/height。 border-box ：让元素维持IE6及以下版本盒模型，元素的宽度/高度（所占空间）等于元素内容的宽度/高度。这里的content width/height包含了元素的border,padding,内容的width/height。即：Element Width/Height =width /height-border-padding。 inherit ：继承父元素的盒模型模式。 效果图 终于写好了，但如果又被要求改好看点，比如内容区加 内边距 ， 边框 什么的修饰一下。 如果直接加上padding、border什么的，马上就破坏了布局： 因为box-sizing默认是content-box，内容区大小不会变，加上padding、margin、border的话，就会往外撑开，从而破坏布局结构 这时，使用border-box就可以完美解决了。 <

一、盒模型 一个web页面由许多html元素组成，而每一个html元素都可以表示为一个矩形的盒子，CSS盒模型正是描述这些矩形盒子的存在。 MDN的描述： When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model . CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes. Every box is composed of four parts (or areas ), defined by their respective edges: the content edge , padding edge , border edge , and margin edge . CSS盒模型有四条边：外边距边、边框边、内填充边、内容边（Content edge、Padding edge、Border edge和Margin edge），四条边由内到外把它划分为四个区域：内容区域、内边距区域、边框区域

box-sizing:border-box; 是CSS3新增属性，了解这个属性，我们先从块级元素的盒子大小说起。 通常一个块级元素实际所占宽高度=外边距（margin）+ 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width） 如果设置了border-box，实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin） 你运行下面的代码就很好理解了 <style> #div1 {box-sizing:border-box; height:200px; width:200px; background:red; margin:10px; border:1px solid #000; padding:20px;} #div2 {box-sizing:content-box; height:200px; width:200px; background:red; margin:10px; border:1px solid #000; padding:20px;} </style> <div id="div1">border-box</div> <div id="div2">content-box</div> 对于设置这个属性的好处，更多是居于排版问题，很多情况下很实用，简化了计算位置的问题

定义和用法： box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 默认值：content-box; 继承性：无； css版本：css3 语法： box-sizing: content-box | border-box |inherit; 属性值说明： content-box 默认值;由css2.1规定的宽度高度行为;宽度和高度分别应用到元素的内容框;在宽度和高度之外绘制元素的内边距和边框。 可以理解为：对元素设置border和padding最终会改变元素的width,height border-box 为元素设定的宽度和高度决定了元素的边框盒； 即：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制; 内容的宽度=已设定的宽度和高度 - 边框和内边距。 可以理解为：对元素设置border和padding不会改变元素的width,height;只在元素既定的宽和高范围内进行绘制 inherit 规定应从父元素继承 box-sizing 属性的值。 我们可以利用该属性值，通过对顶层父元素设置 box-sizing ，让子元素继承的方式，轻松实现box-sizing 设定 如： html{ box-sizing:border-box; } *,*:before,*:after{ box-sizing:inherit; } 　　 示例： 在线演示：