想要清晰的明白（二）CSS 盒模型Block box与Line box

Vicky 发布于2019-08-30 13:03 / 3220人阅读

摘要：垂直格式化，有一个很重要的方面是会造成垂直相邻外边距合并，解决这个的方式见想要清晰的明白一中的部分。参考资料权威指南第三版为负值产生的影响和常见布局应用布局圣杯布局双飞翼布局深入理解和的基友关系深入理解中的行高

在上一篇想要清晰的明白（一）： CSS视觉格式化模型|盒模型|定位方案|BFC比较宏观的了解了盒子模型的作用，接下来就详细的介绍两种盒子的具体细节

Block Box

(图自《css权威指南》)

display ： block 、 list-item 以及 table 会让一个元素成为块级元素。
 在Block Box中，会被水平格式化，垂直格式化，那我们就分垂直和水平来讲讲

水平格式化 如何计算其宽度

正常流中，块级元素框的水平部分 = 其父元素的width = margin-left+margin-right + padding-left+padding-right+ border-left+border-right+自身width

这个理解非常重要！是等于其父元素的width！

width & margin & auto

为什么.a中设置padding为auto，均invalid？
在padding-left/right,margin-left/right,border-left/right,width（我们简称下水平7大属性）中只有margin和width的值可能为auto

设置margin-left为10px,显示正确，为什么margin-right是剩余的所有宽度?
因为当margin-left/right，width三个值均设置有固定宽度的时候，margin-right会根据包含块的width自动补齐

利用margin：0 auto 居中
所以，利用这种方式居中的时候，必须是要设置居中元素的宽度，这样左右margin的值便会相等，从而引起的居中，这个和text-align：center只能块级元素的内联内容设置居中是不一样的。

垂直格式化

height与width一样，height定义了内容区的高度，而不是元素框的高度。元素框上下的内边距，边距，都会增加到height值里。

只有三个属性可以设置auto，height，和margin-top/bottom。注意！这里如果margin-top和margin-bottom同时设置为auto，也不会垂直居中，而是默认为零。

垂直格式化，有一个很重要的方面是会造成垂直相邻外边距合并，解决这个的方式见想要清晰的明白（一）中的BFC部分。

负margin 水平方向

问：水平7大属性相加要等于父元素的width，那margin负值会造成什么？

若width不是固定值，那么width的值则会增大
因为要满足条件等于父元素width，负margin相当于负值，width auto自动增大
若width为固定值，那么margin-right则会auto增大来满足这个条件

灰色部分是body内的一个盒子，图二，没有定框使用负margin后，发生偏移，并且宽度增加，图三，定宽，发生偏移但是，宽度不增加，我们常常会发现出现莫名的水平滚动条，这里很有可能就是margin这小子在作祟

垂直方向

黑色是接在灰色div后的一个div,可以看到，margin-bottom为负值，不会造成元素本身的移动，而是造成兄弟元素往上移动，就像我不动，拉了下面的人一把，而margin-top为负值，就像我们排成一队，然后像兔子跳一样一起往前面跳了一步。

从图二也可以看出来，黑色盒子对灰色盒子发生了覆盖，因为浏览器总是按从前到后的顺序显示元素，所以文档中后出现的正常流元素可能会覆盖较早出现的元素。

可以发现，灰色盒子的高度依旧保持着并且渲染出来了，但是CSS读取的高度已经减小，下面的元素自然往上移动了

负margin与float应用 ——双飞翼

不知道为啥每次看到这名字，就....莫名的想笑，雅蠛蝶

    
      身子
    
    左边小翅膀
    右边小翅膀

分析

margin负值导致两个翅膀是覆盖在div.main上,我们看到的蓝色部分是.main-container,margin-left:-100%,相当于是把第二排的第一个，从后面拉动一个100%距离，也就是到了第一排和第一排第一个一起站着，第二排第一个走了，第二排第二个（也就是div.right）自动补到他的位置上，这时候又来了个margin-left：-200px利用到第二排第二个上，往前拉动200px的距离，于是就到了现在div.right的位置

总而言之，水平上的七个元素的宽度和一定会等于父元素的宽度

Line Box

每一行称为一条Line Box，它又是由这一行的许多inline-box组成，它的高度可以直接由line-height决定，line boxes的高度垂直堆叠形成了containing box的高度，就是我们见到的div或是p标签之类的高度了。

