深入理解css盒子模型

css是一门具象语言,并不像js那样具有逻辑性,因此,就算入行了前端很久的工程师,也觉得css难以掌握。下面我们就一步一步揭开css的神秘面纱,深入理解css盒模型,这对我们在布局上会有一个质的提升。

盒子模型

图片描述
相信很多人对这幅图都不陌生,盒子模型简单点理解就是外边距(margin)+边框(border)+内边距(padding)+内容(content),页面所呈现的效果其实就是一个个盒子堆叠而成的。每一个元素其实是包含了一个“外在盒子”和一个“内在盒子”,其中“外在盒子”负责元素是一行显示还是换行显示,而“内在盒子”则负责宽高、内容展现。我们都知道inline-block(inline对应于“外在盒子”,block对应于“内在盒子”),而block可以简单地理解为block-block,table为block-table(因为还有一个inline-table)。

内联盒模型

  • 内容区域(content area)
  • 内联盒子(inline box)
  • 行框盒子(line box)
  • 包含盒子(containing box)

内容区域(content area)。内容区域指的是一种围绕文字看不见的盒子,其大小仅受字符本身特性控制,本质上是一个字符盒子(character box);但是图片这样的替换元素,其显示内容不是文字,因此内容区域可以看成是元素自身。

内联盒子(inline box)。“内联盒子”不会让内容成块显示,而是排成一行,这里的内联盒子指的是元素的“外在盒子”,用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”。如下:
图片描述

行框盒子(line box)。每一行就是一个行框盒子,每个行框盒子都是由一个个内联盒子组成,注意:line-height是作用在行框盒子上的,并最终决定高度(替换元素除外,后面会讲解什么是替换元素)。

