html

介绍

HTML：Hyper Text Markup Language，超文本标记语言。（超文本就是文档某部分内容可以跳到另一个文档）
HTML 是 W3C 组织定义的语言标准：HTML 是用于描述页面结构的语言。
结构：有什么东西，该东西表示什么含义

语义化

1.每一个 HTML 元素都有具体的含义

a元素：超链接
p元素：段落
h1元素：一级标题

2.所有元素与展示效果无关,元素展示到页面中的效果，应该由 CSS 决定。
选择什么元素，取决于内容的含义（语义化），而不是显示出的效果

语义化的作用

1. 为了搜索引擎优化（SEO）

搜索引擎：百度、搜搜、Bing、Google
每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码,然后读取你页面的元素，来理解你要表达的东西，你表达的他越容易懂，他就会把你显示的越靠前

2. 为了让浏览器理解网页

阅读模式、语音模式

元素包含关系

1. 容器元素中可以包含任何元素
2. a 元素中几乎可以包含任何元素
3. 某些元素有固定的子元素（ul>li，ol>li，dl>dt+dd）
4. 标题元素和段落元素不能相互嵌套，并且不能包含容器元素

不一定写错就不能运行，浏览器比较宽容，有可能能帮助你纠正

HTML 实体（转义符）

1. &单词;
2. &#数字;

小于符号
<

大于符号

>

空格符号



版权符号
©

&符号
&

元素

pre(空白折叠)

在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格
pre 元素可以把样式原封不动的显示在页面上（不忽略空格）
pre 元素功能的本质：它有一个默认的 css 属性 white-space:pre

图片局部链接

map 元素
map：地图
map 的子元素：area

figure 元素
指代、定义，通常用于把图片、图片标题、描述包裹起来
子元素：figcaption

<figure>
  <a
    target="_blank"
    href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin"
  >
    <img usemap="#solarMap" src="./img/solar.jpg" alt="这是一张太阳系的图片" />
  </a>
  <figcaption>
    <h2>太阳系</h2>
  </figcaption>
  <p>
    太阳系是以太阳为中心，和所有受到太阳的引力约束天体的集合体。包括八大行星（由离太阳从近到远的顺序：水星、金星、地球、火星、木星、土星、天王星、海王星）、以及至少173颗已知的卫星、5颗已经辨认出来的矮行星和数以亿计的太阳系小天体,和哈雷彗星。
  </p>
</figure>

<map name="solarMap">
  <area
    shape="circle"
    coords="360,204,48"
    href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin"
    target="_blank"
  />
  <area
    shape="rect"
    coords="323,282,395,320"
    href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin"
    target="_blank"
  />
  <area
    shape="poly"
    coords="601,371,645,312,678,338,645,392"
    href="https://baike.baidu.com/item/%E5%86%A5%E7%8E%8B%E6%98%9F/137498?fr=aladdin"
    target="_blank"
  />
</map>

meta

meta 主要用于设置网页中的一些元数据，元数据不是给用户看
charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容

     <meta name="keywords" content="HTML5,前端,CSS3">
     <meta name="description" content="这是一个非常不错的网站">

name 的可选项

• description 用于指定网站的描述
• keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开

button

加入一个type="button" 就是一个普通按钮，不加则会提交表单
<button class="right" type="button">发送验证码</button>

加入一个type="reset" 就是一个重置按钮

这一切都是在form元素的包裹下使用

label

可以将文字和单选按钮关联

关联方式一
<label>
    <input type="radio" name="sex" checked />
    <span>男</span>
  </label>

关联方式二
<label for="male">
  <span>男</span>
</label>
<input type="radio" name="sex" checked id="male"/>

contenteditable 属性

该属性是一个布尔属性，可以设置到任何元素上，它可以让该元素变为可编辑的状态
在实际开发中，通常用于制作富文本框

    <div contenteditable class="content">
      <p>asdfasdfsaf</p>
    </div>

css

介绍

CSS：Cascading Style Sheets 层叠样式表；定义网页中的东西长什么样子
CSS 规则 = 选择器 + 声明块

