[书籍精读]《CSS世界》精读笔记分享

时间：2020-05-18 00:04:02 阅读：51 评论：0 收藏：0 [点我收藏+]

写在前面

书籍介绍：本书从前端开发人员的需求出发，以“流”为线索，从结构、内容到美化装饰等方面，全面且深入地讲解前端开发人员必须了解和掌握的大量的CSS知识点。同时，作者结合多年的从业经验，通过大量的实战案例，详尽解析CSS的相关知识与常见问题。
我的简评：《CSS世界》这本书颠覆了我对前端CSS的很多认知，说是在的，这本书读起来很烧脑，建议有一定CSS基础后再阅读。
！！福利：文末有pdf书籍、笔记思维导图、随书代码打包下载地址哦!阅读[书籍精读系列]所有文章，请移步：推荐收藏-JavaScript书籍精读笔记系列导航

第一章概述

1.1.CSS世界的“世界观”

将抽象的CSS直接和具体的现实世界相对应，更加易于理解
以完整的体系来学习CSS要比单纯关注属性值理解得更加深刻，可以培养从宏观层面认识与理解CSS的习惯
方便我们记忆，枯燥的代码总是过目就忘，鲜活的角色总是印象深刻

1.2.世界都是创造出来的

CSS世界的诞生就是为图文信息展示服务的

1.3.CSS完胜SVG的武器-流

现在看来，SVG显然要比Flash优秀很多，SVG开发、标准，和CSS和JavaScript都能很方便地进行交互
SVG的强项是图形，其文字内容的呈现实在不敢恭维
何为“流”：“流”实际上是CSS世界中德一种基本的定位和布局机制；CSS世界构建的基石是HTML，而HTML最具代表的两个基石
和正好是CSS世界中块级元素和内联级元素的代表；所谓“流”，就是CSS世界中引导元素排列和定位的一条看不见的“水流”；
流是如何影响整个CSS世界的：1.擒贼先擒王；2.特殊布局与流的破坏；3.流向的改变
什么是流体布局：所谓“流体布局”，指的是利用元素“流”的特性实现的各类布局效果；“流体布局”并不等同于“自适应布局”；“自适应布局”是对凡是具有自适应特性的一类布局的统称；

table自己的世界：比CSS还要老；“流”的特性对

并不适用；

人们对互联网的需求也在变化：1.布局更为丰富。移动端的崛起、弹性盒子布局、栅格布局；2.视觉表现长足进度。圆角、阴影和渐变、transform变换、filter滤镜和混合模式、animation动画；

第二章需提前了解的术语和概念

2.1.务必了解的CSS世界的专业术语

属性
值：常见的整数值，数字值外，还有字符串值、位置值等类型。在CSS3中，还有角度值、频率值、时间值等类型
关键字
变量：CSS3中的currentColor就是变量
长度单位：%不是长度单位
功能符：值以函数的形式指定（就是被括号括起来的那种），主要用来表示颜色（rgba和hsla）、背景图片地址(url)，元素属性值、计算(calc)和过渡效果等。
属性值
声明
声明块
规则或规则集
选择器：选择器是用来瞄准目标元素的东西
关系选择器：关系选择器是指根据与其他元素的关系选择元素的选择器
@规则：关系选择器是指根据与其他元素的关系选择元素的选择器

2.2.了解CSS世界中的“未定义行为”

在现实世界中，有法律来约束我们的行为，如果越界，就称为违法
在CSS世界里，有Web标准来约束元素的行为，如果越界，就称为bug
像这种规范顾及不到的细枝末节的实现，就称为“未定义行为”

第三章流、元素与基本尺寸

通常我们把HTML标签分为两类：块级元素和内联元素

3.1.块级元素

需要注意的是，块级元素和display为block的元素不是一个概念
<table>元素默认的display值是table，但是他们均是块级元素
块级元素的基本特征，也就是一个水平流上只能单独显示一个元素，多个块级元素则换行显示
IE浏览器不支持伪元素的display值为list-item
为什么list-item元素会出现项目符号：很多看似“理所当然”的现象背后，实际上可能有一整套的体系支撑；块级盒子就负责结构，内联盒子就负责内容；之所以list-item元素会出现项目符号是因为生成了一个附加的盒子，学名“标记盒子”，专门用来放圆点、数字这些项目符号；
display：inline-table的盒子是怎样组成的：外面是内联盒子，里面是table盒子。得到的就是一个可以和文字在一行中显示的表格
width/height作用在哪个盒子上：是内在盒子，也就是“容器盒子”

3.2.width/height作用的具体细节

