CSS世界 文字清晰版(pdf)

第 1 章 概述....................................................................................................................................... 11.1 CSS 世界的“世界观”........................................................................................................... 11.2 世界都是创造出来的............................................................................................................... 31.3 CSS 完胜SVG 的武器—流................................................................................................. 41.3.1 何为“流” ....................................................................................................................... 51.3.2 流是如何影响整个CSS 世界的...................................................................................... 61.3.3 什么是流体布局............................................................................................................... 61.4 CSS 世界的开启从IE8 开始................................................................................................... 61.5 table 自己的世界.................................................................................................................. 71.6 CSS 新世界—CSS3.............................................................................................................. 7第 2 章 需提前了解的术语和概念.................................................................................................... 82.1 务必了解的CSS 世界的专业术语.......................................................................................... 82.2 了解CSS 世界中的“未定义行为”.................................................................................... 11第 3 章 流、元素与基本尺寸.......................................................................................................... 133.1 块级元素................................................................................................................................. 133.1.1 为什么list-item 元素会出现项目符号.................................................................. 153.1.2 display:inline-table 的盒子是怎样组成的..................................................... 163.1.3 width/height 作用在哪个盒子上............................................................................ 163.2 width/height 作用的具体细节....................................................................................... 163.2.1 深藏不露的width:auto............................................................................................. 173.2.2 width 值作用的细节.................................................................................................... 243.2.3 CSS 流体布局下的宽度分离原则................................................................................. 273.2.4 改变width/height 作用细节的box-sizing...................................................... 293.2.5 相对简单而单纯的height:auto .............................................................................. 333.2.6 关于height:100%...................................................................................................... 333.3 CSS min-width/max-width 和min-height/max-height 二三事......................... 373.3.1 为流体而生的min-width/max-width ................................................................... 382 目录3.3.2 与众不同的初始值......................................................................................................... 383.3.3 超越!important，超越最大...................................................................................... 393.3.4 任意高度元素的展开收起动画技术.............................................................................. 403.4 内联元素................................................................................................................................. 423.4.1 哪些元素是内联元素..................................................................................................... 423.4.2 内联世界深入的基础—内联盒模型.......................................................................... 423.4.3 幽灵空白节点................................................................................................................. 44第 4 章 盒尺寸四大家族.................................................................................................................. 454.1 深入理解content............................................................................................................... 454.1.1 content 与替换元素.................................................................................................... 454.1.2 content 内容生成技术................................................................................................ 574.2 温和的padding 属性.......................................................................................................... 734.2.1 padding 与元素的尺寸................................................................................................ 734.2.2 padding 的百分比值.................................................................................................... 774.2.3 标签元素内置的padding............................................................................................ 794.2.4 padding 与图形绘制.................................................................................................... 804.3 激进的margin 属性............................................................................................................ 814.3.1 margin 与元素尺寸以及相关布局.............................................................................. 824.3.2 margin 的百分比值...................................................................................................... 874.3.3 正确看待CSS 世界里的margin 合并........................................................................ 874.3.4 深入理解CSS 中的margin:auto............................................................................. 944.3.5 margin 无效情形解析.................................................................................................. 974.4 功勋卓越的border 属性................................................................................................... 1004.4.1 为什么border-width 不支持百分比值................................................................. 1004.4.2 了解各种border-style 类型................................................................................. 1014.4.3 border-color 和color......................................................................................... 1054.4.4 border 与透明边框技巧............................................................................................ 1064.4.5 border 与图形构建.................................................................................................... 1084.4.6 border 等高布局技术................................................................................................ 109第 5 章 内联元素与流.................................................................................................................... 1115.1 字母x—CSS 世界中隐匿的举足轻重的角色................................................................ 1115.1.1 字母x 与CSS 世界的基线.......................................................................................... 1115.1.2 字母x 与CSS 中的x-height .................................................................................. 1125.1.3 字母x 与CSS 中的ex................................................................................................. 113目录 35.2 内联元素的基石line-height........................................................................................ 1145.2.1 内联元素的高度之本—line-height ................................................................. 1145.2.2 为什么line-height 可以让内联元素“垂直居中”............................................ 1195.2.3 深入line-height 的各类属性值........................................................................... 1215.2.4 内联元素line-height 的“大值特性” ............................................................... 1245.3 line-height 的好朋友vertical-align ................................................................. 1265.3.1 vertical-align 家族基本认识............................................................................. 1275.3.2 vertical-align 作用的前提................................................................................. 1295.3.3 vertical-align 和line-height 之间的关系................................................. 1315.3.4 深入理解vertical-align 线性类属性值............................................................ 1355.3.5 深入理解vertical-align 文本类属性值............................................................ 1415.3.6 简单了解vertical-align 上标下标类属性值.................................................... 1425.3.7 无处不在的vertical-align................................................................................. 1435.3.8 基于vertical-align 属性的水平垂直居中弹框................................................ 144第 6 章 流的破坏与保护................................................................................................................ 1476.1 魔鬼属性float.................................................................................................................. 1476.1.1 float 的本质与特性.................................................................................................. 1476.1.2 float 的作用机制...................................................................................................... 1516.1.3 float 更深入的作用机制........................................................................................... 1546.1.4 float 与流体布局...................................................................................................... 1556.2 float 的天然克星clear................................................................................................. 1576.2.1 什么是clear 属性..................................................................................................... 1576.2.2 成事不足败事有余的clear....................................................................................... 1586.3 CSS 世界的结界—BFC ................................................................................................... 1606.3.1 BFC 的定义................................................................................................................... 1606.3.2 BFC 与流体布局........................................................................................................... 1606.4 最佳结界overflow........................................................................................................... 1646.4.1 overflow 剪裁界线border box................................................................................. 1656.4.2 了解overflow-x 和overflow-y......................................................................... 1666.4.3 overflow 与滚动条................................................................................................... 1666.4.4 依赖overflow 的样式表现...................................................................................... 1696.4.5 overflow 与锚点定位............................................................................................... 1706.5 float 的兄弟position:absolute ............................................................................ 1776.5.1 absolute 的包含块................................................................................................... 1786.5.2 具有相对特性的无依赖absolute 绝对定位........................................................... 1844 目录6.5.3 absolute 与text-align ...................................................................................... 1916.6 absolute 与overflow................................................................................................... 1936.7 absolute 与clip............................................................................................................ 1956.7.1 重新认识的clip 属性................................................................................................ 1966.7.2 深入了解clip 的渲染................................................................................................ 1986.8 absolute 的流体特性....................................................................................................... 1996.8.1 当absolute 遇到left/top/right/bottom 属性.......................................... 1996.8.2 absolute 的流体特性............................................................................................... 2006.8.3 absolute 的margin:auto 居中........................................................................... 2026.9 position:relative 才是大哥..................................................................................... 2026.9.1 relative 对absolute 的限制.............................................................................. 2036.9.2 relative 与定位....................................................................................................... 2036.9.3 relative 的最小化影响原则................................................................................... 2066.10 强悍的position:fixed 固定定位.............................................................................. 2076.10.1 position:fixed 不一样的“包含块”.................................................................... 2076.10.2 position:fixed 的absolute 模拟.................................................................. 2086.10.3 position:fixed 与背景锁定............................................................................... 209第 7 章 CSS 世界的层叠规则...................................................................................................... 2117.1 z-index 只是CSS 层叠规则中的一叶小舟.................................................................... 2117.2 理解CSS 世界的层叠上下文和层叠水平.......................................................................... 2127.2.1 什么是层叠上下文....................................................................................................... 2127.2.2 什么是层叠水平........................................................................................................... 2127.3 理解元素的层叠顺序........................................................................................................... 2127.4 务必牢记的层叠准则........................................................................................................... 2147.5 深入了解层叠上下文........................................................................................................... 2147.5.1 层叠上下文的特性....................................................................................................... 2147.5.2 层叠上下文的创建....................................................................................................... 2147.5.3 层叠上下文与层叠顺序............................................................................................... 2177.6 z-index 负值深入理解..................................................................................................... 2197.7 z-index“不犯二”准则.................................................................................................. 223第 8 章 强大的文本处理能力........................................................................................................ 2258.1 line-height 的另外一个朋友font-size ................................................................. 2258.1.1 font-size 和vertical-align 的隐秘故事...................................................... 2258.1.2 理解font-size 与ex、em 和rem 的关系........................................................... 227目录 58.1.3 理解font-size 的关键字属性值............................................................................ 2298.1.4 font-size:0 与文本的隐藏.................................................................................... 2318.2 字体属性家族的大家长font-family............................................................................ 2328.2.1 了解衬线字体和无衬线字体........................................................................................ 2338.2.2 等宽字体的实践价值................................................................................................... 2348.2.3 中文字体和英文名称................................................................................................... 2368.2.4 一些补充说明............................................................................................................... 2378.3 字体家族其他成员............................................................................................................... 2388.3.1 貌似粗犷、实则精细无比的font-weight ............................................................ 2388.3.2 具有近似姐妹花属性值的font-style................................................................... 2418.3.3 不适合国情的font-variant.................................................................................. 2428.4 font 属性............................................................................................................................ 2428.4.1 作为缩写的font 属性................................................................................................ 2428.4.2 使用关键字值的font 属性........................................................................................ 2438.4.3 font 关键字属性值的应用价值................................................................................. 2468.5 真正了解@font face 规则.............................................................................................. 2478.5.1 @font face 的本质是变量....................................................................................... 2478.5.2 @font face 与字体图标技术................................................................................... 2558.6 文本的控制........................................................................................................................... 2588.6.1 text-indent 与内联元素缩进................................................................................ 2588.6.2 letter-spacing 与字符间距................................................................................. 2618.6.3 word-spacing 与单词间距...................................................................................... 2638.6.4 了解word-break 和word-wrap 的区别.............................................................. 2648.6.5 white-space 与换行和空格的控制........................................................................ 2658.6.6 text-align 与元素对齐........................................................................................... 2678.6.7 如何解决text-decoration 下划线和文本重叠的问题...................................... 2718.6.8 一本万利的text-transform 字符大小写............................................................ 2738.7 了解:first-letter/:first-line 伪元素.............................................................. 2748.7.1 深入:first-letter 伪元素及其实例.................................................................... 2748.7.2 故事相对较少的:first-line 伪元素.................................................................... 277第 9 章 元素的装饰与美化............................................................................................................ 2809.1 CSS 世界的color 很单调................................................................................................. 2809.1.1 少得可怜的颜色关键字............................................................................................... 2809.1.2 不支持的transparent 关键字............................................................................... 2829.1.3 不支持的currentColor 变量................................................................................. 2826 目录9.1.4 不支持的rgba 颜色和hsla 颜色............................................................................ 2829.1.5 支持却鸡肋的系统颜色............................................................................................... 2839.2 CSS 世界的background 很单调..................................................................................... 2859.2.1 隐藏元素的background-image 到底加不加载................................................... 2859.2.2 与众不同的background-position 百分比计算方式........................................ 2869.2.3 background-repeat 与渲染性能.......................................................................... 2879.2.4 外强中干的background-attachment:fixed.................................................. 2889.2.5 background-color 背景色永远是最低的............................................................ 2899.2.6 利用多背景的属性hack 小技巧.................................................................................. 2909.2.7 渐变背景和rgba 背景色的兼容处理........................................................................ 290第 10 章 元素的显示与隐藏......................................................................................................... 29210.1 display 与元素的显隐................................................................................................... 29410.2 visibility 与元素的显隐............................................................................................ 29610.2.1 不仅仅是保留空间这么简单...................................................................................... 29610.2.2 了解visibility:collapse............................................................................... 301第 11 章 用户界面样式.................................................................................................................. 30211.1 和border 形似的outline 属性.................................................................................. 30211.1.1 万万不可在全局设置outline:0 none ............................................................... 30211.1.2 真正的不占据空间的outline 及其应用............................................................... 30411.2 光标属性cursor.............................................................................................................. 30711.2.1 琳琅满目的cursor 属性值..................................................................................... 30711.2.2 自定义光标................................................................................................................. 314第 12 章 流向的改变..................................................................................................................... 31512.1 改变水平流向的direction .......................................................................................... 31512.1.1 direction 简介....................................................................................................... 31512.1.2 direction 的黄金搭档unicode-bidi ............................................................. 31812.2 改变CSS 世界纵横规则的writing-mode .................................................................. 32012.2.1 writing-mode 原本的作用.................................................................................... 32112.2.2 writing-mode 不经意改变了哪些规则................................................................ 32412.2.3 writing-mode 和direction 的关系................................................................ 328