引入

Link 标签

<link rel="stylesheet" href="style.css" />

import

@import "theme.css"; // 使用字符串
@import url("theme.css"); // 使用 url 地址

注意

• @import 规则必须在 CSS 文档的头部，但可以在 @charset 规则的后面；
• @import 规则不是一个嵌套语句，@import 不能在条件组的规则中使用；
• 在使用@import 语句引入样式时，在一行样式的结尾需要加分号;
• 在 html 文档中使用@import 时，需要在 style 标签里面；
• @import 引入的 CSS 将在页面加载完毕后才被加载。

两者区别
1、加载顺序不同
link 标签会在页面加载时同时被加载，而@import 是在页面加载完毕后才会被加载，因此 link 标签的样式会优先加载和渲染，而@import 的样式则会稍后被渲染。
2、兼容性不同
link 标签被所有浏览器支持，而@import 在一些老的浏览器中可能不被支持。
3、引入方式不同
link 标签可以在 head 标签中或 body 标签中任何位置引入 CSS 文件，而@import 只能在 CSS 文件中引入其他 CSS 文件。
4、预加载不同
使用 link 标签可以通过设置 rel=”preload”属性来提前加载 CSS 文件，从而加快网页的加载速度。而@import 则没有这种预加载的功能。

变量

必须使用俩个减号(- -)开头，数字、字母、下划线、中划线都是可以的

    :root{
      --color:'#fff';
      --Color:'#666';
      --font-cm:20px;
      --num_1:10;
    }


    /* 使用CSS变量 */
    p{
      font-size: var(--font-cm);
    }

      .c{
      --color1:green;
      color: var(--color,var(--color1)) //可以有第二个参数作为默认值
    }

calc()方法

CSS 页提供了 calc()进行数值计算，就可以通过 var()使用自定义属性的值进行计算

    p{
      /* var 方法 */
      font-size: var(--font-cm);
      /* calc 方法 */
      width: calc(var(--font-cm)*10);
    }

当我们使用 var()方法的时候，会首先从当前选择器进行查找，然后是父元素，祖父元素，直至根元素

层叠

css 样式表包含以下四种类型，他们会进行层叠
1）作者样式表中的!important 样式
2) 内联样式 3) 作者样式表中的普通样式
总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个 4 位数

1. 千位：如果是内联样式，记 1，否则记 0
2. 百位：等于选择器中所有 id 选择器的数量
3. 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
4. 个位：等于选择器中所有元素选择器、伪元素选择器的数量

分数高的属性会被应用，分数一样高则代码书写靠后的胜出
a 链接伪类的优先级排序
link > visited > hover > active
4) 浏览器默认样式表中的样式

样式计算

css 属性值的计算过程

一个 dom 打开他的 style 可能寥寥无几，但是显示的时候是需要 css 的每个属性都要有值的,也就是说我们所书写的任何一个 HTML 元素，实际上都有完整的一整套 CSS 样式。


属性值的计算过程，分为如下这么 4 个步骤：

• 确定声明值
• 层叠冲突
• 使用继承
• 使用默认值

确定声明值

首先第一步，是确定声明值。所谓声明值就是作者自己所书写的 CSS 样式，例如

p{
  color : red;
}
这里我们声明了 p 元素为红色，那么就会应用此属性设置。

层叠冲突

在确定声明值时，可能出现一种情况，那就是声明的样式规则发生了冲突。
此时会进入解决层叠冲突的流程。而这一步又可以细分为下面这三个步骤：

• 比较源的重要性
• 比较优先级
• 比较次序

比较源的重要性
当不同的 CSS 样式来源拥有相同的声明时，此时就会根据样式表来源的重要性来确定应用哪一条样式规则。

整体来讲有三种来源：

• 浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称用户代理样式。
• 网页的作者可以定义文档的样式，这是最常见的样式表，称之为页面作者样式。
• 浏览器的用户，可以使用自定义样式表定制使用体验，称之为用户样式。

