`CSS` 进阶篇

# `css`预处理函数

1. Less

Less 诞生于 2009 年，受Sass的影响创建的一个开源项目。它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充（引用于官网）。

1. 使用 Less 有两种方式

在页面中引入 Less.js

可在官网下载

或使用CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
复制代码

需要注意的是，link 标签一定要在 Less.js 之前引入，并且 link 标签的 rel 属性要设置为stylesheet/less

 <link rel="stylesheet/less" href="style.less">
 <script src="less.min.js"></script>
复制代码

在命令行使用npm安装

npm install -g less
复制代码

具体使用命令

$ lessc styles.less > styles.css

2. 功能特性

变量

我们常常在 CSS中看到同一个值重复多次，这样难易于代码维护。理想状态，应是下面这样：

const bgColor="skyblue";
$(".post-content").css("background-color",bgColor);
$("#wrap").css("background-color",bgColor);
$(".arctive").css("background-color",bgColor);
复制代码

只要我们修改 bgColor这一个变量，整个页面的背景颜色都会随之改变。

而 Less 中的变量十分强大，可化万物，值得一提的是，其变量是常量，所以只能定义一次，不能重复使用。

1. 值变量

/* Less */
@color: #999;
@bgColor: skyblue;//不要添加引号
@width: 50%;
#wrap {
  color: @color;
  background: @bgColor;
  width: @width;
}

/* 生成后的 CSS */
#wrap {
  color: #999;
  background: skyblue;
  width: 50%;
}

以 @ 开头定义变量，并且使用时直接键入 @名称。

在平时工作中，我们就可以把常用的变量封装到一个文件中，这样利于代码组织维护。

@lightPrimaryColor: #c5cae9;
@textPrimaryColor: #fff;
@accentColor: rgb(99, 137, 185);
@primaryTextColor: #646464;
@secondaryTextColor: #000;
@dividerColor: #b6b6b6;
@borderColor: #dadada;

2. 选择器变量

让选择器变成动态

/* Less */
@mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{ //变量名 必须使用大括号包裹
  color: #999;
  width: 50%;
}
.@{Wrap}{
  color:#ccc;
}
#@{Wrap}{
  color:#666;
}

/* 生成的 CSS */
#wrap{
  color: #999;
  width: 50%;
}
.wrap{
  color:#ccc;
}
#wrap{
  color:#666;
}
复制代码

3. 属性变量

可减少代码书写量

/* Less */
@borderStyle: border-style;
@Soild:solid;
#wrap{
  @{borderStyle}: @Soild;//变量名 必须使用大括号包裹
}

/* 生成的 CSS */
#wrap{
  border-style:solid;
}

复制代码

4. url 变量

项目结构改变时，修改其变量即可。

/* Less */
@images: "../img";//需要加引号
body {
  background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}

/* 生成的 CSS */
body {
  background: url("../img/dog.png");
}

5.声明变量

有点类似于下面的混合方法

结构: @name: { 属性: 值 ;};
使用：@name();

/* Less */
@background: {background:red;};
#main{
    @background();
}
@Rules:{
    width: 200px;
    height: 200px;
    border: solid 1px red;
};
#con{
  @Rules();
}

/* 生成的 CSS */
#main{
  background:red;
}
#con{
  width: 200px;
  height: 200px;
  border: solid 1px red;
}

6. 变量运算

不得不提的是，Less 的变量运算完全超出我的期望，十分强大。

加减法时以第一个数据的单位为基准
乘除法时注意单位一定要统一

/* Less */
@width:300px;
@color:#222;
#wrap{
  width:@width-20;
  height:@width-20*5;
  margin:(@width-20)*5;
  color:@color*2;
  background-color:@color + #111;
}

/* 生成的 CSS */
#wrap{
  width:280px;
  height:200px;
  margin:1400px;
  color:#444;
  background-color:#333;
}

7. 变量作用域

一句话理解就是：就近原则，不要跟我提闭包。

借助官网的Demo

/* Less */
@var: @a;
@a: 100%;
#wrap {
  width: @var;
  @a: 9%;
}