深藏不露的width：auto：width的默认值是auto。它至少包含了一下4种不同的宽度表现（1.充分利用可用空间、2.收缩与包裹、3.收缩到最小、4.超出容器限制）；所谓流动性，并不是看上去的宽度100；格式化宽度具有完全的流体性，也就是margin、border、padding和content内容区域同样会自动分配水平（和垂直）空间；
width值作用的细节：内在盒子是由很多部分构成的，盒子的构成和地球的构成惊人的类似；内在盒子又被分成了4个盒子，分别content box、padding box、border box和margin box；margin的背景永远是透明的，因此不可能作为background-clip或background-origin属性值出现；或许是因为CSS2.1是面向内容（图文信息）设计的，所以，width设计成了直接作用在content box上；
CSS流体布局下的宽度分离原则：所谓“宽度分离原则”，就是CSS中的width属性不与影响宽度的padding/border属性共存；width、padding、border混用的时候，任何修改我们都需要实时去计算，在width应该设置多大才能和之前占用的宽度一样，而后面width分离的实现，我们没有任何计算；可能的挑战，过深的嵌套是会增加页面渲染和维护成本的
改变width/height作用细节的box-sizing：box-sizing的作用，改变了width作用的盒子。默认情况下，width是作用在content box上的，box-sizing的作用就是可以把width作用的盒子变成其他几个；为何box-sizing不支持margin-box，最大的原因是本身就没有价值。box-sizing就是改变尺寸作用规则的。margin只有在width为auto的时候可以改变元素的尺寸；为何box-sizing不支持margin-box，最大的原因是本身就没有价值。box-sizing就是改变尺寸作用规则的。margin只有在width为auto的时候可以改变元素的尺寸；经验：在CSS世界中，唯一离不开box-sizing：border-box的就是原生普通文本框input和文本域textarea的100%自适应父容器宽度；box-sizing被发明出来最大的初衷应该是解决替换元素宽度自适应问题
相对简单而单纯的height：auto：CSS的默认流是水平方向，宽度是稀缺的。高度是无限的。
关于height:100%：对于height属性，如果父元素height为auto，只要子元素在文档流中，其百分比值完全就被忽略了；对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值；绝对定位的宽高百分比计算是相对于padding box的，非绝对定位元素则是相对于content box计算的；

3.3.css min-width/max-width和min-height/max-height

为流体而生的min-width/max-width：在CSS世界中，min-width/max-width出现的场景一定是自适应布局或者流体布局中
与众不同的初始值：width/height的默认值是auto，而min-width/max-width和min-height/max-height的初始值则要复杂些；max-width和max-height的初始值是none，min-width和min-height的初始值是？虽然MDN和W3C维基的文档上都显示min-width/min-height的初始值是0，根据分析和测试，所有浏览器中德min-width/min-height的初始值都是auto；min-height/min-height的初始值是auto，max-width/max-height的初始值是none；
超越!important，超越最大：1.超越!important：指的是max-width会覆盖width，而且这种覆盖不是普通的覆盖，是超级覆盖；2.超越最大：设置最小宽度比最大宽度要大，min-width活下来，max-width被忽略；
任意高度元素的展开收起动画技术

3.4.内联元素

从作用上来讲，块级负责结构，内联负责内容
哪些元素是内联元素：1.从定义看：内联元素的内联特指外在盒子，和display为inline的元素不是一个概念。inline-block和inline-table都是内联元素；2.从表现看：内联元素的典型特征就是可以和文字在一行显示。实际上，浮动元素和后面的文字并不在一行显示，浮动元素已经在文档流之外
内联世界深入的基础-内联盒模型：1.内容区域：指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上一个字符盒子；2.内联盒子：不会让内容成块显示，而是排成一行。这里的内联盒子实际指的是元素的外在盒子，用来决定元素是内联还是块级；3.行框盒子：每一行就是一个行框盒子，每个行框盒子又是一个一个内联盒子；4.包含盒子：此盒子由一行一行的行框盒子组成；
幽灵空白节点：在HTML5文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确实存在，表现如同文本节点一样

第四章盒尺寸四大家族

4.1.深入理解content

content与替换元素：通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”；还有以下一些特性（1.内容的外观不受页面上的CSS的影响；2.有自己的尺寸；3.在很多CSS属性上有自己的一套表现规则）；替换元素的默认display值：所有的替换元素都是内联水平元素，也就是替换元素和替换元素、替换元素和文字都是可以在一行显示的；input按钮和button按钮的区别：当按钮文字足够多的时候，input按钮不会自动换行，button按钮则会；
content内容生成技术：content属性几乎都是用在::before/::after这两个伪元素中；1.content辅助元素生成；2.content字符内容生成；3.content图片生成；4.了解content开启闭合符号生成；5.content attr属性值内容生成；6.深入理解content计数器；7.content内容生成的混合特性

4.2.温和的padding属性

padding与元素的尺寸：在使用padding进行页面开发时候很少会出现意想不到的情况；CSS中还有很多其他场景或属性会出现这种不影响其他元素布局而是出现层叠效果的现象。如relative元素的定位、盒阴影box-shadow以及outline等；内联元素padding有用，对我们实际CSS开发的帮助；
padding的百分比值：其一，和margin属性不同，padding属性是不支持负值的；其二，padding支持百分比值；padding百分比值无论是水平方向还是垂直方向均是相对于宽度计算的；轻松实现自适应的等比例矩形效果；内联元素的垂直padding会让“幽灵空白节点”显现，也就是规范中的“struct”出现；
标签元素内置的padding：1.ol/ul列表内置padding-left，但单位是px不是em；2.很多表单元素都内置padding，如input、textarea、button、select、radio等；3.button按钮元素的padding最难控制的
padding与图形绘制：实现大队长的“三道杠”分类图标效果；实现双层圆点效果；

4.3.激进的margin属性

