高频CSS总结 - 技术栈

高频CSS

盒模型

IE怪异 width=width+padding+border box-sizing: border-box;

W3C标准 box-sizing: content-box;

BFC

在正常情况下，块级元素的外边距会折叠。当一个元素形成了BFC时，它的外边距不会和其内部的子元素的外边距折叠。

触发条件:

根元素，即HTML元素
绝对定位元素 position: absolute/fixed
行内块元素 display的值为inline-block、table、flex、inline-flex、grid、inline-grid
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden

BFC对布局的影响

BFC 的区域不会与 float 的元素区域重叠
计算 BFC 的高度时，浮动子元素也参与计算
文字层不会被浮动层覆盖，环绕于周围

应用:

阻止margin重叠
自适应两栏布局
可以避免高度塌陷
可以包含浮动元素 ------ 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)

选择器权重计算方式

!important > 内联样式 = 外联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器 > 通配选择器 = 后代选择器 = 兄弟选择器

清除浮动

在浮动元素后面添加 clear:both 的空 div 元素
给父元素添加 overflow:hidden 或者 auto 样式，触发BFC
使用伪元素，也是在元素末尾添加一个点并带有 clear: both 属性的元素实现的。xxx:after{content: ".";clear: both;}(推荐)

垂直居中

利用绝对定位+transform ，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 translate 来调整子元素的中心点到父元素的中心。该方法可以不定宽高
css 复制代码
```
.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
```
利用绝对定位+margin:auto ，子元素所有方向都为 0 ，将 margin 设置为 auto ，由于宽高固定，对应方向实现平分，该方法必须盒子有宽高
css 复制代码
```
.father {
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  height: 100px;
  width: 100px;
}
```
利用绝对定位+margin:负值 ，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 margin-left 和 margin-top 以子元素自己的一半宽高 进行负值赋值。该方法必须定宽高

css 复制代码

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
}

利用 flex ，最经典最方便，可以不定宽高

html 复制代码

 .father {
        display: flex;
        justify-content: center;
        align-items: center;
    }

grid网格布局 ，可以不定宽高

html 复制代码

.father {
  display: grid;
  align-items:center;
  justify-content: center;
}

table布局

