12.2 改变 CSS 世界纵横规则的 writing-mode。很长时间，Firefox、Chrome 这些现代浏览器都不支持 writing-mode，writing-mode 基本上就是 IE 浏览器的私有产物。 12.2.1 writing-mode 原本的作用， 是用来实现文字竖向呈现的。 writing-mode 的语法 writing-mode: horizontal-tb，默认值，文本流是水平方向； writing-mode: vertical-rl; 文本是垂直方向，阅读的顺序是从右往左； writing-mode: vertical-lr; 示文本是垂直方向展示，后阅读的顺序还是默认的从左往右； 相同的 writing-mode 属性值并不

11.2.2 自定义光标： cursor: url('transparent.cur')解决ie8不支持cursor：none的问题； chromm可以用png，ie需要使用.cur格式的光标文件。 12.1 改变水平流向的direction direction：ltr / rtl 使用场景：某些语言、展示顺序、文字超出省略号在前面（配合text-align: left） 黄金搭档：unicode-bidi direction改变图片、按钮的顺序，纯字符文内容无效，借助unicode-bidi解决 作用：明确字符出现双向性时的表现 unicode-bidi：embed开启一个嵌入层，自己在里面重新排序

11.2.2 自定义光标 对于 Chrome 等浏览器，可以直接使用 PNG 图片作为光标 第12章 流向的改变 12.1 改变水平流向的 direction 一、direction：ltr 是初始值，表示 left-to-right，就是从左往右； rtl 表示 right-to-left，就是从右往左； 1、改变元素的水平呈现顺序； 2、让单行文字溢出的点打在开头，让前面的文字省略； 二、unicode-bidi normal：正常排列； embed：embed； bidi-override：重写双向排序规则；

11.2.2 自定义光标。对于 Chrome 等浏览器，可以直接使用 PNG 图片作为光标，但是 IE 浏览器不行。IE 仅支持专门的.cur 格式的光标文件，需要使用工具进行格式转换。 12.1 改变水平流向的 direction。 12.1.1 direction 简介，ltr 是初始值，表示 left-to-right，就是从左往右的意思。rtl 表示 right-to-left，就是从右往左的意思。阿拉伯语（Arabic）、希伯来语（Hebrew）等的书写就是从右往左的，direction 设计的本意其实是为了兼顾这类语言。 direction 改变水平流向的特性在

11.2.2 自定义光标： cursor: url('transparent.cur')解决ie8不支持cursor：none的问题； chromm可以用png，ie需要使用.cur格式的光标文件。 12.1 改变水平流向的direction direction：ltr / rtl 使用场景：某些语言、展示顺序、文字超出省略号在前面（配合text-align: left） 黄金搭档：unicode-bidi direction改变图片、按钮的顺序，纯字符文内容无效，借助unicode-bidi解决 作用：明确字符出现双向性时的表现 unicode-bidi：embed开启一个嵌入层，自己在里面重新排序

一、规模和结构： 当组织有利于工作的时候， 效率就会提高；反之， 当出现不必要的结构层次且需要大量交流才能完成工作的时候， 效率就会降低。 1、可以通过标准化来提高组织效率 （1）例如：工时统计的痛点：工时设计千人千面，无统一标准，工时产出的合理性无法感性认知。 解法： 通用的组件，可拆解复用的协议，尽可能多的配置化、自动化，大的领域划分和职能规范化， 都可以消灭不确定性， 给出确信的工时。 （2）例如：代码编写同

第11章 用户界面样式 用户界面样式指的是 CSS 世界中用来帮助用户进行界面交互的一些 CSS 样式，主要有outline 和 cursor 等属性。 11.1 和 border 形似的 outline 属性 一、不可在全局设置 outline: 0 none 在默认状态下，对处于focus状态的元素，浏览器会通过虚框或者外发光的形式进行区分和提示;这种虚框或者外发光效果是非常有必要的，否则用户根本就不知道自己当前聚焦在哪个元素上，甚至因此而迷失； 二、真正的不占据空间的 outline 及其应用 outline属性确