对应的重要性顺序依次为：页面作者样式 > 用户样式 > 用户代理样式

例如现在有页面作者样式表和用户代理样式表中存在属性的冲突，那么会以作者样式表优先。

p {
  color: red;
  display: inline-block;
}

可以明显的看到，作者样式表和用户代理样式表中同时存在的 display 属性的设置，最终作者样式表干掉了用户代理样式表中冲突的属性。这就是第一步，根据不同源的重要性来决定应用哪一个源的样式。

比较优先级

在同一个源中有样式声明冲突会进行样式声明的优先级比较

<div class="test">
  <h1>test</h1>
</div>

.test h1 {
  font-size: 50px;
}

h1 {
  font-size: 20px;
}

在上面的代码中，同属于页面作者样式，源的重要性是相同的，此时会以选择器的权重来比较重要性。
很明显，上面的选择器的权重要大于下面的选择器，因此最终标题呈现为 _50px_。
落败的作者样式在 Elements>Styles 中会被划掉。

比较次序

经历了上面两个步骤，大多数的样式声明能够被确定下来。但是还剩下最后一种情况，那就是样式声明既是同源，权重也相同。
此时就会进入第三个步骤，比较样式声明的次序。
举个例子：

h1 {
  font-size: 50px;
}

h1 {
  font-size: 20px;
}

在上面的代码中，同样都是页面作者样式，选择器的权重也相同，此时位于下面的样式声明会层叠掉上面的那一条样式声明，最终会应用 20px 这一条属性值。

使用继承

层叠冲突这一步完成后，解决了相同元素被声明了多条样式规则究竟应用哪一条样式规则的问题

<div>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

div {
  color: red;
}

在上面的代码中，我们针对 div 设置了 color 属性值为红色，而针对 p 元素我们没有声明任何的属性，但是由于 color 是可以继承的，因此 p 元素从最近的 div 身上继承到了 color 属性的值。

使用默认值

走到这一步，如果属性值都还不能确定下来，那么就只能是使用默认值了

前面我们也说过，一个 HTML 元素要在浏览器中渲染出来，必须具备所有的 CSS 属性值，但是绝大部分我们是不会去设置的，用户代理样式表里面也不会去设置，也无法从继承拿到，因此最终都是用默认值。

样式继承

样式和文字将被继承，我们为一个元素设置的样式同时也会应用到它的后代元素上
背景相关的，布局相关等的这些样式都不会被继承。

可以被继承的 css 属性 1.字体系列属性:font、font-family、font-weight、font-size、fontstyle; 2.文本系列属性:
2.1）内联元素：color、line-height、word-spacing（设置单词之间的间距）、letter-spacing（设置文本字符间距）、 text-transform(用于设置文本的大小写：uppercase 所有字符强制转为大写，lowercase 转小写，capitalize 首字符强制转为大写);
2.2）块级元素：text-indent、text-align; 3.元素可见性：visibility 4.表格布局属性：caption-side（标题位置）、border-collapse（设置边框分离还是合并）、border-spacing（边框分离状态下设置边框间距）、empty-cells（定义如何渲染无可视内容的单元格边框和背景）、table-layout（定义用于布局单元格行和列的算法）; 5.列表布局属性：list-style

不可以被继承的 css 属性
1.display：规定元素应该生成的框的类型； 2.文本属性：vertical-align、text-decoration(用于设置文本的修饰线外观包括上/下划线，管穿线，删除线，闪烁 ); 3.盒子模型的属性：width、height、margin、border、padding; 4.背景属性：background、background-color、background-image; 5.定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、maxwidth、max-height、overflow、clip;

元素层级(堆叠上下文)

设置 z-index，通常情况下，该值越大，越靠近用户
只有定位元素设置 z-index 有效
z-index 可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖

创建堆叠上下文的元素

1. html 元素（根元素）
2. 设置了 z-index（非 auto）数值的定位元素

同一个堆叠上下文中元素在 Z 轴上的排列

从后到前的排列顺序（后指的是离我们视线远）