margin与元素尺寸以及相关布局：1.元素尺寸的相关概念；2.margin与元素的内部尺寸；3.margin与元素的外部尺寸；使用margin负值实现等高布局的优势在于兼容性足够，IE6浏览器支持，且支持任意个分栏等高布局；table-cell的优点时天然等高，不足在于IE8及以上版本浏览器才支持；内联元素垂直方向的margin是没有任何影响的，既不会影响外部尺寸，也不会影响内部尺寸；
margin的百分比值：和padding属性一样，margin的百分比值无论时水平方向还是垂直方向都是相对宽度计算的；由于margin合并的存在，垂直方向往往需要双倍尺寸才能和padding表现一致；
正确看待CSS世界里的margin：1.什么是margin合并；2.margin合并的3种场景；3.margin合并的计算规则；4.margin合并的意义；
深入理解CSS中的margin: auto
margin无效情形解析：因为width设置而闲置，而margin：auto就是为了填充这个闲置的尺寸而设计的；想让某个块状元素右对齐，脑子里不要就一个float：right，很多时候margin-left：auto才是最佳的实践；触发margin：auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的；让水平垂直居中的方法：绝对定位元素的margin：auto居中；
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无效；7.内联特性导致的margin无效；

4.4.功勋卓越的border属性

为什么border-width不支持百分比值：所谓边框，是不会因为设备大就按比例变大的。所以没有需要使用百分比值的场景；outline、box-shadow、text-shadow等，都是不支持百分比值得，原因与此类似；为什么border属性默认宽度大小是medium，也就是3px，因为border-style：double至少3px才有效果；
了解各种border-style类型：IE下的虚点是个圆；dotted类型边框天然就是一个圆，那我们要想在IE8下实现圆角效果就轻松多了；当边框为3px时，才开始有双线边框的表现，包括retina屏幕也是如此，因为边框宽度是没有半像素的概念的；
border-color和color：border-color默认颜色就是color色值。具有类似特性的CSS属性还有outline、box-shadow和text-shadow；上传图片时，往往后面会跟着一个带有加号的框框，这种简单的图形最适合三三两两的CSS代码绘制了；
border与透明边框：1.右下方background定位的技巧：background是相对左上角定位的，使用transparent边框表示，background-position的位置计算默认是不会把border-width计算在内的；2.优雅的增加点击区域大小：可以使用padding或者透明border增加元素的点击区域大小；3.三角等图形绘制：使用CSS的border属性绘制三角形等图形仍是性价比最高的方式；
border与图形构建：border属性可以轻松实现兼容性非常好的三角图形效果，其底层原因受inset/outset等看上去没有实用价值的border-style属性影响；把两个不同倾斜角度的三角效果叠加，则可以实现更加刁钻的尖角效果；
border等高布局技术：margin+padding可以实现等高布局，同样，border属性也可以实现等高布局；此方法与用margin+padding实现的等高布局相比更加稳健，不会出现锚点定位带来的问题，但同样有局限性的；由于border不支持百分比宽度，因此适合至少一栏是定宽的布局；等高布局的栏目有限制；

第五章内联元素与流

5.1.字母x-CSS世界中隐匿的举足轻重的角色

字母x与CSS世界的基线：在各种内联相关模型中，凡是涉及垂直方向的排版或者对齐的，都离不开最基本的基线；字母x的下边缘（线）就是我们的基线；
字母x与CSS中的x-height：CSS中有一个概念叫做x-height，指的是字母x的高度；vertical-align：middle并不是绝对的垂直居中对齐；
字母x与CSS中的ex：我们对连IE6都老早支持的ex单位很陌生；ex是CSS中的一个相对单位，指的是小写字母x的高度，没错，就是x-height；ex的价值就是在其副业上--不受字体和字号影响的内联元素的垂直居中对齐效果；借助ex单位，我们直接利用默认的baseline基线对其就可以实现图标文字中间位置对齐；

5.2.内联元素的基石line-height

内联元素的高度之本-line-height：不少人会认为div高度是由里面的文字撑开的，也就是font-size决定的，但本质上由line-height属性全权决定的，尽管某些场景确实与font-size大小有关；通常，line-height的高度作用细节都是使用“行距”和“半行距”来解释的；行距的作用是可以瞬间明确我们的阅读方向，让我们阅读文字更轻松；在CSS中，“行距”分散在当前文字的上方和下方，也就是即使是第一行文字，其上方也有“行距”的，只不过这个“行距”的高度仅仅是完整“行距”高度的一半；一般业界的共识：行距=行高-em-box，转换成CSS语言就是：行距=line-height-font-size；绝大多数的字体在内容区域中都是偏下的；虽然line-height不支持负值，但是行距可以是负值；line-height可以影响替换元素（如图片的高度）吗？不可以的；不是line-height把图片占据高度变高了，而是把“幽灵空白节点”的高度变高了。在HTML5文档模式下，每一个“行框盒子”的前面都有一个宽度为0的“幽灵空白节点”，其内联特性表现和普通字符一模一样；
为什么line-height可以让内联元素“垂直居中”：坊间说法：让单行文字垂直居中，只要设置line-height大小和height高度一样就可以了；两个严重误区（1.要让单行文字垂直居中，只要line-height这一个属性就可以，与height一点关系都没有；2.行高控制文字垂直居中，不仅适用于单行，多行也是可以的）；多行文本或者替换元素的垂直居中实现原理和单行文本就不一样了，需要line-height属性的好朋友vertical-align属性帮助才可以；line-height与多行文字垂直居中实现的原理；
深入line-height的各类属性值：line-height的默认值是normal，还支持数值、百分比值以及长度值；normal实际上是一个和fontfamily有着密切关联的变量值；不同操作系统的默认字体也不一样，换句话说，就是不同系统不同浏览器的默认line-height都是有差异的；line-height应该重置为多大的值呢？是使用数值、百分比值还是长度值呢？；注意，在CSS中，计算行高的时候，行高值一定不要向下舍入，而要向上舍入；
内联元素line-height的“大值特性”：无论内联元素line-height如何设置，最终父级元素的高度都是由数值大的那个line-height决定的，称之为内联元素line-height的大值特性；只要有“内联盒子”在，就一定会有“行框盒子”，就是每一行内联元素外面包裹的一层看不见的盒子；