第11章 用户界面样式 用户界面样式指的是 CSS 世界中用来帮助用户进行界面交互的一些 CSS 样式，主要有outline 和 cursor 等属性。 11.1 和 border 形似的 outline 属性 一、不可在全局设置 outline:0 none 在默认状态下，对处于focus状态的元素，浏览器会通过虚框或者外发光的形式进行区分和提示;这种虚框或者外发光效果是非常有必要的，否则用户根本就不知道自己当前聚焦在哪个元素上，甚至因此而迷失； 二、真正的不占据空间的 outline 及其应用 outline属性确

11章：用户界面样式 11.1 和 border 形似的 outline 属性，outline 表示元素的轮廓，语法和 border 属性非常类似，分宽度、类型和颜色，支持 的关键字和属性值与 border 属性一模一样。 11.1.1 万万不可在全局设置 outline:0 none。outline 是一个和用户体验密切相关的属性，与 focus 状态以及键盘访问关系密切。在实际开发的时候，有时候需要让普通元素有类似控件元素的 outline 效果。例如，基于原生的单复选框模拟单复选框，或者为了规避 submit 类型按钮 UI 很难完

outline：表示元素轮廓，属性为分宽度、类型和颜色，语法同border outline是为了当元素为聚焦状态时标记聚焦的元素，现代浏览器当普通链接或者按钮点击的时候，已经不会出现 outline 效果了，所以不建议设置取消outline效果 实际开发中需要让普通元素有类似控件元素的 outline 效果，可以使用<label>元素，通过 for 属性和这些原生的表单控件相关联 :focus + label.btn { outline: 1px dotted Highlight; outline: 5px auto -webkit-focus-ring-color; } outline 是不占据任何空间的属