包含盒子(containing box)。此盒子由一行一行的“行框盒子”组成(css规范中,并没有“包含盒子”的说法,更准确的称呼是“包含块”(containing block)。

width

width的默认值是auto,但很多人却都不理解这个值是什么意思,因为auto在不同场景会有不同的表现:

  • fill-available
  • fit-content
  • min-content
  • max-content

fill-available:充分利用可用空间,例如div、p这些元素的宽度是默认100%于父级容器的。但是width: auto却不同于width: 100%,这是很多人不理解的地方。如果你设置了width: 100%,这里指的是内容区域100%,即css3中的content-box,这时如果你设置了padding、border或者margin,元素都会撑破父元素,从而破坏布局。你当然可以设置box-sizing: border-box,但可惜的是css3中没有margin-box,这时候你如果设置了margin,依然会撑破父元素,但是width: auto却不会,如下所示:

图片描述

图片描述

fit-content:收缩到合适,典型代表浮动、绝对定位(有例外,设置了对立属性:left、right、top、bottom时,宽度和高度由祖先元素position非static的元素决定,但是替换元素除外:img、video、canvas等)、inline-block、table。利用这个特性我们可以实现,文字整体居中,多行则居左显示,如下:

图片描述

图片描述

图片描述

min-content:收缩到最小。在表格中最常见,当每一列空间都不够的时候,文字能断则断,中文随便断,英文单词不能断。可以根据这个特性实现凹凸图形等效果,如下:

图片描述

图片描述

图片描述

max-content:超出容器限制,内容很长的连续英文或数字,或者内联元素被设置为了white-space: nowrap。

图片描述

图片描述

图片描述

height

height的默认值也是auto,指的是其高度由内部元素堆叠而成,内部元素盒子有多高,元素就有多高。但在绝对定位中,若同时设置了top与bottom,则其高度由父盒子高度减去top与bottom。

height: 100%。如果父元素height为auto,则子元素height:100%是无效的,要想子元素height: 100%生效,则:

  • 父元素设定显式高度值
  • 使用绝对定位(绝对定位元素的百分比是根据padding box计算的,非绝对定位元素百分比是根据content box计算的)

替换元素

由于替换元素在很多表现上都与普通内联元素不一样,因此在这里着重介绍一下替换元素。

  • 根据“外在盒子”是内联还是块级,我们把元素分为内联元素和块级元素,而根据内容是否可替换,我们把元素分为可替换元素和非替换元素。
  • <img>,<video>,<canvas>,<input>,<textarea>,<iframe>都是替换元素。
  • 替换元素外观不受页面css的影响,有自己的尺寸,一般为300 * 150,在很多css属性上有自己的一套表现规则,例如vertical-align默认就是元素下边缘对齐,而不是基线对齐。
  • 替换元素尺寸计算规则:css尺寸 > html尺寸 > 固有尺寸
  • 内联替换元素和块级替换元素规则一致,即display: block,其宽度也不会100%。
  • 替换元素固有尺寸无法更改,width和height改变的是content-box的宽高,而默认替换元素的object-fit是fill,也就是会填充content-box,因此看上去像是改变了固有尺寸。
  • 替换元素before和after伪元素无效。

padding

  • padding与内联元素
  • padding的百分比值

padding与内联元素。padding作用在块级元素上会影响盒子的宽高,但是如果作用在内联元素上(不包括替换元素),似乎就只能作用在水平方向上,垂直方向上就没看到任何影响。但事实并不是没有影响,只是视觉上我们觉得没有影响而已。因为内联元素没有可视宽度和可视高度的说法(clientWidth和clientHeight永远是0),垂直方向完全受line-height和vertical-align的影响,视觉上并没有改变上一行和下一行内容的间距,因此,给我们的感觉就是垂直方向上padding没有起作用。利用这个特性,我们可以在垂直方向上增大可点击区域,这样既不会破坏现有布局,也能很好地响应用户的点击。特别是在移动端,一个关闭的“x”如果太小,用户就很难点击到,调大字体又会影响布局,这时候就可以用到padding。

padding的百分比值。padding不支持负值,padding百分比无论宽高都是相对于width来说的,另外padding区域是跟着行框盒子走的。因此,如果padding作用于内联元素,则宽度和高度细节有差异,并且padding会断行,其原因在于strut,意思是说每一个行框盒子前面都有一个不可见的盒子,其line-height和font-size都继承于父元素,称为strut。利用padding的这些特性,我们可以实现如下效果:

  • 利用padding实现一个正方形

图片描述

图片描述

图片描述

  • 内联元素padding高度差异(只需把font-size设为0即可变为正方形)

图片描述

图片描述

图片描述

  • padding断行(由于padding作用在行框盒子上,因此文字换行,padding也跟着换行,后面的背景盖住了前面的,就形成了这种效果)

图片描述

图片描述

margin

  • margin: auto
  • margin改变元素尺寸
  • margin负值
  • margin合并
  • margin无效的情况

margin: auto生效的前提是元素在width和height为auto的时候能够自动填充容器,这样,在设置width或height的值时,如果还有剩余尺寸,margin: auto就可以利用剩余尺寸。因此在绝对定位元素设置了top、bottom、left、right的情况下,就可以很方便地实现水平垂直居中,如下:

图片描述

图片描述

图片描述

margin改变元素尺寸。在元素width为auto的情况下,margin正值和负值都能改变元素的尺寸。如下:

图片描述

图片描述

图片描述

margin负值。margin支持负值,并且用途十分广泛,例如,在等宽的盒子中,最后一个元素不因margin-right而折行;实现等高布局等。如下:

盒子并列占满父元素:

图片描述

图片描述

图片描述

图片描述

等高布局,其原理是利用padding撑开一片足够大的高度,再用margin负值将顶下去的元素收回来:

图片描述

图片描述

图片描述

margin合并。块级元素的上外边距与下外边距有时会合并为单个外边距,这种现象称为“margin合并”。一般会有以下三种:

1、相邻兄弟元素margin合并

2、父级和第一个/最后一个子元素合并

margin-top合并,解决方案:

    父元素设置为块状格式化上下文元素
    父元素设置border-top值
    父元素设置padding-top值
    父元素和第一个子元素之间添加内联元素进行分隔

margin-bottom合并,解决方案:

    父元素设置为块状格式化上下文元素
    父元素设置border-bottom值
    父元素设置padding-bottom值
    父元素和最后一个子元素之间添加内联元素进行分隔
    父元素设置 height、min-height 或 max-height。

3、空块级元素的margin合并,即自身有margin-top和margin-bottom,但元素是空的,此时会合并为一个margin。

margin无效。margin在某些场景下会失效,但有些“失效”只是视觉上的表现而已。如下:

  • display 计算值 inline 的非替换元素的垂直 margin 是无效的,虽然规范提到有 渲染,但浏览器表现却未寻得一点踪迹,这和 padding 是有明显区别的。对于内联替换元素, 垂直 margin 有效,并且没有 margin 合并的问题,所以图片永远不会发生 margin 合并。
  • 表格中的<tr>和<td>元素或者设置 display 计算值是 table-cell 或 table-row 的元素的 margin 都是无效的。但是,如果计算值是 table-caption、table 或者 inline-table 则没有此问题,可以通过 margin 控制外间距,甚至::first-letter 伪元素也可以解析 margin。
  • margin合并的时候,更改margin值可能无效。因为垂直方向上会发生margin合并。
  • 绝对定位元素非定位方位的margin值“无效”(其实margin是有效的,只是元素绝对定位了,并不影响其相邻元素的渲染)。
  • 定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。这里的失效也是假的,原因跟绝对定位的margin无效类似,在一个默认流下,其定位方向是左侧和上方,此时只有margin-left和margin-top可以影响其定位,而margin-right和margin-bottom则只会影响其相邻元素,若此时没有相邻元素,则看上去像是margin无效。
  • 内联特性导致的margin值无效。一个div元素中有一个img图片,我们对img使用margin-top负值,当margin-top负值达到一定值的时候,再往上图片也不会上移。

border

  • 制作图形
  • 等高布局

相信不少同学都使用过border来制作图形,例如三角形、圆形等等,此处就不举例子,主要讲讲等高布局,代码和效果如下所示:

图片描述

图片描述

图片描述

其原理就是父元素撑开一个border-left,菜单栏左浮动,并且宽度跟父元素border保持一致,通过margin-left负值往左偏移到border位置,另外父元素设置伪元素after来清除浮动,这样就可以实现左侧固定,右侧自适应的两栏等高布局。

参考资料:
《CSS世界》


859 声望
30 粉丝
0 条评论
推荐阅读
深入理解css之BFC
BFC的全称是block formatting context(块状格式化上下文),当BFC起作用的时候,其元素内部无论怎么翻江倒海都不会影响到外部元素,同样,外部元素的变化也不会影响到BFC内部元素,这就跟结界一样,你可以理解为...

郑兆龙1阅读 2.8k

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy45阅读 5.8k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木63阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木41阅读 7.2k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.3k评论 2

封面图
859 声望
30 粉丝
宣传栏