/* 生成的 CSS */
#wrap {
  width: 9%;
}
复制代码

8. 用变量去定义变量

/* Less */
@fnord:  "I am fnord.";
@var:    "fnord";
#wrap::after{
  content: @@var; //将@var替换为其值 content:@fnord;
}
/* 生成的 CSS */
#wrap::after{
  content: "I am fnord.";
}

2. 嵌套

1. &的妙用

& ：代表的上一层选择器的名字，此例便是header。

/* Less */
#header{
  &:after{
    content:"Less is more!";
  }
  .title{
    font-weight:bold;
  }
  &_content{//理解方式：直接把 & 替换成 #header
    margin:20px;
  }
}
/* 生成的 CSS */
#header::after{
  content:"Less is more!";
}
#header .title{ //嵌套了
  font-weight:bold;
}
#header_content{//没有嵌套！
    margin:20px;
}

2.媒体查询

在以往的工作中，我们使用媒体查询，都要把一个元素分开写

#wrap{
  width:500px;
}
@media screen and (max-width:768px){
  #wrap{
    width:100px;
  }
}
复制代码

Less 提供了一个十分便捷的方式

/* Less */
#main{
    //something...

    @media screen{
        @media (max-width:768px){
          width:100px;
        }
    }
    @media tv {
      width:2000px;
    }
}
/* 生成的 CSS */
@media screen and (maxwidth:768px){
  #main{
      width:100px; 
  }
}
@media tv{
  #main{
    width:2000px;
  }
}
复制代码

唯一的缺点就是每一个元素都会编译出自己 @media 声明，并不会合并。

3.实战技巧

可以借助 Less 在元素中，去定义自己的私有样式。

/* Less */
#main{
  // something..
  &.show{
    display:block;
  }
}
.show{
  display:none;
}

const main = document.getElementById("main");
main.classList.add("show");

结果：

#main.show{
  display:block;
}
.show{
  display:none; //会被覆盖。
}

3. 混合方法

1. 无参数方法

方法犹如声明的集合，使用时直接键入名称即可。

/* Less */
.card { // 等价于 .card()
    background: #f6f6f6;
    -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
    box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
}
#wrap{
  .card;//等价于.card();
}
/* 生成的 CSS */
#wrap{
  background: #f6f6f6;
  -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
  box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
}
复制代码

其中 .card 与 .card() 是等价的。个人建议，为了避免代码混淆，应写成 :

.card(){
  //something...
}
#wrap{
  .card();
}
复制代码

要点：

. 与 # 皆可作为方法前缀。
方法后写不写 () 看个人习惯。

2. 默认参数方法

Less 可以使用默认参数，如果没有传参数，那么将使用默认参数。
@arguments 犹如 JS 中的 arguments 指代的是全部参数。
传的参数中必须带着单位。

/* Less */
.border(@a:10px,@b:50px,@c:30px,@color:#000){
    border:solid 1px @color;
    box-shadow: @arguments;//指代的是 全部参数
}
#main{
    .border(0px,5px,30px,red);//必须带着单位
}
#wrap{
    .border(0px);
}
#content{
  .border;//等价于 .border()
}

/* 生成的 CSS */
#main{
    border:solid 1px red;
    box-shadow:0px,5px,30px,red;
}
#wrap{
    border:solid 1px #000;
    box-shadow: 0px 50px 30px #000;
}
#content{
    border:solid 1px #000;
    box-shadow: 10px 50px 30px #000;
}

复制代码

3. 方法的匹配模式

与面向对象中的多态很相似

/* Less */
.triangle(top,@width:20px,@color:#000){
    border-color:transparent  transparent @color transparent ;
}
.triangle(right,@width:20px,@color:#000){
    border-color:transparent @color transparent  transparent ;
}

.triangle(bottom,@width:20px,@color:#000){
    border-color:@color transparent  transparent  transparent ;
}
.triangle(left,@width:20px,@color:#000){
    border-color:transparent  transparent  transparent @color;
}
.triangle(@_,@width:20px,@color:#000){
    border-style: solid;
    border-width: @width;
}
#main{
    .triangle(left, 50px, #999)
}
/* 生成的 CSS */
#main{
  border-color:transparent  transparent  transparent #999;
  border-style: solid;
  border-width: 50px;
}
复制代码

