两种盒模型

盒模型

直观地感受下盒模型demo

  • content-box 内容盒：以内容为盒子的边界（宽高度）
  • border-box 边框盒：以边框为盒子的边界（宽高度）

请说一下盒模型

标准回答：

CSS 盒模型分两种：

一种是content box，另一种是border box；

区别是：

content box的宽、高度只包含content；

border box的宽、高度包含到border（以内），包括border、padding和content；

区别

只在设置了宽高后有区别

content-box 是写了多少宽度，内容就是多少宽度，但是如果设置了padding、border和margin，整个加起来，不符合视觉习惯。

border-box 为了符合视觉习惯，压缩了content的内容，除去margin以外的宽度，边框的最左边到最右边就是宽度，从而使得宽度迎合视觉习惯

尺寸计算公式

在浏览器缩放比例为1的情况下，F12(Chrome)打开检查元素，查看开发者工具>Styles

content-box [width | height] = content

border-box [width | height] = content + padding + border

很多人对盒模型有误解。把margin算进去的那是盒子占据的位置，而不是盒子的大小！

盒子的大小为content+padding+border即内容的(width)+内边距的再加上边框，而不加上margin。

content 二维 width和height；可见

border、padding和margin 二维的-top,-bottmom, -left,-right；

border可见,通过 border-, border-style, border-color属性

border: [border-width ||border-style ||border-color |inherit] ;

padding和margin透明（无显现属性transparent elements），间接可见

CSS padding margin border属性详解 by Ruthless

影响和盒子有关的其他内容

mdn参考

CSS 基础框盒模型介绍 mdn

假如框盒上设有背景（background-color 或 background-image），背景将会一直延伸至边框的外沿（默认为在边框下层延伸，边框会盖在背景上）。此默认表现可通过 CSS 属性 background-clip 来改变。

除可替换元素外，对于行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（每一行文字的高度）则由 line-height属性决定，即使边框和内边距仍会显示在内容周围。

哪个好用

border-box 边框盒更好用，因为宽度不用考虑padding和border的影响，压缩点内容，要看，如果是处理文字，可以用text-overflow等来省略

因为border-box的width会将padding和border包含在内，布局时更好控制，尤其是在响应式布局中。

有一篇墙推IE怪异盒模型的文章：《把所有元素的box-sizing都设置成border-box吧！》

有一种推荐而且很常见的做法：

1
2
3

* {
    box-sizing:border-box;
}

块级盒的默认宽度

如果未声明宽度，并且盒子是静态或者相对定位，有内容content，宽度会保持 100％的 宽度，改变了padding 和 border的值不为0后， 块级盒会向内推动，而不是向外扩展。

但是，如果明确设置盒子的宽度为 100％，那么 padding 就会向外延展。

盒子的默认宽度并不真的是 100％

而是剩下的可能值(剩余真实存在的宽度)。

很多情况下，盒子的默认宽度（剩余可能值）对于设置/不设置宽度都是非常有用

CSS盒模型详解+定位，翻的是CSS Tricks: The CSS Box Model

你真的理解浏览器盒模型吗？

前端精华总结

边框盒 VS 内容盒Demo

变态的margin合并

margin不会影响盒子本身的大小，但是它会影响和盒子有关的其他内容，比如margin合并

哪些情况会合并

上下合并，左右不合并，这样设计，方便写margin时不用再算除以2的问题，直接合并

  • 父子margin合并（第一个子元素的上边距，最后一个子元素的下边距）
  • 兄弟间上下margin合并

如何阻止合并

父子合并（内外block）：

  • 用padding/border挡住合并
  • 用overflow:hidden挡住合并
  • 用display:flex，不知道为什么，别问我，文档规定

父子margin间存在padding或border，就加了阻隔，隔开父子margin，自然就不能合并了

兄弟合并（上下block）：

  • 符合预期的
  • 用inline-block消除，margin分开计算不会合并
  • CSS属性逐年增多，一条条死记

基本单位

长度单位

  • px像素
  • em相对于自身font-size的倍数1,2,3,4em=1x,2x,3x,4x font-size
  • 百分数
  • 整数
  • rem
  • vw | vh
  • 其他，少，不用了解

颜色

  • hsla(h, s, l, a): (30°, 100%, 100%, 0.5)

  • rgba(r, g, b,a): (255, 127, 0,0.5)

  • Hex triplet: #FF7F00

  • 淘宝色#FF6600

  • 透明transparent

CSS values and units mdn

CSS length mdn

自动填充背景色

在body上添加一个颜色，外面也同样变成这个色，但并不意味着背景全是body，只有加了border，才能看出body的实际范围

用border来确定body在哪

W3C 组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。

盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。

margin，background-color，background-image，padding，content，border之间的层次、关系和相互影响。

用3D画一张box model层次图

  1. margin：层的边框以外留的空白
  2. background-color：背景颜色
  3. background-image：背景图片
  4. padding：层的边框到层的内容之间的空白
  5. border：边框
  6. content：内容

用CSS实现彩虹

CSS 基础概念.pdf

CSS盒模型 定位扫盲

CSS盒模型完整介绍JS，BFC

盒模型 大小 定位

对盒子模型，BFC，IFC和外边距合并等概念和问题的总结

深入理解CSS盒模型

WEB前端开发 盒模型

前端工程师手册 盒模型

谈谈我对盒模型的理解2017

牛客 介绍一下CSS的盒子模型？

8 Box model

CSS的盒模型-过去和将来2014

CSS各种居中实现方式

学习CSS布局

学习CSS布局 box-sizing

参考文章

  • 无

相关文章

  • 无
  • 作者： Joel
  • 文章链接：
  • 版权声明
  • 非自由转载-非商用-非衍生-保持署名
  • 河 掘 思 知 简