基础概念 匿名文本

当你只有一把锤子一切看起来都像是颗钉子

未包含在行内元素的字符串（当你只有一把锤子，都像颗钉子）就叫匿名文本

内容区行内框间距

内容区
css假设每个元素都会生成一个或者多个Box，称为元素框，元素框中心有内容区，内容区外周围包括了padding，border，margin，但是，替换元素是包括外边距，内边距，边框的。
行间距
行间距是font-size与line-height的差值，被分成两半在内容区的上下
行内框
非替换元素，行内框高度=line-height
替换元素，行内框高度=内容区宽度（行间距不应用到替换元素）
行高
两行文字基线的距离
行框
一行有很多行内框，行框是包含这一行行内框最高点和最低点的
基线
不同元素的基线位置不同，整个行框会有一个基线，行内元素的位置是基于两者基线对齐

vertical-align(垂直对齐)

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐的方式。
只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用.
同时也可以知道，改变其，会影响到行内框的位置，从而会影响到一整行行内元素的位置

需要注意vertical-align为数值时，会让文字上下移动，当其为百分比时是针对font-size的百分比

line-height（行高）


//这个div调整line-height不会发生变化，因为里面没有文字
 
//span的高度会随着line-height的变化而变化
//说明行内元素的高度是由line-height的支撑决定，行内框的高度也等于line-height

管理line-height

因为line-height是根据自己font-size设置，而不是父元素，所以将line-height设置为1em,该元素的line-height则会与相同（em单位是一般是相对与父元素进行设置大小）


    
        嘿嘿嘿，这里的line-height值为15px

margin padding border对行高的影响

行内元素其padding、margin、border-top、border-bottom 不会增加行高。
padding会覆盖；margin将重置为0；border-top和border-bottom同样会覆盖。

css2.1规定margin-top和margin-bottom可以运用到不是行内非替换元素的所有其他元素

行内替换元素（如：img）元素会影响行高

inline-block

将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

参考资料

《CSS 权威指南第三版》
《The Definitive Guide to Using Negative Margins》
margin为负值产生的影响和常见布局应用
CSS布局 -- 圣杯布局 & 双飞翼布局
CSS深入理解vertical-align和line-height的基友关系
深入理解CSS中的行高

GPU云服务器云服务器 box boxes html box- box 云存储

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115272.html

想要清晰的明白（一）： CSS视觉格式化模型|盒模型|定位方案|BFC

摘要：并且这种过程遵循标准的描述只要不是和绝对定位方式布局的，都在普通流里面。定位相对定位在普通流之中，是相对于它在普通流中的位置中进行移动，元素占据原来位置绝对定位脱离普通流，不占据空间相对于距离它最近的那个已定位的祖先相对绝对元素决定的。视觉格式化模型页面(文档树)可以想象成是由一个个的Box组合而成的，而视觉格式化模型(Visual formatting model)是一套规则，将...

Edison 2019-08-30 13:00 评论0 收藏0
【前端芝士树】详解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

摘要：提供了糟糕的支持，而虽然接近标准，但依旧未能完全正确的支持标准。尽管修复了许多的问题，但是依然延续实现中的其它故障主要是盒模型问题。因此大部分的声明将触发严格模式即依据标准的规则渲染网页。深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文将从盒模型开始，一步步涉及一些常见的前端笔试和面试点主要参考自第一篇文章，然而笔者在读的时...

binta 2019-08-29 16:13 评论0 收藏0
CSS中各种布局的背后(*FC)

摘要：中各种布局的背后，实质上是各种的组合。相反，一些块容器盒，比如非替换行内块及非替换表格单元格，不是块级盒。描述元素跟它的后代之间的影响。行盒行盒由行内格式化上下文产生的盒，用于表示一行。弹性容器外和弹性项目内的一切元素都不受影响。 CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。盒模型(Box M...

miracledan 2019-08-30 14:01 评论0 收藏0
CSS 面试题总结

摘要：而名作为标签的身份则是唯一的，在页面中只能出现一次。会导致父容器高度塌陷。堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。之后的内联对象会被排列在同一行内。的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清除浮动。 CSS 中类 (classes) 和 ID 的区别。书写上的差别：class名用.号开头来定义，id名用#号开头来定义；优先级不同（权重不同）调用上的...

tomato 2019-08-29 15:06 评论0 收藏0