CSS世界--笔记

[Hjw52]

CSS世界

• 开发准则：宽度分离、无宽度，无图片，无浮动

盒模型

• height 和 width 还有一个比较明显的区别就是对百分比单位的支持。对于 width 属性， 就算父元素 width 为 auto，其百分比值也是支持的；但是，对于 height 属性，如果父元素 height 为 auto，只要子元素在文档流中，其百分比值完全就被忽略了。
• 绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的，区别 在于绝对定位的宽高百分比计算是相对于 padding box 的，也就是说会把 padding 大小值计算 在内，但是，非绝对定位元素则是相对于 content box 计算的。
• 超越最大指的是min-width覆盖max-width，此规则发生在min-width和max-width 冲突的时候。
• 超越!important 指的是 max-width 会覆盖 width，即使width使用 !important
• 固有尺寸、HTML 尺寸和 CSS 尺寸同时存在，起作用的是 CSS 属性限定的尺寸，
• 关于 padding 的属性值，其实没多少好说的。其一，和 margin 属性不同，padding 属性是不支持负值的；其二，padding 支持百分比值，但是，和 height 等属性的百分比计算规则 有些差异，差异在于：padding 百分比值无论是水平方向还是垂直方向均是相对于宽度计算的
• 百分比值应用内联元素，会：1.同样相对于宽度计算； 2.默认的高度和宽度细节有差异； 3. padding 会断行。
• 内联元素默认的 高度完全受 font-size 大小控制
• **元素尺寸：**对应 jQuery 中的$().width()和$().height()方法，包括 padding 和 border，也就是元素的 border box 的尺寸。在原生的 DOM API 中写作 offsetWidth 和 offsetHeight，所以，有时候也成为“元素偏移尺寸”。
• **元素内部尺寸：**对应 jQuery 中的$().innerWidth()和$().innerHeight()方法， 表示元素的内部区域尺寸，包括 padding 但不包括 border，也就是元素的 padding box 的尺寸。在原生的 DOM API 中写作 clientWidth 和 clientHeight，所以， 有时候也称为“元素可视尺寸”。
• **元素外部尺寸：**对应 jQuery 中的$().outerWidth(true)和$().outerHeight (true)方法，表示元素的外部尺寸，不仅包括 padding 和 border，还包括 margin， 也就是元素的 margin box 的尺寸。没有相对应的原生的 DOM API。
• 对于普通块状元素，在默认的水平流下，margin 只能改变左右方向的内部尺寸，垂直方 向则无法改变。如果我们使用 writing-mode 改变流向为垂直流，则水平方向内部尺寸无法 改变，垂直方向可以改变。这是由 margin:auto 的计算规则决定的。
• 使用 margin 负值实现等高布局:margin-bottom:-9999px; padding-bottom:9999px ,父级级 overflow:hidden 把多出来的块背景隐藏掉。margin 对尺寸的影响是针对具有块状特性的元素而言的，对于纯内联元素则不适用。，内联元素垂直方向的 margin 是没有任何影响的，既不会影响外部尺寸， 也不会影响内部尺寸。
• **margin合并：**1.只针对块级元素，但不包括浮动和绝对定位元素。 2.只发生在垂直方向，这种说法在不考虑 writing-mode 的情况下才 是正确的，严格来讲，应该是只发生在和当前文档流方向的相垂直的方向上。由于默认文档流 是水平流，因此发生 margin 合并的就是垂直方向
• 如何阻止父子margin合并：

对于 margin-top 合并，可以进行如下操作（满足一个条件即可）：

1. 父元素设置为块状格式化上下文元素；
2. 父元素设置 border-top 值；
3. 父元素设置 padding-top 值；
4. 父元素和第一个子元素之间添加内联元素进行分隔。

对于 margin-bottom 合并，可以进行如下操作（满足一个条件即可）：

1. 父元素设置为块状格式化上下文元素；
2. 父元素设置 border-bottom 值；
3. 父元素设置 padding-bottom 值；
4. 父元素和最后一个子元素之间添加内联元素进行分隔；
5. 父元素设置 height、min-height 或 max-height。

margin 合并的计算规则总结为“正正取大值”“正负值相加”“负负最负值”

