1.滚动条css样式：
html{
box-sizing:border-box;
scrollbar-width:thin;
}
*,
*:before,
*:after{
box-sizing: inherit;
scrollbar-width:inherit;
}
//伪元素无法继承
*::-webkit-scrollbar {
width:10px;
height:10px;
}
*::-webkit-scrollbar-thumb{
background:hsl(214,12%,75%);
border-radius:4px;
}
关闭滚动条：
div{
scrollbar-width:none;
&::-webkit-scrollbar{
display:none;
}
}
2.盒子模型理解
一个盒子由四部分组成： content, padding, border, margin。
盒子模型可以分成： 标准盒子模型和怪异盒子模型。
标准盒子模型：
盒子总宽度 = width+padding+border+margin
怪异盒子模型：
盒子总宽度 = width+margin （width包含了padding+border）
box-sizing: content-box(默认-标准盒子模型) | border-box(怪异盒子模型)
3.css选择器
id选择器 - #content
类选择器 - .container
标签选择器 - div
后代选择器 - #content div
子选择器 - .container > p
相邻同胞选择器 - .b1+.b2
伪类选择器 【:link , :visited, :active, :hover, :focus, :first-child...】
伪元素选择器 【:before, :after】
属性选择器 ： [attr] / [attr=value] / [attr~=value]
4.px,em,rem,vh,vw区别？
px: 绝对单位，页面按精确像素展示。
em: 相对单位，基于父节点字体大小。
rem: 相对单位，相对于根节点html的字体大小来计算。
vh/vw: 主要用于页面视口大小布局，基于设备屏幕。
5.css实现隐藏元素方法有哪些？
display: none;
visibility: hidden;
opacity: 0;
设置height,width为0；
position：absolute将元素移出可视区域。
6.实现元素水平垂直居中方法？
1.定位+margin:auto
2.定位+margin:负值宽高一半
3.定位+transform【translate(-50%, -50%)】
4.flex布局【justify-content, align-items为center即可】
5.grid布局
7.css3新增了哪些新特性？
1.选择器
2.border-radius, box-shadow, border-image,
background-clip, background-origin, backgrouns-size,
word-wrap,
text-overflow,
text-shadow,
text-decoration,
rgba/hsla,
3.transition 过渡
语法：
transition： css属性 时间， 效果曲线(ease), 延迟时间；
4.transform 转换
transform: translate() 位移
transform: scale() 缩放
transform: rotate() 旋转
transform: skew() 倾斜
5.animation 动画
6.渐变
linear-gradient: 线性渐变
radial-gradient: 径向渐变
8.动画实现方式有哪些？
动画定义： 元素从一种样式逐渐过渡为另一种样式的过程。
1. transition 实现渐变动画
.box{
width:100px;
height: 100px;
background-color: red;
transition: all 2s ease 500ms;
}
.box:hover{
width:200px;
height: 200px;
background: blue;
}
2. transform 转变动画
.box1:hover{
transform: scale(1.2) rotate(45deg) skew(10deg);
}
3. animation实现自定义动画
@keyframes rotate {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}
.box:hover {
animation: rotate 1s;
}
9.响应式布局有哪些方式？
媒体查询:
@media screen (min-width: xxpx) and (max-width:xxpx) {
}
百分比: %
vw/vh: 视图窗口宽高
rem： 基于根元素html的字体大小。
10.css提高性能的方法
内联首屏关键CSS，
异步加载CSS,
资源压缩，
合理使用选择器，
不用使用@import引入文件
其他方法：
减少重排操作以及重绘；
使用精灵图方式渲染图片，减少http请求；
把小的icon图片转成base64编码；
11.单行/多行文本溢出效果
//单行
.content {
width:100px;
height:50px;
line-height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
//多行分两种情况，一种是基于高度截断，另一种是基于行数截断；
a.基于高度截断
伪元素+定位
.content {
height: 40px;
line-height: 20px; // 结合元素高度，高度固定的情况下，设定行高，控制显示行数。
position: relative;
overflow: hidden;
}
.content::after{
content: '...';
position: absolute;
bottom:0;
right:0;
padding: 0 20px 0 10px;
}
b.基于行数截断
.content {
width:200px;
display: -webkit-box;
-webkit-line-clamp: 2; //行数
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
12.css预编语言
预处理语言： 新增了变量， 混合mixin, 函数等功能，让css更易维护，方便。
预编处理器有： sass, less, stylus。
一般使用特性有：
变量:
less:
@redColor: red;
.content {
color: @redColor;
}
sass声明变量方式是用 $;
$redColor: red;
stylus声明变量需要用 = 进行赋值；
redColor = red;
作用域:
sass不存在全局变量；
less/stylus 首先会查找局部定义的变量，如果没有找到，会一级一级往下查找，直到根为止。
代码混合：
嵌套：
less:
.a {
&.b {
color: red;
}
}
代码模块化：就是将css代码分成一个个模块。
使用方法： @import '../index.css';
标签：box,10,记录,transform,content,width,选择器,css From： https://www.cnblogs.com/sunnyeve/p/15668783.html