要点

第一个参数 left 要会找到方法中匹配程度最高的，如果匹配程度相同，将全部选择，并存在着样式覆盖替换。
如果匹配的参数是变量，则将会匹配，如 @_ 。

4. 方法的命名空间

让方法更加规范

/* Less */
#card(){
    background: #723232;
    .d(@w:300px){
        width: @w;
        
        #a(@h:300px){
            height: @h;//可以使用上一层传进来的方法
        }
    }
}
#wrap{
    #card > .d > #a(100px); // 父元素不能加 括号
}
#main{
    #card .d();
}
#con{
    //不得单独使用命名空间的方法
    //.d() 如果前面没有引入命名空间 #card ，将会报错
    
    #card; // 等价于 #card();
    .d(20px); //必须先引入 #card
}
/* 生成的 CSS */
#wrap{
  height:100px;
}
#main{
  width:300px;
}
#con{
  width:20px;
}

复制代码

要点

在 CSS 中> 选择器，选择的是儿子元素，就是必须与父元素有直接血源的元素。
在引入命令空间时，如使用 > 选择器，父元素不能加括号。
不得单独使用命名空间的方法必须先引入命名空间，才能使用其中方法。
子方法可以使用上一层传进来的方法

5. 方法的条件筛选

Less 没有 if else，可是它有 when

/* Less */
#card{
    
    // and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
    .border(@width,@color,@style) when (@width>100px) and(@color=#999){
        border:@style @color @width;
    }

    // not 运算符，相当于 非运算 !，条件为 不符合才会执行
    .background(@color) when not (@color>=#222){
        background:@color;
    }

    // , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
    .font(@size:20px) when (@size>50px) , (@size<100px){
        font-size: @size;
    }
}
#main{
    #card>.border(200px,#999,solid);
    #card .background(#111);
    #card > .font(40px);
}
/* 生成后的 CSS */
#main{
  border:solid #999 200px;
  background:#111;
  font-size:40px;
}
复制代码

要点

比较运算有： > >= = =< <。
= 代表的是等于
除去关键字 true 以外的值都被视为 false：

6. 数量不定的参数

如果你希望你的方法接受数量不定的参数，你可以使用... ，犹如 ES6 的扩展运算符。

/* Less */
.boxShadow(...){
    box-shadow: @arguments;
}
.textShadow(@a,...){
    text-shadow: @arguments;
}
#main{
    .boxShadow(1px,4px,30px,red);
    .textShadow(1px,4px,30px,red);
}

/* 生成后的 CSS */
#main{
  box-shadow: 1px 4px 30px red;
  text-shadow: 1px 4px 30px red;
}
复制代码

7. 方法使用important！

使用方法非常简单，在方法名后加上关键字即可。

/* Less */
.border{
    border: solid 1px red;
    margin: 50px;
}
#main{
    .border() !important;
}
/* 生成后的 CSS */
#main {
    border: solid 1px red !important;
    margin: 50px !important;
}
复制代码

8. 循环方法

Less 并没有提供 for 循环功能，但这也难不倒聪明的程序员，使用递归去实现。下面是官网中的一个 Demo，模拟了生成栅格系统。

/* Less */
.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}
/* 生成后的 CSS */
.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}
复制代码

9. 属性拼接方法

+_ 代表的是空格；+ 代表的是逗号。

逗号

/* Less */
.boxShadow() {
    box-shadow+: inset 0 0 10px #555;
}
.main {
  .boxShadow();
  box-shadow+: 0 0 20px black;
}
/* 生成后的 CSS */
.main {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}
复制代码

空格

/* Less */
.Animation() {
  transform+_: scale(2);
}
.main {
  .Animation();
  transform+_: rotate(15deg);
}

/* 生成的 CSS */
.main {
  transform: scale(2) rotate(15deg);
}
复制代码

10. 实战技巧

下面是官网中的一个非常赞的 Demo

/* Less */
.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // 调用 方法
  padding: @average;    // 使用返回值
}

