10月css 学习记录

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';