5.3.line-height的好朋友vertical-align

vertical-align家族基本认识：凡是line-height起作用的地方vertical-align也一定起作用；把vertical-align属性之分为以下4类（线类、文本类、上标下标类、数值百分比类）；从这一点来看，vertical-align：baseline等同于vertical-align：0；vertical-align的属性值支持数值，更不知道支持负值；margin和padding是相对于宽度计算的，line-height是相对于font-size计算的，而这里vertical-align属性的百分比值则是相对于line-height的计算值计算的；
vertical-align作用的前提：vertical-align起作用是有前提条件的，是只能应用于元素以及display值为table-cell的元素；换句话说，vertical-align属性只能作用在display计算值为inline、inline-block、inline-table或table-cell的元素上；table-cell元素设置vertical-align垂直对齐的时子元素，但是其作用并不是子元素，而是table-cell元素自身；
vertical-align和line-height之间的关系：当字号大小不一样的两个文字在一起的时候，彼此就会发生上下位移，如果位移距离足够大，就会超过行高的限制，而导致出现意料之外的高度；常见的图片底部留有间隙的问题；间隙产生的三大元凶就是“幽灵空白节点”、line-height和vertical-align属性；要清楚该间隙，方法很多如下（1.图片块状化、2.容器line-height足够小、3.容器font-size足够小、4.图片设置其他vertical-align属性值）；text-align：justify声明可以帮助我们实现兼容的列表两端对齐效果；
深入理解vertical-align线性类属性值：总结的一套基于20px图标对齐的处理技巧（1.图标高度和当前行高都是20px；2.图标标签里面永远有字符；3.图标CSS不使用overflow：hidden保证基线为里面字符的基线，但是让里面潜在的字符不可见）；line-height和vertical-align：middle实现的多行文本或者图片的垂直居中全部都是“近似垂直居中”，原因与vertical-align：middle的定义有关；vertical-align：middle可以让内联元素的真正意义上的垂直中心位置和字符x的交叉点对齐；
深入理解vertical-align文本类属性值：所谓“父级内容区域”指的就是在父级元素当前font-size和font-family下应有的内容区域大小；文本类属性值为什么会有这样糟糕的际遇呢（1.使用场景匮乏；2.文本类垂直对齐理解成本高；3.内容区域不直观且易变）
简单了解vertical-align上标下标类属性：vertical-align上标下标类属性值指的是sub和super两个值，分别表示下标和上标；在HTML代码中，两个标签语义就是下标和上标，分别是上标^{和下标_{；vertical-align上标下标类属性值并不会改变当前元素的文字大小，千万不要被HTML标签中的^{和_{误导，因为这两个HTML标签默认font-size是smaller；}}}}
无处不在的vertical-align：对于内联元素，如果大家遇到不太好理解的现象，请一定要意识到，有个“幽灵空白节点”以及无处不在的vertical-align属性；vertical-align属性值的理解可以说是CSS世界中的最难点；vertical-align各类属性值不存在相互冲突的情况，虽然某个vertical-align属性值确实影响其他元素的表现，但是这种作用并不是直接的；
基于vertical-align属性的水平垂直居中：使用纯CSS实现大小不固定的弹框永远居中的效果；相比传统的JavaScript定位的方法的优点（1.节省了很多无谓的定位的JavaScript代码，也不需要浏览器resize事件之类的处理；2.性能更改、渲染速度更快，毕竟浏览器内置CSS的即时渲染显然比JavaScript的处理要更好；3.可以非常灵活控制垂直居中的比例；4.容器设置overflow：auto可以实现弹框高度超过一屏时依然能看见屏幕外的内容，传统实现方法则比较尴尬）

第六章流的破坏与保护

CSS中有一类属性，专门通过破坏正常的“流”来实现一些特殊的样式表现

6.1.魔鬼属性float

float的本质与特性：很可能会对float属性有误解，认为float属性就是为各种块状布局而设计的，实际上不是；很简单，一句话：浮动的本质就是为了实现文字环绕效果；一碰就碎，主要在于其缺少弹性，换句话说，就是布局的容错性很糟糕；浮动是魔鬼，少砌砖头、少浮动，要更多地去挖掘CSS世界本身的“浮动性”和“自适应性”，以构建能够适用于各种环境的高质量的网页布局；CSS2的设计是面向图文展示，CSS3的设计则是为了更绚丽的视觉效果和更丰富的网页布局；float有意思的特性：包裹性、块状化并格式化上下文、破坏文档流、没有任何margin合并；所谓包裹性，由包裹和自适应性两部分组成；
float的作用机制：float属性有个著名的特性表现，就是会让父元素的高度塌陷；一定要明确这一点，浮动使高度塌陷不是bug，而是标准；
float更深入的作用机制：为什么IE6和IE7浮动元素会下一行显示。规范确实约定浮动元素和内联元素在一行显示；两个和float相关的术语：一是浮动锚点（float元素所在流中的一个点），二是浮动参考（浮动元素对齐参考的实体）；
float与流体布局：float通过破坏正常CSS流实现CSS环绕，带来了烦人的“高度塌陷”的问题；可以利用float破坏CSS正常流的特性，实现两栏或多栏的自适应布局；

6.2.float的天然克星clear

