《CSS权威指南》读书笔记

最新推荐文章于 2024-01-21 20:21:34 发布

zhu_free

最新推荐文章于 2024-01-21 20:21:34 发布

阅读量2.3k

点赞数

分类专栏：前端 css 阅读文章标签： css

本文链接：https://blog.csdn.net/zhu_free/article/details/50896393

版权

前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

阅读

3 篇文章 0 订阅

订阅专栏

《CSS权威指南》读书笔记

CSS权威指南读书笔记

第一章 CSS和文档

元素

替换元素与非替换元素
替换元素是指元素内容的部分并非由文档内容直接表示，比如img的内容取决于src属性,input取决于其type的类型；
非替换元素的内容则由用户代理在元素本身生成的框中显示。
块级元素和行内元素
块级元素生成一个元素框，默认他会填充其父元素的内容区旁边不能有其他元素，即在元素框之前和之后生成了分隔符。
行内元素在一个文本行内生成元素框，而不会打断这行文本，不会在他本身之前或之后生成分隔符。
display:inline/block
display属性的block和inline值即对应块级元素和行内元素的显示，还有一种inline-block,即在行内但是拥有块级元素的特点

结合CSS和XHTML

link标记
必须放在head元素中，有一个midea属性值表示表现媒体，默认为all，大部分媒体类型在当前浏览器中不支持。将rel属性设置为alternatestylesheet,就可以定义候选样式表，用title属性指定样式表的名称。
@import指令
出现在style容器中，必须放在其他CSS规则之前，无法指定候选样式表，每一个都会被加载并使用，可以限制导入的样式表应用与一种或多种媒体。

@import url(sheet.css) all;

第二章选择器

把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素。
在一个html文档中，ID选择器会使用一次且仅一次。
属性（匹配）属性选择器：

[foo~="bar"] //匹配部分
css2以后：
[foo^="bar"] //匹配开头
[foo$="bar"] //匹配结尾
[foo*="bar"] //匹配包含

特定属性选择类型，形如[att|="val"]，可以用于任何属性及其值。

[lang|="en"]
[src|="figure"]

伪类和伪元素选择器：参考其他笔记

第三章结构和层叠

选择器的特殊性（优先级）

参考其他笔记

继承

基于继承机制样式不仅应用到指定的元素，还会应用到它的后代元素；border不会继承；继承的值根本没有特殊性；

层叠规则

找出与给定元素有关的所有规则；
按照来源对应用到给定元素的所有声明排序，一般来说：创作人员>读者>用户代理（浏览器），但读者的重要声明——!important权重最高
按照特殊性对应用到该元素的所有声明排序
按照出现顺序对声明排序，越后出现，权重越大。

第四章值和单位

大多数浏览器都能识别多达140个元素。参考CSS颜色名
在css中，相对url要相对于样式表本身，而不是相对于使用该样式表的html。

相对长度单位

em：一个“em”定义为一种给定字体的font-size。
ex：ex是指所用字体中小写x的高度，不同字体中x的高度可能不同，一般取ex等于0.5em.

一些其他单位（大多用于语音浏览器）

角度值：度deg，梯度grad，弧度rad。
时间值：毫秒ms，秒s
频率值：赫兹Hz，兆赫MHz

第五章字体

一个字体通常有多种变形的组合，称为一个字体系列，每一个变形都是一个具体的字体风格。
为字体指定了九级加粗度，100对应最细的字体变形，900对应最粗的字体变形，400等价于normal，700对应于bold…
font-size的作用是为给定字体的em框提供一个大小，而不能保证实际显示的字符就是这种大小。
百分数值总是根据从父元素继承来的大小来计算
font-size可以继承，不过继承的是计算值而不是百分数，用户代理可能对像素大小进行取整，之后再由子元素正常继承
字体倾斜（oblique，只是正常竖直文本的一个倾斜版本）与斜体（italic，单独的风格字体，对每个字母的结构有一些小改动）是两种情况
font-variant的small-caps使用小型大写字母。
font属性中，font-size和font-family必须要以此顺序作为声明中的最后两个值，而且必须存在。

第六章文本属性

文本是内容，而字体用于显示这个内容。

缩进和水平对齐

使用text-indent属性，所有元素的第一行都可以缩进一个给定长度，该长度可以是负值，建议针对负缩进再设置一个外边距或者一些内边距防止超出边界。
这个属性可以继承。

水平对齐

text-align属性的值left，right，和center会导致元素中的文本分别左对齐右对齐和居中。
不会控制元素的对齐，而只影响其内部内容。
justify值会使文本行的左右两端都放在父元素的内边界上，然后调整单词和字母间隔使各行长度恰好相等。但如果letter-spacing属性指定为一个长度值，则不能进一步增加或减少字符间的空间。

垂直对齐

