CSS世界(文档)

寒青

整理完了《高性能JavaScript》这本书,往下就需要快速处理《CSS世界》,这本讲解CSS特性的书非常值得一读,内容完整,重点突出,实战性强,就是语言啰嗦。由于全书内容太多,而且需要一点一点的整理,所以放到了站点上,方便大家查看。

站点地址:前端开发文档
原文链接:CSS世界,豆瓣读书:CSS世界

CSS世界

第1章 概述

  1. 流体布局
  2. table
  3. CSS3

第2章 术语和概念

  1. 未定义行为

第3章 流、元素和基本概念

  1. 块级元素

    • 为什么list-item元素会出现项目符号
    • display: inline-table;的盒子是怎样组成的
    • width/height作用在哪个盒子上
  2. width/height作用的具体细节

    • 深藏不漏的width:auto
    • width值作用的细节
    • CSS流体布局下的宽度分离原则
    • 改变width/height作用细节的box-sizing
    • 相对简单的height:auto
    • 关于height:100%
  3. min-width/max-widthmin-height/max-height

    • 为流体而生的min-width/max-width
    • 与众不同的初始值
    • 超越!important,超越最大
    • 任意高度元素的展开收起动画技术
  4. 内联元素

    • 哪些元素是内联元素
    • 内联盒模型
    • 幽灵空白节点

第4章 盒尺寸四大家族

  1. 深入理解content

    • content与替换元素
    • content内容生成技术
  2. 温和的padding属性

    • padding与元素的尺寸
    • padding的百分比值
    • 标签元素内置的padding
    • padding与图形绘制
  3. 激进的margin属性

    • margin与元素尺寸以及相关布局
    • margin的百分比值
    • margin合并
    • margin:auto
    • margin无效情形解析
  4. 功勋卓著的border属性

    • 为什么border-width不支持百分比值
    • 了解各种border-style类型
    • border-colorcolor
    • border与透明边框技巧
    • border与图形构建
    • border等高布局技术

第5章 内联元素与流

  1. 字母x

    • 字母x与CSS世界的基线
    • 字母x与CSS中的x-height
    • 字母x与CSS中的ex
  2. 内联元素的基石line-height

    • 内联元素的高度之本——line-height
    • 为什么line-height可以让内联元素“垂直居中”
    • 深入line-height的各类属性值
    • 内联元素line-height的“大值特性”
  3. line-height的好朋友vertical-align

    • vertical-align家族基本认识
    • vertical-align作用前提
    • vertical-alignline-height之间的关系
    • 深入理解vertical-align线性类属性值
    • 深入理解vertical-align文本类属性值
    • 简单了解深入理解vertical-align线性类属性值上标下标类属性值
    • 无处不在的vertical-align
    • 基于vertical-align属性的水平垂直居中弹框

第6章 流的破坏与保护

  1. 魔鬼属性float

    • float的本质与特性
    • float的作用机制
    • float更深入的作用机制
    • float与流体布局
  2. float的天然克星clear

    • 什么是clear属性
    • 成事不足败事有余的clear
  3. CSS世界的结界——BFC

    • BFC的定义
    • BFC与流体布局
  4. 最佳结界overflow

    • overflow裁剪界线border box
    • 了解overflow-xoverflow-y
    • overflow与滚动条
    • 依赖overflow的样式表现
    • overflow与锚点定位
  5. float的兄弟position:absolute绝对定位

    • absolute的包含块
    • 具有相对特性的无依赖absolute绝对定位
    • absolutetext-align
  6. absoluteoverflow
  7. absoluteclip

    • 重新认识的clip属性
    • 深入了解clip的渲染
  8. absolute的流体特性

    • absolute遇到left/top/right/bottom属性
    • absolute的流体特性
    • absolutemargin:auto居中
  9. position:relative才是大哥

    • relativeabsolute的限制
    • relative与定位
    • relative的最小化影响原则
  10. 强悍的position:fixed固定定位

    • position:fixed不一样的“包含块”
    • position:fixedabsolute模拟
    • position:fixed与背景锁定

第7章 层叠规则

  1. z-index
  2. 层叠上下文和层叠水平
  3. 理解元素的层叠顺序
  4. 牢记层叠准则
  5. 深入了解层叠上下文

    • 特定
    • 创建
    • 层叠上下文与层叠顺序
  6. z-index负值深入理解
  7. z-index准则

第8章 文本处理能力

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

    • font-sizevertical-align的隐秘故事
    • 理解font-sizeexemrem的关系
    • 理解font-size的关键字属性值
    • font-size:0与文本的隐藏
  2. 字体属性家族font-family

    • 了解衬线字体和无衬线字体
    • 等宽字体的实践价值
    • 中文字体和英文名称
    • 一些补充说明
  3. 字体家族其他成员

    • font-weight
    • font-style
    • font-variant
  4. font属性

    • 缩写的font属性
    • 使用关键字值得font属性
    • font关键字属性值的应用价值
  5. @font face规则

    • @font face的本质是变量
    • @font face与字体图标技术
  6. 文本的控制

    • text-indent与内联元素缩进
    • letter-spacing与字符间距
    • word-spacing与单词间距
    • 了解word-breakword-wrap的区别
    • white-space与换行和空格的控制
    • text-align与元素对齐
    • 如何解决text-decoration下划线和文本重叠的问题
    • text-transform字符大小写
  7. 了解:first-letter/:first-line伪元素

    • 深入:first-letter伪元素及其实例
    • :first-line伪元素

第9章 元素的修饰与美化

  1. color

    • 颜色关键字
    • 不支持的transparent关键字
    • 不支持的currentColor变量
    • 不支持的rgba颜色和hsla颜色
    • 支持却鸡肋的系统颜色
  2. background

    • 隐藏元素的background-image到底加不加载
    • 与众不同的background-position百分比计算方式
    • background-repeat与渲染性能
    • 外强中干的background-attachment:fixed
    • background-color背景色永远是最低的
    • 利用多背景的属性hack小技巧
    • 渐变背景和rgba背景色的兼容处理

第10章 元素的显示与隐藏

  1. display与元素的显示/隐藏
  2. visibility与元素的显示/隐藏

    • 不仅仅是保留空间
    • 了解visibility:collapse

第11章 用户界面样式

  1. border形似的outline属性

    • 绝不可以在全局设置outline:0 none
    • 真正不占据空间的outline及其应用
  2. 光标属性cursor

    • 琳琅满目的cursor属性值
    • 自定义光标

第12章 流向的改变

  1. 改变水平流向的direction

    • direction简介
    • direction的黄金搭档unicode-bidi
  2. writing-mode

    • writing-mode原来的作用
    • writing-mode改变了哪些规则
    • writing-modedirection的关系
阅读 5.6k

寒青
前端工程师

前端开发文档

10.2k 声望
3.7k 粉丝
0 条评论

前端开发文档

10.2k 声望
3.7k 粉丝
文章目录
宣传栏