# CSS笔记

**Published by:** [Island┇Front End Notes](https://paragraph.com/@island/)
**Published on:** 2021-11-15
**Categories:** css, summary
**URL:** https://paragraph.com/@island/css

## Content

## CSS选择器 ### 属性选择器 * `[name]`：选择所有具有该属性的元素 * `[name=”value”]`：选择的元素具有值为`value`的属性 * `[name~=”value”]`：选择元素的属性值中包含`value`值 （属性值是由空格分隔的列表） * `[name*=”value”]`：选择元素的属性值的子字符串是`value` * `[name^=”value”]`：选择元素的属性值以`value`开头 * `[name$=”value”]`：选择元素的属性值以`value`结尾 ### 组合器 * ` `空格：选择所有后代元素 * `>`：选择直接后代元素 * `~`：选择兄弟元素 * `+`：选择直接兄弟元素 ### 伪类 * `:active`选择处于激活状态的元素，对于按钮和链接，表示已经点按但还没有松开 * `:checked`选择已经处于checked或者selected状态的button, checkbox, option * `:focus`选择当前具有focus的元素 * `:valid`, `:invalid`选择对应的经过验证和未经验证的表单元素 * `:visited`选择已被用户访问过的链接元素（浏览器限制使用？） * `:nth-child(n)`选择是其父代元素的第n个子代的元素，参数可以是一般的多项式或odd, even * `:nth-of-type(n)`非指定类型的元素被忽视后，在所有同类子代元素中进行选择 * `:root`选择文档的根元素 ### 伪元素 * `::before`, `::after`在选中的元素中创建一个新的元素，分别是第一个子代元素和最后一个子代元素 * `::first-line`选择该block元素的第一行 * `::first-letter`选择该元素的第一行第一个字符 ### Specificity排行 1. 定义在元素的style属性中的内联样式 2. ID选择器 3. 类选择器，属性选择器和伪类 4. 元素选择器和伪元素 \ ## 基本概念 * `box-sizing`属性：默认值为`content-box`,指定的`width`和`height`表示的是content area的宽和高。设置为`border-box`后，就包含padding和border了。 * block, inline和inline-block * block：当不设定width时，默认占据整行（新的一行），高度默认为正好能包含content的大小但可以设置 * inline：默认占据正好能包含content的宽和高，设置width和height对其不起作用。垂直方向上设置padding和margin时，不会为其占据新的空间，水平方向有效 * inline-block：结合了block和inline。默认和inline一样，但是可以设置宽和高，且垂直方向上的padding和margin会产生理想的效果 * CSS的pixel不一定与物理设备的pixel对应。高分辨率设备的逻辑像素对应着更多的物理像素。 * `vmin`, `vmax`：对应的是vw/vh中min和max值 * `rem`：root em 是页面的根节点的字体大小 * `%`：用于font-size，相比较的基础单元是父节点的字体大小；用于长度属性，相比较的基础单元是父节点的width * `em`：用于font-size，相比较的基础单元是父节点的字体大小；用于长度属性，相比较的基础单元是当前元素的字体大小 * `white-space`：决定元素中的空白如何被处理。默认值为normal，连续的空白符会被合并，换行符会被当作空白符来处理。[MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space) * `overflow`：决定溢出如何被处理。可以通过`overflow-x`和`overflow-y`单独设置横向和竖向的溢出。默认值为visible。设置为hidden时，溢出部分直接被剪裁不可见；设置为scroll时，始终提供scrollbar；设置为auto时，当内容溢出时提供scrollbar。 * CSS变量，正式名为CSS自定义属性。使用`--name`声明，使用时需要用`var()`，可设置第二个参数为fallback值。变量值会被子代元素继承。 * 可以作为属性值的CSS关键字 * `initial`：使用元素的默认值作为属性值（在W3C标准里被定义的） * `inherit`：继承父元素的值 * `unset`：若为继承属性，就继承父元素的值，否则使用默认值 * `revert`：若为继承属性，就继承父元素的值，否则使用浏览器样式或用户自定义样式（如果有的话） * `border-collapse`：应用于表格元素，控制相邻表格单元的border，默认值为seperate（不合并）。设为collapse后邻接的border会合并为一个border。 * `border-radius`：可以设置成椭圆形，用/隔开长径和短径。 * `box-shadow`：参数分别为 X偏移，Y偏移，(模糊半径)，(扩散长度)，颜色。设置inset值，可以得到向内的阴影。 * `opacity`：会应用于整个元素，包括背景，border, 文字等所有内容和子代元素。 * `display: none`→元素从文档流中移除，其他元素补位； `visibility: hidden` →使元素不可见，不影响文档流 * `background-image` ：可以设置多个，叠在一起，最前面的图在最上层。 * `background-position`：两个参数，分别为x, y方向上的偏移 （也可以用top bottom left right center 指定位置） * `background-size`：设为cover时，背景图片按比例覆盖整个元素，多余的部分会被剪裁掉；设置为contain时，背景图片会缩放以至于可以在整个元素中全部显示出来 * `background-clip`：默认值为border-box，背景在元素的border, padding以及content背后。设置为padding-box之后，border背后没有背景 。设置为content-box，背景只在content部分显示。 * `background`作为简写属性，background-size的值必须直接出现在background-position的值之后，用`/`分开。background-color必须在最后（如果有的话）。 * `linear-gradient` 和 `radial-gradient` 函数生成渐变图像 * `color`：设置了元素文本的颜色，也设置了一个特殊的`currentColor`值，可以被其他属性引用。 * `font-weight`：可以设置为100\~900的整百数，normal是400，bold是700。有效数值根据具体的字体情况而定。也可以设置为lighter或border，相对于父元素的font-weight的值。 * `font-style`：normal, italic, oblique 当字体具有内置的italic体时italic有效，否则和oblique（在normal的基础上倾斜）显示相同。 * `text-indent`：设置首行缩进。 * `text-align`：对块元素内的文字和内联元素进行设置，使其在水平方向上对齐。可以设置为left, right, center和justify。 * `vertical-align`：在垂直方向上对齐内联元素。 * 使用`@font-face`注册web font。给font-family和src属性指定值。 * `text-shadow`：x offset, y offset, \[blur radius\], color。设置文字阴影。 * `margin`：对于block和inline-block元素，将margin设置为auto时，会将元素居中。 * margin collapse现象出现的原因：1. 两个元素垂直方向的margin邻接 2. 父元素和子元素之间没有border, padding或其他content时 * 定位元素：当元素的`position`属性设置为static以外的值时，就是定位元素。 * static：默认值，此时top, left, bottom, right不起作用 * relative：设置top, left, bottom, right值，元素会相对于自己原本的位置移动。 * absolute：元素离开文档流，相对于离他最近的父级定位元素进行位移。 * fixed：元素离开文档流，相对于视口设定位置，滚动页面时，元素位置不变。 * sticky：是relative和fixed的组合，当元素到达指定的（相对于视口的）临界位置时成为一个fixed元素。 * `z-index`：决定了stacking order，越大就在越上面 * ==stacking context== * `float`：设置为left或right，其他内联元素会围绕浮动元素排列 * `clear`：设置为left, right, both, inline-start或inline-end，该元素会在设定方向的浮动元素的下方出现 \ \ ## Transform, Transition, Animation * `transform`：值为一个或多个transform方程 * perspective()：为元素激活一个3D空间，值为元素代表的物体距离屏幕的视角距离(?) * rotation()：旋转的单位可以是deg, grad, rad, turn. origin默认为元素的中心，设置transform-origin可以改变origin的位置，参数分别为x, y, z方向上的位移。元素旋转后，它的三个轴也会随之改变方向。 * translate()：移动元素，不影响文档流。 * scale()：改变大小 * transform的值的顺序是有影响的。 * ==Setting== `transform-style` ==to preserve-3d will allow the cube’s child elements to exist in 3D space.== * `transition`：值为逗号分隔的transition列。指定property, duration, timing-function和\[delay\] * `@keyframes`：创建动画。在`animation`属性中引用@keyframes规则 * `animation`：简写属性。 * `animation-fill-mode` 默认值为none，设置为forwards，backwards时，会分别将元素的最后帧和最开始的帧的样式应用于元素，分别在动画结束后的时期和delay时期。设置为both，同时应用forwards和backwards的效果。 * `animation-iteration-count`设置为infinite可以永远循环。默认为一次。可以设置为小数 * `animation-direction`默认为forward，设为backward是倒放，alternate正序完倒序，alternate-reverse先倒序后正序 * `animation-play-state` running, paused * 涉及改变layout的动画是非常消耗性能的。 \

## Publication Information

- [Island┇Front End Notes](https://paragraph.com/@island/): Publication homepage
- [All Posts](https://paragraph.com/@island/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@island): Subscribe to updates

## Optional

- [Collect as NFT](https://paragraph.com/@island/css): Support the author by collecting this post
- [View Collectors](https://paragraph.com/@island/css/collectors): See who has collected this post