CSS设计模式读书笔记

块级元素与行内元素

• 块级元素盒子会扩展到与父元素同宽
• 行内元素盒子会“收缩包裹”其内容，并且会尽可能包紧

---

@import

• 在样式表中链接其他样式表，可以用@import，但@import指令必须出现在样式表中其他样式之前，否则不会被加载。

---

CSS选择符

• 上下文选择符
  
  • 标签1 标签2 ：标签1为标签2的祖先元素
  • 标签1>标签2：标签1为标签2的父元素
  • 标签1+标签2：标签2紧跟在其同胞标签 1的后面
  • 标签1~标签2：标签2在其同胞标签1后面，但不一定紧跟
  • *：通配符，匹配任何元素，一般组合其他选择符使用
• ID和类选择符
  
  • 选择同时存在多个类名的元素：.class1.class2{ }，两个类名之间没有空格。
• 属性选择符
  
  • 属性名选择符：img[title]
  • 属性值选择符：img[title=”flower”]
    [attribute] 用于选取带有指定属性的元素。
    [attribute=value] 用于选取带有指定属性和值的元素。
    [attribute~=value] 用于选取属性值中包含指定词汇的元素。
    [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
    [attribute^=value] 匹配属性值以指定值开头的每个元素。
    [attribute$=value] 匹配属性值以指定值结尾的每个元素。
    [attribute*=value] 匹配属性值中包含指定值的每个元素。
• 伪类
  
  • UI伪类：元素处于某个状态时为该元素应用样式
    
    1. 链接伪类 link visited hover active
    2. ：focus伪类
    3. ：target伪类：用户点击一个指向页面中其他元素的链接，则那个元素可以用：target伪类选中，并在用户单击链接转向目标元素时为该元素添加样式。（知乎的答案北京浅黄色应该就是这么做的？）
  • 结构化伪类：标记中存在某种结构上的关系时，为该元素应用样式
    
    1. ：first-child和：last-child
    2. ：nth-child（） 括号里可以是数值，也可以是odd、even
• 伪元素：两个冒号，伪类是一个冒号
  1. ::first-letter
  2. ::first-line
  3. ::before 和 ::after
  伪元素不会被搜索引擎搜索到。

---

img的alt和title属性：

• alt：图片未能加载时显示或由屏幕朗读器朗读出来。
• title：用户鼠标移到图片上是显示提示

---

层叠

• ID选择符>类选择符>元素选择符
• 设定的样式>继承过来的样式，与优先级无关

---

CSS属性值

• 文本值
• 数字值
  
  • 绝对值：px等
  • 相对值：em ex %
    
    1. em：字体中字母M的宽度
    2. ex：字体中字母x的高度
    3. %：相对于父元素的宽度
• 颜色值：
  
  • 颜色名
  • 十六进制颜色 #RRGGBB或#RGB
  • RGB颜色值 rgb(r,g,b)，其中r,g,b是0到255之间的值
  • RGB百分比值（r%，g%，b%）
  • HSL（色相，饱和度%，亮度%）
  • alpha通道：RGB与HSL都支持alpha，分别为RGBA和HLSA

---

外边距叠加

• 垂直方向上的外边距会叠加。
  上下外边距相遇时，它们就会相互重叠，直至一个外边距碰到另一个元素的边框。（以较大的外边距作为段间距）

---

盒子模型的宽度

• 没有显式设置盒子的width时，块级元素的width为auto，即其宽度扩展为与父元素同宽。此时添加水平边框、内边距和外边距会导致content宽度变小。
• 显示设置了width的盒子，此width就是content的宽度，增加水平边框、内边距和外边距，会导致整个盒子变得更宽。

---

文本环绕图片

在html中先写图片再写要环绕它的文本，使图片浮动，脱离文档流，则后面的段落会占据图片的位置，但它的内容（文本）会绕开浮动的图片。

---

清除浮动

• 为父元素添加overflow:hidden
• 同时浮动父元素：此时父元素会收缩包裹其子元素（不会子元素是否浮动），因此还需再设定此父元素的width。
• 添加非浮动的清除元素：在父元素内部的最后添加一个非浮动的子元素，且清除该子元素。
  
  • 可以显示地在html标记中添加一个子元素并应用clear属性。
  • clearfix规则：
    .clearfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}

• 没有父元素的话，也可以给浮动元素添加clearfix规则来使其后面增加一个清除元素

---

定位

• absolute与fixed都会完全脱离文档流。
• 定位上下文：把属性设置为absolue、relative和fixed之后，可以使用top、left等属性使其相对于定位上下文移动。absolute默认相对于body定位；relative对于其原来位置定位；fixed相对于浏览器视窗定位；

---

背景

为前景层（内容和边框）设置背景

• background-image：url（）
  默认情况下背景图片会以元素左上角为起点，沿水平和垂直方向重复出现，直至填满整个背景区域。
• background-repeat：除了repeat-x，repeat-y，no-repeat还有两个属性：
  
  • round：为确保图片不被剪切，通过调整图片大小来适应背景区域
  • space：为确保图片不被剪切，通过在图片间添加空白来适应区域
