前端-CSS篇

---

css gpu

浏览器接收到页面文档后，会将文档中的标记语言解析为DOM树。DOM树和CSS结合后形成浏览器构建页面的渲染树。渲染树中包含了大量的渲染元素，每一个渲染元素会被分到一个图层中，每个图层又会被加载到GPU形成渲染纹理，而图层在GPU中 transform 是不会触发 repaint 的，这一点非常类似3D绘图功能，最终这些使用 transform 的图层都会由独立的合成器进程进行处理。
合成层创建标准
Chrome中满足以下任意情况就会创建图层：
3D或透视变换（perspective transform）CSS属性
使用加速视频解码的节点
拥有3D（WebGL）上下文或加速的2D上下文的节点
混合插件（如Flash）
对自己的opacity做CSS动画或使用一个动画webkit变换的元素
拥有加速CSS过滤器的元素
元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
元素有一个z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）

css3新特性

1）选择器
2）阴影(text-shadow)
3）形状转换（2D <-> 3D）transform
4）变形
5）动画（过渡动画、帧动画）transition
6）边框
7）多重背景
8）反射
9）文字
10）颜色函数（rgba/hsl/hsla）
11）滤镜（filter）
12）弹性布局(flex)
13）多列布局
14）栅格布局(grid)
15）盒模型
16）Web字体
17）媒体查询

css动画

阴影

text-shadaw:

圆角

border-radius:10px 20px 30px 40px

transform（变换）

2d变换

3d变换

transition(过渡)

transition 属性设置元素当过渡效果，四个简写属性为：
transition-property：ransition-property属性指定CSS属性的nametransition效果（transition效果时将会启动指定的CSS属性的变化）。如（all,width,heigth）
transition-duration：指完成过渡需要的花费的时间 (一般是秒为单位)，
transition-timing-function
transition-delay：指定何时开始切换效果 一般以秒为单位。
inear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

animation 动画

@keyframes hd{}

animation属性

1.animation-name
2.animation-delay
3.animation-duration

animation和transition

1. transition是一个过渡的效果，没有中间状态，需要设置触发事件（如hover等）才能执行；

2. animation是一个动画的效果，有多个中间帧，可以在任意一个中间帧设置状态，不需要设置触发事件就能执行。

文档流

文档标准流：

简单来说标准流就是浏览器按照各种元素标签排版布局中默认的状态，浏览器在渲染代码的时候是从左往右、从上到下开始渲染，元素也是从左往右、从上往下的流式排列。也就是没有被其他排版浮动和定位相关的CSS属性干扰的就叫标准流。

脱离文档流

1、如果元素不再满足浏览器的默认布局排版，也就是说将元素从默认的布局排版中拿走，此时这个元素不再占有它在标准流中的位置。那么这时这个元素就脱离了文档标准流，此时就是脱离文档流了。
2、元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。
3、脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

脱离文档流的方法
1.设置浮动，在css布局当中设置float
2.位置定位：在position当中absolute和fixed还有sticky会变成fixed熟悉

position 属性的值有哪些及其区别

static：文档流原本位置
relative:相对于原本位置在文档流的方位，可以说是相对于static
absolute:相对上个父元素有relative或absolute的位置，会随着页面滑动而改变，脱离文档流
fixed:这个是在页面上保持绝对位置，不会随着页面滑动而滑动，fixed定位元素相对于浏览器窗口进行偏移,即定位基点是浏览器窗口
sticky：设置sticky的元素默认定位方式为relative，当它的位置超过指定阈值时定位方式会自动切换为fixed，例如：top:0

css选择器优先级

1）CSS选择器都有权重值，权重值越大优先级越高。
内联样式表的权重值最高，值为1000。(就是在html的style里面直接引入的样式 例如：

)
2)id选择器的权重值为100。
3)class选择器的权值为10。
4)类型（元素）选择器的优先级为1。
5)通配符选择器的优先级为0。
（2）当权值相等时，后定义的样式表要优于先定义的样式表。
（3）在同一组属性设置中表有**“!important"**规则的优先级最大。

换句话说就是!important》内联样式》id》class》类型（div p span等等）》通配

css引入和link和@import的区别

四种引入方式

1、引入的内容不同

link引入样式文件、图片资源等，而@import只引入样式文件

2、加载的顺序不同

link在页面加载的同时加载，@import在页面加载异步加载

3、兼容性不同

link是XHTML标签，没有兼容性问题，@import在css2.1提出，低版本的浏览器不支持

伪类和伪元素