什么是clear属性：CSS有一个专门用来处理float属性带来的高度塌陷等问题的属性，这个属性就是clear；解释为清除浮动是有问题的，浮动一直还在，并没有清除。官方对clear属性的解释是：元素盒子的边不能和前面的浮动元素相邻；考虑到float属性要么就left要么就right，不可能同时存在，同时由于clear属性对“后面的”浮动元素不闻不问；
成事不足败事有余的clear：clear属性只有块级元素才有效；::after等伪元素默认都是内联水平，借助伪元素清除浮动影响时需要设置display属性值；

6.3.css世界的结界-BFC

BFC的定义：BFC全称block formatting context，中文为“块级格式化上下文”；表现原则：如果一个元素具有BFC，内部子元素再怎么翻江倒海、翻云覆雨，都不会影响外部的元素；BFC元素是不可能发生margin重叠的。BFC元素也可以用来清除浮动的影响；什么时候会触发BFC，常见情况（根元素；float的值不为none；overflow的值为auto、scroll或hidden；display的值为table-cell、table-caption和inline-block中的任何一个；position的值不为relative和static；）
BFC与流体布局：BFC的结界特性最重要的用途其实不是去margin重叠或者是清除float影响，而是实现更健壮、更智能的自适应布局；和基于纯流体特性实现的两栏或多栏自适应布局相比，基于BFC特性的自适应布局有如下优点：自适应内容由于封闭而更健壮，容错性更强；自适应内容自动填满浮动以外区域，无需关心浮动元素宽度，可以整站大规模应用；单元格有一个非常神奇的特性，就是宽度设置的再大，实际宽度也不会超过表格容器的宽度；提炼出两套IE7及以上版本浏览器适配的自适应解决方案：1、借助overflow属性；2.融合display:table-cell和display:inline-block；这两种基于BFC的自适应方案均支持无限嵌套，因此，多栏自适应可以通过嵌套方式实现；

6.4.最佳结界overflow

要想彻底清除浮动的影响，最适合的属性不是clear而是overflow
一般使用overflow：hidden，利用BFC的“结界”特性彻底解决浮动对外部或兄弟元素的影响
overflow剪裁界线border box：一个很经典的不兼容问题，即Chrome浏览器下，如果容器可滚动（假设是垂直滚动），则padding-bottom也算在滚动尺寸之内，IE和Firfox浏览器忽略padding-bottom；实际项目开发的时候，要尽量避免滚动容器设置padding-bottom值，除了样式表现不一致外，还会导致scrollHeight值不一样；
了解overflow-x和overflow-y：overflow-x和overflow-y分别表示单独控制水平或垂直方向上的剪裁规则；除非overflow-x和overflow-y的属性值都是visible，否则visible会当成auto来解析；换句话说，永远不可能实现一个方向溢出剪裁或滚动，另一个方向内容溢出显示的效果；
overflow与滚动条：HTML中有两个标签式默认可以产生滚动条的，一个是根元素<html>，一个是文本域<textarea>；希望实现一个表格头固定、表格体可以滚动的效果，常见的实现方法是使用双<table>，表格头是一个独立的<table>,主体是一个独立的<table>元素，放在一个overflow:auto的<div>元素中；对齐问题的两种解决方法（1.<table>元素使用固定的宽度值，但是距离右侧留有17px的间隙；2.表格的最后一列不设定宽度(文字最好左对齐)，前面每一列都定死宽度；）
依赖overflow的样式表现：有一种效果离不开overflow:hidden声明，即单行文字溢出点点点效果
overflow与锚点定位：锚点定位行为的触发条件（1.URL地址中的锚链与锚点处于focus状态；2.可focus的锚点元素处于focus状态）；一般实现返回顶部效果都是使用这样的HTML：<a href="#">返回顶部</a>；“focus锚点定位指的是类似链接或者按钮、输入框等可以被focus的元素被focus时发生的页面重定位现象”；锚点定位行为的发生，本质上是通过改变容器滚动高度或者宽度来实现的；

6.5.float的兄弟position:absolute

当absolute和float同时存在的时候，float属性是无任何效果的
absolute的包含块：普通元素的百分比宽度是相对于父元素的content box宽度计算的，而绝对定位元素的宽度是相对于第一个position不为static的祖先元素计算的；内联元素的“包含块”是由“生成的”前后内联盒子决定的，与里面的内联盒子细节没有任何关系；跨行的兼容性问题在于规范对此行为并未定义，导致浏览器在实现上各有差异。主要差异在于，Firefox浏览器的“包含块”仅覆盖第一行，而IE和Chrome浏览器“包含块”的表现完全符合定义，由第一行开头和最后一行结尾的内联盒子共同决定；
具有相对特性的无依赖absolute绝对定位一个绝对定位元素，没有任何left/top/right/bottom属性设置，并且其祖先元素全部都是非定位元素，其位置还在当前位置，不是在浏览器左上方；“无依赖绝对定位”的强大之处（1.各类图标定位；2.超越常规布局的排版；3.下拉列表的定位；4.占位符效果模拟；比较好的做法是使用标签和输入框关联并覆盖在输入框上面，好处是点击占位文字输入框天然focus，并且不会污染输入框的value）
absolute与text-align：出人意料，text-align居然可以改变absolute元素的位置；本质上是“幽灵空白节点”和“无依赖绝对定位”共同作用的结果；设置height:0同时overflow:hidden，那岂不是里面所有元素都被剪裁看不见啦？普通元素确实会如此，但是对于absolute绝对定位以及fixed固定定位元素，规则要更复杂；