1. 创建堆叠上下文的元素的背景和边框
2. 堆叠级别(z-index, stack level)为负值的堆叠上下文
3. 常规流非定位的块盒
4. 非定位的浮动盒子
5. 常规流非定位行盒
6. 任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的堆叠上下文
7. 堆叠级别为正值的堆叠上下文

每个堆叠上下文，独立于其他堆叠上下文，它们之间不能相互穿插。

字体

字体与字样式

• color 用来设置字体颜色
• font-size 字体的大小
• font-weight 文字粗细

-normal 默认值 不加粗
-bold 加粗

• font-style

-font-style 字体的风格
-normal 正常的
-italic 斜体

• text-decoration

-none 什么都没有
-underline 下划线
-line-through 删除线
-overline 上划线

• text-indent（缩进）

• line-height

• letter-space

• text-align

• font-family 字体或者字体族（填写字体或者字体族都可）

  字体族	说明	字体
  serif	有衬线字体，即在文字笔画的结尾添加特殊的装饰线或衬线	“Lucida Bright”、”Lucida Fax”、Palatino、”Palatino Linotype”、Palladio、”URW Palladio”、serif
  sans-serif	无衬线字体，即在文字笔画结尾处是平滑的	“Open Sans”、”Fira Sans”、”Lucida Sans”、”Lucida Sans Unicode”、”Trebuchet MS”、”Liberation Sans”、”Nimbus Sans L”、sans-serif
  monospace	等宽字体，即每个文字的宽度都是相同的	“Fira Mono”、”DejaVu Sans Mono”、Menlo、Consolas、”Liberation Mono”、Monaco、”Lucida Console”、monospace
  cursive	草书字体，该字体有连笔或者特殊的斜体效果，会给人一种手写的感觉	“Brush Script MT”、”Brush Script Std”、”Lucida Calligraphy”、”Lucida Handwriting”、”Apple Chancery”、cursive
  fantasy	具有特殊艺术效果的字体	Papyrus、Herculanum、”Party LET”、”Curlz MT”、Harrington、fantasy

• 指定字体的类别，浏览器会自动使用该类别下的字体

• font-family 可以同时指定多个字体，多个字体间使用,隔开
  字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推

font-family: 'Courier New', Courier, monospace;

web 字体

让用户无感知的下载我们的字体

        /* 制作一个新的字体，名称叫做good night */
        @font-face {
            font-family: "good night";
            src: url("./font/晚安体.ttf");
        }

        p {
            font-family: "good night";
        }

字体图标

iconfont 使用
方式一（常用）

引入
<link rel="stylesheet" href="//at.alicdn.com/t/font_1206816_qshsac4925m.css">


.fs {
    font-family: "iconfont" !important;
    display: inline-block;
    font-size: 14px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
}
使用
<i class="iconfont icon-yonghu"></i>

方式二

引入
@font-face {
    font-family: 'iconfont';
    /* project id 1206816 */
    src: url('//at.alicdn.com/t/font_1206816_qshsac4925m.eot');
    src: url('//at.alicdn.com/t/font_1206816_qshsac4925m.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_1206816_qshsac4925m.woff2') format('woff2'),
        url('//at.alicdn.com/t/font_1206816_qshsac4925m.woff') format('woff'),
        url('//at.alicdn.com/t/font_1206816_qshsac4925m.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_1206816_qshsac4925m.svg#iconfont') format('svg');
}

.iconfont {
    font-family: "iconfont";
    font-style: normal;
}

使用
<i class="iconfont">
    
</i>

方式三
离线下载，得到这些文件

直接引入
<link rel="stylesheet" href="css/iconfont.css">

使用
<i class="iconfont icon-ditu"></i>

行高

line-height
行高指的是文字占有的实际高度
可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中

行高可以直接指定一个大小（px em）
也可以直接为行高设置一个整数
如果是一个整数的话，行高将会是字体的指定的倍数

• 行高经常还用来设置文字的行间距（如果是多行字体的话就是用来设置文字的行间距的）
  行间距 = 行高 - 字体大小