用户界面样式：通常是帮助用户进行界面交互的css样式 outline：表示元素轮廓，属性为分宽度、类型和颜色，语法同border outline是为了当元素为聚焦状态时标记聚焦的元素，现代浏览器当普通链接或者按钮点击的时候，已经不会出现 outline 效果了，所以不建议设置取消outline效果 实际开发中需要让普通元素有类似控件元素的 outline 效果，可以使用<label>元素，通过 for 属性和这些原生的表单控件相关联 :focus + label.btn { outline: 1px dotted Highlight; outline: 5px

第9章： 拆分变量 每个变量只承担一个责任。同一个变量承担两件不同的事情，会令代码可读性变差。 文中讲了多种变量拆解方法， 不一一列举 我们当前代码中变量的命名其实不会做特别的拆分， 在一些多次service_call的场景里 经常出现无语意的变量， 但这些变量从可读性来说有影响但并不是太大。 也确实有一些变量很难看出是什么意思 例如agree设置的几个常量： const AGREE_TYPE_GREAT = 1; const AGREE_TYPE_GOOD = 2; const AGREE_TYPE_BAD = 3; const AGREE_TYPE_SHIT = 4; cons

重构 - 第十一章 本章主要讲的是如何重构function 首先一个规则是 尽量对function进行读写分离， 通常写服务我们不需要给出data的返回值， 只要给明确执行成功与否即可， 而读服务中， 如果某个写逻辑失败， 如果导致该读服务失败， 也是个很奇怪的设计。 函数编写要具备一定扩展性， 尽量不要写完全无法被复用的独特服务， 而要考虑各种设计模式， 做好函数级别复用的拆分。 函数传参时， 如果一个function的入参是另一个function的返回值的一部分，

元素的显示与隐藏： 如果希望元素不可见，同时不占据空间，辅助设备无法访问，同时不渲染，可以使用<script>标签隐藏； 如果希望元素不可见，同时不占据空间，辅助设备无法访问，但资源有加载，DOM 可访问，则可以直接使用 display:none 隐藏； 如果希望元素不可见，同时不占据空间，辅助设备无法访问，但显隐的时候可以有transition 淡入淡出效果； 如果希望元素不可见，不能点击，辅助设备无法访问，但占据空间保留，则可以使用visibility:hidde

10. display 与元素的显隐 display:none元素的background-image图片不加载； display:none元素的image图片所有浏览器下依旧都会请求图片资源； 一些属性也是天然display:none； 动画实现：display:none 显隐控制并不会影响 CSS3 animation 动画的实现，但是会影响 CSS3 transition 过渡效果执行； 10.2 visibility 与元素的显隐 不仅仅是保留空间这么简单 1．visibility 的继承性：父元素设置 visibility:hidden，子元素也会看不见； 2．visibility 与 CSS 计数器：visibility:hidden 不会影响计数器的计

background 相关属性: background-image、background-position、background-repeat、background-attachment、background-color: transparent； 如果是 IE9+浏览器，则还包括： background-size、background-origin、background-clip； 9.2.2background-position background-position:用来精确定位背景图出现的位置（从左上角 0 0 开始计量）。 值得范围：关键字（left、right、top、bottom、center）/偏移量（px，%）； 9.2.3 background-repeat 与渲染性能 background-repeat表示定义background-image的重复呈现方式 repeat：水平和垂直两个方

元素显示和隐藏

10.1 display 与元素的显隐 display:none元素的background-image图片不加载； display:none元素的image图片所有浏览器下依旧都会请求图片资源； 一些属性也是天然display:none； 动画实现：display:none 显隐控制并不会影响 CSS3 animation 动画的实现，但是会影响 CSS3 transition 过渡效果执行； 10.2 visibility 与元素的显隐 不仅仅是保留空间这么简单 1．visibility 的继承性：父元素设置 visibility:hidden，子元素也会看不见； 2．visibility 与 CSS 计数器：visibility:hidden 不会影响计数器的

元素的显示和隐藏 隐藏元素的方法 ·不占据空间，辅助设备无法访问，同时不渲染，可以使用<script>标签隐藏 图片不会发起请求，但是script标签不支持嵌套如果想放置其他内容，可以使用textarea标签。 ·不占据空间，辅助设备无法访问，但资源有加载，DOM可访问，则可以直接使用display:none隐藏 ·不占据空间，辅助设备无法访问，但显隐的时候可以有transition淡入淡出效果，使用绝对定位+visibility:hidden ·不能点击，辅助设备无法访问，但占据空间保

script标签是不支持嵌套的，因此如果希望再script标签中再放置其他不渲染的模板内容，可以试试使用textarea元素。比如使用WebGL的时候，会将shader的代码放到script标签中，GL读取之后执行 有一些元素是天然display:none的，比如hidden类型的input输入框 display:none显隐控制并不会影响CSS3 Animation动画的实现，但是会影响CSS3 transition过渡效果执行，因此transistion往往和visibility属性走得比较近 display:none是不占据空间的，visibility:hidden会占据空间

二、实用技巧与特性 1. 隐藏元素的背景图加载行为 IE8~11：无论是否隐藏都会请求图片 Firefox：隐藏时不加载 Chrome/Safari：元素直接设置 display:none 且含 background-image时加载，父元素为 display:none时不加载 2. background-position 百分比计算特性 公式：(容器尺寸 - 图片尺寸) × (-50%) 结果始终为正值，使图片定位在容器内部而非外部。 3. background-repeat 性能优化: 避免使用过小尺寸的平铺图片，会导致渲染卡顿 推荐使用 100px×100px 等适中尺寸，平衡文件大小与渲染

9.2 CSS 世界的 background background 相关属性: background-image、background-position、background-repeat、background-attachment、background-color: transparent； 如果是 IE9+浏览器，则还包括： background-size、background-origin、background-clip； 9.2.2background-position background-position:用来精确定位背景图出现的位置（从左上角 0 0 开始计量）。 值得范围：关键字（left、right、top、bottom、center）/偏移量（px，%）； 9.2.3 background-repeat 与渲染性能 background-repeat表示定义background-image的重复呈现方式 repe

9.2 CSS 世界的 background background 相关属性: background-image、background-position、background-repeat、background-attachment、background-color: transparent； 如果是 IE9+浏览器，则还包括： background-size、background-origin、background-clip； 9.2.2background-position background-position:用来精确定位背景图出现的位置（从左上角 0 0 开始计量）。 值得范围：关键字（left、right、top、bottom、center）/偏移量（px，%）； 9.2.3 background-repeat 与渲染性能 background-repeat表示定义background-image的重复呈现方式 repe

background 属性 • background-image: none • background-position: 0% 0% • background-repeat: repeat • background-attachment: scroll • background-color: transparent 1. 隐藏元素的 background-image 到底加不加载，一个元素如果 display 计算值为 none，在 IE 浏览器下（IE8～IE11）依然会发送图片请求，Firefox 浏览器不会，Chrome 和 Safari 浏览器上：如果隐藏元素同时又设置了 background-image，则图片依然会去加载；如果是父元素的 display 计算值为 none，则背景图不会请求。 2. 与众不同的 background-posi

9.2 CSS 世界的 background background 相关属性: background-image、background-position、background-repeat、background-attachment、background-color: transparent； 如果是 IE9+浏览器，则还包括： background-size、background-origin、background-clip； 9.2.2background-position background-position:用来精确定位背景图出现的位置（从左上角 0 0 开始计量）。 值得范围：关键字（left、right、top、bottom、center）/偏移量（px，%）； 9.2.3 background-repeat 与渲染性能 background-repeat表示定义background-image的重复呈现方式 repe

CSS 世界的 background - background-image: none - background-position: 0% 0% - background-repeat: repeat - background-attachment: scroll - background-color: transparent 如果是 IE9+浏览器，则还包括: - background-size: auto auto - background-origin: padding-box - background-clip: border-box 9.2.1 隐藏元素的 background-image 到底加不加载 在 IE 浏览器下(IE8~IE11，更高版本不确定)依然会发送图片请求，Firefox 浏览器不会，至于 Chrome 和 Safari 浏览器则似乎更加智能一点:如果隐藏元素同时又设置了 background-image，则图片依

呃呃呃呃都让人发发发尴尬

::first-letter(:first-letter)伪元素生效，是需要满足一定条件的，元素的 display 计算值必须是 block、inline-block、list-item、table- cell 或者 table-caption，其他所有 display 计算值都没有用，包括 display:table和 display:flex 等。 CSS 世界的 color 属性支持十六进制颜色、rgb 颜色。十六进制颜色指的是长得像#000000 或#000 这样的颜色，我们在 CSS 中用得最频繁的就是这种格式的颜色。原因是字符数目最少，书写更快，渲染性能更高。

8.7.1 深入:first-letter 伪元素及其实例 1．::first-letter 伪元素生效的前提。首先，元素的 display 计算值必须是 block、inline-block、list-item、tablecell 或者 table-caption，其他所有 display 计算值都没有用，包括 display:table和 display:flex 等。 2．::first-letter 伪元素可以生效的 CSS 属性。如果字符被选作了::first-letter 伪元素，并不是像::before 伪元素那样，几乎所有 CSS 都有效，只是一部分有效。 所有字体相关属性；所有背景相关属性；所有 margin 相关属性；所有 padding 相

8.7 了解:first-letter/:first-line 伪元素 8.7.1 深入:first-letter 伪元素及其实例 1．::first-letter 伪元素生效的前提 元素的 display 计算值必须是 block、inline-block、list-item、table- cell 或者 table-caption； 常见的标点符号、各类括号和引号在::first-letter伪元素眼中全部都是“辅助类”字符； 2．::first-letter 伪元素可以生效的 CSS 属性 所有字体、背景、margin、padding、border相关属性，color 属性 3．::first-letter 伪元素的一些有意思的特点 支持部分 display 属性值标签嵌套；颜色

:first-letter:只能作用于块级作用域， 有场景限制（字体、背景、margin、padding、border、color等）。价格前面一般都有一个¥符号，这个符号字体往往会比较特殊，字号也比较大，同时和文字的数值有几像素的距离。要实现这样的效果，通常的做法是在¥符号外面包一个 span 标签，命名一个类名，然后通过 CSS 控制. color: currentColor 变量是个好东西，可以使用当前 color 计算值，即所谓颜色值,IE9以上才支持。

:first-letter和:first-line有一些相似之处，使用时的限制也类似： 1. 首先元素的display计算值必须是block、inline-block、list-item、table-cell或者table-caption 2. 常见的标点符号是辅助字符，不属于first-letter'生效的范围 3. 字符前面不能出现图片或者inline-block/inline-table之类的元素存在 4. 能支持生效的CSS属性也有一些限制 CSS世界的color很单调，表现在： 1. 少的可怜的颜色关键字 2. 不支持transparent 3. 不支持currentColor 4. 不支持rgba和hsla 5. 支持却鸡肋的系统颜色

8.7 了解:first-letter/:first-line 伪元素 8.7.1 深入:first-letter 伪元素及其实例 1．::first-letter 伪元素生效的前提 元素的 display 计算值必须是 block、inline-block、list-item、table- cell 或者 table-caption； 常见的标点符号、各类括号和引号在::first-letter伪元素眼中全部都是“辅助类”字符； 2．::first-letter 伪元素可以生效的 CSS 属性 所有字体、背景、margin、padding、border相关属性，color 属性 3．::first-letter 伪元素的一些有意思的特点 支持部分 display 属性值标签嵌套；颜色

::first-letter伪元素用于选择文本块的第一个字符并应用样式，其使用需满足条件： 元素display值须为block/inline-block/list-item/table-cell/table-caption； 仅作用于有效字符（如字母、数字、中文等），标点符号等"辅助字符"需跟随有效字符才能生效； 前面不能存在inline-block/inline-table元素； 支持字体、背景、边距等CSS属性，但无法使用display/visibility控制显隐； 具有特殊权重特性——继承属性（如color）会覆盖父级!important声明； 可与::before伪元素联动，且

:first-letter:只能作用于块级作用域， 有场景限制（字体、背景、margin、padding、border、color等）。价格前面一般都有一个¥符号，这个符号字体往往会比较特殊，字号也比较大，同时和文字的数值有几像素的距离。要实现这样的效果，通常的做法是在¥符号外面包一个 span 标签，命名一个类名，然后通过 CSS 控制. color: currentColor 变量是个好东西，可以使用当前 color 计算值，即所谓颜色值,IE9以上才支持。

8.7.1 1. ::first-letter 的演变 早期称为伪类（如 :first-letter），后规范为伪元素（::first-letter），语义变为“首字符作为元素的假想子元素”。 2. 生效条件 元素类型限制：元素的 display 计算值需为 block, inline-block, list-item, table-cell, table-caption。 字符类型限制： 主字符：数字、字母、中文、空格、$ 及运算符，需要注意空格常被忽略。 辅助字符（视为“赠品”）：标点符号、括号、引号等（·@#%&*()（）[]【】{}:："“”;；'‘’》《,，.。？?!！…*、

font缩写会破坏部署属性的继承性，另外font缩写必须带上font-family font关键字的价值，如非Windows系统下不要使用微软雅黑字体，就可以使用非标准的-apple-system font face的本质是变量，是一个定义字体或字体集的变量，这里包括字体重命名、默认字体样式设置等等，包括font-family src font-style font-weight unicode-range font-varient font-stretch和font-feature-settings src表示引入的字体可以是系统字体，也可以是外链字体 unicode-range的作用是可以让特定的字符或者特定范围的字