6.6.absolute与overflow

overflow对absolute元素的剪裁规则，一句话表述就是：绝对定位元素不总是被父级overflow属性剪裁，尤其当overflow在绝对定位元素及其包含块之间的时候
换一种方法表述就是：如果overflow不是定位元素，同时绝对定位元素和overflow容器之间没有定位元素，则overflow无法对absolute元素进行剪裁
当大家遇到absolute元被剪裁或者fixed固定定位失效时，可以看看是不是transform属性在作祟

6.7.absolute与clip

clip属性要想起作用，元素必须是绝对定位或者固定定位，也就是position属性值必须是absolute或者fixed
重新认识的clip属性：clip剪裁非常有用，在以下两种场景下具有不可替代的地位（1.fixed固定定位的剪裁；2.最佳可访问性隐藏）
深入了解clip：这些特性大家的认识都是一致的：使用clip进行剪裁的元素其clientWidth和clientHeight包括样式计算的宽高还是原来的大小；总结一下：clip隐藏仅仅是决定了哪部分是可见的，非可见部分无法响应点击事件等；然后，虽然视觉上隐藏，但是元素的尺寸依然是原来的尺寸，在IE浏览器和Firefox浏览器抹掉了不可见区域尺寸对布局的影响，Chrome浏览器却保留了；

6.8.absolute的流体特性

当absolute遇到left/top/right/bottom属性：当absolu变成绝对定位元素te遇到left/top/right/bottom属性的时候，absolute元素才真正
absolute的流体特性：实际上，绝对定位元素也具有类似的流体特性，当然不是默认就有的，而是在特定属性下才具有，条件是“对立方向同时发生定位的时候”；设置了对立定位属性的绝对定位元素的表现神似普通的
元素，无论设置padding还是margin，其占据的空间一致不变，变化的就是content box的尺寸，这就是典型的流体表现特性；
absolute的margin：auto居中：当绝对定位元素处于流体状态的时候，各个盒模型相关属性的解析和普通流体元素都是一模一样的，margin负值可以让元素的尺寸更大，并且可以使用margin：auto让绝对定位元素保持居中；区别在于，绝对定位元素margin：auto居中从IE8浏览器开始支持，而普通元素的margin：auto居中很早就支持了；如果绝对定位元素的尺寸是已知了，没有必要使用transform，百分比transform会让ios微信闪退，其实首推的方法就是利用绝对定位元素的流体特性和margin：auto的自动分配特性实现居中；

6.9.position:relative才是大哥

relative对absolute的限制
relative与定位：relative的定位有两大特性：一是相对自身，二是无侵入；当relative进行定位偏移的时候，一般情况下不会影响周围元素的布局；relative的定位还有另外两点值得一提：相对定位元素的left/top/right/bottom的百分比值是相对于包含块计算的，而不是自身；
relative的最小化影响原则：总结的一套更好的布局实践的原则，主分为两部分；1.尽量不使用relative，如果想定位某些元素，看看能否使用“无依赖的绝对定位”；2.如果场景受限，一定要使用relative，则该relative务必最小化；

6.10.强悍的position:fixed固定定位

固定定位之所以这么强悍，根本原因是其“包含块”和其他元素不一样
position：fixed不一样的包含块：position：fixed固定定位元素的“包含块”是根元素，我们可以将其近似看成元素。换句话说，唯一可以限制固定定位元素的就是根元素
position：fixed的absolute模拟：有时候我们希望元素既有不跟随滚动的固定定位效果，又能被定位元素限制和精准定位，可以使用position：absolute进行模拟。原理很简单：页面的滚动使用普通元素替代，此时滚动元素之外的其他元素自然就有了“固定定位”的效果
position：fixed与背景锁定：蒙层弹窗，其中黑色半透明全屏覆盖的蒙层基本上都是使用position：fixed定位实现的。缺点：蒙层无法覆盖浏览器右侧的滚动栏，并且鼠标滚动的时候后面的背景内容依然可以被滚动；如果希望背景被锁定，可以借鉴“absolute模拟fixed定位”的思路，让页面滚动条由内部的普通元素产生即可；移动端项目，阻止touchmove事件的默认行为可以防止滚动；桌面端项目，可以让根元素直接overflow：hidden；

第七章 css世界的层叠规则

所谓“层叠规则”，指的是当网页中德元素发生层叠时的表现规则

7.1.z-index只是css层叠规则中的一叶小舟

z-index属性只有和定位元素(position不为static的元素)在一起的时候才有作用，可以使是正数也可以是负数

7.2.理解css世界的层叠上下文和层叠水平

什么是层叠上下文：英文称作stacking context；HTML中的一个三维概念；可以把层叠上下文理解为一种“层叠结界”，自成一个小世界；
什么是层叠水平：层叠水平，决定了同一个层叠上下文中元素在z轴上的显示顺序；所有的元素都有层叠水平，包括层叠上下文元素，也包括普通元素；千万不要把层叠水平和CSS的z-index属性混为一谈；

7.3.理解元素的层叠顺序

表示元素发生层叠时有着特定的垂直显示顺序
层叠顺序规则：层叠上下文background/border》负z-index》block块状水平盒子》float浮动盒子》inline水平盒子》z-index:auto或看成z-index:0》正z-index
一些补充说明：位于最下面的background/border特指层叠上下文元素的边框和背景色；inline水平盒子指的是包括inline/inline-block/inline-table元素的“层叠顺序”，它们都是同等级别的；单纯从层叠水平上看，实际上z-index：0和z-index：auto是可以看成是一样的；