html 复制代码

 .father {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .son {
        display: inline-block;
    }

内联元素居中布局

水平居中
- 行内元素可设置：text-align: center
- flex布局设置父元素：display: flex; justify-content: center
垂直居中
- 单行文本父元素确认高度：height === line-height
- 多行文本父元素确认高度：display: table-cell; vertical-align: middle

块级元素居中布局

水平居中
- 定宽: margin: 0 auto
- 绝对定位+left:50%+margin:负自身一半
垂直居中
- position: absolute设置left、top、margin-left、margin-top(定高)
- display: table-cell
- transform: translate(x, y)
- flex
- grid，兼容性相对比较差

CSS3新特性

选择器

新样式

三个边框属性，分别是：

border-radius：创建圆角边框
box-shadow：为元素添加阴影
border-image：使用图片来绘制边框

box-shadow 设置元素阴影（水平阴影和垂直阴影是必须设置的）

水平阴影
垂直阴影
模糊距离(虚实)
阴影尺寸(影子大小)
阴影颜色
内/外阴影

背景

background-clip
- background-clip: border-box; 背景从border开始显示
- background-clip: padding-box; 背景从padding开始显示
- background-clip: content-box; 背景显content区域开始显示
- background-clip: no-clip; 默认属性，等同于border-box
background-origin：决定图片以哪个边进行左上角对齐
- background-origin: border-box; 从border开始计算background-position
- background-origin: padding-box; 从padding开始计算background-position
- background-origin: content-box; 从content开始计算background-position
- 默认情况是padding-box，即以padding的左上角为原点
background-size
background-break
- background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）
- background-break: bounding-box; 把盒之间的距离计算在内；
- background-break: each-box; 为每个盒子单独重绘背景

文字

word-wrap: normal|break-word
- normal：使用浏览器默认的换行
- break-all：允许在单词内换行
text-overflow
- clip：修剪文本
- ellipsis：显示省略符号
text-shadow
text-decoration
- text-fill-color: 设置文字内部填充颜色
- text-stroke-color: 设置文字边界填充颜色
- text-stroke-width: 设置文字边界宽度

颜色

css3新增了新的颜色表示方式rgba与hsla
- rgba分为两部分，rgb为颜色值，a为透明度
- hala分为四部分，h为色相，s为饱和度，l为亮度，a为透明度

transition 过渡

display:none<->display:block不能用过渡

text 复制代码

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

transition-property:填写需要变化的css属性
transition-duration:完成过渡效果需要的时间单位(s或者ms)默认是 0

transition-timing-function:完成效果的速度曲线

`linear`	匀速（等于 `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` 之间的数值

transition-delay: （规定过渡效果何时开始。默认是0）

transform 转换

一般配合transition过度使用。transform不支持inline元素，使用前把它变成block

transform属性允许你旋转，缩放，倾斜或平移给定元素
transform-origin：转换元素的位置（围绕那个点进行转换），默认值为(x,y,z):(50%,50%,0)

使用方式：

transform: translate(120px, 50%)：位移
transform: scale(2, 0.5)：缩放
transform: rotate(0.5turn)：旋转
transform: skew(30deg, 20deg)：倾斜

animation 动画

animation-name：动画名称
animation-duration：动画持续时间
animation-timing-function：动画时间函数
animation-delay：动画延迟时间
animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
animation-direction：动画执行方向。normal、reverse、alternate、alternate-reverse
animation-play-state：动画播放状态。running、pauser
animation-fill-mode：动画填充模式。forwards、backwards、both

CSS 动画只需要定义一些关键的帧，而其余的帧，浏览器会根据计时函数插值计算出来，

@keyframes定义关键帧，可以是from->to（等同于0%和100%），也可以是从0%->100%之间任意个的分层设置

css 复制代码

// 如果想要让元素旋转一圈，只需要定义开始和结束两帧即可：
@keyframes rotate{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

//也可以使用百分比刻画生命周期
@keyframes rotate{
  0%{
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(180deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

定义好了关键帧后

css 复制代码

animation: rotate 2s;

渐变

linear-gradient：线性渐变 background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
radial-gradient：径向渐变 radial-gradient(0deg, red, green)

其他

Flex弹性布局
Grid栅格布局
媒体查询 @media screen and (max-width: 960px) {}还有打印print

隐藏页面元素

opacity:0：本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互
display:none: 这个是彻底隐藏了元素，元素从文档流中消失，既不占据空间也不交互，也不影响布局
visibility:hidden: 与上一个方法类似的效果，占据空间，但是不可以交互了
overflow:hidden: 这个只隐藏元素溢出的部分，但是占据空间且不可交互
z-index:-9999: 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了
transform:scale(0,0): 平面变换，将元素缩放为0，但是依然占据空间，但不可交互

em/px/rem/vh/vw区别

相对长度单位	`em`、`ex`、`ch`、`rem`、`vw`、`vh`、`vmin`、`vmax`、`%`
绝对长度单位	`cm`、`mm`、`in`、`px`、`pt`、`pc`

em相对于浏览器的默认字体尺寸（1em = 16px）：为了简化 font-size 的换算，可以在css中的 body 选择器中声明font-size= 62.5%，这就使 em 值变为 16px*62.5% = 10px

em 的值并不是固定的
em 会继承父级元素的字体大小
em 是相对长度单位。
任意浏览器的默认字体高都是 16px

rem (动态值，根据屏幕展示大小会缩放)

根据屏幕的分辨率动态设置html的文字大小，达到等比缩放的功能
保证html最终算出来的字体大小，不能小于12px
在不同的移动端显示不同的元素比例效果
如果html的font-size:20px的时候，那么此时的1rem = 20px
rem做盒子的宽度，viewport缩放

js 复制代码

// rem适配用这段代码动态计算html的font-size大小
(function(win) {
    var docEl = win.document.documentElement;
    var timer = '';

    function changeRem() {
      var width = docEl.getBoundingClientRect().width;
      if (width > 750) { // 750是设计稿大小
          width = 750;
      }
      var fontS = width / 10; // 把设备宽度十等分 1rem<=75px
      docEl.style.fontSize = fontS + "px";
    }
    win.addEventListener("resize", function() {
      clearTimeout(timer);
      timer = setTimeout(changeRem, 30);
    }, false);
    win.addEventListener("pageshow", function(e) {
      if (e.persisted) { //清除缓存
        clearTimeout(timer);
        timer = setTimeout(changeRem, 30);
      }
    }, false);
    changeRem();
})(window)

flex布局

flex-grow: 1 ：该属性默认为 0 ，如果存在剩余空间，元素也不放大。设置为 1 代表会放大。
flex-shrink: 1 ：该属性默认为 `1 ，如果空间不足，元素缩小。
flex-basis: 0% ：该属性定义在分配多余空间之前，元素占据的主轴空间。默认值为 auto ，即项目本身大小。设置为 0% 之后，因为有 flex-grow 和 flex-shrink 的设置会自动放大或缩小。在做两栏布局时，如果右边的自适应元素 flex-basis 设为auto 的话，其本身大小将会是 0

CSS提高性能

内联首屏关键CSS
- 使渲染时间提前
- 较大的css代码并不合适内联（初始拥塞窗口、没有缓存）
异步加载CSS
- 使用javascript将link标签插到head标签最后
- 设置link标签media属性为noexist，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将media的值设为screen或all，从而让浏览器开始解析CSS
- 通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel设回stylesheet
  复制代码
```
  <link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'"
```
**资源压缩 **webpack、gulp/grunt、rollup
合理使用选择器
- css匹配的规则是从右往左开始匹配
- 如果嵌套的层级更多，页面中的元素更多，那么匹配所要花费的时间代价自然更高。最好不要三层以上。
- 使用id选择器就没必要再进行嵌套
- 通配符和属性选择器效率最低，避免使用
减少使用昂贵的属性

在页面发生重绘的时候，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能

不要使用@import
- @import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时
- 而且多个@import可能会导致下载顺序紊乱
其它
- 减少重排操作，以及减少不必要的重绘
- css Sprite，合成所有icon图片，用宽高加上backgroud-position的背景图方式显现出我们要的icon图，减少了http请求
- 把小的icon图片转成base64编码
- CSS3动画或者过渡尽量使用transform和opacity来实现动画，不要使用left和top属性

画一个三角形

css 复制代码

div {
  width:0px;
  height:0px;
  border-top:10px solid red; 
  border-right:10px solid transparent; 
  border-bottom:10px solid transparent; 
  border-left:10px solid transparent;
}

两栏布局：左边定宽，右边自适应方案

利用float + margin实现

html 复制代码

<div class="box">
  <div class="box-left"></div>
  <div class="box-right"></div>
</div>

.box {
 height: 200px;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  float: left;
  background-color: blue;
}

.box-right {
  margin-left: 200px;
  background-color: red;
}

利用calc计算宽度

css 复制代码

.box {
 height: 200px;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  float: left;
  background-color: blue;
}

.box-right {
  width: calc(100% - 200px);
  float: right;
  background-color: red;
}

利用float + overflow实现

css 复制代码

.box {
 height: 200px;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  float: left;
  background-color: blue;
}

.box-right {
  overflow: hidden;
  background-color: red;
}

利用flex实现

css 复制代码

.box {
  height: 200px;
  display: flex;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  background-color: blue;
}

.box-right {
  flex: 1; // 设置flex-grow属性为1，默认为0
  background-color: red;
}