background

  • background-image: 设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景;
  • background-position: 设置背景图像的位置;
  • background-size: 设置背景图像的大小;
  • background-repeat: 指定背景图像的铺排方式;
  • background-attachment: 指定背景图像是滚动还是固定;
  • background-origin: 设置背景图像显示的原点[background-position相对定位的原点];
  • background-clip: 设置背景图像向外剪裁的区域;
  • background-color: 指定背景颜色。

简写的顺序如下:
bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip

说明：background-position 和 background-size 属性, 之间需使用/分隔, 且position值在前, size值在后。 如果同时使用 background-origin 和 background-clip 属性, origin属性值需在clip属性值之前, 如果origin与clip属性值相同, 则可只设置一个值。

background-position
用来设置背景图像的位置, 默认值: 0% 0%, 效果等同于 left top
1.当设置一个值, 则该值作用在横坐标上, 纵坐标默认为50%(即center) ;
2.设置两个值，即为横纵坐标，取值可以是方位关键字，也可以是百分比和长度

background-size
用来指定背景图像的大小。默认值: auto

background-origin
用于设置 background-position 定位时参考的原点, 默认值 padding-box , 另外还有两个值: border-box 和 content-box。

background-size

设置背景图片大小，图片可以保持其原有的尺寸或者拉伸到新的尺寸，或者保持其原有比例的同时缩放到元素的可用空间尺寸

单张图片的背景大小规定方法

  • 使用关键词 contain
  • 使用关键词 cover
  • 设定宽度和高度值

通过宽高值设定尺寸时

  • 如果仅又一个数值，这个数值就是宽度大小，高度值将被设置为auto
  • 两个值。分别是宽高

cover
缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。

contain
缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。

vertical-align

  1.   制定行内元素（inline）元素的垂直对齐方式

  • 使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本内的图片

  • 相对父元素

    • baseline 元素的基线与父元素的基线对齐。(默认方式)
    • middle 元素的中部与父元素的基线加上父元素 高度的一半对齐

  • 相对行的值

    • top 使元素及其后代元素的顶部与整行的顶部对齐
    • bottom
    • 没有基线的元素，使用外边距的下边缘代替。

line-height

用于设置多行间距（行高）
对于块级元素，它指定元素行盒的最小高度。

backdrop-filter

此属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移），因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

border-radius

允许你设置元素的外边框圆角，当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个椭圆与边框交集形成圆角效果。
该属性是一个 简写属性，是为了将这四个属性 [border-top-left-radius](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-top-left-radius)、[border-top-right-radius](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-top-right-radius)、[border-bottom-right-radius](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-bottom-right-radius)，和 [border-bottom-left-radius](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-bottom-left-radius) 简写为一个属性

即：左上角 右上角 右下角 左下角、

box-shadow

用于在元素的框架上添加阴影效果，该属性可设置的值包括，x偏移，y偏移，阴影模糊半径，阴影扩散半径，和阴影颜色并以多个逗号分隔。


x y 是按照数学二维坐标系来计算的，只不过y垂直方向向下，设置水平偏移量，正值阴影位于元素右边，负值阴影则位于元素左边， y 正值位于元素下方，负值位于元素上方。

transition