字体的用法与简写

加组 斜体 字体大小/行高   字体族

font: bold italic 50px/2  微软雅黑, 'Times New Roman', Times, serif;

样式

width
height
background-color 背景颜色
opacity
cursor 鼠标
display
visibility
vertical-align(在两个行盒出现不对齐的情况下使用，给哪个元素设置都可以，可以设置数字)
outline (不占用位置，不改变盒子尺寸)

选择器与伪元素

选择器的组合

1. 并且(连写)
2. 后代元素 —— 空格
3. 子元素 —— >
4. 相邻兄弟元素 —— +
5. 后面出现的所有兄弟元素 —— ~
6. 多个选择器, 用逗号分隔

css 中 ul li 与 ul>li 的区别

ul li ：后代选择器，ul 里所有的 li 元素，包括 ol 里的 li
ul>li ：子代选择器，下一级的 DOM 节点，不包括 ol 里的 li
ul>ol>li ：子代选择器必须一代接一代

属性选择器

1.E[attr]:查找指定的拥有 attr 属性的 E 标签。如查找拥有 style 属性的 li 标签

li[style]{}

2.E[attr=value]:查找拥有指定的 Attr 属性并且属性值为 value 的 E 标签。如想查找拥有 class 属性并且值为 Red 的 li 标签 =是严格匹配

li[class=red]{}

3.E[attr*=value]:查找拥有指定的 attr 属性并且属性值中包含(可以在任意位置)value 的 E 标签

li[class*=red]{}

4.E[attr^=value]:查找拥有指定的 attr 属性并且属性值以 value 开头的 E 标签

li[class^=blue]{}

5.E[attr$=value]:查找拥有指定的 attr 属性并且属性值以 value 开结束的 E 标签

li[class$=blue]{}

兄弟选择器

+：获取当前元素的相邻的满足条件的元素
下面这句样式说明查找 ：添加了.first 样式的标签的相邻的 li 元素 1.相邻 2.必须是指定类型的元素

.first + li{}

必须都是 li 元素，如果中间插入了其他元素，则+表示相邻的 li 元素，所以会不起作用

~：获取当前元素的满足条件的兄弟元素
下面样式查找添加了.first 样式的元素的所有兄弟 li 元素 1.必须是指定类型的元素

.first ~ li{}

伪类选择器

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

li:first-child{color: red;}

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

li:first-of-type{
    color: red;
}
li:last-of-type{
    color: orange;
}

first-child 强调某个父元素的第一个子元素，而:first-of-type 强调的是特定类型的第一个，不必是第一个子元素
比如 p:first-child，都是基于 p 的父元素来进行筛选的

a:first-child { 不会生效 color:red; } /* 选中的是子元素中第一个a元素 */ 生效
a:first-of-type { color:red; } /* 必须是a元素，必须是最后一个子元素 */ 不会生效
a:last-child{ color: green; } /* 选中子元素中最后一个a元素 */ 生效
a:last-of-type{ color: green; }

<nav>
  <p>啊手动阀</p>
  <a href="">Lorem.</a>
  <a href="">Eligendi.</a>
  <a href="">Officia.</a>
  <a href="">Provident!</a>
  <a href="">Eaque.</a>
  <a href="">Delectus!</a>
  <a href="">Eveniet?</a>
  <a href="">Illo?</a>
  <a href="">Commodi?</a>
  <a href="">Nobis.</a>
  <p>多范式</p>
</nav>