/* 生成的 CSS */
div {
  padding: 33px;
}
复制代码

可以说 Less 是一门优雅编程语言。

4. 继承

extend 是 Less 的一个伪类。它可继承所匹配声明中的全部样式。

1. extend 关键字的使用

/* Less */
.animation{
    transition: all .3s ease-out;
    .hide{
      transform:scale(0);
    }
}
#main{
    &:extend(.animation);
}
#con{
    &:extend(.animation .hide);
}

/* 生成后的 CSS */
.animation,#main{
  transition: all .3s ease-out;
}
.animation .hide , #con{
    transform:scale(0);
}
复制代码

2.all 全局搜索替换

使用选择器匹配到的全部声明。

/* Less */
#main{
  width: 200px;
}
#main {
  &:after {
    content:"Less is good!";
  }
}
#wrap:extend(#main all) {}

/* 生成的 CSS */
#main,#wrap{
  width: 200px;
}
#main:after, #wrap:after {
    content: "Less is good!";
}
复制代码

3. 减少代码的重复性

从表面看来，extend 与方法最大的差别，就是 extend 是同个选择器共用同一个声明，而方法是使用自己的声明，这无疑增加了代码的重复性。

方法示例与上面的 extend 进行对比：

/* Less */
.Method{
  width: 200px;
  &:after {
      content:"Less is good!";
  }
}
#main{
  .Method;
}
#wrap{
  .Method;
}

/* 生成的 CSS */
#main{
  width: 200px;
  &:after{
    content:"Less is good!";
  }  
}
#wrap{
  width: 200px;
  &:after{
    content:"Less is good!";
  }  
}

复制代码

4. 要点

翻译官网

选择器和扩展之间是允许有空格的：pre:hover :extend(div pre).
可以有多个扩展: pre:hover:extend(div pre):extend(.bucket tr) - 注意这与 pre:hover:extend(div pre, .bucket tr)一样。
这是不可以的，扩展必须在最后 : pre:hover:extend(div pre).nth-child(odd)。
如果一个规则集包含多个选择器，所有选择器都可以使用extend关键字。

5. 导入

1. 导入 less 文件可省略后缀

import "main"; 
//等价于
import "main.less";
复制代码

2. `@import` 的位置可随意放置

#main{
  font-size:15px;
}
@import "style";
复制代码

3. reference

Less 中最强大的特性使用引入的 Less 文件，但不会编译它。

/* Less */
@import (reference) "bootstrap.less"; 

#wrap:extend(.navbar all){}
复制代码

翻译官网：

使用@import (reference)导入外部文件，但不会添加把导入的文件编译到最终输出中，只引用。

4. once

@import语句的默认行为。这表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析。

@import (once) "foo.less";
@import (once) "foo.less"; // this statement will be ignored
复制代码

5. multiple

使用@import (multiple)允许导入多个同名文件。

/* Less */

// file: foo.less
.a {
  color: green;
}
// file: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";

/* 生成后的 CSS */
.a {
  color: green;
}
.a {
  color: green;
}

6. 函数

判断类型

isnumber

判断给定的值是否是一个数字。

isnumber(#ff0);     // false
isnumber(blue);     // false
isnumber("string"); // false
isnumber(1234);     // true
isnumber(56px);     // true
isnumber(7.8%);     // true
isnumber(keyword);  // false
isnumber(url(...)); // false
复制代码

iscolor

判断给定的值是否是一个颜色。

isurl

判断给定的值是否是一个 url 。

颜色操作

saturate

增加一定数值的颜色饱和度。

lighten

增加一定数值的颜色亮度。

darken

降低一定数值的颜色亮度。

fade

给颜色设定一定数值的透明度。

根据比例混合两种颜色。

数学函数

ceil

向上取整。

floor

向下取整。

percentage

将浮点数转换为百分比字符串。

round

四舍五入。

sqrt

计算一个数的平方根。

计算数字的绝对值，原样保持单位。

计算一个数的乘方。

7. 其他

注释
- /* */ CSS原生注释，会被编译在 CSS 文件中。
- / / Less提供的一种注释，不会被编译在 CSS 文件中。

避免编译

/* Less */
#main{
  width:~'calc(300px-30px)';
}