• background-position：同时设定元素和图片的原点。
  
  • 关键字：left bottom等，只设定一个值的话另一个也取相同的值
  • 数值：第一个表示水平，第二个值代表垂直位置。如果只设定一个值，则将其用来设定水平位置，而垂直位置则会被设为center
  • 在使用关键字和百分比数值的情况下，设定的值同时应用于元素和图片。如果设了33% 33%，则图片水平33%的位置与元素水平33%的位置对齐，垂直也一样；center center是将图片的中心点定位在了元素的中心点。
  • 但像素之类的绝对单位数值就是将图片的左上角放置在距离元素左上角指定位置的地方。
• background-size：除了数值之外
  
  • cover：拉大图片，使其完全填满背景区；保持宽高比
  • contain：缩放图片，使其恰好适合背景区；保持宽高比
• background-attachment：控制滚动元素内的背景图片是否随元素滚动而滚动。默认为scroll，即背景图片随元素移动；若改为fixed，则背景图片不随元素滚动，一般用于添加水印等。
• background-clip：控制背景绘制区域的范围。
  默认情况下背景绘制区是扩展到边框外边界的。
  
  • background-origin：控制背景定位区域的原点

---

color属性

color设置前景色：包括文本和border颜色。因此若没有显式设置border颜色，border会和文本一样取color的值。

---

隐藏元素

• display：none 该元素及所有包含在其中的元素都不会在页面中显示，他们原先占据的空间也都消失。
• visibility：hidden 元素会隐藏，但其占据的空间不消失

---

字体属性

• font-family
  字体族：是可以继承的属性，因此它的值会遗传给所有后代元素，一般在body中设置整个页面的字体。
• font-size
  可继承的
  
  • 绝对字体大小：px等，修改body元素的字体大小不会影响页面中以绝对单位控制的元素，但没有设定字体大小的元素将会与body的字体大小成比例变化。
  • 相对字体大小：百分比、em、rem。
    设定相对大小的字体是相对于最近的被设定过字体大小的祖先元素来确定。
    默认情况下1em是16像素。改变一个元素的相对字体大小，其子元素的字体大小也会同比例变化。
    rem：使用rem为元素设定字体大小时，仍然是相对大小，但只是相对根元素。通过它可以只通过修改根元素就成比例的调整所有字体的大小，又可以避免像em那样字体大小逐层复合的连锁反应。
• font-style
  设定字体是斜体还是正体，可直接用html的 < em > 元素
• font-weight
• font-variant
  除了normal就只有small-caps一个属性值，会导致所有小写英文字母变成大写英文字幕。

简写字体属性必须声明font-size和font-family的值，且前者在前后者在后

---

文本属性

• text-indent：文本缩进；
  可以被子元素继承。子元素缩进的值与父元素缩进的值相同，即都是以父元素宽度计算的。
  一般使用em，这样可以随字体大小成比例变化。
• letter-spacing：字符间距
  无论设定字体大小时使用的是什么单位，设定字符间距一定要用相对单位，以便字符间距能随字体大小同比例变化。
• word-spacing：单词间距
  只调整单词间距而不影响字符间距。两边有空白的字符和字符串为单词。
• text-decoration：文本装饰
• text-align：文本对齐
  有4个值，left、right、center、justify，控制文本水平方向对齐的方式。
• line-height：行高
  
  • CSS中的行高平均分部在一行文本的上方和下方。
  • 可以在font中以复合值的形式将font-size和line-height写在一块：1.2em/1.4，这表示行高是字体大小1.2em的1.4倍，此时不用给行高单位。若使用絶対単位，则增大字体容易导致行与行之间重叠。
• text-transform：文本转换
  用于转换元素中文本的大小写，可以设定英文文本首字母大写，全部字母大写和全部字母小写。
• vertical-align：垂直对齐
  以基线为参照上下移动文本，但只影响行内元素。

---

@font-face

浏览器从web服务器下载字体，不必再依赖用户机器中的字体。

• 公共字体库：如google web fonts，生成link标签直接嵌入页面
• 打包的@font-face：使用该字体的页面第一次加载时浏览器下载字体并缓存，以后就不用下载了。

---

页面布局

• box-sizing：border-box 给设定宽度的盒子加内边距和边框时不会增加盒子的宽度了。
• 使用display：table-cell来实现多栏布局：
  
  • 单元格table-cell不需要浮动就可以并排显式
  • 默认情况下一行中所有单元格高度相同
  • 任何没有明确设定宽度的栏都是流动的

---

非首位子元素选择符

如li+li：只会选择出第一个li外的li

---

导航列表可点击区域

一般都是在li中放置a链接，但a是行内元素，可点击区域只有文字部分大小。为了让整个li为可点击区域，需将a设为block，从而让a的范围扩张到整个li。

---

下拉菜单

• 将下一级菜单嵌套到上一级的li元素内的最后，同时利用position：absolute来定位其与上级菜单的位置关系。
• 利用：hover和display：none/block来实现下级菜单的展示和隐藏。
• ：hover事件会沿着元素的结构层次向上冒泡，因此把：hover设定在li元素，就相当于也把它设定给了所有祖先li元素，这样可以实现嵌套菜单路径的展示。

---

表单

• label：标注，每个表单控件都对应一个label文本元素。
  
  • label可以包含控件也可以在控件前面或后面。如果没有包含控件的话，需要将label的for属性和控件的id属性匹配起来。
  • for属性与id属性匹配后，或label包含控件，用户点击标注文本也可以选择单选按钮和复选框，相当于增大了可点击区域

---

z-index

只对position是非static的元素起作用

---

伪元素

::before和::after伪元素的content属性中必须有点内容，否则不能显示生成的元素。可以是“”指定的空字符串。