其中伪类和伪元素的根本区别在于：它们是否创造了新的元素。
伪元素：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
:link “链接”：超链接点击之前
:visited “访问过的”：链接被访问过之后
:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时。
伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类
:first-letter：向文本的第一个字母添加特殊样式。
2）:first-line:　向文本的首行添加特殊样式。
3）:before：在元素之前添加内容。(这个前端必会)　
4）:after：在元素之后添加内容。(这个前端必会)
5）::placeholder：匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效。（只支持双冒号的形式）。
6）::selection：CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。（只支持双冒号的形式）。　
::before和::after，这两个非常常用前端必会，用于在css渲染中向元素的头部或尾部插入内容，它们不受文档约束，也不影响文档本身，只影响最终样式。这些添加的内容不会出现在DOM中，仅仅是在css渲染层中加入。
因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾

多行省略

行内元素和块级元素

行内元素：a,b,br,em,.img,i,input,label,s,select,small,sub,.sup,strong,textarea,span,input,select等等。
块级元素：address,div，p,h1,h2,h3,h4,h5,h6,ol,table,form，ul等等。

BFC

全称是：块级格式化上下文
BFC是一个完全独立的空间，让空间里面的子元素不会影响到外部的布局

触发BFC的属性：
display:inline-block/flex/table-cell
overflow:hidden
position:absolute/fixed
BFC作用：
1.解决float布局脱离文档流，高度塌陷问题
2.解决margin塌陷
3.解决多栏问题

z-index

z-index主要就是浮动元素的层级，z-index越大那么就在越上层，如果z-index=-1那么就在最底部。

响应式布局（媒体查询）

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

媒体查询与弹性盒布局的适用情况：
媒体查询：当页面的结构发生变化的话最好使用媒体查询。 ​
弹性盒：如果只是宽高的变化，尽量使用弹性盒

媒体查询的几个例子:

Display:none和visibility：hidden

Display:none
dom不会被删除
会在渲染树上被删除所以不会占位
block的时候会引起重排,而重排就一定会重绘
visibility: hidden
dom不会被删除
位置还会在渲染树上
它会引起重绘但不会重排

重排和重绘

如何减少重绘和重排
1、减少直接操作dom元素，改用className用于控制
2、尽量减少table使用，table属性变化使用会直接导致布局重排或者重绘
3、当dom元素position属性为fixed或者absolute, 可以通过css形变触发动画效果，此时是不会出发reflow的
4、不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
5、如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document

盒子模型

盒模型由：外边距margin、边框border、内边距padding、内容content四个部分组成

怪异盒模型大小=border+padding+content

标准盒模型大小=content

转怪异盒模型：box-sizing:border-box;

转标准盒模型：box-sizing:content-box;

padding负值问题

padding不能为负值，margin也不能为负值，可以是auto

生成6px字体

如何实现6px字体

.font{
font-size: 12px;
transform: scale(.5);
}

flex：1等于

flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。
默认的属性是flex-grow为0，表示当布局里面有剩余空间的分配空间的比列
flex-shrink:默认属性为为1，表示当子元素的宽超过父元素的时候缩小的比例
flex-basis:默认属性为auto，作用类似于px设置宽度。

flex布局

flex布局的定义就是
flex-direction
flex-direction 属性设置容器主轴的方向

.wrap{
flex-direction:row | row-reverse | column | column=reverse;
}
包含四个属性值：

row: 默认值，表示沿水平方向，由左到右。
row-reverse ：表示沿水平方向，由右到左
column：表示垂直方向，由上到下
column-reverse:表示垂直方向，由下到上

flex-wrap：换行的操作，
flex-flow：将flex-direction和flex-wrap的统称
justify-content：主轴的位置
align-items：垂直于主轴的位置
align-content：只适用多行的flex容器（子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体（属性值为：flex-start、flex-end、center时）进行对齐

单独的子元素
justify-self:
align-self

grid布局

4.容器属性
grid-template-columns
grid-template-columns:100px 100px 100px; // 显示为三列每一列宽度100px 
grid-template-columns:repeat(3,100px);  //同上


grid-template-rows

grid ow-gap

grid-column-gap

grid-gap (3和4的简写)

grid-template-areas

grid-auto-flow

justify-items

align-items

place-items(8和9的简写)

justify-content

align-content

place-content(11和12的简写)

grid-auto-columns

grid-auto-rows

三栏布局和两栏布局

两栏布局

1.利用浮动

利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。
将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。

.container {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  height: 100px;
  background: tomato;
}
.right {
  margin-left: 200px;
  width: auto;
  height: 100px;
  background: gold;
}

2.浮动 + BFC

.left{
	 float: left;
     width: 100px;
     height: 200px;
     background: tomato;
 }
 .right{
     overflow: hidden;//触发BFC
     height: 300px;
     background: gold;
 }

3.利用flex布局

.container {
  display: flex;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  flex: 1;
  background: gold;
}

4.利用绝对定位

