css常用知识点

1.如何把盒子的背景颜色设置为透明

background-color: rgba(0, 0, 0, 0.4);

2.flex一维布局相关知识

有六个常用属性设置在容器上，分别为：
flex-direction
flex-wrap
flew-flow
justify-content
align-items
align-content

flex-direction 属性设置容器主轴的方向
			  	row: 默认值，表示沿水平方向，由左到右。
			  	row-reverse ：表示沿水平方向，由右到左
			   	column：表示垂直方向，由上到下
				column-reverse:表示垂直方向，由下到上

flex-wrap属性用于设置当项目在容器中一行无法显示的时候如何处理。
				nowrap：表示不换行
				wrap：正常换行，第一个位于第一行的第一个
				wrap-reverse：向上换行，第一行位于下方

justify-content属性用于设置项目在容器中的对齐方式。
				flex-start：默认值，左对齐
				flex-end：右对齐
				center：居中对齐
				space-between：两端对齐
				space-around：每个项目两侧的间距相等

align-items定义了项目在交叉轴上是如何对齐显示的
				flex-start:交叉轴的起点对齐
				flex-end 交叉轴的终点对齐
				center 交叉轴居中对齐
				baseline 项目的第一行文字的基线对齐
				stretch：默认值：如果项目未设置高度或者高度为auto，将占满整个容器的高度

3.grid二维布局相关知识

容器的布局

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

grid-template-columns 列属性，

grid-template-rows 行属性

grid-row-gap属性设置行与行的间隔（行间距）

grid-column-gap属性设置列与列的间隔（列间距）

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式; grid-gap: 20px 20px;

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

grid-auto-flow 属性 划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序。
这个顺序由`grid-auto-flow`属性决定，默认值是`row`，即"先行后列"。也可以将它设成`column`，变成"先列后行"。 

fr 关键字 如果两列的宽度分别为1fr和2fr

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

grid-template-columns: 1fr 1fr minmax(100px, 1fr);上面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

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

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

repeat(3, 1fr);//把盒子分成3份每份占1/3

grid-column-start属性：左边框所在的垂直网格线

grid-column-end属性：右边框所在的垂直网格线

grid-row-start属性：上边框所在的水平网格线

grid-row-end属性：下边框所在的水平网格线

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}

容器里面的元素布局

justify-items属性设置单元格内容的水平位置（左中右），

align-items属性设置单元格内容的垂直位置（上中下）。

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

place-items: start end;//高度占满盒子，居右靠起

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。//就相当于给元素设置了witch：100%

repeat(2, 100px 20px 80px);//共有6个盒子

上面代码定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);//auto-fill 关键字表示自动填充
}

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

网格线的名称

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]。

grid-auto-flow 属性

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序。

这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。

grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。

下面的例子让1号项目和2号项目各占据两个单元格，然后在默认的grid-auto-flow: row情况下，会产生下面这样的布局。

上图中，1号项目后面的位置是空的，这是因为3号项目默认跟着2号项目，所以会排在2号项目后面。

现在修改设置，设为row dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。

grid-auto-flow: row dense;

上面代码的效果如下。

grid-auto-columns 属性， grid-auto-rows 属性

有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。

grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

下面的例子里面，划分好的网格是3行 x 3列，但是，8号项目指定在第4行，9号项目指定在第5行。

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

上面代码指定新增的行高统一为50px（原始的行高为100px）。

• grid-column-start属性：左边框所在的垂直网格线
• grid-column-end属性：右边框所在的垂直网格线
• grid-row-start属性：上边框所在的水平网格线
• grid-row-end属性：下边框所在的水平网格线

.item-1 {
grid-column-start: 2;
grid-column-end: 4;
}

上面代码指定，1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。

这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。

.item-1 {
grid-column-start: span 2;
}

上面代码表示，1号项目的左边框距离右边框跨越2个网格。

4.css伪类

伪类包括选择器伪类、锚类伪类、内容伪类

**选择器伪类 (:first-child、:nth-child(n)、:last-child) **

 span:first-child{
    color:red;
  }
  li:nth-child(2n){
    font-size:22px;;
  }

**锚类伪类 (:link、:visited、:hover 、:active) **

这四种伪类存在着一定的顺序，成为LVHA顺序。各个样式之间的顺序很有讲究，一旦出现排列错误就很有可能形成覆盖，导致其中某个样式无法显示。

注意：在使用时一定遵循这样的顺序：

a:link > a:visited > a:hover> a:active

有些锚伪类可以作用a标签上也可以作用在其他标签上：

  a:link {color: red}		//未访问的效果
  a:visited {color: green}	//已访问的效果//这个只能添加颜色样式，不可以添加其他样式
  a:hover {color: pink}	// 鼠标移动上的效果 
  a:active {color: blue}	// 选定的效果

**内容伪类 (:after 、 :before) **

  css
     p:after{
        content: '你是真的6';
        background: transparent;
     }
  html
     <p>--我很6--</p>

效果图：

5.css3中的属性和标签

background-attachment:	scroll: 背景图片相对于容器位置固定
                      	fixed: 背景图片相对于浏览器窗口固定
                      	local: 背景图片相对于容器内容位置固定
 
 linear-gradient//是设置背景的渐变色rgb(90deg,81,84,180,0.5)90deg是位置,0.5是这个颜色的占比
 
 background-image:linear-gradient(90deg,red, rgb(81,84,180,0.5)) ;
 
 background-image:linear-gradient(90deg,red 10%, pink 20%,yellow 100%) ;//颜色转变顺序，不是占比
 
 repeating-linear-gradient(90deg,red 10%, pink 20% ,yellow 40%);//重复渐变色

6.css动画 transition

transition:all 1s;
transition这个属性可以用在需要样式的数字变化上面，
例如：
 body {
           transition:all  1s;
           margin: 0;
           height: 100%;
           background-repeat: no-repeat;
           background-size: 100% 100%;
           background-image: repeating-linear-gradient(orange, white 30%, blue 70%, black 100%);
       }
   body:hover {
       background-size: 100% 200%;//当鼠标放上去，背景颜色会在1s的时间内变成这样，
   }

7.如何把字体的大小设置小于12px

 .pspan{
     font-size:10px;
     transform:scale(0.8);
     display:block;
      }

8.如何修改chrome记住密码后自动填充表单的黄色背景？

input:-webkit-autofill {
    background-color:#FAFFBD;
    background-image: none;color:#000;
}