/* 生成后的 CSS */
#main{
  width:calc(300px-30px);
}
复制代码

结构： ~' 值 '

变量拼串

在平时工作中，这种需求太常见了。在下面例子中，实现了不同的 transtion-delay、animation、@keyframes

.judge(@i) when(@i=1){
  @size:15px;
}
.judge(@i) when(@i>1){
  @size:16px;
}
.loopAnimation(@i) when (@i<16) {
  
  .circle:nth-child(@{i}){
      .judeg(@i);
      border-radius:@size @size 0 0;
      animation: ~"circle-@{i}" @duration infinite @ease;
      transition-delay:~"@{i}ms";
  }
  @keyframes ~"circle-@{i}" {
      // do something...
  }
  .loopAnimation(@i + 1);
}
复制代码

结构： ~"字符@{变量}字符";

使用 JS

因为 Less 是由 JS 编写，所以 Less 有一得天独厚的特性：代码中使用 Javascript 。

/* Less */
@content:`"aaa".toUpperCase()`;
#randomColor{
  @randomColor: ~"rgb(`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`)";
}
#wrap{
  width: ~"`Math.round(Math.random() * 100)`px";
  &:after{
      content:@content;
  }
  height: ~"`window.innerHeight`px";
  alert:~"`alert(1)`";
  #randomColor();
  background-color: @randomColor;
}
/* 生成后的 CSS */

// 弹出 1
#wrap{
  width: 随机值（0~100）px;
  height: 743px;//由电脑而异
  background: 随机颜色;
}
#wrap::after{
  content:"AAA";
}

1. 居中问题

//行内块或块元素元素水平垂直居中，子元素不设置宽高
//absolute + margin auto方法
<div>
      <img src="1.png" alt="">
  </div>
         
div {
      width: 800px;
      height: 800px;
      border: 1px dotted red;
      position: relative;
}
 div img{
         position: absolute;
         top:0;
         bottom: 0;
         left: 0;
         right: 0;
         margin: auto;
}

//flex+margin方法 
<div>
       <p>我是块元素</p>
  </div>
       div {
            width: 800px;
            height: 800px;
            border: 1px dotted red;
            display: flex;
         }
         div p{
            margin: auto;
         }

//flex方法
//这种方法，无论子元素是行内元素，行内块，块元素，都可以实现水平垂直居中效果
   <div>
      <img src="1.png" alt="">
     <!-- <p>我是块元素</p> -->
  </div>
  div{
         display: flex;
         justify-content: center;
         align-items: center;
         width: 800px;
         height: 800px;
         border: 1px dotted red;
       }

//css-table方法
 <div>
      <!-- <img src="1.png" alt=""> -->
      <!-- <p>我是块元素</p> -->
      <span> 我是行内元素</span>
     </div>
  div{
          width: 800px;
          height: 800px;
          border: 1px dotted red;
          display: table-cell;
          text-align: center;
          vertical-align: middle;
       }
       div span{
         display: inline-block;
       }
       
      如果本身是行内块元素，不需要加 display: inline-block;
      块元素及行内元素均有效

#`src`与`href`的区别

1.`src` 是引入本地下载好的或者网络资源

2. `href`是超链接引用，建立页面与页面之间的联系（桥梁作用）

2. 插入图片和背景图片的区别

背景图片必须用 background-position：30px 30px；来移动位置
插入图片可以通过 margin来移动

3. 外边距合并（塌陷）问题

两个非嵌套上下盒子的外边距，如果一个设置了底部，一个设置了顶部，就会出现外边距合并
1. first 和 second 两个div 分别都设置了 20px的外边距，按理说到最后应该是相距40px，但是就出现了外边距合并的问题，会将两个外边距合并取最大的值，所以最后是两个盒子相距20px。
嵌套关系的外边距合并
1. 在一个盒子中嵌套一个子盒子，如果子盒子设置 margin 的话，然后父盒子也会跟着子盒子一块掉下来，这就出现了塌陷的问题
2. 常见的解决方法是：给父元素添加一个 overflow：hidden;
  1. 可以为父元素定义上边框来解决
  2. 可以为父元素定义上内边距来解决
  3. 为父元素添加 overflow：hidden（最常用）