指定索引位置 nth-child(从 1 开始的索引||关键字||表达式）

li:nth-child(5){}
li:nth-child(even){
    background-color: orange;
}
li:nth-child(odd){
    background-color: pink;
}
li:nth-of-type(even){
    background-color: orange;
}
li:nth-of-type(odd){
    background-color: pink;
}

想为前面的 5 个元素添加样式

li:nth-last-of-type(-n+5){
    font-size: 30px;
}
li:nth-of-type(-n+5){
    font-size: 30px;
}

空值:没有任何的内容，连空格都没有

li:empty{
    background-color: red;
}

E:target:可以为锚点目标元素添加样式，当目标元素被触发为当前锚链接的目标时，调用此伪类样式

h2:target{
    color: red;
}
<a href="#title1">CSS (层叠样式表)</a>
<h2 id="title1">CSS (层叠样式表)</h2>

伪元素

无论是行盒还块盒都可以给他设置伪元素

    div:nth-of-type(2)::before{
        /**必须添加content属性，否则后期不可见**/
        content: "";
        /**默认是行级元素，如果想设置宽高，就必须转换为块级元素**/
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #fff;
        border-radius: 10px;
        left: -10px;
        top: -10px;
    }
    div:nth-of-type(2)::after{
    }

获取第一个字符

    p::first-letter{
       float: left;/**文本环绕**/
    }

获取第一行内容:如果设置了::first-letter,那么无法同时设置它的样式

    p::first-line{

   }

设置当前选中内容的样式
它只能设置显示的样式，而不能设置内容大小（改变字号无效）

    p::selection{
        background-color: pink;
    }

聚焦样式

input:focus{
    background:red;
}

按钮禁用样式

button:disabled{

}

选中样式

input:checked{

}

扩展(不常用)

body 背景

一块区域（画布）
特点：

1. 最小宽度为视口宽度
2. 最小高度为视口高度

HTML 元素的背景
覆盖画布
BODY 元素的背景
如果 HTML 元素有背景，BODY 元素正常（背景覆盖边框盒）
如果 HTML 元素没有背景，BODY 元素的背景覆盖画布
关于画布背景图

1. 背景图的宽度百分比，相对于视口
2. 背景图的高度百分比，相对于网页高度
3. 背景图的横向位置百分比、预设值，相对于视口
4. 背景图的纵向位置百分比、预设值，相对于网页高度

css3

overflow

• visible 默认值。内容不会被修剪，会呈现在元素框之外。
• hidden 内容会被修剪，并且其余内容是不可见的。
• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
• inherit 规定应该从父元素继承 overflow 属性的值。

overflow:scroll;

阴影

添加阴影

text-shadow:offsetX offsetY blur color

多层阴影效果

.demo3{
    text-shadow: 0px 0px 30px #fff,0px 0px 50px red,0px 0px 70px #fff;
}

可以添加一层阴影，也可以添加多层阴影

常规盒与怪异盒

content-box:你设置的 width 属性值仅仅是内容的宽度，盒子的最终的宽高值在 width 的基础上再加上 padding 和 border 的宽度(默认)

 box-sizing: content-box;(默认)

border-box:你设置的 width 属性值就是盒子的最终的宽度，包含了 border 和 padding 和内容。如果添加了 padding 和 border,那么真正放置内容的区域会减小–但是它可以稳固页面的结构

 box-sizing: border-box;

圆角矩形

1.设置一个值：四个角的圆角值都一样

border-radius: 10px;

2.设置两个值:第一个值控制左上/右下，第二个值控制右上/左下

border-radius: 10px 30px;

3.设置三个值：第一个值控制左上，第二值控制右上/左下，第三个值控制右下

border-radius: 10px 40px 60px;

4.设置四个值：左上 右上 右下 左

 border-radius: 10px 30px 60px 100px;

添加/是用来设置当前个不同方向的半径值 水平 x 方向/垂直 y 方向

border-radius: 100px/50px;

如果想设置四个角点的不同方向上的不同圆角值

分别是水平方向的：左上，右上，右下，左下 / 垂直方向的：左上，右上，右下，左下

border-radius: 100px 0px 0px 0px/20px 0px 0px 0px;

渐变

线性渐变

方向：
to top:0deg
to right:90deg
to bottom:180deg --默认值
to left:270deg

linear-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置...)
background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);

径向渐变

