css样式表的优先级：内嵌样式表>内联样式表>外联样式表 内嵌样式表：<a style=""> </a> 内联样式表 <style></style> 外联样式表 通过Link标签或者import引入的css文件
css选择器的优先级：id选择器>class选择器>标签选择器
css盒子模型：分为两种，第一中代表的是标准盒模型，第二种便是IE盒模型。
标准盒模型宽度代表的是content也就是内容的宽度不包括padding和border
IE盒模型则包括的是content内容部分和padding和左右border
html5引入了一个属性box-sizing：border-box，padding-box,content-box，这个其实很好理解content-box代表的是标准盒模型，border-box代表的是IE盒模型，可以通过包含什么，width就从什么开始进行计算来记忆。
css多行元素的文本省略号：
display：-webkit-box; 将盒子转换为弹性盒子
-webkit-box-orient：vertical; 文本显示方式，默认水平
-webkit-line-clamp：2; 设置显示多少行
overflow：hidden; 超出部分省略
text-overflow：ellipsis; 文本以省略号形式显示
单行文本省略号：
text-overflow：ellipsis; 文本省略号形式显示
overflow：hidden; 超出部分隐藏
white-space：nowrap; 文本不换行
外边距重叠：
多个相邻的块级元素会出现垂直方向的margin重叠现象，重叠的结果为：两个相邻的外边距都是整数的时候，折叠的结果会是最大的值，如果是一个整数一个负数的话折叠的结果会是绝对值后两数相加的和，两个都是负数的话会是绝对值的最大值；
解决方法：用padding代替margin, 子元素的话可以给子元素设置position:absolut，float等脱离文档流，也可以给外层元素设置overflow：hidden
position属性：
固定定位fixed:位置是相对于浏览器窗口的，脱离文档流
相对定位relative:相对于一个元素进行定位，不脱离文档流
绝对定位position:会取决于最近的父元素进行定位，脱离文档流
粘性定位sticky:却决于最近的块级父元素进行定位，不脱离文档流
css中元素的隐藏：
1.display:none 直接不生成元素，会引起重排改变页面布局
2.visibility:hidden 元素被隐藏但是会占据空间，会引起重绘，不会触发绑定了的事件
3.opacity：0 元素透明不变成100%被隐藏，依然占据空间，不会触发重排和重绘，绑定的事件依然有效
image图片补白，等比例缩放图片，小于设定大小会进行图片补白
object-fit: scale-down;