7.4.务必牢记的层叠准则

两条层叠领域的黄金准则：谁大谁上；后来居上；

7.5.深入了解层叠上下文

层叠上下文的特性：层叠上下文的层叠水平要比普通元素高；层叠上下文可以阻断元素的混合模式；层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”；每个层叠上下文和兄弟元素独立。当进行层叠变化或渲染的时候，只需要考虑后代元素；每个层叠上下文是自成体系的。当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中；
层叠上下文的创建：1.根层叠上下文指的是页面根元素，可以看成是元素；2.对于position值为relative/absolute以及Firefox/IE浏览器（不包括Chrome浏览器）下含有position：fixed声明的定位元素，当其z-index值不是auto的时候，会创建层叠上下文；差别就在于z-index：auto所在的
元素是一个普通定位元素
层叠上下文与层叠顺序：元素一旦成为定位元素，其z-index就会自动生效，此时其z-index就是默认的auto，也就是0级别，根据上面的层叠顺序表，就会覆盖inline或block或float元素；opacity的值不是1的时候，是具有层叠上下文的，层叠顺序是z-index：auto级别，跟没有z-index值得absolute绝对定位元素是平起平坐的；

7.6.z-index负值深入理解

z-index是支持负值的
z-index负值元素的层级是在层叠上下文元素上面、block元素的下面，也就是z-index虽然名为负数层级，但依然无法突破当前层叠上下文包裹的小世界
CSS3 transform可以让元素具有新的层叠上下文
z-index负值在实际项目中的作用：1.可访问性隐藏；2.IE8下的多背景模拟；3.定位在元素的后面；

7.7.z-index不犯二准则

准则内容：对于非浮层元素，避免设置z-index值，z-index值没有任何道理需要超过2
为什么需要这个准则：1.定位元素一旦设置了z-index值，就从普通定位元素变成了层叠上下文元素，相互间的层叠顺序就发生了根本的变化，很容易出现设置了巨大的z-index值也无法覆盖其他元素的问题；2.避免z-index一山比一山高的样式混乱问题；
对于JavaScript驱动的浮动组件，借助层级计数器来管理：1.总会遇到意想不到的高层级元素；2.组件的覆盖规则具有动态性；
所谓层级计数器，实际上就是一段JavaScript脚本，会遍历所有body处于显示状态的子元素，并得到最大z-index值，和默认的z-index做比较

第八章强大的文本处理能力

CSS就是凭借自身强大的文本处理和文本展示能力成为样式布局的标杆语言的。同时代的SVG的优势在于图形展示，在文本处理这一块实在是不敢恭维

8.1.line-height的另外一个朋友font-size

font-size和vertical-align的隐秘故事：line-height的部分类别属性值是相对于font-size计算的，vertical-align百分比值属性又是相对于line-height计算的；无论font-size如何变化，后面图标都垂直居中对齐的例子；原理如下：内联元素默认基线对齐，图片的基线可以看成是图片的下边缘，文字内容的基线是字符x下边缘；居中原理本质上和绝对定位元素50%定位加偏移自身1/2尺寸实现居中是一样的，只不过这里的偏移使用的是vertical-align百分比值；
理解font-size与ex、em和rem的关系：ex是字符x的高度，显然和font-size关系密切，font-size值越大，自然ex对应的大小也就大；但是em和字符m确实有关。em在传统排版中指一个字模的高度(可以脑补下活字印刷的字模)，注意是字模的高度，不是字符的高度。之所以叫做em完全取决于M的字形；CSS世界的渲染是一次渲染，是不会有死循环的；
理解font-size的关键字属性值：font-size的关键字属性值分为以下两类：相对尺寸关键字（相对于当前元素font-size计算）、绝对尺寸关键字（与当前元素font-size无关，仅受浏览器设置的字号影响）；如何权衡“易于实现维护”“视觉还原”“可访问性”三者，两个珍藏的建议；1.即使是定宽的传统桌面端网页，也需要做响应式处理，尤其是针对1200像素宽度设计的网页，但只需要响应到800像素即可，可以保证至少有1.5倍的缩放空间，如果做到这一步，那么是否需要响应浏览器的字号设置这一点就可以忽略；2.如果因各种原因无法做到响应式处理，也没有必要全局都使用相对单位，毕竟成本等现实问题摆在那里，其实需要在图文为主的重要局部区域使用可缩放的font-size处理即可；
font-size: 0与文本的隐藏：实际上，并不是所有小于12px的font-size都会被当作12px处理。有一个值例外，那就是0，也就是说，如果font-size：0的字号表现就是0，那么文字会直接被隐藏掉，并且只能是font-size：0，哪怕设置成font-size：0.00000001px，都会当作12px处理的

8.2.字体属性家族的大家长font-family

font-family默认值由操作系统和浏览器共同决定
字体族分为很多类：serif衬线字体、sans-serif无衬线字体、monospace等宽字体、cursive手写字体、fantasy奇幻字体、system-ui系统UI字体
了解衬线字体和无衬线字体：所谓衬线字体，通俗讲就是笔画开始、结束的地方有额外装饰而且笔画的粗细会有所不同的字体
等宽字体的实践价值：所谓等宽字体，一般是针对英文字体而言的
中文字体和英文名称
一些补充说明：微软正黑体是一款全面支持ClearType技术的TrueType无衬线字体，用于繁体中文系统；“思源黑体”和“思源宋体”是Adobe与Google合作推出的开源字体。其设计目标是可以广泛用于多种用途的计算机字体，比如用于手机、平板或者桌面的用户界面、网页浏览或者电子书阅读等，均包含7个字重；