• margin:auto 的填充规则如下： （1）如果一侧定值，一侧 auto，则 auto 为剩余空间大小。 （2）如果两侧均是 auto，则平分剩余空间。
• 绝对定位元素非定位方位的 margin 值“无效”。
• 借助 ex 单位，我们直接利用默认的 baseline 基线对齐实现不受字体和字号影响的内联元素的垂直居中对齐 效果

---

• 乎 line-height:1.5、line-height:150%和 line-height:1.5em 这 3 种 用法是一模一样的，最终的行高大小都是和font-size计算值，但是，实际上，line-height:1.5 和另外两个有一点儿不同，那就是继承细节有所差别。如果使用数值作为 line-height 的属性值， 那么所有的子元素继承的都是这个值；但是，如果使用百分比值或者长度值作为属性值，那么所有 的子元素继承的是最终的计算值。
• 无论内联元素 line-height 如何设置，最终父级元素的高度都是由数值大的 那个 line-height 决定的，我称之为内联元素 line-height 的大值特性
• vertical-align 起作用是有前提条件的，这个前提条件就是：只能应用于内联元 素以及 display 值为 table-cell 的元素
• table-cell 元素设置 vertical-align 垂 直对齐的是子元素，但是其作用的并不是子元素，而是 table-cell 元素自 身。就算 table-cell 元素的子元素是一个块级元素，也一样可以让其有各 种垂直对齐表现
• 对字符 而言，font-size 越大字符的基线位置越往下，因为文字默认全部都是基线对齐，所以当字 号大小不一样的两个文字在一起的时候，彼此就会发生上下位移，如果位移距离足够大，就会 超过行高的限制，而导致出现意料之外的高度

• vertical-align 属性的默认值 baseline 在文本之类的内联元素那里就是字符 x 的下 边缘，对于替换元素则是替换元素的下边缘。但是，如果是 inline-block 元素，则规则要 复杂了：一个 inline-block 元素，如果里面没有内联元素，或者 overflow 不是 visible， 则该元素的基线就是其 margin 底边缘；否则其基线就是元素里面最后一行内联元素的基线。

• 内联元素的上下边缘对齐的这个“边缘”是当前“行框盒子”的上下边缘， 并不是块状容器的上下边缘

• 倒是内联元 素的 vertial-align:middle 有很多说不完的故事。定义中“基线往上 1/2 x-height 处”， 指的就是 middle 的位置，仔细品味一下，“基线”就是字符 x 底边缘，而 x-height 就是字 符 x 的高度。考虑到大部分字体的字符 x 上下是等分的，因此，从“基线往上 1/2x-height 处”我们就可以看出是字符 x 中心交叉点的位置。换句话说就是，vertial-align:middle 可以让内联元素的真正意义上的垂直中心位置和字符 x 的交叉点对齐。 基本上所有的字体中，字符 x 的位置都是偏下一点儿的，font-size 越大偏移越明显， 这才导致默认状态下的 vertial-align:middle 实现的都是“近似垂直居中”。

• float 特性：

  1. 包裹性；
  2. 块状化并格式化上下文；
  3. 破坏文档流；
  4. 没有任何 margin 合并；

• clear 属性只有块级元素才有效的，而::after 等伪元素默认都是内联水平，这就是借 助伪元素清除浮动影响时需要设置 display 属性值的原因

定位

1. 根元素（很多场景下可以看成是）被称为“初始包含块”，其尺寸等同于浏览 器可视窗口的大小。
2. 对于其他元素，如果该元素的 position 是 relative 或者 static，则“包含块” 由其最近的块容器祖先盒的 content box 边界形成。
3. 如果元素 position:fixed，则“包含块”是“初始包含块”。
4. 如果元素 position:absolute，则“包含块”由最近的 position 不为 static 的祖先元素建立，具体方式如下。

• 如果该祖先元素是纯 inline 元素，则规则略复杂： • 假设给内联元素的前后各生成一个宽度为 0 的内联盒子（inline box），则这两个内联盒子的 padding box 外面的包围盒就是内联元素的“包含块”； 
• 如果该内联元素被跨行分割了，那么“包含块”是未定义的，也就是 CSS2.1 规范并没有明确定义，浏览器自行发挥。 否则，“包含块”由该祖先的 padding box 边界形成

