两种盒子模型对于盒子的边框（宽高），请说说盒子模型标准答案：CSS盒子模型分为两种：一种是内容box，另一个是borderbox；区别在于：内容框的宽高只包含内容；border框的宽高包含在border(within)中，包括border、padding和content；区别仅在于设置宽度和高度之后。而margin，整体加起来，不符合视觉习惯。为了符合视觉习惯，border-box压缩了content的内容，除了margin的宽度。border从最左边到最右边的宽度就是宽度，这样的宽度符合视觉习惯。F12(Chrome)打开检查元素，查看开发者工具>样式内容框[width|高度]=contentborder-box[宽度|height]=content+padding+border很多人对盒子模型有误解。边距中重要的是盒子所占的位置，而不是盒子的大小！盒子的大小是content+padding+border，就是content（宽度）+innermargin加border，没有margin。内容二维宽高；可见边框、填充和边距二维-top,-bottmom,-left,-right;border可见，通过border-,border-style,border-color属性border:[border-width||边框样式||边框颜色|继承];padding和margin都是透明的（没有visible属性的透明元素），间接可见CSSpaddingmarginborder属性详解由Ruthless影响其他与框相关的内容mdn参考CSS基本框模型介绍mdn如果有背景（background-color或background-image)在盒子上，背景会延伸到边框的外缘（默认是延伸到边框下方，边框会覆盖背景）。可以使用CSS属性background-clip更改此默认行为。除了可替换元素，对于内联元素，虽然内容周围有padding和border，但是其占用的空间（每行文本的高度）是由line-height属性决定的，即使周围仍然显示border和padding内容。哪个更容易使用？border-box比较好用，因为width不需要考虑padding和border的影响。压缩内容。这取决于。如果你正在处理文本，你可以使用text-overflow来省略它，因为border-box的宽度将被Padding和border包含在内，以便更好地控制布局，特别是在响应式布局中。墙上有一篇推IE怪异的盒子模型的文章：《把所有元素的box-sizing都设置成border-box吧！》有一个推荐的很常用的做法：*{box-sizing:border-box;}块级盒子的默认宽度如果没有声明宽度,且框为静态或Relative定位，有内容，宽度会保持100%宽度，将padding和border的值改为不为0后，块级框会向内推，而不是向外扩展。但是，如果您将框的宽度明确设置为100%，则内边距将向外拉伸。框的默认宽度并不是真正的100%而是剩余的可能值（剩余的实际宽度）。在很多情况下，框的默认宽度（剩余的可能值）对于设置/不设置宽度非常有用。CSS盒模型详解+定位，翻页是CSSTricks:TheCSSBoxModel你真的了解浏览器盒模型吗？前端精华总结BorderboxVScontentboxDemomarginmergemargin的变态不会影响盒子本身的大小，但是会影响其他与盒子相关的内容。写margin方便，不用计算除以2的问题，直接合并父子margin合并（第一个子元素的topmargin，最后一个子元素的bottommargin）。如何防止父子合并（内部和外部块）的合并：使用padding/border来阻止合并，使用overflow:hidden来阻止合并，使用display:flex，我不知道为什么，不要问我，文档规定父子margin之间有padding或者border，所以加了一个barrier把父子margin隔开，自然不能合并合并兄弟（上下块）：果然，使用inline-block消除，单独计算margin不会合并css属性逐年递增，一一死记硬背基本单位长度单位px像素em相对于自身font-size的倍数1,2,3,4em=1x,2x,3x,4xfont-sizepercentageintegerremvw|vhothers,less,不用知道颜色hsla(h,s,l,a):(30°,100%,100%,0.5)rgba(r,g,b,a):(255,127,0,0.5)十六进制三元组：#FF7F00淘宝色#FF6600TransparenttransparentCSS值和单位mdnCSS长度mdn自动填充背景色给添加颜色body，和外面一样变成这个颜色，但不代表背景全是body。只有加上边框，才能看到body的实际范围。使用边界来确定身体的位置。W3C组织建议将网页上的所有对象放在一个盒子（box）中，设计者可以通过创建定义来控制盒子的属性，这些对象包括段落、列表、标题、图片和图层。盒子模型主要定义了四个区域：content、padding、border、margin。margin、background-color、background-image、padding、content、border之间的层次、关系及相互影响。使用3D绘制盒模型层次图margin：图层边框外的空白background-color：背景色background-image：背景图片padding：图层边框与图层边框内容之间的空白:bordercontent:content*使用CSS实现彩虹·未完待续·参考文章CSS基本概念.pdfCSS盒模型定位素养CSS盒模型完全介绍JS、BFC盒模型尺寸定位概念深入总结及盒模型、BFC、IFC、marginmerging等问题理解CSS盒模型WEB前端开发盒模型前端工程师手册盒模型说说我对盒模型的理解2017牛客介绍CSS盒模型？8BoxmodelCSSboxmodel-过去和未来2014CSS各种居中实现方法学习CSS布局学习CSS布局box-sizing相关文章无*作者：Joel文章链接：版权声明非免费转载-非商业-非衍生-留个签名河脑洞
