CSS 世界 阅读笔记:（Ch4-下篇）

CSS 世界 阅读笔记:（Ch4-上篇）

• CSS 世界 阅读笔记:
• • Ch4 盒尺寸四大家族
  • • 4.3 激进的margin 属性
    • • 4.3.1 margin 与元素尺寸以及相关布局
      • 4.3.2 margin 的百分比值
      • 4.3.3 正确看待CSS 世界里的margin 合并
      • 4.3.4 深入理解CSS 中的margin:auto
      • 4.3.5 margin 无效情形解析
    • 4.4 功勋卓越的border 属性

CSS 世界 阅读笔记:

对于CSS 这门语言，3 年学习80 分和10 年学习90 分对于产品价值的区别其实有限。
拨开眼前的面纱，定睛一看，会发现，缺的其实不是前端，而是优秀的、有资历的、技术有深度的前端开发人员。
在CSS 的世界里，页面上的任何看似简单的呈现都是由许许多多CSS 属性共同作用的结果。

Ch4 盒尺寸四大家族

4.3 激进的margin 属性

4.3.1 margin 与元素尺寸以及相关布局

1．元素尺寸的相关概念

元素尺寸：对应jQuery 中的$().width()和$().height()方法，包括padding 和border，也就是元素的border box 的尺寸。
元素内部尺寸：对应jQuery 中的$().innerWidth()和$().innerHeight()方法，表示元素的内部区域尺寸，包括padding 但不包括border，也就是元素的padding box 的尺寸。
元素外部尺寸：对应jQuery 中的$().outerWidth(true)和$().outerHeight(true)方法，表示元素的外部尺寸，不仅包括padding 和border，还包括margin，也就是元素的margin box 的尺寸。
“外部尺寸”的大小有可能是负数。把“外部尺寸”理解为“元素占据的空间尺寸”。

2．margin 与元素的内部尺寸

对于margin，元素设定了width 值或者保持“包裹性”的时候，margin 对尺寸没有影响，只有元素是“充分利用可用空间”状态的时候，margin 才可以改变元素的可视尺寸。
CSS 世界默认的流方向是水平方向，因此，对于普通流体元素，margin 只能改变元素水平方向尺寸；但是，对于具有拉伸特性的绝对定位元素，则水平或垂直方向都可以，因为此时的尺寸表现符合“充分利用可用空间”。

.box { overflow: hidden; }
.box > img { float: left; }
.box > p { margin-left: 140px; }

<div class="box">
	<img src="1.jpg">
	<p>文字内容...</p>
</div>

3．margin 与元素的外部尺寸

对于外部尺寸，只要元素具有块状特性，无论有没有设置width/height，无论是水平方向还是垂直方向，即使发生了margin 合并，margin 对外部尺寸都着着实实发生了影响。
可以借助margin 的外部尺寸特性来实现底部留白，利用margin 外部尺寸实现等高布局等。

.column-box {
	overflow: hidden;
}
.column-left,
.column-right {
	margin-bottom: -9999px;
	padding-bottom: 9999px;
}

垂直方向margin 无法改变元素的内部尺寸，但却能改变外部尺寸，这里我们设置了margin-bottom:-9999px 意味着元素的外部尺寸在垂直方向上小了9999px。默认情况下，垂直方向块级元素上下距离是0，一旦margin-bottom:-9999px 就意味着后面所有元素和上面元素的空间距离变成了-9999px，也就是后面元素都往上移动了9999px。此时，通过神来一笔padding-bottom:9999px 增加元素高度，这正负一抵消，对布局层并无影响，但却带来了我们需要的东西—视觉层多了9999px 高度的可使用的背景色。但是，9999px 太大了，所以需要配合父级 overflow:hidden 把多出来的色块背景隐藏掉，于是实现了视觉上的等高布局效果。

4.3.2 margin 的百分比值

和 padding 属性一样，margin 的百分比值无论是水平方向还是垂直方向都是相对于宽度计算的。不过相对于padding，margin 的百分比值的应用价值就低了一截，根本原因在于和padding 不同，元素设置margin 在垂直方向上无法改变元素自身的内部尺寸，往往需要父元素作为载体，此外，由于margin 合并的存在，垂直方向往往需要双倍尺寸才能和padding 表现一致。

4.3.3 正确看待CSS 世界里的margin 合并

1．什么是margin 合并

块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距，这样的现象称为“margin 合并”。

2．margin 合并的3 种场景

（1）相邻兄弟元素margin 合并。
（2）父级和第一个/最后一个子元素。
在子元素上设置的margin-top，但实际上就等同于在父元素上设置了margin-top。
对于 margin-top 合并，可以进行如下操作（满足一个条件即可）：
• 父元素设置为块状格式化上下文元素；
• 父元素设置border-top 值；
• 父元素设置padding-top 值；
• 父元素和第一个子元素之间添加内联元素进行分隔。
对于margin-bottom 合并，可以进行如下操作（满足一个条件即可）：
• 父元素设置为块状格式化上下文元素；
• 父元素设置border-bottom 值；
• 父元素设置padding-bottom 值；
• 父元素和最后一个子元素之间添加内联元素进行分隔；
• 父元素设置height、min-height 或max-height。
overflow: hidden; 通过设置overflow 属性让父级元素块状格式化上下文
（3）空块级元素的margin 合并。
空<div>元素的margin-top 和margin-bottom 合并。