line-gheight属性指文本行基线之间的距离，而不是字体的大小，它确定了将各个元素框的高度增加或减少多少。line-height值和字体大小之差就是行间距。应用到块级元素时，它定义一个最小距离而不是一个绝对的具体数值。
line-height值是文本行的行框高，这个数值减去fontsize大小再除以二的值，分别添加到内容区的上下，就是内容区到行框的距离。
line-height属性会继承，可能会导致行框高小于字体大小的问题，更好的解决办法是指定该属性值为一个缩放因子，根据元素的font-size值来计算line-height。

垂直对齐文本

vertical-align属性只应用于行内元素和替换元素，不能继承。
base-line值要求一个元素的基线与其父元素基线对齐。
sub会使一个元素变成下标，super则相反。
bottom值将元素行内框的底端与行框的底端对齐，text-bottom值则是行内文本的底端。top和text-top则相反。
middle值会把行内元素框的中点与父元素基线上方0.5ex处的一个点对齐。
如果为vertical-align设置一个百分数，##第六章文本属性会把元素的基线相对于父元素的基线升高过降低指定的量。指定一个长度，会把元素升高或降低指定的距离。

字间隔和字母间隔

word-spacing用于修改字间间隔，提供一个长度值，字之间间隔会增加或减少相应距离。
letter-spacing类似于前者，不过应用于字母之间。上面提到，如果指定了该值，text-align的justify属性则不会起作用。

文本转换

text-transform属性的uppercase和lowercase将文本转换为全大写或小写字符，capitalize只对每个单词的首字母大写。

文本装饰

text-decoration的underline值会对元素加下划线，overline值是上划线，line-through值则在文本中间画一个贯穿线，blink会让文本闪烁。
该属性不能继承，可能会导致一些奇怪的现象。

文本阴影

text-shadow属性，前两个长度值确定了阴影与文本的偏移距离，第三个值可选，定义了阴影的“模糊半径”。

处理空白符

white-space属性的pre值使空白符不会被忽略，而nowrap则会防止元素中的文本换行，除非使用了一个br元素，prewrap会使文本保留空白符序列但会正常换行，而preline则相反

文本方向

direction属性可以影响块级元素中的文本书写方向，表中列布局的方向，内容水平填充其元素框的方向，以及两端对齐元素中最后一行的位置。
其默认值根据语言种类被浏览器设置为ltr或rtl。

第七章基本视觉格式化

基本框

外边距通常是透明的，从中可以看到父元素的背景。内边距不能是负值，但是外边距可以。
包含块即一个元素的布局上下文，由最近的块级祖先框，表单元格，或行内块祖先框的内容边界构成。

块级元素

垂直方向上只有3个属性可以设置为auto：元素内容的width，以及左，右外边距，其余属性必须设置为特定的值或者默认宽度为0。水平方向同理。
可以用auto弥补实际值与所需总和的差距。
如果这三个属性都设置为非auto，则这些格式化属性过分受限，此时总会把margin-right强制为auto。(和语言阅读方向有关)
将两个外边距设置为相等长度是将元素居中的一种正确方法。
只使用百分数将无法创建完全灵活的元素布局，因为边框的宽度只能是长度。
如果width是auto，元素的宽度则是内容的固有宽度。
如果一个替换元素的width不同于其固有宽度，那么height也会成比例变化，除非height自己显式设置为一个特定值。
水平方向上，如果正常流中一个块级元素的margin-top或margin-bottom设置为auto，它会自动计算为0，使元素没有外边距。
将元素垂直居中的一个办法是把上下外边距都设置为25%。
相邻外边距会沿着竖轴合并，两个外边距中较小的一个会被较大的一个合并。
行间距是line-height值和font-size值的差，分成两半加在内容区的顶部和底部。
如果一个元素生成run-in框，而且该框后面是一个块级框，那么该run-in元素将成为块级框开始处的一个行内框。

第八章内边距，边框和外边距

基本元素框

宽度和高度不能应用到行内非替换元素。
margin的默认值是0，如果没有声明，就不会出现外边距。但实际情况中，浏览器对许多元素已经提供了预定的样式。
设定四边的值是从上开始围着元素顺时针旋转的，即上右下左。
百分数是相对于父元素的width计算的。

外边距

行内非替换元素的外边距不会改变一个元素的行高。左外边距应用到这个元素的开始处，右外边距应用到该元素的末尾，因为元素可能换行。应用负外边距时，元素的左右两端可能与其他内容重叠。
替换元素又有所不同，为其设置的外边距确实会影响行高，可能会使行高增加或减少，这取决于上下外边距的值。

边框

transparent值使边框就像额外的内边距一样，元素的背景会延伸到边框区。
为行内元素的边框指定怎样的宽度，元素的行高都不会改变。左右边则是另一回事，边框可见，并且文本会在其旁边显示。

内边距

内边距不会合并。
对于有背景色和内边距的行内非替换元素，背景可以向元素上面和下面延伸。

