标签：style content head orm 详解 nginx 变化 盒模型 rewrite
我们都知道CSS盒模型分为IE盒模型和W3C标准盒模型，它们的计算方式和一个CSS属性有关box-sizing。
content-box | border-box 默认值：content-box
当我们对元素设置content-box
.demo1 { box-sizing: content-box; width: 200px; height: 200px; padding: 20px; margin: 10px; border: 5px solid #333; } 复制代码在浏览器具体表现为
当我们设置成border-box
.demo2 { box-sizing: border-box; width: 200px; height: 200px; padding: 20px; margin: 10px; border: 5px solid #ccc; } 复制代码在浏览器具体表现为
当我们去掉元素的宽高度时
去掉元素的内外边距时
当我们去掉元素padding，border时可以看出元素的宽高度是在变化的，而去掉margin值时，元素的宽高没有变化。
所以我们的元素的宽高度值计算只和padding，border，元素的content有关
width = padding + border + content height = padding + border + content 复制代码
content-box在宽度和高度之外绘制元素的内边距和边框
border-box在宽度和高度之内绘制元素的内边距和边框
元素的宽高和margin无关，与padding，border，元素的content有关
当box-sizing属性值为content-box时，元素的宽高等于：width + padding + border;
当box-sizing属性值为border-box时，元素的宽高等于元素设置的width和height
作者：Mondo
链接：https://juejin.im/post/5ce3c9e751882533411b1fdd
标签：style content head orm 详解 nginx 变化 盒模型 rewrite
原文地址：https://www.cnblogs.com/apanly/p/12430703.html