利用绝对定位，将父级元素设置为相对定位。
左边元素设置为absolute定位，并且固定宽度设置为200px，left值设置为0。
将右边元素的left值设置为左边固定宽度200px，right值设置为0。

.container {
	position:relative
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
  position:absolute
  left:0
}
.right {
  left:200px
  right:0
  background: gold;
}

三栏布局

一·必须是这样div排布的

<div class="left">left</div>
    <div class="right">right</div>
    <div class="main">main</div>

1.左右浮动布局+中间margin:0 +两边宽度

        .left {
            width: 200px;
            background-color: aqua;
            float: left;
        }
        
        .right {
            width: 200px;
            background-color: burlywood;
            float: right;
        }
        
        .main {
            background-color: chartreuse;
            margin:0 200px;
        }
        

2.左右浮动+overflow

.left {
           width: 200px;
           background-color: aqua;
           float: left;
       }
  .right {
           width: 200px;
           background-color: burlywood;
           float: right;
       }
      .main {
           background-color: chartreuse;
          overflow:hidden
       }

3.flex布局

<body>
   <style>
       .container {
           display: flex;
       }

       .main {
           flex: 1;
           /* flex: 1 1 auto; */
       }
   </style>

   <div class="container">
       <div class="left">Left</div>
       <div class="main">Main</div>
       <div class="right">Right</div>
   </div>
</body>

双飞翼布局

<body>
    <style>
        body>div {
            float: left;
        }

        .left {
            margin-left: -100%;
        }

        .right {
            margin-left: -200px;
        }

        .main {
            width: 100%;
        }

        .inner {
            margin: 0 200px;
        }
    </style>

    <div class="main">
        <div class="inner">
            Main
        </div>
    </div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</body>

圣杯布局

<body>
    <style>
        body {
            margin: 0 200px;
        }

        div {
            float: left;
        }

        .left {
            margin-left: -100%;
            position: relative;
            left: -200px;
        }

        .right {
            margin-right: -200px;
        }

        .main {
            width: 100%;
        }
    </style>

    <!-- 注意顺序 -->
    <div class="main">Main</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</body>

与圣杯布局很像，但多了一层div嵌套

优点：主体内容可以优先加载
缺点：HTML 代码结构稍微复杂点。

清除浮动

    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>  
    </div>

1.为父元素加入overflow:hidden

    <style>
#main{
    width: 500px;
    background-color: grey;
   overflow:hidden;   
}
#child1{
    width: 50px;
    height: 50px;
    background-color: blueviolet;
    float: left;
}
#child2{
    width: 50px;
    height: 50px;
    background-color: pink;
    float: left;
}

2.给父元素加入一个伪类标签并且有clear:both

 <style>
#main{
    width: 500px;
    background-color: grey;    
}
#main::after{
    display: block;
    content: "";
    clear: both;
}
#child1{
    width: 50px;
    height: 50px;
    background-color: blueviolet;
    float: left;
}
#child2{
    width: 50px;
    height: 50px;
    background-color: pink;
    float: left;
}

3.给父元素加入div 并且有clear:both

 <style>
#main{
    width: 500px;
    background-color: grey;    
}
.clearfix{
    clear: both;
}
#child1{
    width: 50px;
    height: 50px;
    background-color: blueviolet;
    float: left;
}
#child2{
    width: 50px;
    height: 50px;
    background-color: pink;
    float: left;
}

水平居中

1.行内元素

那么使用text-align：center就可以解决

2.块级元素

知道自己的宽高

1.使用margin：0 auto

2.使用定位加+margin-left：50% + left（-宽度/2）

不知道宽高

3.使用定位加+ margin-left: 50%;position:absolute ;transform: translateX(-50%);

4.flex布局:display:flex,justify-content:center

垂直居中

1.行内元素

使用line-height和父类的height相同就行

2.块级元素

知道宽高

1.父元素relative+定位absolute+top+margin-top:(-父元素的一半)
2.父元素relative+定位absolute+top+transform：translateY（-50%）

不知道宽高

3.flex布局：display:flex+align-items：center
4.父盒子CSS样式设置伪类元素。基本思路：使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央

水平垂直居中

1.父元素：position：relative position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
2.父元素：position:absolute;top: 0;left: 0;right:0;left:0;margin:auto;
3.父元素：display:flex;justify-content:center;align-items:center;
4.display:grid;justify-content:center;align-self:center;
5. 父元素 display:table-cell text-align:center vertical-align:middle

 #id1{
            height: 500px;
            width: 1000px;
            background-color: blueviolet;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
                }
        #id2{
            height: 200px;
            width: 200px;
            background-color: black;
            display: inline-block;
        }

精灵图

精灵图(sprite)
从后端请求一个整张大图，这个大图里面有
使用backgroud-position进行取图