第九章颜色和背景

设置类名时最好描述其中包含的信息类型，而不是想要达到什么视觉效果。
前景是元素的文本，不过前景还包括元素周围的边框。
对于有alpha通道的图像格式，如png，可能会部分或完全透明，这会导致图像与背景色结合。
background-position指定图像放置的位置，可以设置关键词如top，left，也可以使用百分数值或者长度值。
通过使用属性background-attachment，可以声明原图像相对于可视区是固定的，因此不会受滚动的影响。其次，原图像的放置位置由可视区的大小确定，而不是由包含该图像的元素的大小确定，如果该值为scroll，会导致背景随其余文档滚动，而且当窗口大小调整时，不一定改变原图像的位置。
在background的简写属性中，如果background-position有两个值它们必须一起出现，而且这两个值是长度或百分数，则必须按照水平值在前，垂直值在后的顺序。

第十章浮动和定位

一个元素浮动时，其他内容会环绕该元素。浮动元素的外边距不会合并，即使有其他元素与之相邻。
浮动元素会生成一个块级框，而不论这个元素本身是什么。

浮动规则

浮动元素的左右外边界不能超出其包含块的左右内边界。
浮动元素的左右外边界必须是源文档中之前出现的左浮动或右浮动元素的左右外边界，除非后出现浮动元素的顶端出现在先浮动元素的底端下面。浮动元素不会彼此覆盖，所有浮动内容都是可见的。
左浮动元素的右外边界不会在其右浮动元素的左外边界的右边，右浮动元素同理。
一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级父元素。
浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。不允许元素浮动到该浮动元素之前内容的行的顶端之上。
左或右浮动元素的左边或右边有另一个浮动元素，前者的右外边界不能在其包含块的右(左)边界的右边(左边)。
浮动元素必须尽可能高地放置。
左浮动元素必须向左尽可能远，右浮动元素则必须向右尽可能远。
有意思的是，负外边距可能导致浮动元素移到其父元素的外面。

重叠规则

行内框与一个浮动元素重叠时，其边框，背景和内容都在还浮动元素之上显示。
块框与一个浮动元素重叠时，其边框和背景在该浮动元素之下显示，而内容在浮动元素之上显示。

清除浮动

如果第一个元素可能放在一个浮动元素旁边，则会向下推，直到出现在浮动元素的下面，而且所有后续内容都在其后面出现。

定位

包含块规则：
如果设置overflow为scroll，元素的内容会在元素框的边界处裁剪，出现一个滚动条。如果被设置为hidden，将不会提供滚动条。
如果一个绝对定位元素的内容溢出其内容框，而且overflow设置为要求裁剪该内容，通过clip属性可以改变裁剪区域的形状。语法为rect(top,right,bottom,left)，四个计算长度表示剪裁矩形区域的四个边，否则，根据指定确定，这个值不是偏移，而是距元素左上角的距离，不允许有百分数。
元素绝对定位时，会从文档流中完全删除，然后相对于其他包含块定位。

元素可见性

设置visibility使元素处于不可见状态时，元素还是会影响文档的布局，就好像它还可见一样。而设置display:none时，元素直接从文档中删除，对文档布局没有任何影响。
必须显式声明后代元素为visible，因为visibility属性可以继承。

第十一章表布局

表模型以行为主，会显式声明行，而列是从单元格行的布局推导出来的。
为了完成表的显式，CSS定义了6个不同的层，表，列组，列，行组，行，单元格。可以分别放表的不同方面。
对应表各个方面的样式都在其各自的层上绘制。列样式在行样式的下面，所以行背景会覆盖列背景。
css中表有两种不同的边框模型，如果单元格之间相互是分隔的，就是分隔边框模型在起作用，另一种是合并边框模型，单元格之间没有可见的间隔，边框会相互合并。这个属性由border-collapse的collapse值和separate值确定。
border-spacing属性可以使单元格边框分隔，它只能应用于表本身，而不是单个单元格。
对于空单元格，empty-cells属性的show和hide值可以决定其是显示边框和背景还是什么都不显示。
如果单元格的边框相邻，就会相互合并，使得实际上只画出其中一个合并边框。
有两种不同的方法可以得出表的宽度，使用table-layout决定采用哪种方法计算表的宽度。
其中，固定布局（fixed），根据表以及表中列和单元格的width值决定。width属性值不是auto的所有列元素会根据width值设置该列的宽度，如果一个列宽度为auto但表首行中位于该列的单元格width不是auto，则根据该单元格宽度设置此列的宽度，如果这个单元格跨多列，则宽度在这些列上平均分配。之后如果列的宽度仍为auto，则会自动确定其大小，使其宽度尽可能相等。后面这些行的单元格不会改变列宽，意味着为这些单元格指定的width值都会被忽略。
自动布局（auto）中，表布局完全取决于单元格的内容。具体步骤见书上p367。