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

写在前面

• 书籍介绍：本书从前端开发人员的需求出发，以“流”为线索，从结构、内容到美化装饰等方面，全面且深刻地讲解前端开发人员必须了解和掌握的大量的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及以上版本浏览器适配的自适应解决方案：一、借助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（推荐使用纸质书来学习）
posted @ 2020-05-17 23:35  小磊哥er  阅读( ...)  评论( ...)  编辑  收藏
刷新评论 刷新页面 返回顶部
Copyright © 2020 小磊哥er
Powered by .NET Core on Kubernetes
并不适用；