关于css使用记录

@media

@media (max-width:500px){
            body{
                background: red;
            }
        }

max-width ：在这个范围内是显示。

@media (min-width:501px) and (max-width:768px){
            body{
                background: red;
            }
        }

在501~768 范围内显示

em 和rem

em

参考物是父元素的font-size，具有继承的特点。
特点:

1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
   注：特别是在多重嵌套里面更要注意。

rem

相对的是根元素（html）的font-size来计算
rem即root em(根em),就是前端的一个相对单位而已(相对于当前对象内的文本的font-size，如未设置，这相对的是浏览器的默认font-size（通常为16px）)
优点:只需要设置根目录的大小就可以把整个页面的成比例的调好。

注：推荐使用rem

vw和vh

对的是终端视口，视口（移动端你就可以当成屏幕就好啦）的宽为100vw,高为100vh
如果视区宽度是100vw, 则1vw是视区宽度的1/100, 也就是1%，类似于width: 1%。
vh是高度.

vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个

flex 布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
注：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

属性

1、flex-direction

属性决定主轴的方向（即项目的排列方向）

     column ：主轴为垂直方向，起点在上沿
     column-reverse:主轴为垂直方向，起点在下沿
     row：主轴为水平方向，起点在左端
     row-reverse  ：主轴为水平方向，起点在右端

2、flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，换行显示。

	nowrap（默认）：不换行。
	wrap：换行，第一行在上方。
	wrap-reverse：换行，第一行在下方。

3、flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

4、justify-content

justify-content属性定义了项目在主轴上的对齐方式。

具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5、align-items

align-items属性定义项目在交叉轴上如何对齐。
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6、align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

7、order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

8、flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

9、flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

10、flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

11、flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
推荐优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

Grid 网格布局

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

Grid 布局与 Flex 布局

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

行和列

1、容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

2、行和列的交叉区域，称为"单元格"（cell）。

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

属性

display: grid指定一个容器采用网格布局。
** 注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。 **

1、grid-template-columns 、grid-template-rows

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

定了一个三行三列的网格，列宽和行高都是100px。

（1）repeat()

使用repeat()函数，简化重复的值

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。

（2）auto-fill 关键字

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

示每列宽度100px，然后自动填充，直到容器不能放置更多的列。

（3）fr 关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

表示两个相同宽度的列。
fr可以与绝对长度的单位结合使用，这时会非常方便。

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}

表示，第一列的宽度为150像素，第二列的宽度是第三列的一半。

（4）minmax()

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

（5）auto 关键字

auto关键字表示由浏览器自己决定长度。

grid-template-columns: 100px auto 100px;

第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

（6）网格线的名称

grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。
网格布局允许同一根线有多个名字，比如[fifth-line row-5]。

（7）布局实例

grid-template-columns属性对于网页布局非常有用。两栏式布局只需要一行代码。

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}

将左边栏设为70%，右边栏设为30%。
传统的十二网格布局，写起来也很容易

grid-template-columns: repeat(12, 1fr);

2、grid-row-gap、grid-column-gap 、grid-gap

grid-row-gap用于设置行间距，grid-column-gap用于设置列间距。

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。

grid-gap: grid-row-gap grid-column-gap ;

3、grid-auto-flow 属性

顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。

4、justify-items 、align-items 、place-items

justify-items：单元格内容的水平位置（左中右）
align-items：单元格内容的垂直位置（上中下）
这两个属性的写法完全相同，都可以取下面这些值。

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

.container {
  justify-items: start;
}

place-items属性是align-items属性和justify-items属性的合并简写形式。

place-items: align-items ustify-items;

5、grid-column 、grid-row

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

项目item-1占据第一行，从第一根列线到第三根列线。

伪类选择

1、first-child 第一个标签

 li:first-child{ }

2、last-child 最后一个标签

li:last-child{ }

3、指定标签位置nth-child()

li:nth-child(n){

        }

