资讯专栏INFORMATION COLUMN

CSS世界(文档)

CNZPH / 3346人阅读

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

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

站点地址:全栈开发
原文链接: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-widthmin-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-colorcolor

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-alignline-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-xoverflow-y

overflow与滚动条

依赖overflow的样式表现

overflow与锚点定位

float的兄弟position:absolute绝对定位

absolute的包含块

具有相对特性的无依赖absolute绝对定位

absolutetext-align

absoluteoverflow

absoluteclip

重新认识的clip属性

深入了解clip的渲染

absolute的流体特性

absolute遇到left/top/right/bottom属性

absolute的流体特性

absolutemargin:auto居中

position:relative才是大哥

relativeabsolute的限制

relative与定位

relative的最小化影响原则

强悍的position:fixed固定定位

position:fixed不一样的“包含块”

position:fixedabsolute模拟

position:fixed与背景锁定

第7章 层叠规则

z-index

层叠上下文和层叠水平

理解元素的层叠顺序

牢记层叠准则

深入了解层叠上下文

特定

创建

层叠上下文与层叠顺序

z-index负值深入理解

z-index准则

第8章 文本处理能力

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

font-sizevertical-align的隐秘故事

理解font-sizeexemrem的关系

理解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-breakword-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-modedirection的关系

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116858.html

相关文章

  • 重塑你的CSS世界观——浮动魔鬼float

    摘要:而在文档流中,如果浮动元素和跟随元素都是元素,它们两在默认情况下都将占据一行。而由于浮动元素脱离了文档流,如果父元素没有指定高度或者其他元素撑起,也就出现了所谓的浮动元素的父元素高度塌陷。 为什么要写《重塑你的CSS世界观》系列文章 由于从工作到现在,我的主要工作都是写JavaScript,几乎没怎么碰CSS,通常都是别人写好界面,然后我来开发JavaScript逻辑代码,这导致了严重...

    joyqi 评论0 收藏0
  • 重塑你的CSS世界观——浮动魔鬼float

    摘要:而在文档流中,如果浮动元素和跟随元素都是元素,它们两在默认情况下都将占据一行。而由于浮动元素脱离了文档流,如果父元素没有指定高度或者其他元素撑起,也就出现了所谓的浮动元素的父元素高度塌陷。 为什么要写《重塑你的CSS世界观》系列文章 由于从工作到现在,我的主要工作都是写JavaScript,几乎没怎么碰CSS,通常都是别人写好界面,然后我来开发JavaScript逻辑代码,这导致了严重...

    frank_fun 评论0 收藏0
  • css清浮动

    摘要:元素浮动会让元素脱离文档流,从而不能撑开父级的内容。今天我将展示常见的清除浮动的方法。什么是浮动什么是浮动浮动元素脱离文档流并且向左或者向右移动,直到浮动元素的边缘碰到父级框或者另一个浮动元素的边框为止。允许浮动元素出现在两侧。我们在平常做项目的时候,float这个css属性经常会用到。元素浮动会让元素脱离文档流,从而不能撑开父级的内容。今天我将展示常见的清除浮动的方法。 什么是浮动 浮动元...

    EdwardUp 评论0 收藏0
  • 【Hello CSS】序章-起源

    摘要:在年月,在经过多方的讨论之后,推出了。这一规范一出现就引起了各方的注意,随即公司和公司纷纷表示自己的浏览器能够支持。这个特殊规则是将设置为,将设置为。 作者:陈大鱼头 github: KRISACHAN HTML的诞生 HTML是怎么来的? 在1982年的时候,万维网的发明者Tim Berners-Lee爵士为了让全世界的物理学家能够方便的进行合作与信息共享,造了HTML(Hype...

    kid143 评论0 收藏0
  • 【Hello CSS】序章-起源

    摘要:在年月,在经过多方的讨论之后,推出了。这一规范一出现就引起了各方的注意,随即公司和公司纷纷表示自己的浏览器能够支持。这个特殊规则是将设置为,将设置为。 作者:陈大鱼头 github: KRISACHAN HTML的诞生 HTML是怎么来的? 在1982年的时候,万维网的发明者Tim Berners-Lee爵士为了让全世界的物理学家能够方便的进行合作与信息共享,造了HTML(Hyp...

    null1145 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<