是transition-property transition-duration transition-timing-function 和 transition-delay 的简写属性。

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡结果。比如在不同的伪元素之间切换，像是 :hover
:active 或者通过javascript实现的状态变化、

  • 零或一个值，表示转换应适用的属性。 这可能是以下任何一种：
    • 关键字none
    • 关键字all
    • 命名 CSS 属性的 [<custom-ident>](https://developer.mozilla.org/zh-CN/docs/Web/CSS/custom-ident) 。
  • 零或一个 <single-transition-timing-function> 值表示要使用的过渡函数
  • 零，一或两个 [<time>](https://developer.mozilla.org/zh-CN/docs/Web/CSS/time) 值。可以解析为时间的第一个值被分配给 [transition-duration](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-duration)，并且可以解析为时间的第二个值被分配给[transition-delay](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-delay)。
  1. transition-delay: 0s
  2. transition-duration: 0s
  3. transition-property: all
  4. transition-timing-function: ease

简单示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         .menuButton {
  11.             position: relative;
  12.             /* hover之后回来的状态 */
  13.             transition-property: background-color, color;
  14.             transition-duration: 1s;
  15.             transition-timing-function: ease-out;
  16.             text-align: left;
  17.             background-color: grey;
  18.             left: 5px;
  19.             top: 5px;
  20.             height: 26px;
  21.             color: white;
  22.             border-color: black;
  23.             font-family: sans-serif;
  24.             font-size: 20px;
  25.             text-decoration: none;
  26.             box-shadow: 2px 2px 1px black;
  27.             padding: 2px 4px;
  28.             border: solid 1px black;
  29.         }
  31.         .menuButton:hover {
  32.             position: relative;
  33.             transition-property: background-color, color;
  34.             transition-duration: 1s;
  35.             transition-timing-function: ease-out;
  36.             background-color: white;
  37.             color: black;
  38.             box-shadow: 2px 2px 1px black;
  39.         }
  40.     </style>
  41. </head>
  43. <body>
  44.     <div class="sidebar">
  45.         <p><a class="menuButton" href="home">Home</a></p>
  46.         <p><a class="menuButton" href="about">About</a></p>
  47.         <p><a class="menuButton" href="contact">Contact Us</a></p>
  48.         <p><a class="menuButton" href="links">Links</a></p>
  49.     </div>
  50. </body>
  52. </html>

transform

此属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改css视觉格式化模型的坐标空间来实现的

rotate()
定义一个旋转属性，将元素在不变形的情况下旋转到不动点周围。180°的旋转为点反射

属性

translate3d

CSS 函数在3D空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。

  1. translate3d(tx, ty, tz)   //横 纵 z轴

css选择器

http://www.ruanyifeng.com/blog/2009/03/css_selectors.html

多元素组合选择器

E，F 多元素选择器，同时匹配所有E元素或F元素
E F 后代元素选择器,匹配所有属于E元素后代的F元素
E > F 子元素选择器，匹配所有E元素的子元素F
E + F 毗(pi)邻元素选择器,匹配所有紧随E元素之后的同级元素F

css3的同级元素通用选择器

E~F 匹配任何在E元素之后的同级F元素

css3属性选择器

E[attr^=”val”] 属性attr的值以”val”开头的元素
E[attr$=”val”] 属性attr的值以”val”结尾的元素
E[attr*=”val”] 属性attr的值包含”val”字符串的元素
  • 子元素选择器 > ``` h1 > strong {color:red;}

This is very very important.

//红色

This is really very important.

//不生效

  2. - 后代选择器 （包含选择器）
  4. 表示table 元素下class为 company 的所有td 元素下的所有p元素

table.company td > p

  2. 2021.4.29 补充
  3. ```javascript
  4. & [class*="el-icon-"] + span {
  5.   margin-left: 5px;
  6. }
  7. //所有包含el-icon-元素的同级元素
  8. //场景 封装button组件的时候，有图标与文字两个元素，那么在传入图标之后，要求会有一个空隙，这时候就可以使用这个属性,代码如下
  10. <div>
  11.   <i v-if="icon" :class="icon"></i>
  12.   <span v-if="$slots.default"><slot>按钮</slot></span>
  13. </div>

overflow

visible : 内容不会被修剪，会呈现在元素框之外

hidden: 内容会被修剪，并且其余内容不可见

scroll: 内容会被修剪，浏览器会显示滚动条以便查看其余内容

auto: 由浏览器定夺，如果内容被修剪，就会显示滚动条

z-index

即其 position 属性值不是 static，这里要注意的是 CSS 把元素看作盒子

实际应用

  1. 当一个块需要移动位置盖住某个块的部分的时候
  3. a:负margin
  4. margin-top:-10px
  5. position:relative;
  6. z-index:2;
  9. b:相对定位
  10. position:relative;
  11. top:-20px;
  12. z-index:2;

background-image

为一个元素设置一个或者多个背景图像

  1. background-repeat: no-repeat; 背景图像只显示一次

text-indent

定义一个块元素首行文本内容之前的缩进量

fill

应用于 svg
fill设置对象内部的颜色，stroke 设置绘制对象的线条的颜色

hsla

hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。
HSLA 即色相、饱和度、亮度、透明度（英语：Hue, Saturation, Lightness, Alpha ）。

  • 色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
  • 饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
  • 亮度（L） 取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。
  • 透明度（A） 取值 0~1 之间， 代表透明度。

point-events

pointer-events:auto | none;
默认 auto
常用的值是这两个，还有其他的值，不过仅限于SVG。

场景：下图是某东商城的商品列表页中的商品，在右上角有一个“惊爆价”的图标，大家都知道这是用一个标签在绝对定位上去的，会遮住下面的商品图片，鼠标移到“惊爆价”图片是点击不了后面图片的链接的，当然我们也可以给这个图标也加上链接，这样就能解决问题。
css基本属性 - 图1
设置 pointer-events:none 时，浏览器将会忽略掉鼠标在该元素上的所有鼠标事件（包括 CSS 和 JavaScript 的鼠标事件），如果在该元素的下面还有元素存在，那么会触发下面元素的鼠标事件。