关于CSS的一些读书笔记

标签分类

HTML 常见的标签可分为两类：块级元素 和内联元素

块级元素特点是页面水平流上只能单独显示一个元素，多个块级元素则换行显示
块级元素因为具有换行特性，因此支持clear属性来清除浮动带来的影响
内联元素特点是多个内联元素可同行展示，主要作用是负责内容显示
由多个内联元素形成的行框盒子前面存在一个空白节点，看不见且不占任何宽度，规范叫strut直译为支柱，也可以形象称为幽灵空白节点
替换元素也叫置换元素，是指元素可通过修改某个属性值改变呈现的内容，如img 、input 及video等标签

宽高作用细节

width的默认值是auto，常规块级元素的宽度默认是独占父容器整行，具有充分利用可用空间 ，内联元素的宽度由元素内部内容决定，具有包裹性
width可收缩到最小宽度不会直接收缩到隐藏内容，同时宽度一般不会超过父级容器限制
格式化宽高度是指在绝对定位中使用对立方位的属性（left/right或top/bottom）设置宽度和高度
盒模型可分为content-box、padding-box、border-box以及margin-box，其中margin的背景色永远是透明的，因此宽度默认是作用在content-box上，可通过box-sizing属性改变宽度和高度的作用细节
CSS的默认流是水平的，宽度是稀缺的，高度是无限的。height的默认值也是auto，一般容器高度由内部元素高度累加即可
一般子级元素设置高度百分比值（100%）若要生效需要其父级必须是一个可以生效的高度值，因为父级默认的auto无法计算，绝对定位也可以支持高度百分比值生效，区别是绝对定位宽高百分比计算是基于padding-box的，其它则是基于content-box计算的
min-width/max-height等是具有边界行为的属性，一般适用的场景是自适应布局或者流体布局，可能因为边界属性的原因，作用优先级很高即外部设置其它属性覆盖失效，并且min系列高于max系列属性值

盒尺寸

盒尺寸包含content、padding、border及margin

content

替换元素与content存在一些联系，除内容可通过属性改变还包含如下特性：

内容的外观不受页面上其它样式的影响，意思是替换元素的样式表现无法被自定义样式覆盖
存在默认元素尺寸大小，如img和input标签在浏览器中就有默认显示大小
在很多属性上存在不同的表现规则，普通元素垂直方向对齐默认值是基线对齐，替换元素则是替换元素的下边缘对齐
替换元素中替换内容是有固有尺寸的及内容原本的尺寸，通过内联样式或类样式无法修改原本的尺寸，这就是我们看到有时图片显示会出现失真的原因
某些浏览器替换元素和非替换元素的差别可能就是是否有src或者content属性，某些浏览器也支持使用content属性生成内容，有时改变的仅是视觉呈现，有点类似视觉欺骗，原内容依然存在

padding

内联元素的内间距主要影响水平方向，在垂直方向上存在视觉上的重叠并不会影响元素尺寸，但在某些情况下也会影响尺寸和布局
内间距百分比值无论是水平方向还是垂直方向上均是相对于宽度计算的，跟宽高百分比计算不同
内联元素内间距百分比值同样相对于宽度计算，在内容超出容器限制后出现断行现象，下一行垂直方向内间距和上一行垂直方向内间距发生重叠现象
内间距属性和其它属性搭配可绘制出一些简单的图标和图形，如菜单图标以及双层圆点

border

根据单词意思就是边框，主要用于图形构建、体验优化以及网页布局

border-color默认颜色就是color的颜色值
可绘制实心三角形和等腰梯形等图标图形
同样也可以实现等高布局，原理是元素边框高度总是和元素自身高度保持一致

margin

块级元素在未设置宽度时，此时元素状态是充分利用可用空间，设置外边距可改变元素的可视尺寸，若设置固定宽度则无法改变元素尺寸，即块级元素在默认水平流方向上设置正负外边距可改变元素的内部尺寸，垂直方向无法改变元素的内部尺寸
两个并排块级元素通过设置外边距负的和内边距正的相同固定值，达到正负抵消的效果实现两栏等高布局
外间距合并是指不含浮动和绝对定位的块级元素在垂直方向上相邻上外间距和下外间距发生合并，合并关系包含相邻兄弟元素合并以及父级和第一个或最后一个子元素
阻止外间距合并的方法包含：父元素设置为块状格式化上下文元素、父元素设置上下边界线、父元素设置上下内间距、父元素和相邻子元素之间添加内联元素进行分隔以及底部发生合并父元素设置高度值
外间距合并计算规则包含：正正取最大值、正负取相加值、负负则取最小值
外间距通过设置auto属性值可实现块级元素水平居中，由于绝对定位元素的格式化高度在垂直高度上auto自动填充特性依然满足就可实现水平和垂直方向上同时居中（四个定位方向必须都设置值）
外边距设置无效场景包含：内联非替换元素的垂直外边距无效，内联替换元素垂直外边距有效、绝对定位元素非定位方位的外间距值无效等