• 一个绝对定位元素，没 有任何 left/top/right/bottom 属性设置，并且其祖先元素全部都是非定位元素，其位置在哪里？ 很多人都认为是在浏览器窗口左上方。实际上，还是当前位置，不是在浏览器左上方。

字体

• ex 是字符 x 高度，显然和 font-size 关系密切，font-size 值越大，自然 ex 对应的大小也就大
• em 在传统排版中指一个字模的高度 （可以脑补下活字印刷的字模），注意是字模的高度，不是字符的高度。其一般由'M'的宽度决 定（因为宽高相同），所以叫 em。在 CSS 中，1em 的计算值等同于当前元素所在的 font-size 计算值，可以将 其想象成当前元素中（如果有）汉字的高度
• rem，即 root em，顾名思义，就是根元素 em 大小。em 相对于当前元素，rem 相对于根元素，本质差别在于 当前元素是多变的，根元素是固定的，也就是说，如果使用 rem，我们的计算值不会受当前元 素 font-size 大小的影响。
• ch 和 em、rem、ex 一样，是 CSS 中和字符相关的相对单位。和 ch 相关的字符是 0，没 错，就是阿拉伯数字 0。1ch 表示一个 0 字符的宽度

如何权衡“易于实现维护”“视觉还原”“可访问性”这三者。

（1）即使是定宽的传统桌面端网页，也需要做响应式处理，尤其是针对 1200 像素宽度设 计的网页，但只需要响应到 800 像素即可，可以保证至少有 1.5 倍的缩放空间，如果做到这一 步，那么是否需要响应浏览器的字号设置这一点就可以忽略。

（2）如果因各种原因无法做响应式处理，也没有必要全局都使用相对单位，毕竟成本等现 实问题摆在那里，其实只需要在图文内容为主的重要局部区域使用可缩放的 font-size 处理 即可。例如，小说网站的阅读页、微信公众号文章展示区、私信对话内容区、搜索引擎的落地 页、评论区等，都强烈建议摒弃 px 单位，而采用下面的实践策略。

• 容器设置 font-size:medium，此时，这个局部展示区域的字号就跟着浏览器的设 置走了，默认计算值是 16px。

• 容器内的文字字号全部使用相对单位，如百分比值或者 em 都可以，然后基于 16px 进 行转换

桌面 Chrome 浏览器下有个 12px 的字号限制，就是文字的 font-size 计算值不能小于 12px，除了font-size：0

• 如果使用数值作为 font-weight 属性值，必须是 100～900 的整百数。因为这里的数值 仅仅是外表长得像数值，实际上是一个具有特定含义的关键字，并且这里的数值关键字和字母 关键字之间是有对应关系的，例如，font-weight:400 实际上等同于 font-weight: normal，font-weight:700 等同于 font-weight:bold。

• ::first-letter 伪元素生效的前提

  要想让::first-letter(:first-letter)伪元素生效，是需要满足一定条件的。 首先，元素的 display 计算值必须是 block、inline-block、list-item、tablecell 或者 table-caption，其他所有 display 计算值都没有用，包括 display:table 和 display:flex 等。不是所有的字符都能单独作为::first-letter 伪元素存在的，正常情况下可以直接作为伪元素的字符就是数字、英文字母、中文、$、一些运算符，以 及非常容易被忽视的空格等。这里的“空格”有必要再加粗强调一下，因为它的确是很容易被 忽视的一个字符。::first-letter 伪元素的另外一个重要特性—颜色等权重总是多了一层

• hsl 颜色的 3 个字母也有自己的含义。其中，h 表示 hue，是色调的意思，取值 0～ 360，大致按照数值红、橙、黄、绿、青、蓝、紫变化节奏；s 表示 saturation（饱和度），用 0～ 100%表示，值越大饱和度越高，颜色越亮，通常我们评价某设计“亮瞎我们的眼”，就是“这个设计颜色饱和度太高”的另一种说法；l 表示 lightness（亮度），也用 0～100%表示，值越高 颜色越亮，100%就是白色，50%则是正常亮度，0%就是黑色。