整理完了《高性能JavaScript》这本书,往下就需要快速处理《CSS世界》,这本讲解CSS特性的书非常值得一读,内容完整,重点突出,实战性强,就是语言啰嗦。由于全书内容太多,而且需要一点一点的整理,所以放到了站点上,方便大家查看。
站点地址:
全栈开发
CSS世界
第1章 概述
- 流体布局
table
- CSS3
第2章 术语和概念
- 未定义行为
第3章 流、元素和基本概念
块级元素
- 为什么
list-item
元素会出现项目符号 -
display: inline-table;
的盒子是怎样组成的 -
width/height
作用在哪个盒子上
- 为什么
width/height
作用的具体细节- 深藏不漏的
width:auto
-
width
值作用的细节 - CSS流体布局下的宽度分离原则
- 改变
width/height
作用细节的box-sizing
- 相对简单的
height:auto
- 关于
height:100%
- 深藏不漏的
min-width/max-width
和min-height/max-height
- 为流体而生的
min-width/max-width
- 与众不同的初始值
- 超越
!important
,超越最大 - 任意高度元素的展开收起动画技术
- 为流体而生的
内联元素
- 哪些元素是内联元素
- 内联盒模型
- 幽灵空白节点
第4章 盒尺寸四大家族
深入理解
content
-
content
与替换元素 -
content
内容生成技术
-
温和的
padding
属性-
padding
与元素的尺寸 -
padding
的百分比值 - 标签元素内置的
padding
-
padding
与图形绘制
-
激进的
margin
属性-
margin
与元素尺寸以及相关布局 -
margin
的百分比值 -
margin
合并 margin:auto
-
margin
无效情形解析
-
功勋卓著的
border
属性- 为什么
border-width
不支持百分比值 - 了解各种
border-style
类型 -
border-color
和color
-
border
与透明边框技巧 -
border
与图形构建 -
border
等高布局技术
- 为什么
第5章 内联元素与流
字母
x
- 字母
x
与CSS世界的基线 - 字母
x
与CSS中的x-height
- 字母
x
与CSS中的ex
- 字母
内联元素的基石
line-height
- 内联元素的高度之本——
line-height
- 为什么
line-height
可以让内联元素“垂直居中” - 深入
line-height
的各类属性值 - 内联元素
line-height
的“大值特性”
- 内联元素的高度之本——
line-height
的好朋友vertical-align
-
vertical-align
家族基本认识 -
vertical-align
作用前提 -
vertical-align
和line-height
之间的关系 - 深入理解
vertical-align
线性类属性值 - 深入理解
vertical-align
文本类属性值 - 简单了解深入理解
vertical-align
线性类属性值上标下标类属性值 - 无处不在的
vertical-align
- 基于
vertical-align
属性的水平垂直居中弹框
-
第6章 流的破坏与保护
魔鬼属性
float
-
float
的本质与特性 -
float
的作用机制 -
float
更深入的作用机制 -
float
与流体布局
-
float
的天然克星clear
- 什么是
clear
属性 - 成事不足败事有余的
clear
- 什么是
CSS世界的结界——BFC
- BFC的定义
- BFC与流体布局
最佳结界
overflow
-
overflow
裁剪界线border box
- 了解
overflow-x
和overflow-y
-
overflow
与滚动条 - 依赖
overflow
的样式表现 -
overflow
与锚点定位
-
float
的兄弟position:absolute
绝对定位-
absolute
的包含块 - 具有相对特性的无依赖
absolute
绝对定位 -
absolute
与text-align
-
-
absolute
与overflow
absolute
与clip
- 重新认识的
clip
属性 - 深入了解
clip
的渲染
- 重新认识的
absolute
的流体特性- 当
absolute
遇到left/top/right/bottom
属性 -
absolute
的流体特性 -
absolute
的margin:auto
居中
- 当
position:relative
才是大哥-
relative
对absolute
的限制 -
relative
与定位 -
relative
的最小化影响原则
-
强悍的
position:fixed
固定定位-
position:fixed
不一样的“包含块” -
position:fixed
的absolute
模拟 -
position:fixed
与背景锁定
-
第7章 层叠规则
z-index
- 层叠上下文和层叠水平
- 理解元素的层叠顺序
- 牢记层叠准则
深入了解层叠上下文
- 特定
- 创建
- 层叠上下文与层叠顺序
-
z-index
负值深入理解 -
z-index
准则
第8章 文本处理能力
line-height
的另一个朋友font-size
-
font-size
和vertical-align
的隐秘故事 - 理解
font-size
与ex
、em
和rem
的关系 - 理解
font-size
的关键字属性值 -
font-size:0
与文本的隐藏
-
字体属性家族
font-family
- 了解衬线字体和无衬线字体
- 等宽字体的实践价值
- 中文字体和英文名称
- 一些补充说明
字体家族其他成员
font-weight
font-style
font-variant
font
属性- 缩写的
font
属性 - 使用关键字值得
font
属性 -
font
关键字属性值的应用价值
- 缩写的
@font face
规则-
@font face
的本质是变量 -
@font face
与字体图标技术
-
文本的控制
-
text-indent
与内联元素缩进 -
letter-spacing
与字符间距 -
word-spacing
与单词间距 - 了解
word-break
和word-wrap
的区别 -
white-space
与换行和空格的控制 -
text-align
与元素对齐 - 如何解决
text-decoration
下划线和文本重叠的问题 -
text-transform
字符大小写
-
了解
:first-letter/:first-line
伪元素- 深入
:first-letter
伪元素及其实例 -
:first-line
伪元素
- 深入
第9章 元素的修饰与美化
color
- 颜色关键字
- 不支持的
transparent
关键字 - 不支持的
currentColor
变量 - 不支持的
rgba
颜色和hsla
颜色 - 支持却鸡肋的系统颜色
background
- 隐藏元素的
background-image
到底加不加载 - 与众不同的
background-position
百分比计算方式 -
background-repeat
与渲染性能 - 外强中干的
background-attachment:fixed
-
background-color
背景色永远是最低的 - 利用多背景的属性hack小技巧
- 渐变背景和
rgba
背景色的兼容处理
- 隐藏元素的
第10章 元素的显示与隐藏
-
display
与元素的显示/隐藏 visibility
与元素的显示/隐藏- 不仅仅是保留空间
- 了解
visibility:collapse
第11章 用户界面样式
和
border
形似的outline
属性- 绝不可以在全局设置
outline:0 none
- 真正不占据空间的
outline
及其应用
- 绝不可以在全局设置
光标属性
cursor
- 琳琅满目的
cursor
属性值 - 自定义光标
- 琳琅满目的
第12章 流向的改变
改变水平流向的
direction
-
direction
简介 -
direction
的黄金搭档unicode-bidi
-
writing-mode
-
writing-mode
原来的作用 -
writing-mode
改变了哪些规则 -
writing-mode
和direction
的关系
-