8.3.字体家族其他成员

貌似粗犷、实则精细无比的font-weight：可不可以自创一个font-weight：550的写法？不可以；实际上，所有这些数值关键字浏览器都是支持的，之所以没有看到任何粗细的变化，是因为我们的系统里面缺乏对应粗细的字体；
具有近似姐妹花属性值得font-style：font-style表示文字造型是斜还是正；italic是使用当前字体的斜体字体，而oblique只是单纯的让文字倾斜；之所以会专门为一个字体设计倾斜字体，就是因为单纯倾斜的时候不好看；
不适合国情的font-variant：font-variant是一个从IE6时代就过来的CSS属性；在母语是英文的国家这个属性估计都用得不多；

8.4.font属性

作为缩写的font属性：如果你的CSS代码原本就没有line-height属性，使用font缩写反而是不推荐的；还有一个令人头疼的问题，就是font缩写必须要带上font-family；
使用关键字值的font属性：font属性除了缩写用法，还支持关键字属性值；各个关键字的含义若如下：（caption活动窗口标题栏使用的字体；icon包含图标内容所使用的字体；menu菜单使用的字体；message-box消息盒里面使用的字体）
font关键字属性值得应用价值：希望非Windows系统下不要使用微软雅黑字体，而是使用其系统字体；一种方法是可以试试使用非标准的-apple-system等关键字字体；实际上还真有标准的系统字体关键字，叫做system-ui；让网页的字体跟系统走，还有一个更加长远的好处。随着软件的不断发展，我们的操作系统的默认中文字体一定是越来越好看，如果网页的font-family定死为某个字体，用户就无法及时享受到新系统新字体带来的愉悦的视觉感受；

8.5.真正了解@font-face规则

@font face的本质是变量：@font face本质上就是一个定义字体或字体集的变量，这个变量不仅仅是简单的自定义字体，还包括重命名、默认字体样式设置等；@font face规则支持的CSS属性有font-family、src、font-style、font-weight、unicode-range、font-variant、font-stretch和font-feature-settings；如果是使用系统安装字体，则使用local()功能符，如果是使用外链字体，则使用url()功能符；format()功能符的作用是让浏览器提前知道字体的格式，以决定是否需要加载这个字体，而不是加载完了之后再自动判断；unicode-range的作用是可以让特定的字符或者特定字符范围的字符使用指定的字体；
@font face与字体图标技术：从面向未来的角度讲，字体图标技术的使用会越来越边缘化，因为和SVG图标技术相比，其唯一的优势就是兼容一些老的IE浏览器；SVG图标同样是矢量的，同样颜色可控，但资源占用更少，加载体验更好，呈现效果更佳，更加符合语义，我个人是非常推崇SVG图标的；两个需要关注的东西，一个是字体，另一个是字符，而这两个东西就是字体图标技术的本质所在；字体图标技术就是使用类似的原理实现的，即把通常的字符映射成为另外的图标形状；

写在后面

pdf书籍、笔记思维导图、随书代码打包下载地址：https://pan.baidu.com/s/1B9N5zFObIq4NU4QpSM5dZQ(提取码：lp46)
纸质书京东购买地址：https://u.jd.com/u8b3mt（推荐使用纸质书来学习）

[书籍精读]《CSS世界》精读笔记分享

原文：https://www.cnblogs.com/yzsunlei/p/12907750.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

[书籍精读]《CSS世界》精读笔记分享

写在前面

第一章 概述

1.1.CSS世界的“世界观”

1.2.世界都是创造出来的

1.3.CSS完胜SVG的武器-流

第二章 需提前了解的术语和概念

2.1.务必了解的CSS世界的专业术语

2.2.了解CSS世界中的“未定义行为”

第三章 流、元素与基本尺寸

3.1.块级元素

3.2.width/height作用的具体细节

3.3.css min-width/max-width和min-height/max-height

3.4.内联元素

第四章 盒尺寸四大家族

4.1.深入理解content

4.2.温和的padding属性

4.3.激进的margin属性

4.4.功勋卓越的border属性

第五章 内联元素与流

5.1.字母x-CSS世界中隐匿的举足轻重的角色

5.2.内联元素的基石line-height

5.3.line-height的好朋友vertical-align

第六章 流的破坏与保护

6.1.魔鬼属性float

6.2.float的天然克星clear

6.3.css世界的结界-BFC

6.4.最佳结界overflow

6.5.float的兄弟position:absolute

6.6.absolute与overflow

6.7.absolute与clip

6.8.absolute的流体特性

6.9.position:relative才是大哥

6.10.强悍的position:fixed固定定位

第七章 css世界的层叠规则

7.1.z-index只是css层叠规则中的一叶小舟

7.2.理解css世界的层叠上下文和层叠水平

7.3.理解元素的层叠顺序

7.4.务必牢记的层叠准则

7.5.深入了解层叠上下文

7.6.z-index负值深入理解

7.7.z-index不犯二准则

第八章 强大的文本处理能力

8.1.line-height的另外一个朋友font-size

8.2.字体属性家族的大家长font-family

8.3.字体家族其他成员

8.4.font属性

8.5.真正了解@font-face规则

写在后面

第一章概述

第二章需提前了解的术语和概念

第三章流、元素与基本尺寸

第四章盒尺寸四大家族

第五章内联元素与流

第六章流的破坏与保护

第八章强大的文本处理能力