若想使用外边距属性改变自身的位置，必须是和当前元素定位方向一样的外边距属性才可以，否则外边距只能影响后面的元素或者父元素；一个普通元素，在默认流下，其定位方向是左侧以及上方

内联元素

内联元素盒模型与块级元素盒模型有许多区别

行高属性

对于非替换元素的纯内联元素，其可视高度完全由行高（line-height）决定，替换元素的高度不受行高的影响，对于块级元素行高对其本身没有任何作用，只是作用于内部的内联元素或者行框盒子前面存在的幽灵空白节点
纯文本的内联元素实现垂直居中，直接在父级容器中设置行高即可，原理是行高和字体大小之间存在计算关系即容器上边缘到字体区域上边缘的距离近似等于行高减去字体大小的一半，剩下的一半就是下边缘的距离，之所以近似是受字体类型的原因和其它属性的影响
多行文本和替换元素的垂直居中和单行文本垂直不同，需要设置垂直居中属性vertical-align: middle使内容与行框盒子存在的幽灵空白节点对齐，容器设置行高撑起高度，多行文本需要设置文本行高以防止继承容器行高
行高的属性值可以是数值、百分比值以及长度值即带单位的值，数值和百分比值是基于字体大小font-size计算的，子元素继承上数值没有变化而百分比值是计算后的值

垂直对齐属性

垂直对齐属性值可分为线类（如默认baseline）、文本类(如text-top)、上下标类（如sub）以级数值百分比类

数值百分类无论正值还是负值，都是相对于基线往上或往下偏移，基线的定义是字母x的下边缘，替换元素是用元素本身的下边缘作基线
属性值百分比值是相对于行高的计算值计算的，但实际使用的场景很少，比较鸡肋理解就好
垂直对齐属性作用的前提是只能应用于内联元素以及display值为tab-cell的元素，块级元素和浮动以及绝对定位块状化元素不支持，table-cell设置垂直对齐属性对齐是子元素但是其作用的并不是子元素而是table-cell元素自身
幽灵空白节点、行高以及垂直对齐属性在某些情况下会产生高度间隙，将导致容器高度变大，原理是两对齐元素的元素基线不同，对齐时会发生上下位移导致容器高度被撑开
inline-block元素的基线位置会根据内部有没有内联元素改变，有内联元素或者overflow属性不是visible值则基线是内部元素最后一行内联元素的基线，否则就是该元素外边距底边缘

浮动

浮动的本质是实现文字环绕效果，由父级高度塌陷（环绕文本和浮动元素展示在一个水平线上）和行框盒子区域限制（行框盒子和浮动元素不可重叠）共同作用的结果，具有如下特性：

包裹性
块状化并格式化上下文
破坏文档流
没有任何外边距合并
存在浮动锚点（浮动元素在流中的一个点）和浮动参考（浮动元素对齐参考的实体）概念
clear属性是让自身不能和前面的浮动元素相邻，并且只对块级元素有效

BFC

BFC即块级格式化上下文，其特性其元素内部不会影响外部的元素，即不会发生外边距重叠也无需清除浮动影响，常见的触发情况如下：

根元素
float不为none值
overflow的值为auto、scroll或hidden
display的值为table-cell、table-caption和inline-block
positon的值不为relative和static

锚点定位

锚点定位作用本质是通过改变容器滚动宽度或者高度实现的，其触发条件如下：

URL地址中的锚链与锚点元素对应并有交互行为
可以focus 的锚点元素处于focus状态，无障碍访问行为，不会触发下面由内而外行为

锚点定位也可以发生在普通容器元素上，而且定位行为的发生是由内而外的。由内而外指的是普通元素和窗体同时可滚动的时候，会由外触发所有可滚动窗体的锚点定位行为，相信开发经验比较丰富的人都遇到这种情况。即使设置overflow:hidden的元素也是可以滚动的，区别只是少了一个滚动条，本质上可以通过改变元素的scrollTop和scrollLeft值触发滚动