3．margin 合并的计算规则

“正正取大值”“正负值相加”“负负最负值”

4．margin 合并的意义

<h2>、<p>、<ul>默认全部都是有垂直方向的margin 值的，而且单位全部都是em。
对于兄弟元素的margin 合并其作用和em 类似，都是让图文信息的排版更加舒服自然。
父子margin 合并的意义在于：在页面中任何地方嵌套或直接放入任何裸<div>，都不会影响原来的块状布局。自身 margin 合并的意义在于可以避免不小心遗落或者生成的空标签影响排版和布局。

4.3.4 深入理解CSS 中的margin:auto

（1）如果一侧定值，一侧auto，则auto 为剩余空间大小。
（2）如果两侧均是auto，则平分剩余空间。
由于 CSS 世界中margin 的初始值大小是0，因此，如果margin-right 缺失，margin-left:auto 实现的效果正好是块级元素的右对齐效果。所以，如果想让某个块状元素右对齐，脑子里不要就一个float:right，很多时候，marginleft:auto 才是最佳的实践，浮动毕竟是个“小魔鬼”。

4.3.5 margin 无效情形解析

（1）display 计算值inline 的非替换元素的垂直margin 是无效的。
（2）表格中的<tr>和<td>元素或者设置display 计算值是table-cell 或table-row 的元素的 margin 都是无效的。
（3）margin 合并的时候，更改margin 值可能是没有效果的。
（4）绝对定位元素非定位方位的margin 值“无效”。
（5）定高容器的子元素的margin-bottom 或者宽度定死的子元素的margin-right 的定位“失效”。
（6）鞭长莫及导致的margin 无效。

<div class="box">
	<img src="mm1.jpg">
	<p>内容</p>
</div>

.box > img {
	float: left;
	width: 256px;
}
.box > p {
	overflow: hidden;
	margin-left: 200px;
}

其中的margin-left:200px 是无效的，准确地讲，此时的<p>的margin-left 从负无穷到256px 都是没有任何效果的。
（7）内联特性导致的margin 无效。
一个容器里面有一个图片，然后这张图片设置margin-top 负值，让图片上偏移。但是，随着我们的负值越来越负，结果达到某一个具体负值的时候，图片不再往上偏移了。

4.4 功勋卓越的border 属性

4.4.1 为什么border-width 不支持百分比值

是语义和使用场景决定的。所谓“边框”，是不会因为设备大就按比例变大的。因此，如果支持百分比值，是不是就意味着设备大了边框也跟着变大？这显然不合“边框”的语义嘛！
border-width 还支持若干关键字，包括thin、medium（默认值）和thick，对应的尺寸大小具体如下。
• thin：薄薄的，等同于1px。
• medium（默认值）：薄厚均匀，等同于3px。
• thick：厚厚的，等同于4px。

4.4.2 了解各种border-style 类型

1．border-style:none 注意，border-style 的默认值是none。
2．border-style:solid 实线边框。
3．border-style:dashed 虚线边框。
4．border-style:dotted 虚点边框。
5．border-style:double 双线边框，顾名思义，即两根线且为实线。border-style:double 的表现规则：双线宽度永远相等，中间间隔±1。可以实现一些等宽的图形效果。

.icon-menu {
	width: 120px;
	height: 20px;
	border-top: 60px double;
	border-bottom: 20px solid;
}

6．其他border-style 类型 inset（内凹）、outset（外凸）、groove（沟槽）、ridge（山脊）风格老土过时，且兼容性惨不忍睹。

4.4.3 border-color 和color

border-color 默认颜色就是color 色值，当没有指定border-color 颜色值的时候，会使用当前元素的color 计算值作为边框色。
绘制一个带有加号的框框按钮，然后hover 的时候会变个色。

.add {
    display: inline-block;
    width: 76px; height: 76px;
    color: #ccc;
    border: 2px dashed;
    transition: color .25s;
    position: relative;
}
.add:hover {
    color: #34538b;
}
.add::before, .add::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
}
.add::before {
    width: 20px;
    border-top: 4px solid;
    margin: -2px 0 0 -10px; /* transform: translate(-50%, -50%) 可实现自适应宽高 */
}
.add::after {
    height: 20px;
    border-left: 4px solid;
    margin: -10px 0 0 -2px; /* transform: translate(-50%, -50%) 可实现自适应宽高 */
}

4.4.4 border 与透明边框技巧

1．右下方background 定位的技巧
2．优雅地增加点击区域大小
3．三角等图形绘制

border: 10px solid;
border-color: #f30 transparent transparent;

4.4.5 border 与图形构建

让垂直方向的边框宽度更宽一点，这样三角形就会更加狭长：

border-width: 10px 20px;
border-style: solid;
border-color: #f30 transparent transparent;

仅仅让两个方向的边框透明：

border-width: 10px 20px;
border-style: solid;
border-color: #f30 #f30 transparent transparent;

4.4.6 border 等高布局技术

元素边框高度总是和元素自身高度保持一致，因此可以巧妙地实现等高布局效果。
父级容器不能使用overflow:hidden 清除浮动影响，因为溢出隐藏是基于padding box 的，如果设置了overflow:hidden，则左浮动的导航列表元素就会被隐藏掉。
局限性：
首先，由于border 不支持百分比宽度，因此，适合至少一栏是定宽的布局。
其次，等高布局的栏目有限制。