4. 清除浮动问题

清除浮动是为了解决父级元素因为子级浮动而引起的内部高度为0的问题。
什么时候清除浮动
1. 父级没高度了
2. 子盒子浮动了
3. 浮动之后影响下面的布局了以上这些情况都需要清除浮动
4. 注意： 清除浮动之后，父级就会根据浮动的盒子自动检测高度，父级有了高度就不会影响下面的标准流了

清除浮动的方法：

额外标签法：最后一个浮动标签末尾添加一个空标签

// 在最后一个浮动标签的末尾添加 如下 
<div class="clear"></div>

.clear {
  clear: both;
}

父级添加overflow 属性方法

// 给父级的盒子添加 overflow：hidden；
<div class="father hidden"></div>

.hidden {
    overflow: hidden;
}

使用 after 伪元素清除浮动（最常用，重点）

// 在父元素中添加 伪类元素清除浮动
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

使用双伪元素清除浮动

// 给父类添加一个 clearfix
.clearfix: before,
.clearfix: after {
    content: "";
    display: table
}
.clearfix: after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

5. `Css`书写顺序

overflow: hidden;

// 内容
content: ' ‘;

// 定位
position: relative; top: 0;z-index: 1;

// 盒模型
display: block;
display: flex;
justify-content: flex-start;
align-items: center;
flex-flow: column;

// 元素宽高
width: 10px; height: 10x;
// 元素间距
padding: 0; margin: 0 auto 10px;

// 背景
background: #FFF;
// 边框
border: 1px solid #000; border-radius: 10px;
// 阴影
box-shadow: 0 0 0 0;

// 文字
font-size: 10px; font-weight: normal; font-family: serif;
// 行设置
line-height: 10px;
color: #000;
white-space: normal;

// 渐变、偏移
transition: all 0.s ease;
transform: scale(1);

// 光标等
cursor: pointer;
user-select: none;
pointer-events: none;

6. z-index

z-index 只能应用于 相对定位、绝对定位、固定定位的元素，其他标准流的元素无效
该属性设置一个定位元素沿 z 轴的位置，z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
注意: 以下属性未设置好,层级会出现不生效的情况
1. z-index仅能在定位元素上奏效,即该元素不是默认的position:static,需要设置 position:absolute | relative | fixed;
2. 子元素的层级建立在父元素层级的基础上.即子元素无论设置了多大的层级,其父元素的层级如果较小,在父元素外该子元素的层级也会小,如果父元素被盖住了,该子元素也会被盖住
3. 无序列表ul和有序列表ol默认有层级(坑:控制台不显示),如果需要提高其内部的层级,可以给ul或li添加大些的层级,如果其内部某个元素的层级需要比ul/ol外层的还要高但不能提高整个ul的层级,这种情况建议换个结构(如div)

7.元素显示和隐藏

dispaly
1. display：none—— 隐藏对象，隐藏之后位置也不能占有
2. display：block —— 除了转换元素之外，还是显示元素
visibility
1. visibility：hidden—— 元素可以隐藏，但是位置还占有
2. visibility：visible —— 元素显示
overflow 溢出
1. overflow：hidden —— 不显示超过对象尺寸的内容，超出部分隐藏掉（隐藏的部分不占有位置）
2. overflow：visible—— 不剪切内容也不添加滚动条
3. overflow：scroll —— 不管超出内容与否，总是显示滚动条
4. overflow：auto—— 超出自动显示滚动条，不超出不显示滚动条
5. 在未来的使用中 overflow：hidden是会被大量的运用到，除此之外其他的默认样式都不会用到，因为样式太丑了，所以未来工作当中一般的团队都有写默认的样式。这里只要重点记住 hidden
display、visibility、overflow 总结
1. display —— 隐藏对象，但不保留位置
2. visibility —— 隐藏对象，但保留位置
3. overflow —— 重点记住 hidden，隐藏超出大小的部分