包含块

包含块其实就是元素用来计算和定位的一个框，普通元素的宽度百分比是相对父元素的content-box宽度计算，而绝对定位元素是相对于就进定位值不为static的祖先元素计算

根元素在很多场景下被称为初始包含块
定位值为relative或者static，则包含块是最近的块容器祖先盒的content-box区域
定位值是fixed，则包含块是根元素
内联元素也可以作为绝对定位元素的包含块，其规则有点不同
绝对定位属性值是非常独立的CSS属性值，其样式和行为表现不依赖其他任何CSS属性就行可以完成
无依赖绝对定位是指无需父元素设置相关的值生成定位元素包含块，具有相对定位特性。这种场景下无需设置定位方位值，直接使用外边距进行偏移
如果overflow不是定位元素，同时绝对定位元素和overflow容器之间也没有定位元素，则无法进行绝对定位定位元素裁剪
无依赖的绝对定位加上剪裁属性clip可实现最佳可访问性隐藏，它既满足视觉上的隐藏，屏幕阅读设备等辅助设备也支持得很好
相对定位两大特性：一是相对自身定位，二是无侵入即一般情况下不会影响周围元素的布局。还有就是定位位移是相对自身的，但是百分比定位值是基于包含块计算的。相比绝对定位可以使用对立方向定位值拉伸元素尺寸，而相对定位设置对立方向定位值只能有一个生效
固定定位元素的包含块是根元素，跟绝对定位元素同样具有无依赖定位性，某种情况下绝对定位可以模拟固定定位，原理是页面的滚动使用普通元素替代而不是根元素滚动

层叠上下文

层叠上下文是一个三维概念，相当于Z轴与人的视线相平行，表示用户与显示器之间存在一条看不见的垂直线，具有如下特性：

页面根元素天生具有层叠上下文
设置z-index值的定位元素也具有层叠上下文，它可为负值，作用是可实现可访问性隐藏
设置某些CSS3属性的元素同样具有层叠上下文
层叠准则包含：在具有明显的层叠水平标识的时，谁大谁上，内部层叠上下文受父级层叠上下文影响；当两者层叠水平一致时，采用后来居上原则

字体

ex是字符x 高度，与font-size关系密切
em是字模的高度，其一般由M的宽度决定，因为宽高相同，与方方正正的汉字也相同
em和rem都与font-size密切相关，区别是em相对与当前元素，rem相对于根元素常用于弹性布局
绝对尺寸关键字在项目中还是有一点作用的，如font-size:medium，该属性值仅与浏览器设置有关
除了文本缩进隐藏外，文本隐藏可以使用font-size: 0处理
font-family支持两类属性值；一类是字体名，就是使用对应字体的名称；一类是字体族，分为很多类
font-weight要想真正起作用，问题不在于CSS的支持，而在于是否存在对应的字体文件，浏览器默认字体一般只有正常和加粗两种表现，设置其他值，没有对应粗细的字体则表现不出来
伪元素::first-letter和::first-line都只能作用在块级元素上，且仅支持部分CSS属性和颜色等权重总是多了一层，意思是可以比!important大

元素显示与隐藏

CSS可以通过剪裁、定位到屏幕外、明度变化等方法实现

display: none可让元素不可见，同时不占据空间，辅助设备无法访问，但资源有加载，DOM可访问
visibility: hidden可让元素不可见，不能点击，辅助设备无法访问，但占据空间保留
clip: rect(0,0,0,0)可让元素不可见，不能点击，不占据空间，但键盘可访问
z-index：-1负值隐藏可让元素不可见，不能点击，但占据空间，键盘可访问
opacity: 0透明度可让元素不可见，可以点击，位置保留
position: absolute与以上结合可让元素不占据空间
标签受限下可以使用text-indent文本缩进隐藏元素内部文本内容

选择器

CSS选择器可以分为四类，即选择器、选择符、伪类和伪元素

选择器包含标签选择器、类选择器、属性选择器以及ID选择器
选择符包含后代关系的空格、父子关系的尖括号、相邻兄弟关系的加号、兄弟关系的波浪号以及表示列关系的双管道
伪类的特征是由冒号组成的，通常与浏览器行为和用户行为相关联
伪元素的特征是由两个冒号组成，常见的有::before、::after、first-letter和first-line等

