1.单位
px:单位名称为像素
em:是根据父元素的字体大小
rem:是根据根元素的字体大小
vw:1vw = 视口宽度的1%
vh:1vh = 视口高度的1%
vmax：vmax选取vw和vh中最大的那个
vmin：vmin选取vw和vh中最小的那个
2.水平垂直居中方法
flex布局
display:flex;
justify-content:center;
align-items:center;
使用绝对定位：(不确定元素宽高)
position:absolute;
left:50%;
top:50%;
transfrom:translate(-50%,50%)
使用绝对定位:
width:600px;
height:600px;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
position+transform:
父容器:
position: relative;
子容器:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
3.清除浮动
1>
给父元素添加声明overflow:hidden;
2>
给父元素加height
3>
在浮动元素下方添加空div,并给该元素添加 div{clear:both;}
4>
万能清除浮动法
p:after{content:“.”;clear:both;display:block;height:0;overflow:hidden; visibility:hidden;}
4.visibility:hidden;和display:none;的区别
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域
display:none属性会使这个对象彻底消失不显示，也不再占用位置
opacity-0也可以隐藏
5.盒模型
怪异盒模型实现：box-sizing:border-box
标准盒模型：box-sizing:content-box
标准盒模型：content+border+padding
怪异盒模型：content
一个算盒子的宽度的时候加上border和padding另一个不加
6.html+css经典布局
左列定宽 右列自适应
.left{width:100px;float:left;}
.right{overflow:hidden}
左列定宽 右列自适应（calc）
html:
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
css:
左列定宽 右列自适应（calc）
html:
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
css:
两列定宽 中栏自适应
.left{width:100px;float:left;}
.right{width:100px;float:right;}
.center{width:100%;margin:0 100px;}
7.css一行文本超出
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
8.多行文本超出显示...
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
8.修改滚动条样式
隐藏div元素的滚动条
div::-webkit-scrollbar {
display: none;
}
div::-webkit-scrollbar 滚动条整体部分
div::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
div::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
div::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
div::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
div::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
div::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
注意此方案有兼容性问题，一般需要隐藏滚动条时我都是用一个色块通过定位盖上去，或者将子级元素调大，父级元素使用overflow-hidden截掉滚动条部分。暴力且直接。
9.calc
这是一个css属性，我一般称之为css表达式。可以计算css的值。最有趣的是他可以计算不同单位的差值。很好用的一个功能，缺点是不容易阅读。接盘侠没办法一眼看出20px是啥。
div{
/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
width: calc(25% - 20px);
}
10.less和sass和css区别的
SASS（英文全称：Syntactically Awesome Stylesheets）Sass 诞生于 2007 年，使用Ruby 编写，是一种对css的一种扩展提升，增加了规则、变量、混入、选择器、继承等等特性。可以理解为用js的方式去书写，然后编译成css。比如说，sass中可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。
LESS（2009年开源的一个项目，受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手。LESS保留了css的任何功能，同时提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，可以在任何使用随时切换到css的语法进行书写。
用法：
SCSS 语法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
编译出来的 CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
less语法:
@color: #999;
@bgColor: skyblue;//不要添加引号
@width: 50%;
wrap {
color: @color;
width: @width;
}
/* 生成后的 CSS */
wrap {
color: #999;
width: 50%;
}
11.Grid
display: grid;
grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。
列：
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
可以使用repeat()函数，简化重复的值
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充
列：
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
详细内容：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
12. 已知父级盒子的宽高，子级img宽高未知，想让img铺满父级盒子且图片不能变形
需要用到css的object-fit属性
div {
width: 200px;
height: 200px;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
}
13.高度塌陷
什么是高度塌陷？
父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷问题。
14.如何来解决高度塌陷？
方案一：给父元素一个固定的高度
缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，不推荐使用。
方案二：给父元素添加属性 overflow: hidden;
优点：浏览器支持好，简单；
缺点：当子元素有定位属性时，设置 overflow: hidden; 容器以外的部分会被裁剪掉。
方案三：在子元素的末尾添加一个空的 div ，并设置下方样式
div{
clear: both;
height: 0;
overflow: hidden;
}
优点：所有浏览器都支持，并且容器溢出不会被裁剪；
缺点：在页面中添加无意义的div，容易造成代码冗余。
方案四：万能清除浮动法
在父元素中内容的最后添加一个伪元素来实现第三种方案的功能，具体设置样式如下：
父元素:after{
content: "";
height: 0;
clear: both;
overflow: hidden;
display: block;
visibility: hidden;
}
优点：不会造成代码冗余，剩余代码性能优化，推荐使用。
15. pointer-events
一般来做水印
pointer-events:none:它的被设置为 none 的时候，能让元素实体虚化，虽然存在这个元素，但是该元素不会触发鼠标事件。
16.移动端适配方案
媒体查询 它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置
@media screen and (max-width: 300px) {
body {
width:80%;
}
}
媒体查询缺点:
由于移动端和PC端维护同一套代码, 所以代码量比较大， 维护不方便
为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源
为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式
使用场景:
对于比较简单界面不复杂的网页, 诸如: 企业官网、宣传单页等
百分百布局
百分百缺点：计算百分比值比较困难。
vw/vh
vw/vh 是 CSS3 新增单位，相对于视口的宽度 / 高度，视口被均分为100单位，每单位等于1vw/vh
vw：视口宽度的百分比（100vw等于视口宽度的100%）
vh：视口高度的百分比（100vh等于视口高度的100%）
通过 vw/vh 设置元素的大小可以实现对不同屏幕宽度的响应式效果