（1）、nth-child(3n) 选择3的倍数
（2）、nth-child(3n+7) 从7开始3的倍数
（3）、nth-child(odd ） 奇数
（4）、nth-child(even） 偶数

伪元素

1、：after元素之后加伪元素

.required:after{
content:'*';
color:red;
}

2、:before元素之前加伪元素

注：content不能缺少。

box-shadow 阴影

1、offset-x/offset-y/color

x轴/y轴/颜色

.required{
box-shadow:10px 10px teal;
}

2、offset-x/offset-y/blur-radius/color

x轴/y轴/模糊半径/颜色

.required{
box-shadow:10px 10px 20px  teal;
}

3、offset-x/offset-y/blur-radius/spread-raduis/color

x轴/y轴/模糊半径/扩散半径/颜色

.required{
box-shadow:10px 10px 20px  1px  teal;
}

4、offset-x/offset-y/color/inset

x轴/y轴/颜色/内阴影

.required{
box-shadow:10px 10px teal inset;
}

注：多重阴影用逗号隔开

.required{
box-shadow:10px 10px 20px  1px  teal  ,10px 10px teal inset;
}

text-shadow文字阴影用法类似于 box-shadow

样式变量

定义： --变量名
使用： var(–变量名)
注：声明变量之前，变量名之前要加上两个连字符（–）；var( ) 函数用以读取变量，还可以使用第二个参数，表示变量的默认值。如果这个变量不存在，就会使用这个默认值

.box{
        --cor:#ddf;
        background-color: var(--corlo , red);
        width:400px;height:40px;
    }

注意：变量名的大小写敏感，–head不同于–Head，这是两个不同的变量。

变量的作用域

一个变量的作用域是其对应的选择器的作用范围，div选择器对应div的范围，由于这个原因，全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们。

（一）声明一个局部变量

element {
  --main-bg-color: brown;
}

（二）声明一个全局变量

:root {
  --global-color: #666;
  --pane-padding: 5px 42px;
}

：root 这个伪类选择器匹配的是文档树的根元素。对于HTML来说，：root表示的是根元素，除了优先级更高以外，与html元素选择器相同。

数值

注意：如果变量的值为数值，则在使用的时候不可以与数值单位直接连用

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}

calc()

使用时数值与单位直接写在一起，这是无效的。必须使用 **calc()**函数，将它们连接。

span{
        background: skyblue;
        --size:30;
        font-size:calc(var(--size)*1px);
    }

赋值带有单位

如果变量赋值的时候带有单位（例如：–size:20px;），就不能写成字符串

/* 无效 */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

animation

语法

animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function	规定动画的速度曲线
animation-delay	规定在动画开始之前的延迟
animation-iteration-count	规定动画应该播放的次数
animation-direction	规定是否应该轮流反向播放动画

(1)、animation-delay

以秒或毫秒计,允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

(2)、animation-direction

alternate： 动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
normal： 动画应该正常播放

（3）、animation-duration

属性定义动画完成一个周期所需要的时间，以秒或毫秒计。

（4）、animation-iteration-count

属性定义动画的播放次数。infinite 规定动画应该无限次播放。

（5）、animation-name

属性为 @keyframes 动画规定名称。

（6）、animation-timing-function

规定动画的速度曲线。

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

transform

none										定义不进行转换。	
matrix(n,n,n,n,n,n)							定义 2D 转换，使用六个值的矩阵。	
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。	
translate(x,y)								定义 2D 转换。
translate3d(x,y,z)							定义 3D 转换。	
translateX(x)								定义转换，只是用 X 轴的值。	
translateY(y)								定义转换，只是用 Y 轴的值。	
translateZ(z)								定义 3D 转换，只是用 Z 轴的值。	
scale(x,y)									定义 2D 缩放转换。	
scale3d(x,y,z)								定义 3D 缩放转换。	
scaleX(x)									通过设置 X 轴的值来定义缩放转换。	
scaleY(y)									通过设置 Y 轴的值来定义缩放转换。	
scaleZ(z)									通过设置 Z 轴的值来定义 3D 缩放转换。	
rotate(angle)								定义 2D 旋转，在参数中规定角度。	
rotate3d(x,y,z,angle)						定义 3D 旋转。	
rotateX(angle)								定义沿着 X 轴的 3D 旋转。	
rotateY(angle)								定义沿着 Y 轴的 3D 旋转。	
rotateZ(angle)								定义沿着 Z 轴的 3D 旋转。	
skew(x-angle,y-angle)						定义沿着 X 和 Y 轴的 2D 倾斜转换。	
skewX(angle)								定义沿着 X 轴的 2D 倾斜转换。	
skewY(angle)								定义沿着 Y 轴的 2D 倾斜转换。	
perspective(n)								为 3D 转换元素定义透视视图。