优先级

选择器优先级一是可通过数值计数法计算，数值越大优先级越高，二是当两个选择器的优先级相同时，后渲染的选择器的优先级更高，可称为后来居上
由上面优先级计算方法可通过重复选择器自身（.foo.foo）增加选择器优先级，既提高优先级又不会增加耦合
优先等级分为：0级（通配符、选择符和逻辑组合类）、1级（标签选择器）、2级（类选择器、属性选择器和伪类）、3级（ID选择器）、4级（style内联属性）以及顶级优先级（!important）
选择器的优先级与DOM元素的层级位置没有任何关系，只根据优先值大小相关

后代选择符

当包含后代选择符时，整个选择器的优先级与祖先元素的DOM层级没有任何关系，这时看落地元素的优先级，若有相同优先级的则使用后来居上原则

子选择符

后代选择符是所有后代对象，子选择符是选择相邻后代对象，即子选择符只会匹配第一代子元素，而后代选择符会匹配所有子元素

一旦使用子选择符，元素的层级关系就强制绑定，不利于维护
使用子选择符的主要目的时避免冲突，通过使用它进行精确控制

相邻兄弟选择符

相邻兄弟选择符可以用于选择相邻的兄弟元素，但只能选择后面一个兄弟

相邻兄弟选择符会忽略中间文本节点和注释节点，只认元素节点
配合某些伪类低成本实现很多实用的交互效果

随后兄弟选择符

相邻兄弟选择符只会匹配它后面的第一个兄弟元素，而随后兄弟选择符会匹配后面的所有兄弟元素

列选择符

列选择符表示为双管道（｜｜），主要在表格布局和网格布局中控制特殊列的样式，例如跨列

元素选择器

元素选择器主要包括两类：一是标签选择器，二是通配符选择器

元素选择器是唯一不能重复自身的选择器
级联使用的时候元素选择器必须写在最前面
通配选择器是一个特殊的标签选择器，它可以指代所有类型的标签元素，包括自定义元素，但是不包括伪元素。因为它匹配所有元素，因此它比较耗性能且影响较大，需要谨慎使用

属性选择器

属性选择器指的是属性值匹配选择器，ID选择器和类选择器其实也属于属性选择器，它们只是比较特殊

[attr]表示只要包含指定的属性就匹配成功，无论属性值的内容是什么
[attr='val']是属性值完全匹配选择器
[attr~='val']是属性值单词完全匹配选择器，意思是专门匹配属性中的单词，又看模糊匹配的味道
[attr|="val"]是属性值起始片段完全匹配选择器，其值要么正好是val，要么是以val-开头

属性值正则匹配选择器

[attr^="val"]表示匹配属性值以字符val开头的元素
[attr$="val"]表示匹配属性值以字符val结尾的元素
[attr*="val"]表示匹配属性值包含字符val的元素
[attr^="val" i]、[attr$="val" i]、[attr*="val" i]是可以忽略属性值大小写

URL定位伪类

URL锚点可以和页面中id匹配的元素进行锚定，浏览器的默认行为是触发滚动定位，同时进行:target伪类匹配

部分浏览器a标签的name属性与id属性作用相同，也能触发浏览器的滚动定位
如果匹配锚点的元素是display: none，则所有浏览器不会触发任何滚动，但是元素会依然匹配:target为类，这个效果在做一些交互时非常有用

逻辑组合伪类

逻辑组合伪类自身的优先级都是0，当伪类选择器自身和括号里的参数作为一个整体时，它的优先级有的由参数选择器决定，有的参数选择器的优先级依旧为0

否定伪类:not():如果当前元素与括号里面的选择器不匹配，则该伪类会进行匹配；它本身没有优先级，但是后面括号内里面的表达式有优先级；它也可以不断级联；否定伪类最大的作用是重置CSS样式
任意匹配伪类:is():可以把括号中的选择器依次分配出去，对于很多逗号分隔的选择器非常有用；它的优先级是由参数选择器里面优先级最高的那个选择器决定
任意匹配伪类:where():它和:is()的含义、语法、作用相同；区别是它的优先级永远为0，即使参数选择器里的优先级存在
关联伪类:has():它可以实现类似父选择器和前面兄弟选择器的功能，不过没有受到浏览器支持，还是规范