8. 去掉默认轮廓线

outline：none —— 去掉默认轮廓线或者边框

9.鼠标样式

cursor：default —— 默认样式
cursor：pointer—— 小手样式
cursor：move—— 移动样式
cursor：test—— 文本样式
cursor：not-allowed —— 禁止样式

10. 防止拖拽文本

还有一个未来也可能会常用到的就是防止用户拖拽文本，一般在文库类型的网站中用的比较多，比如防止复制等操作就是这样的。
resize：none —— 防止拖拽文本

11. 垂直对齐方式

一般用于图片和文字对齐
vertical-align —— 表示垂直对齐（只对行内和行内快有效果）
vertical-align：baseline —— 基线对齐
vertical-align：top—— 顶线对齐
vertical-align：middle—— 垂直居中
vertical-align：bottom—— 底线对齐

12. 省略号代替溢出文字

white-space：nowrap—— 强制一行内显示文本
overflow：hidden—— 超出部分隐藏
text-overflow：ellipsis —— 文字用省略号代替超出的部分

//单行文本溢出显示：三个条件
//先强制一行内显示文本
white-space：nowrap；（默认normal自动换行）
//超出的部分隐藏
Overflow：hidden；
//文字用省略号替代超出的部分
text-overflow：ellipsis；
//多行文本溢出显示：
//有较大的兼容性问题，适合于WebKit浏览器或移动端
//五行代码
Overflow：hidden；
text-overflow：ellipsis；
Display：-webkit-box；//弹性伸缩盒子模型显示
-webkit-line-clamp；2；//限制在一个块元素显示的文本的行数
-webkit-box-orient：vertical；//设置或检索伸缩对象的子元素的排列方式

13. 三角形做法

语法格式：利用边框设置

div {
    width：0；

    hight：0；

    border-bottom: 10px solid #000;

    border-top: 10px solid #fff;

    border-left: 10px solid #fff;

    border-right: 10px solid #fff;
}

14. `H5`新增语义化标签

盒子标签
1. <header></header> :头部标签
2. <nav></nav> ：导航栏标签
3. article></article> ：内容标签
4. <section></section> ：定义文档某个区域
5. <aside></aside> ：侧边栏标签
6. <footer></footer> ：尾部标签
多媒体标签：
1. 视频标签：<video></video>
  1. ① 视频就绪自动播放：Autoplay = autoplay（谷歌需要添加muted来解决自动播放问题）
    
    ② 显示播放控件：Controls = controls；
    
    ③ 设置播放器宽度：width：25px；
    
    ④ 设置播放器高度：height：25px；
    
    ⑤ 是否循环播放：loop = loop；
    
    ⑥ 是否预加载视频：preload：auto（预加载）/none（不加载）；
    
    ⑦ 视频url地址：src = ＂＂　；
    
    ⑧ 加载等待的画面图片：poster：imgurl；
    
    ⑨ 静音播放：muted：muted；
2. 音频标签：<audio></audio>
  1. ① 就绪后自动播放：autoplay：autoplay；
    
    ② 显示播放控件：controls：controls；
    
    ③ 循环播放：loop：loop；
    
    ④ 音频url地址：src = ＂＂；
3. 多媒体标签总结：
  1. ① 音频标签和视频标签的使用方法基本一致
    
    ② 浏览器的支持情况不同
    
    ③ 谷歌浏览器把自动播放禁止了，需要另外设置
    
    ④ 视频标签可以通过muted属性静音播放但是音频标签不可以
    
    ⑤ 视频标签是重点，我们场设置自动播放，不使用控件，循环和设置大小属性
新增的input标签：
新增的表单属性：

15. 高级选择器：

#属性选择器

属性选择器可以根据元素的特定属性来选择元素，这样就可以不用借助类或id选择器
语法格式：
1. E[alt]：选择具有alt属性的E元素
2. E[alt=＂val＂]：选择具有alt属性且属性值等于val的E元素
3. E[alt^=＂val＂]：匹配具有alt属性且属性值以val开头的E元素
4. E[alt$=＂val＂]：匹配具有alt属性且属性值以val结尾的E元素
5. E[alt*=＂val＂]：匹配具有alt属性且属性值含有val的E元素

