2.4（css复习）

css3复习（一些注意点）

1.只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并

2.请记住，height 和 width 属性不包括内边距、边框或外边距！它们设置的是元素的内边距、边框和外边距内的区域的高度/宽度！

3.**盒子模型**

背景应用于由内容和内边距、边框组成的区域。

4.CSS 拥有如下轮廓属性：

• outline-style

• outline-color

• outline-width

• outline-offset

• outline

注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。但是两者相似。

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

5.direction 和 unicode-bidi 属性可用于更改元素的文本方向：

6.text-transform 属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：

7.font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。

8.font-size 值可以是绝对或相对大小。

绝对尺寸：

• 将文本设置为指定大小

• 不允许用户在所有浏览器中更改文本大小（可访问性不佳）

• 当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：

• 设置相对于周围元素的大小

• 允许用户在浏览器中更改文本大小

注释：如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。

W3C 建议使用 em 尺寸单位。

1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

可以使用这个公式从像素到 em 来计算大小：pixels/16=em。

9.响应式字体大小

可以使用 vw 单位设置文本大小，它的意思是“视口宽度”（"viewport width"）。

这样，文本大小将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放：

10.不同指针

11.列表相关

list-style-position 属性指定列表项标记（项目符号）的位置。

在使用简写属性时，属性值的顺序为：

• list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）

• list-style-position（指定列表项标记应显示在内容流的内部还是外部）

• list-style-image（将图像指定为列表项标记）

如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。

12.表格相关

向 <th> 和 <td> 添加 border-bottom 属性，以实现水平分隔线：

在 <tr> 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：

 tr:hover {background-color: #f5f5f5;}

为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color：

 tr:nth-child(even) {background-color: #f2f2f2;}

13.通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中

visibility:hidden; 也可以隐藏元素。但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局：

14.

15.

16.

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。

然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

注意：“被定位的”元素是其位置除 static 以外的任何元素。

这是一个简单的例子：

position: relative; 的元素相对于其正常位置进行定位。

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

17.

CSS Overflow

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值：

• visible - 默认。溢出没有被剪裁。内容在元素框外渲染

• hidden - 溢出被剪裁，其余内容将不可见

• scroll - 溢出被剪裁，同时添加滚动条以查看其余内容

• auto - 与 scroll 类似，但仅在必要时添加滚动条

注释：overflow 属性仅适用于具有指定高度的块元素。

注释：在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 "overflow:scroll"）。

18.

浮动相关：

CSS 浮动 (w3school.com.cn)

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框

19.box-sizing 属性允许我们在元素的总宽度和高度中包括内边距和边框。

如果在元素上设置了 box-sizing: border-box;，则宽度和高度会包括内边距和边框

20.CSS 组合器

组合器是解释选择器之间关系的某种机制。

CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。

CSS 中有四种不同的组合器：

• 后代选择器 (空格)

• 子选择器 (>)

• 相邻兄弟选择器 (+)

• 通用兄弟选择器 (~)

21.什么是伪类？

伪类用于定义元素的特殊状态。

例如，它可以用于：

• 设置鼠标悬停在元素上时的样式

• 为已访问和未访问链接设置不同的样式

• 设置元素获得焦点时的样式

CSS 伪类 (w3school.com.cn)

22.CSS 计数器是由 CSS 保持的“变量”，其值可以通过 CSS 规则递增（以跟踪其使用次数）。

计数器使您可以根据内容在文档中的位置来调整其外观。

23.特异性换个说法就是权重

24.图像边框

属性	描述
border-image	用于设置所有 border-image-* 属性的简写属性。
border-image-source	规定用作边框的图像的路径。
border-image-slice	规定如何裁切边框图像。
border-image-width	规定边框图像的宽度。
border-image-outset	规定边框图像区域超出边框盒的量。
border-image-repeat	规定边框图像应重复、圆角、还是拉伸。

25.CSS 多重背景

CSS 允许您通过 background-image 属性为一个元素添加多幅背景图像。

不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。

CSS 高级背景属性

属性	描述
background	用于在一条声明中设置所有背景属性的简写属性。
background-clip	规定背景的绘制区域。
background-image	为一个元素指定一幅或多幅背景图像。
background-origin	规定背景图像的放置位置。
background-size	规定背景图像的大小。

background-size 的其他两个可能的值是 contain 和 cover。

contain 关键字将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。

cover 关键字会缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。这样，背景图像的某些部分可能在背景定位区域中不可见。

26.线性渐变

 #grad {
   background-image: linear-gradient(to right, red , yellow);
 }

 #grad {
   background-image: linear-gradient(to bottom right, red, yellow);
 }

可以不是方向，如角度deg也可以

颜色可以多种。可以用rgba添加透明度

repeating-linear-gradient() 函数用于重复线性渐变

CSS 径向渐变

径向渐变由其中心定义。

如需创建径向渐变，您还必须定义至少两个色标。

（还有一些内容如动画特效等先没有具体复习）