5分钟搞懂css里面的盒模型_个人文章 - SegmentFault 思否
教你5分钟搞懂css里面的盒模型什么是盒模型在html中,我们写的标签,很多都是有盒模型的,也就是在css里面,我们为这些标签设置样式的时候,实际上就是为这些盒子设置样式。可能这样不是很好理解,我们来
顺晟科技
2021-07-31 07:31:42
321
css是一门具象语言,并不像js那样具有逻辑性,因此,就算入行了前端很久的工程师,也觉得css难以掌握。下面我们就一步一步揭开css的神秘面纱,深入理解css盒模型,这对我们在布局上会有一个质的提升。
相信很多人对这幅图都不陌生,盒子模型简单点理解就是外边距(margin)+边框(border)+内边距(padding)+内容(content),页面所呈现的效果其实就是一个个盒子堆叠而成的。每一个元素其实是包含了一个“外在盒子”和一个“内在盒子”,其中“外在盒子”负责元素是一行显示还是换行显示,而“内在盒子”则负责宽高、内容展现。我们都知道inline-block(inline对应于“外在盒子”,block对应于“内在盒子”),而block可以简单地理解为block-block,table为block-table(因为还有一个inline-table)。
内容区域(content area)。内容区域指的是一种围绕文字看不见的盒子,其大小仅受字符本身特性控制,本质上是一个字符盒子(character box);但是图片这样的替换元素,其显示内容不是文字,因此内容区域可以看成是元素自身。
内联盒子(inline box)。“内联盒子”不会让内容成块显示,而是排成一行,这里的内联盒子指的是元素的“外在盒子”,用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”。如下:
行框盒子(line box)。每一行就是一个行框盒子,每个行框盒子都是由一个个内联盒子组成,注意:line-height是作用在行框盒子上的,并最终决定高度(替换元素除外,后面会讲解什么是替换元素)。
包含盒子(containing box)。此盒子由一行一行的“行框盒子”组成(css规范中,并没有“包含盒子”的说法,更准确的称呼是“包含块”(containing block)。
width的默认值是auto,但很多人却都不理解这个值是什么意思,因为auto在不同场景会有不同的表现:
fill-available:充分利用可用空间,例如div、p这些元素的宽度是默认于父级容器的。但是width: auto却不同于width: ,这是很多人不理解的地方。如果你设置了width: ,这里指的是内容区域,即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的默认值也是auto,指的是其高度由内部元素堆叠而成,内部元素盒子有多高,元素就有多高。但在定位中,若同时设置了top与bottom,则其高度由父盒子高度减去top与bottom。
height: 。如果父元素height为auto,则子元素height:是无效的,要想子元素height: 生效,则:
由于替换元素在很多表现上都与普通内联元素不一样,因此在这里着重介绍一下替换元素。
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的这些特性,我们可以实现如下效果:
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在某些场景下会失效,但有些“失效”只是视觉上的表现而已。如下:
相信不少同学都使用过border来制作图形,例如三角形、圆形等等,此处就不举例子,主要讲讲等高布局,代码和效果如下所示:
其原理就是父元素撑开一个border-left,菜单栏左浮动,并且宽度跟父元素border保持一致,通过margin-left负值往左偏移到border位置,另外父元素设置伪元素after来清除浮动,这样就可以实现左侧固定,右侧自适应的两栏等高布局。
本文转自:https://segmentfault.com/a/1190000014692461
19
2022-10
19
2022-10
19
2022-10
15
2022-09
15
2022-09
14
2022-09