持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情
前言
在工作中，发现了自己的问题，但愿日后我也能写出高质量的 CSS 代码。再次阅读 《CSS 世界》，记录其中一些知识点。CSS 本身并无逻辑可言，看重的是特性间的互相联系和具象能力
width
width:auto 这个是默认值，在默认情况下他有四种表现形式：
- 充分利用可利用的空间，不管内容是否能够填充父元素的宽度，默认就是父元素的宽度（
width:100%) - 收缩与包裹，浮动，绝对定位，
inline-block,table宽度根据内容撑开，最大不超过父元素的宽度 - 收缩到最小，默认如果是有多个子元素，就选择子元素最大的那个宽度作为宽度，赋给所有的子元素
- 超出容器限制，当元素设置了
white-space:nowrap的时候，会超出父元素的宽度
默认宽度具有流动性（margin/border/padding/content 自动分配水平空间），会像流水一样铺满整个父容器，一旦我们设置了宽度之后，流动性就丢失了。建议是最好能不用去限制宽度就不要限制，因为默认元素的尺寸是 margin/border/padding/content 之和，而我们平时写的 width 只是 content 的宽度，容易导致元素比我们想象中要大。（无宽度原则，少了代码，少了计算，少了维护，何乐而不为）
默认情况下 width 是有内部尺寸决定的，
当元素有 position:absolute 的时候，如果只有 position:absolute 根据内容撑开宽高
=> position:absolute 有对立属性（ left 和 right，top 和 bottom）的时候，根据对立属性撑开的元素的宽/高度，根据最近不为static的元素撑开宽高（div:{ position: absolute; left: 20px; right: 20px;} 距离他最近具有定位特性的祖先元素宽度是 100px ; 则这个 div 元素的宽度是 60px，高度同理（如果你给元素设定的宽高，则对立属性撑开的元素的宽/高度失效
我们可以设置 box-sizing: border-box 去改变 width 的作用范围，但是 margin 所占据元素的宽度仍然是存在的，只是相对比之前要好很多。
max-width 宽度覆盖 width 宽度 min-width 宽度覆盖 max-widh 即 width < max-width < min-width，如果有 min-width 或者 max-width 存在，!important 作用在 width 上面会失效。
height
height: auto 这个是默认值，他的子元素设置百分比值的高度是会失效的，子元素设置 height：100% 要想生效，他的父级必须要有一个可以生效的高度；
注意了： 对于绝对定位元素而已，宽高的百分比是相对于 padding box 计算的，非绝对定位的元素是相对于 content box 计算。
line-height
div 的高度是由 line-height 高度决定的，而不是 font-size [例子]。
无论内联元素 line-height 怎么设置，最终父级元素高度都是由数值最大的那个 line-height 决定。
可以是数值，百分比，或者长度值（长度值是指带单位的），在父元素上面并没有任何区别，区别在于继承样式上面。字符实际占据的高度是由 line-height 决定的。
line-height 设置数值的时候，子元素继承的是属性值，可以根据字体大小动态设置的。如果是百分比或者长度值，子元素继承的是计算之后的高度，是固定的。具体怎么用需要根据需求，如果是考虑到渲染性能的，建议使用算好的数值，避免浏览器的二次计算样式渲染。
行距 = line-height - font-size，line-height 小于 1，会使得文字部分重合在一起，对于纯文字 line-height 直接决定最终高度，对于替换元素只能决定最小高度。
替换元素
元素的内容能够被替换的元素，所有的替换元素都是内敛水平元素，个别浏览器的实现方式不一样，有些是 display: inline 或者是 display: inline-block
替换元素的尺寸计算规则：
- 固有尺寸：替换内容原本的尺寸
- HTML尺寸：写在 html 元素上面的尺寸，比如
<img width='300'> - CSS尺寸：可以通过 css 的
width/min-width..设置的尺寸 优先级从上往下越来越高，如果只设置某一个属性，剩下的一个会按照原有图片比例的大小设置
注意：我们设置图片的尺寸，并不是修改元素的固有尺寸，只是修改了在页面的填充（适配方式），如果我们设置了 object-fit:none; 设置图片的html尺寸或者css尺寸会失效，object-fit 的实现原理和background-size在某些方面类似。
content 内容生成技术用的最多的是 ::before 和 ::after 中；content 属性改变仅仅是视觉效果,本质上是没有变化的[例子]。用于辅助元素的生成（清除浮动伪元素）字符内容的生成。
content 生成的文本无法选中复制，就好像设置了 user-select:none 一样。
padding
CSS 中默认 box-sizing 是 content-box ,所以使用 padding 会增加元素的尺寸（假设没有设置 box-sizing: padding-box），属性不支持负数，百分比无论是水平方向还是垂直方向上均是相对于该元素的父元素的宽度计算的（有朋友在面试的时候被问到过，如果 padding-top: 1em 是基于字体大小，如果字体是 16px ，那么 padding-top: 16px;。
百分比无论是水平方向还是垂直方向上均是相对于该元素的父元素的宽度计算的，我们可以实现根据父元素的宽度，自适应的修改子元素的宽度。
.box {
padding: 10% 50%;
position: relative;
}
.box > img {
// 宽高比5:1
position: absolute;
width: 100%;
eight: 100%;
left: 0;
top: 0;
}
内联元素的 padding 会影响视觉效果上面的布局[例子]。因为内联元素垂直方向上的行为表现完全受 line-height 和 vertical-align 的影响。通过例子可以证明元素的尺寸空间受 padding 的影响了，在层叠区域上，覆盖了父级，如果我们给父元素设置 overflow：auto，如果出现了滚动条，则就会影响尺寸，影响页面布局，可以在刚刚的例子上面尝试。
margin
margin 无法改变当前元素的尺寸，改变的只是当前元素的位置，这一点和 padding 表现不一样。但是他会改变包裹着他的父元素的尺寸,属性支持负数。百分比无论是水平方向还是垂直方向上均是相对于该元素的父元素的宽度计算的。滚动浏览器底部留白我们推荐使用 margin，因为 padding 有兼容性问题。
如果 margin 两侧都是 auto 则均分剩余空间，如果一侧定值，另一侧 auto， 则 auto 为剩余空间。
常规流中的块级非置换元素需要满足：
'margin-left' + 'border-left-width' + padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含块的宽度
若恰好只有一个值被指定为 auto ，则该使用值由等式求出。
margin 如果存在垂直方向上（margin-top）面的合并，可以通过设置父元素的 padding-top 或者 border-top，或者块状格式化元素实现，垂直向上的不发生合并。
幽灵空白节点
如果我们在开发中遇到 div span { display: inline-block } 其中 div span 都没有设置高度，但是默认会有 18px 或者更多的高度像素存在，就是因为幽灵空白节点的作用，消除这种幽灵空白节点的的方式有 设置 span { display:inline}, 或者设置 div 的 font-size：0；或者 height 为 0。
div 里面用img 标签的时候，div 下方会撑大3px 这个也是因为幽灵空白节点的存在，解决方案： img 标签加上 display: block 或者给父元素div加上 font-size：0。