#结构伪类选择器

主要根据文档结构来选择元素，常用于根据父级，选择器里面的子元素
语法格式：
1. E：first-child匹配父元素中的第一个子元素E
2. E：last-child匹配父元素中最后一个子元素E
3. E：nth-child（n）匹配父元素中的第n个子元素E
4. E：first-of-type指定类型E的第一个
5. E：last-of-type(1) 指定类型E最后一个
6. E：nth-of-type（n）指定类型E的第n个
7. nth-child（n）选择某个父元素的一个或多个特定的子元素
  1. n可以是数字，关键字或公式
  2. n如果是数字，就是选择第n个子元素
  3. n可以是关键字：even偶数，odd奇数
  4. n可以是公式
注意事项：
1. 结构伪类选择器：一般是用于选择父级里面的第几个孩子
2. nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后再看看是否匹配
3. nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E再根据E找到第n个孩子
4. 关于nth-child n是从0开始计算的，要记住常用的公式
5. 无序列表，我们一般用nth-child更多
6. 类选择器、属性选择器、伪类选择器，权重都是10

#伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
语法格式:
1. ::before 在元素内部的前面插入内容
2. ::after 在元素内部的后面插入内容
Before和after 创建一个元素，但是属于行内元素
新创建的这个元素在文档中是找不到的，所以我们称为伪元素
语法：div::before{content = ＂＂ }
Before和after必须有content属性
伪元素选择器和标签选择器一样，权重为1
可以应用于清除盒子浮动（清除的是影响）

16. `Css`盒子模型

Css3中可以通过 box-sizing 来指定盒子模型，有两个值：content-box border-box

box-sizing: content-box;
//盒子大小为 width+padding+border（默认）
box-sizing: border-box;
//盒子大小为 width

如果盒子模型是border-box，那么 padding和border 就不会撑大盒子，前提是padding和border 不会超过width宽度

17. `Calc（）` 函数

让你在声明CSS属性值时执行一些计算
语法格式：
1. Width：calc（100% - 80px）；
2. 括号里可以用 + - * / 来进行计算

18`img`空白缝隙问题

img元素默认样式导致，因为行内元素默认的垂直对齐方式基准线baseline，使得字体下方会有空隙。
解决方法：
1. 将img设置为块元素（缺点是改变了img元素类型, 会改变布局, img换行）
2. 设置父元素div的line-height: 0；（需设置父元素宽度让图片垂直排列,父元素不定宽img水平排列时无效）
3. 设置img浮动 float: left; 或 float: right (影响布局)
4. 设置父元素font-size: 0; （父元素内部其他元素font-size需重新设置）
5. 设置img对齐方式 vertical-align: bottom/top/middle; （需设置父元素宽度让图片垂直排列,父元素不定宽img水平排列时无效）

19. 背景颜色线性渐变

语法格式：background：linear-gradient（起始方向，颜色1，颜色2，...）；
background: -webkit-linear-gradient(left bottom, red, blue);
需要配合宽和高
在线性渐变的开头，我们可以指定一个渐变的方向，可选值：
- to left
- to right
- to top
- to bottom
- 或者使用deg（deg是一个角度值）
渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况
CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。
1. 为了添加透明度，我们使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<!--默认渐变是从上往下的-->
<style>
.box{
	width:300px;
	height:300px;
	border:1px solid #000; 
    //渐变是图片，需要通过background-image来设置
	background-image:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

20 . 背景径向渐变

radial-gradient:设置径向渐变（放射性效果）
默认情况下径向渐变的形状是根据元素的形状来计算的：
- 元素正方形 -->渐变圆形
- 元素长方形 -->渐变椭圆形
我们也可以手动指定径向渐变的形状，可选值：
- circle：圆形
- ellipse：椭圆形
也可以指定渐变的位置，可选值：
- closest-side
- farthest-side
- closest-corner
- farthest-corner
- ```
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
```

CSS进阶篇

CSS 进阶篇

# css预处理函数