形状 shape:circle:产生正方形的渐变色
ellipse:适配当前的形状,如果是正方形的容器，两者效果一样.如果宽高不一样，默认效果切换到 ellipse
at position:坐标，默认在正中心。可以赋值坐标（参照元素的左上角），也可以赋值关键字(left center right top bottom)
大小 size: closest-side：最近边；
farthest-side：最远边；
closest-corner：最近角；
farthest-corner：最远角。
默认是最远的角 farthest-corner

    background: radial-gradient(red,blue);
   语法：radial-gradient(形状 大小 坐标,颜色1，颜色2...)

背景

背景与 img 何时使用
当图片属于网页内容时，必须使用 img 元素
当图片仅用于美化页面时，必须使用背景图

添加背景颜色

  background-color: skyblue;

添加背影图片

如果图片大于容器，那么默认就从容器左上角开始放置
如果图片小于容器，那么图片默认会平铺（平铺会重复，垂直和水平都会）

background-image: url("../images/share1.png")

背景颜色和背景图片是可以共同出现的

div {
    width: 300px;
  height: 300px;
  background-color: red;
  background-image: url(./imgs/1.jpg);
  background-repeat: no-repeat;
}

页面展示

设置背景平铺

background-repeat:repeat (默认值)
background-repeat:no-repeat (不平铺)
background-repeat:repeat-x （水平方向平铺）
background-repeat:repeat-y （垂直方向平铺）

设置背景位置

background-positiont 决定背景图片在盒子区域的定位位置。其方位由水平和垂直决定

div {
    //数字
  background-position: 100px 100px;
  //方向
    水平方向:left,center,right
    垂直方向:top,center,bottom
    background-position: center center;
    //比例
    水平方向= |盒子宽-图片宽| * scale
    垂直方向= |盒子高-图片高| * scale
  background-position: 50% 50%;
}

background 缩写方式

background:bg-color bg-image position/bg-size bg-repeat bg-origin
                    bg-clip bg-attachment initial|inherit

background-size

background-size 决定背景图在盒子中显示的具体大小，属性值需要同时设置背景图的宽和高。

div {
  //具体数值
  background-size: 200px 50px;
  //百分比，根据盒子的大小来定
  background-size: 50% 10%;
  //auto
  如果宽度是具体数值，高度设置auto,则背景图片的高会根据宽度数值等比拉伸
  如果高度是具体数值，宽度设置auto,则背景图片的宽会根据高度数值等比拉伸
  如果宽高都设置auto,直接使用原背景图的宽高
  background-size: 200px auto;
  //cover英文意思覆盖，那么其涵义就是要求背景图片覆盖整个盒子。
  background-size: cover;
    //contain,要求背景图片的宽和高必须满足其中一个覆盖盒子就行，
    当图片宽和高都小于盒子时图片会被等比拉伸，
    如果图片宽或高大于等于盒子宽或者高就停止拉伸。
    background-size:contain;
}

background-clip 和 background-origin

background-clip 决定了背景颜色从盒子的什么位置开始渲染
background-origin 决定了背景图片从盒子的什么位置开始渲染

background-clip: border-box（从盒子边距开始）
background-clip: content-box（从盒子内容开始）
background-clip: padding-box（默认值，从盒子padding开始）

过渡

简写：transition:属性名称 过渡时间 时间函数 延迟

  transition: left 2s linear 0s;

为多个样式同时添加过渡效

transition: left 2s linear 0s,background-color 5s linear 0s;

所有样式的过渡效果一样
steps(4):可以让过渡效果分为指定的几次来完成 等于说是一帧一帧的跳动

  transition:all 2s steps(4);

效率低下，它会去查询所有添加的样式（使用 all）,建议以后不要这么写

transform 二维变换

使用 transform 实现元素的移动 a.移动是参照元素的左上角 b.执行完毕之后会恢复到原始状态

    /*transform: translate(400px,500px);*/ X,Y轴的移动
    transform:translateY(300px);
    transform:scaleY(0.5); 放大和缩小，1为灵界点
    transform-origin: left top; 可以设置旋转的中心
    transform:translateX(700px) rotate(-90deg);
    transform:skew(-30deg);斜切

