第4章 盒尺寸四大家族
盒尺寸中的4个盒子content box、padding box、border box和margin box别离对应CSS世界中的content、padding、border和margin属性。
4.1 深刻了解content
4.1.1 content与替换元素
1、什么是替换元素
依据“外在盒子”是内联还是块级咱们能够把元素分为内联元素和块级元素，而依据是否具备可替换内容，咱们也能够把元素分为替换元素和非替换元素。
替换元素，顾名思义，内容能够被替换。
<img src="1.jpg">把下面的1.jpg换成2.jpg，图片就会被替换。这种通过 批改某个属性值出现的内容就能够被替换的元素就称为“替换元素”。因而，<img>、<object>、<video>、<iframe>或者表单元素<textarea>和<input>都是典型的替换元素。
替换元素除了内容能够替换这一个性以外，还有以下一些个性。
1）内容的外观不受页面上的CSS的影响。用业余的话讲就是款式体现在CSS作用域之外。（？？？？）
2)有本人的尺寸。
3）在很多CSS属性上有本人的一套规定。比拟具备代表性的就是vertical-align属性，对于替换元素和非替换元素，vertical-align属性值的解释是不一样的。比方说，vertical-align的默认值baseline，基线，被定义为字符x的下边缘，然而到了替换元素那里就不实用了。因为替换元素的内容往往不可能含有字符x，于是替换元素的基线被硬生生定义成了元素的下边缘。
2、替换元素的默认display值
所有的替换元素都是内联程度元素，也就是替换元素和替换元素、替换元素和文字都是能够在一行显示的。然而，替换元素默认的display值却是不一样的。
3、替换元素的尺寸计算规定
1）固有尺寸指的是替换内容本来的尺寸。例如，图片、视频作为一个独立文件存在的时候，都是有着本人的宽度和高度。这个宽度和高度的大小就是这里的“固有尺寸”。
2）HTML尺寸这个概念稍微形象，咱们无妨将其设想成水煮蛋外面的那一层红色的膜，外面是“固有尺寸”这个蛋黄蛋白，里面是“CSS尺寸”这个蛋壳。“HTML尺寸”只能通过HTMl原生属性扭转，这些HTML原生属性包含<img>的width和height属性、<input>的size属性、<textarea>的cols和rows属性等。
<img width="300" height="100">
<input type="file" size="30">
<textarea cols="20" rows="5"></textarea>3）CSS尺寸特指能够通过CSS的width和height或者max-width/min-width和max-height/min-height设置的尺寸，对应盒尺寸中的content box。
3层构造的计算规定如下：
- 如果没有CSS尺寸和HTML尺寸，则应用固有尺寸作为最终的宽高。
- 如果没有CSS尺寸，则应用HTML尺寸作为最终的宽高。
- 如果有CSS尺寸，则最终尺寸由CSS属性决定
- 如果“固有尺寸”含有固有的宽高比例，同时仅设置了宽度或仅设置了高度，则元素按照固有的宽高比例显示。
- 如果下面的条件都不合乎（如空内容的状况下，video、canvas、iframe这些元素），则最终宽度的体现为300像素，高度为150像素。
- 内联替换元素和块级替换元素应用下面同一套尺寸计算规定。
5、content与替换元素关系分析
在CSS世界中，把content属性生成的对象称为“匿名替换元素”。
content属性生成的内容都是替换元素。
4.2 温和的padding属性
4.2.1 padding与元素的尺寸
CSS中默认的box-sizing是content-box，所以应用padding会减少元素的此村。
对于非替换元素的内联元素，不仅padding不会退出行盒高度的计算，margin和border也都是如此，都是不计算高度，但实际上在内联盒四周产生了渲染。
4.2.2 padding的百分比值
其一，和margin属性不同，padding属性是不反对负值的；其二，padding反对百分比值，然而，和height等属性的百分比计算规定有些差别，差别在于：padding百分比值无论是程度方向还是垂直方向均是绝对于宽度计算的！
4.2.3 标签元素内置的padding
padding属性和background-clip属性配合，能够在无限的标签下实现一些CSS图形绘制成果。
backgrounf-clip设置元素的背景（背景图片或色彩）是否延长到边框、内边距盒子、内容盒子上面。
4.3 激进的margin属性
padding性情温和，负责内间距；而margin则比拟激进，负责外间距。
4.3.1 margin与元素尺寸以及相干布局
1、元素尺寸的相干概念
- 元素尺寸：在原生的DOM API中写作offsetWidth和offsetHeight，包含padding和border，也就是元素的border box尺寸，所以，有时候也称为“元素偏移尺寸”。
- 元素外部尺寸：元素的外部区域尺寸，包含padding但不包含border，也就是元素的padding box的尺寸。在原生的DOM API中写作clientWidth和clientHeight，所以，有时候也称为“元素可视尺寸”。
- 元素内部尺寸：示意元素的内部尺寸，不仅包含padding和border，还包含margin，也就是元素的margin box的尺寸。没有绝对应的原生的DOM API。
2、margin与元素的外部尺寸
margin同样能够扭转元素的可视尺寸，然而和padding简直是互补态势。
什么意思呢？
对于padding，元素设定了width或放弃“包裹性”的时候，会扭转元素可视尺寸；然而对于margin则相同，元素设定了width值或放弃“包裹性”的时候，margin对尺寸没有影响，只有元素是“充分利用可用空间”状态的时候，margin才能够扭转元素的可视尺寸。
4.3.2 margin的百分比值
和padding属性一样，margin的百分比值无论是程度方向还是垂直方向都是绝对于宽度计算的，不过绝对于padding，margin的百分比值的利用价值就低了一截，根本原因在于和padding不同，元素设置margin在垂直方向上无奈扭转元素本身的外部尺寸，往往须要副元素作为载体，此外，因为margin合并的存在，在垂直方向往往须要双倍尺寸能力和padding体现统一。
4.3.3 正确看待CSS世界里的margin合并
1、什么是margin合并
块级元素的上外边距和下外边距有时会合并为单个外边距，这样的景象称为“margin合并”。
重要信息：
1）块级元素，但不包含浮动和相对定位元素，只管浮动和相对定位能够让元素块化。
2）只产生在垂直方向，须要留神的是，这种说法在不思考writing-mode的状况下才是正确的，严格来讲，应该是只产生在和以后文档流方向的相垂直的方向上。因为默认文档流是程度流，因而产生margin合并的就是垂直方向。
2、margin合并的3种场景
margin合并有以下3种场景。
1）相邻兄弟元素margin合并。
2）父级和第一个/最初一个子元素。
对于margin-top合并，能够进行如下操作（满足一个条件即可）：
- 父元素设置为块状格式化上下文元素（https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context）
- 父元素设置border-top值；
- 父元素设置padding-top值；
- 父元素和第一个子元素之间增加内联元素进行分隔。
对于margin-bottom合并，能够进行如下操作（满足一个条件即可）：
- 父元素设置为块状格式化上下文元素；
- 父元素设置border-bottom值；
- 父元素设置padding-bottom值；
- 父元素和最初一个子元素之间增加内联元素进行分隔；
- 父元素设置height、min-height或max-height。
3）空块级元素的margin合并。（空块级元素的上下边距合并。）
对于空块级元素的margin合并，能够进行如下操作（满足一个条件即可）：
- 设置垂直方向的border；
- 设置垂直方向的padding；
- 外面增加内联元素（间接Space键空格是没用的）；
- 设置height或者min-height。
3、margin合并的计算规定
margin合并的计算规定总结为“正正取大值”“正负值相加”“负负最负值”3句话。
4.3.4 深刻了解CSS中的margin:auto
margin:auto的填充规定如下：
1）如果一侧定值，一侧auto，则auto为残余空间大小。
2）如果两侧均是auto，则平分残余空间。
4.3.5 margin有效情景解析
margin有效的情景：
1）display计算值inline的非替换元素的垂直margin是有效的，尽管标准提到有渲染，但浏览器体现却未寻得一点形迹，这和padding是有显著区别的。对于内联替换元素，垂直margin无效，并且没有margin合并的问题，所以图片永远不会产生margin合并。
2）表格中的<tr>和<td>元素或这是display计算值是table-cell或table-row的元素的margin都是有效的。然而，如果计算值是table-caption、table或inline-table则没有此问题，能够通过margin管制外间距。
3）margin合并的时候，更改margin值可能是没有成果的。
4）相对定位元素非定位方位的margin值“有效”。（看着“有效”）
5）定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“生效”。
6）遥相呼应导致的margin有效。（看第六章内容）
7）内联个性导致的margin有效。（看第五章内容）
发表回复