两种盒模型

盒模型

直观地感受下盒模型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-colorbackground-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%的 宽度,改变了paddingborder的值不为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


·未完待续·

参考文章

相关文章