动画

添加动画效果
1.animation-name:指定动画名称

animation-name: moveTest;

2.设置动画的总耗时

animation-duration: 2s;

3.设置动画的播放次数，默认为 1 次 可以指定具体的数值，也可以指定 infinite(无限次)

animation-iteration-count: 1/infinite;

4.设置交替动画 alternate:来回交替

animation-direction: alternate;

5.设置动画的延迟

animation-delay: 2s;

6.设置动画结束时的状态：默认情况下，动画执行完毕之后，会回到原始状态

forwards:会保留动画结束时的状态，在有延迟的情况下，并不会立刻进行到动画的初始状态
backwards:不会保留动画结束时的状态，在添加了动画延迟的前提下，如果动画有初始状态，那么会立刻进行到初始状态
both:会保留动画的结束时状态，在有延迟的情况下也会立刻进入到动画的初始状态

animation-fill-mode: both;

7.动画的时间函数

animation-timing-function: linear; （这个表示匀速，可以开始比较满或者快或者）
设置动画的播放状态 paused:暂停 running:播放

animation-play-state: running;

动画 moveTest

   @keyframes moveTest {
    百分比是指整个动画耗时的百分比  10s
    from{
        transform: translate(0,0) rotate(45deg);
    }
    50%{
        transform: translate(0,500px);
    }
    to{
        transform: translate(500px,600px);
        }
    }

多列布局

1.设置列数

column-count: 3;

2.添加列间隙样式,与边框样式的添加一样

column-rule: dashed 3px red;

3。设置列间隙大小

column-gap: 50px;

4.设置列宽

原则：取大优先

1.如果人为设置宽度更大，则取更大的值，但是会填充整个屏幕，意味最终的宽度可能也会大于设置的宽度–填充满整个屏幕

2.如果人为设置宽度更小，使用默认计算的宽度

column-width: 200px;

设置上面这些属性应该在文字的盒子上

设置跨列显示 1 / all

column-span: all;

最大最小宽高

• 最大宽度：max-width，最大高度：max-height
• 最小宽度：min-width，最小高度：min-height

当一个元素的尺寸会自动变化时，设置最大最小宽高，可以让它不至于变得过小或过大。
在实际开发中，我们通常为 PC 端的页面设置一个最小宽度，通常此宽度为设计稿的宽度

尺寸的百分比

百分比是一个相对单位，其相对于元素的参考系，比如：

• 普通元素的参考系为父元素的内容区域
• 绝对（固定）定位元素的参考系为父元素中第一个定位元素的 padding 区域(内容区域+padding)

下面罗列常见的百分比情况

css 属性	百分比相对于	备注
width	参考系的宽度
height	参考系的高度	参考系高度受本身宽度影响时，设置无效
padding	参考系的宽度
border	参考系的宽度
margin	参考系的宽度

经验

有些时候 div 在要不要多嵌套一层做抉择的时候，尽量去选择嵌套一层

常见效果与疑问

图片空白,文字空白

    <p>
       <img src="./img/an.jpg" alt="">
    </p>

把 Img 放入 P 中的时候默认是基线对齐，所以下面会留空白

解决方案

1.将 img 设置一下垂直对齐的方式就可以解决这个问题

vertical-align: bottom;

2.设置 div font-size:0 3.设置 Img 为块盒

行内文字同样如此

文字太多显示省略号

//只对行盒文字生效
.box2{
    width: 200px;
    /*
    white-space 设置网页如何处理空白
    可选值：
    normal 正常
    nowrap 不换行
    pre 保留空白
    */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

不换行   多余裁剪     文字溢出使用省略号

漂亮的选择框 以及 element 的内核不是原生 input 做的

通常采用隐藏的 Input 框真实显示的是一个 span 或者 div

form 与 div 区别

1.button type=sumbit 可直接提交表单
2.input 框敲回车可直接提交表单,如果设置了回车提交表单而不用 form，则中文输入法回车也会识别，比较麻烦，尽量还是用 form 来进行提交 3.语义化