HTML的相关概念和建站流程

英语：HyperText Markup Language
HTML的概念：超文本标记语言，是一种用于创建网页的标准标记语言。
标记：<>里面是标记
超文本:文字/图片/视频/超链接

HTML的基本组成:

结构(structure)：html/xhtml w3c（万维网联盟）制定规范

	概念	区别
html	超文本标记语言	最大的区别是语法
xhtml	可扩展的标记性语言	1.xhtml的单标签后面要加个/，如 2.xhtml的标签必须是小写 3.xhtml的属性值必须用双引号引起来

样式(prasentation)：css w3c（万维网联盟）
行为(behavior)：js ECMA（欧洲电脑网商联合会）制定规范

快速生成HTML的基本结构(VScode)

新建带有.html后缀的文件

英文状态下按 ! 按 tab 或者 enter 生成基本结构

<!-- 文档类型声明 -->
<!DOCTYPE html>
	<!--根标签-->
<html>
<!-- 头部 -->

<head>
    <!-- 编码格式 -->
    <meta charset="UTF-8">
    <!-- 网页的标题 -->
    <title>我的第一个网页。</title>
</head>
<!-- 主体 -->
<body>
    文字/图片/视频/超链接
</body>
</html>

vscode快捷键

注释 ctrl+/ 取消注释 ctrl+/
保存 ctrl+s
撤销 ctrl+z
反撤销 ctrl+y
切换界面 alt+tab
全选 ctrl+a
快速写标签：标签名+tab

HTML的基本语法

<标签（第一个单词）>
双标签：成对出现的标签
空（单）标签：单个出现
<标签属性=“属性值” 属性=“属性值”>
1. 属性跟在标签后边用空格隔开
2. 属性和属性值用=连接
3. 属性值用引号引起来
4. 属性可有多个，中间用空格连接

H5新增的语法(ie8及以下浏览器版本不生效)

文档声明DOCTYPE可以小写
单标签不写结尾标签
可以省略的结尾标签 li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
可以省略的标签 html、head、body、colgroup、tbody

HTML的基本标签

文章类的标签

标题标签：h1~h6
1. 双标签/加粗且字体较大/h1-h6字体大小逐渐变小/独占一行

<!--最大标题-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<!--最小标题-->
<h6>标题6</h6>

段落标签：p
1. 双标签/独占一行
2. 随机生成一段文本：lorem（可加字数）+回车
3. 控制换行：文件->首选项->设置->搜索wrap->将off改为on

<p>段落标签</p>

加粗标签：b strong(强调重要的)
1. 可在同一行显示的标签/双标签

<b>加粗</b>
<strong>强调重要的</strong>

倾斜标签：i em
1. 可在同一行显示的标签/双标签

<i>斜体</i>

删除线： del
1. 可在同一行显示的标签/双标签
下划线： u
1. 可在同一行显示的标签/双标签
上标：sup
1. 可在同一行显示的标签/双标签
下标：sub
1. 可在同一行显示的标签/双标签
换行标签：br
1. 单标签
水平线：hr
1. 单标签
特殊字符：
1. 空格： 大小不确定
2. 注册商标：©
3. 版权符号：®
4. 左尖括号：<
5. 右尖括号：>

超链接标签：a

<a href="" target="_blank"></a>

href=“链接跳转地址”
窗口打开方式 target
1. -_self 自身窗口打开，默认值
2. -_blank 新窗口打开

图片标签： img

	<img src="" alt="" title=""></img>

单标签
src=“绝对路径（线上图片地址）/相对路径（本地图片地址）”

绝对路径
绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的“C:\img\网页布局图片\图片文件1”目录下，那么 “bg.jpg”这个图片的绝对路径就是“C:\img\网页布局图片\图片文件1\bg.jpg"。那么如果要使用绝对路径指定插入网页的图片就应该使用以下语句：

<img backround="C:\img\网页布局图片\图片文件1\bg.jpg" >

相对路径：所谓相对路径，就是相对于自己的目标文件位置
1. 当当前文件和目标文件在同一目录下时：直接图片名.后缀
2. 当当前文件和目标文件不在同一目录时：目录名/目录名…/图片名.后缀
3. 当当前文件的文件夹和目标文件的文件夹在同一目录时：…/目录名/图片名.后缀（…/代表返回上级目录）

注意：相对路径使用“/”字符作为目录的分隔字符，而绝对路径可以使用“\”或“/”
字符作为目录的分隔字符。在网页编程时，很少会使用绝对路径,通常在网页里指定
文件时，都会选择使用相对路径。

alt=“图片加载失败时显示”
title=“鼠标滑到图片上时显示”
1. title可用于所有标签

img自带的3px的底部留白

vertical-align:垂直方向对齐方式 (只对图片生效)

属性值	含义
baseline	基线默认值
bottom	底线可以解决img自带的3px的底部留白
middle	中线可以解决img自带的3px的底部留白
top	顶线可以解决img自带的3px的底部留白

应用：
1. 解决图片底部三像素的留白
2. 调整小图标和文字对齐的方式

布局标签

div 划分网页板块
1. 双标签/不带任何自带样式/独占一行
span 小文本
1. 双标签/没有任何样式，适合css选取小段文字/同行显示

列表标签

无序列表

 <ul>
            <li><b>哈哈哈</b><>
            <li><a href="">嘿嘿嘿嘿</a><>
            <li>嘻嘻嘻<>
          </ul>

快速生成无序列表ul里面有10个li：ul>li*10{li里的内容$}+tab/enter $代表从1开始。
应用场景：网页导航，新闻列表，商品列表。

有序列表

<!--排序方式是大写字母顺序，开始位置为C，（A，B，C，···。C的位置为3）-->
<ol type="A" start="3">
            <li>哈哈哈1</li>
            <li>哈哈哈2</li>
            <li>哈哈哈3</li>
            <li>哈哈哈4</li>
        </ol>

type属性：排序方式1(数字)/A（大写字母）/a（小写字母）/I(大写罗马字母)/i(小写罗马字母)
start属性：排序的起始值，必须是数字。

自定义列表

 <dl>
         <dt>图片/名词</dt>
         <dd>图片说明/名词的解释</dd>
         <dd>可有多个</dd>
       </dl>

应用场景：上图下字，左图右字。

表格标签：table

主要用在后台系统展示数据，一般不用在前台网页布局，有自动调节大小的功能

table 表格
1. 边框 border=“数字”，单位是像素。
2. 宽度 width=“数字”，单位px，height=“数字”，单位px；
3. 表格位置align
  
  left 居左默认值
  
  right 居右
  
  center 居中
4. 单元格之间间距cellspacing=“数字”，一般设置为0，去掉单元格之间的间距。
5. 调整内容到单元格的左右距离 cellpadding=“数值”
6. 以上都是table自带属性。
tr 行
1. 水平对齐：align
  
  left 居左默认值
  
  right 居右
  
  center 居中
2. 垂直对齐：valign
  
  middle 居中默认值
  
  top 居上
  
  bottom 居下
td 列
1. 水平对齐：align
  
  left 默认值
  
  right 居右
  
  center 居中
2. 垂直居中：valign
  
  middle 默认值居中
  
  top 居上
  
  bottom 居下
合并
1. 列合并：colspan
2. 行合并：rowspan
3. 合并步骤
  
  a. 补全表格，有几行几列就生成几行几列的表格
  
  b. 观察属于行合并还是列合并，那个不同合并那个
  
  c. 确定属性后，观察合并几个单元格，属性对应的值就是几
  
  d. 将合并的属性放到合并的起始的单元格
  
  e. 注释掉多余的单元格
  
  遇到行合并和列合并时，先进行列合并

<table border="1" width="300" height="100" align="center" cellspacing="0" cellpadding="0">
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
<hr>
<table border="1" width="300" height="100" align="center" cellspacing="0" cellpadding="0">
    <tr>
        <td colspan="2"></td>
        <!-- <td></td> -->
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
<hr>
<table border="1" width="300" height="100" align="center" cellspacing="0" cellpadding="0">
        <tr>
            <td></td>
            <td rowspan="2"></td>
        </tr>
        <tr>
            <td></td>
            <!-- <td></td> -->
        </tr>
    </table>

在这里插入图片描述

<table border="1" width="700" height="400" align="center" cellspacing="0">
        <tr>
            <td colspan="5" align="center">H5</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr align="center">
            <td width="100">姓名</td>
            <td width="150"></td>
            <td>年龄</td>
            <td></td>
            <td rowspan="5">照片</td>
        </tr>
        <tr align="center">
            <td>是否毕业</td>
            <td>是</td>
            <td>专业</td>
            <td></td>
            <!-- <td></td> -->
        </tr>
        <tr align="center">
            <td>大学</td>
            <td colspan="3"></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr align="center">
            <td>从事工作</td>
            <td colspan="3"></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <td>H5基础</td>
            <td colspan="2"></td>
            <!-- <td></td> -->
            <td></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td>自我性格描述</td>
            <td colspan="4"></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr width="150">
            <td rowspan="2">自我简述</td>
            <td colspan="2" rowspan="2"></td>
            <!-- <td></td> -->
            <td colspan="2"></td>
            <!-- <td></td> -->
        </tr>
        <tr width="150">
            <!-- <td></td> -->
            <!-- <td colspan="2"></td> -->
            <!-- <td></td> -->
            <td colspan="2"></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td colspan="5" align="center">欢迎</td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
    </table>

表格新增标签及属性

标题标签 caption
1. caption-side:top(默认)/bottom 标题的位置
```
 <table>
      <caption>标题</caption>
  </table>
```

列标题 th

 <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年纪</th>
  </tr>

行分组
1. 表头可选
2. 表体可以有多个
3. 表尾可选

列分组 colgroup

span: 几列为一组

<colgroup>
      <col span="1" class="first">
      <col span="2" class="second">
      <col span="1" class="third">
  </colgroup>

单元格之间的距离：border-spacing：数值+px 一般设置0。加在表格身上
合并边框 border-collapse:collapse; 加在表格身上
表格固定 table-layout:auto(自动)/fixed(固定) 加在表格身上
1. 设置表格为fixed提高浏览器加载速度
垂直对齐方式 vertical-align: baseline/top/bottom/middle 可以在单元格中生效

表单标签 form

<form action="" method=""></form>

	作用
action	提交路径	如：https://www.baidu.com
method	提交方式GET/POST	1.GET一般用来获取数据，POST一般用来提交数据 2.GET请求安全系数较低。 3.GET可以传送的数据量较小一般不超过2kb，POST可以传送的数据量较大理论上不受限制

表单元素 input 单标签/在同一行显示

文本输入框

请输入姓名：<input type="text" placeholder="请输入姓名" value="小白">

placeholder：提示信息 value：默认值

密码输入框

请输入密码：
          <input type="password">

提交按钮
```
<input type="submit" value="搜索">
```
value：按钮文本
重置按钮
```
<input type="reset" value="重新">
```

普通按钮

<input type="button" value="普通按钮">

表单元素新增属性

单选框 name的属性必须有，且值必须一样才能够互斥，checked 默认选中 disabled 禁止选中
```
<input type="radio" name="sex" checked>男<input type="radio" name="sex">女
```

多选框 checked 默认选中 disabled 禁止选中

 <input type="checkbox" checked disabled>M416
  <input type="checkbox">AKM

下拉列表 selected:默认选中

<select name="height" id="">
    <option value="1">175</option>
    <option value="2" selected>176</option>
  </select>

多行文本域
1. 禁止用户缩放：给textarea 添加 resize:none;
```
 <textarea name="" id=""></textarea>
```
文件上传
```
<input type="file"> 
```

扩大表单选中范围 label

for的属性值指向选择元素的id名

<label for="man">
    <input type="radio" name="sex"  id="man">男  
  </label>

表单字段集 fieldset

字段集标题 legend

<fieldset>
    <legend>标题</legend>
    <input type="text">
  </fieldset>

去掉表单元素获取焦点时候的边框：outline:none;

链接外部文件标签 link

标签定义文档与外部资源的关系。
标签最常见的用途是链接样式表。
link 元素是空元素（单标签），它仅包含属性。
link元素只能存在于 head 部分，不过可以出现多次。

链接一个外部样式表：

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

属性	作用
rel	规定当前文档与被链接文档之间的关系。
type	规定被链接文档的 MIME 类型（多用途互联网邮件扩展类型）。
href	规定被链接文档的位置。

扩展MIME类型：Multipurpose Internet Mail Extensions，多用途互联网邮件扩展类型，是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名,以及一些媒体文件打开方式。

标签(元素)类型 display

内联（行内）元素(inline) span b strong i em a sub sup img
1. 宽高不生效，由内容决定
2. 在同一行显示
3. 盒模型属性padding的左右生效，上下显示不准确;margin的左右显示准确，上下不准确
4. 内联元素添加浮动之后，会转换成块级元素
块级元素(block) h1-h6 div p ul li dl dt dd ol form table
1. 宽高生效
2. 独占一行
3. 盒模型属性都生效
4. 一般作为容器去包裹其他元素,p标签一般不包裹块级元素，也不包裹自己
行内块元素(inline-block) input (img)
1. 在同一行显示
2. 宽高生效
3. 盒模型属性都生效

元素类型转换 display

属性值	含义
block	块
inline	内联
inline-block	内联块
none	隐藏元素，隐藏之后不占位

注：visibility:hidden;隐藏元素，隐藏之后会占位

解决横向排列的元素之间的空格：指的是内联元素或者行内块元素写代码时换行导致的空格出现。
1. 将标签代码写到同一行
2. 添加浮动
3. 给元素添加一个父元素，设置font-size:0;然后单独设置该元素的字体大小

元素类型

置换元素：浏览器会根据标签以及标签内的属性值来显示不同的内容
input的type类型， img的src ，
textarea的内容在变
，select中的option内容会变。（img或者input有的标签可以设置宽高，是因为img，input标签属于置换元素。）
非置换元素:除了置换元素

字体图标的使用（iconfont-阿里）

注册账号
普通字体图标的使用
1. 搜索对应的图片，点击加入购物车
2. 完成后点击添加至项目
3. 下载项目到本地站点，解压文件，不要删除任何文件
4. 在使用图标的文件地方用link引入iconfont.css文件
```
      
<link rel="stylesheet" 
href="download/font_2135748_v7l4jintarp/iconfont.css">
```
5. 使用，必须加 iconfont的名字，其次添加所需图片的class名。（一般在下载的文件中有demo_index.html文件，打开之后有具体的引入方法。）
```
<span class="iconfont icon-jipiao">哈哈哈</span>   
```

彩色图标的使用

引入js文件

<script src="download/font_2135748_v7l4jintarp/iconfont.js"></script>

添加通用样式

.icon {
        
        
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

使用只需要改id名就行（一般在下载的文件中有demo_index.html文件，打开之后有具体的引入方法。）
```
 <svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-tubiaov-daochushangchuan-"></use>
 </svg>
```

H5新增的标签(ie8及以下浏览器版本不生效)

新增标签特点：语义化（双标签）
1. 头部 header
2. 导航 nav
3. 板块 section
4. 侧边栏 aside
5. 主要内容区域 main
6. 有图文 figure ficaption
```
<figure>
      <img src="">
      <figcaption>图片说明</figcaption>
  </figure>
```
7. footer 底部
8. article 文章
9. mark 标记内联
10. time 时间标签内联

多媒体标签

音频

<audio src="zy/梦然-少年.mp3" controls autoplay muted loop></audio>
<!--兼容写法  浏览器从上到下解析支持那种格式就播放哪个-->
  <audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
  </audio> 
<!--
 controls: 控件
 autoplay: 自动播放 谷歌和火狐不支持
 muted: 静音 静音之后火狐支持自动播放
 loop: 循环-->

视频

<video src="zy/zyx.mp4" controls autoplay loop poster="zy/7.jpg"></video>
<!--兼容写法 浏览器从上到下解析支持那种格式就播放哪个-->
<video width="800" height="">
    <source src="myvideo.mp4" type="video/mp4"></source>
    <source src="myvideo.ogg" type="video/ogg"></source>
    <source src="myvideo.webm" type="video/webm">
    </source>
</video>
   <!--属性同音频
   autoplay: 静音之后谷歌和火狐都支持自动播放
   poster: 视频没有播放之前显示的图片 -->

CSS 层叠样式表

css概念

英文：Cascading Style Sheets
css是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译，是用来表现HTML或XHTML的标记语言，由W3C的CSS工作组发布推荐和维护的.运用CSS样式可以让页面变得美观。
层叠
- 通过不同的选择器选择同一个标签的时候，设置了相同的属性，但是设置了不同的属性值，根据选择器的权重值，权重值高的优先显示，如果没有冲突的样式，正常显示
样式表
1. 内联/行内样式表
2. 内部样式表
3. 外部样式表

CSS语法

CSS语法由三部分构成：选择器、属性和值：

selector {property: value}

选择器{
属性:属性值;（声明）

属性:属性值;（声明）

属性:属性值;（声明）

……
}
- 选择器和声明组成
- 每条声明以分号结尾
- 最后一条声明可以省略分号

css样式表

内联/行内样式表：在标签内部设置
1. 给标签生成一个style的属性
2. style的属性值为css属性:css属性值;css属性:css属性值;
```
<div style="width:200px;height:100px;background-color:red;color:blue;"></div>
```

内部样式表

在head标签里面，生成一个style的双标签
在style的标签里面写对应的css样式

 <style>
        div {
      
      
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

外部样式表

新建一个css文件夹
在css文件夹的下面新建一个.css后缀的文件
引入外部样式表
1. 在html文件的head标签里面生成一个link单标签

<link rel="stylesheet" href="css/外部样式表.css" type="text/css">

属性	作用
rel	当前关联的文件类型
stylesheet	样式表
href	css文件的路径
type	文件类型默认就是css文件类型

ii.@import url()

<style>
      @import url(路径);
    </style>

区别：

1.@import只能引入css文件，link不止可以引入css文件

2.@import的css文件会在结构加载完成之后，才开始加载， link是结构和样式同时加载

3. @import只能在ie5以上支持，link都支持

样式表的权重（优先级）
1. 内联>内部
2. 内联>外部
3. 内部和外部，根据就近原则，离得近的优先显示
样式表的选择
1. 内联样式表:css属性较少的时候，还需要考虑优先级的问题
2. 内部样式表：写小的案例
3. 外部样式表：整页开发，结构样式分离

css属性

	属性	属性值	注
宽度	width	数值+px	必须要有单位，0可以不加单位。只对块级元素有效
高度	height	数值+px	必须要有单位，0可以不加单位。只对块级元素有效

计算宽度：width: calc(100% - 300px) 计算符号两边一定要有空格

字体属性

	属性	属性值	注
字体大小	font-size	数值+ 1.px 2.em 3.rem	1.一般情况是偶数，并且一般不低于10px； 2.em默认值是1em=16px，父元素有字体大小的话，参考的是父元素的字体大小； 3.rem默认值是16px，根元素(html)有字体大小时，参考根元素的字体大小(一般用在移动端)。
字体加粗	font-weight	1.bold 2.normal 3.100-900	1.bold定义粗体字符。 2.normal是默认值，定义标准的字符。 3.100-900定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
字体样式	font-style	1.italic 2.normal 3.oblique 4.inherit	1.italic浏览器会显示一个斜体的字体样式。 2.normal默认值，浏览器显示一个标准的字体样式。3.oblique浏览器会显示一个倾斜的字体样式。 4.inherit规定应该从父元素继承字体样式。
字体类型	font-family	中文/英文。	1.中文要加引号，如：“宋体”。 2.英文一个单词不用引号，多个单词要加引号引起来。3.多个字体类型用逗号隔开，浏览器会依次检索，有该字体直接显示，找到最后都没有该字体时，显示默认字体。

字体属性的复合写法 font

font：字体加粗字体倾斜字体大小/行高字体类型
```
font: bold italic 20px/40px "宋体";
```
1. 字体加粗字体倾斜为可选
2. 字体大小/行高字体类型必选，并且必须是该格式，顺序不能换

文本属性

	属性	属性值	注
文本颜色	color	1.颜色单词 2.十六进制3.rgb(红绿蓝) 4.rgba(红绿蓝阿尔法 )	1.颜色的名称，如red, blue,等，不区分大小写. 2.十六进制符#RRGGBB 和 #RGB（比#ff0000）。"#" 后跟 6 位或者 3 位十六进制字符（0-9, A-F）。 3.规定颜色值为 rgb 代码的颜色，函数格式为rgb(R,G,B)，取值可以是 0-255 的整数或百分比。 4.rgba扩展了 RGB 颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度。a 表示透明度：0=透明；1=不透明。
文本水平对齐方式	text-align	1.left 2.right 3.center 4.justify	1.left 左对齐默认值 2 .center 居中 3.right 居右 4.justify 两端对齐内容向两边，加大中间的间距
行高	line-height	1.数字 2.数值+px	1.数字是字体大小的倍数。 2.去掉标签自带的行高:设置line-height(行高)和font-size(字体大小)值为一样应用： 1.多行文本：加行高可以增大行和行之间的距离 2.单行文本：将行高和元素的高度设置成一样，实现垂直居中
文本修饰	text-decoration		1.underline下划线 2.overline上划线 3.line-through删除线 4.none去掉下划线
文本缩进	text-indent	1.数值+px/em	1.只对独占一行的元素才生效 2.可以设置负数 3.缩进两个词：设置text-indent:2em; 参考当前元素的字体大小
字符间距	letter-spacing	数值+px	1.中文：加大字和字之间的距离 2. 英文：加大字母之间的距离
单词之间的距离	word-spacing	数值+px	只对英文生效，加大单词和单词之间的距离
大小写转换	text-transform		1.首字母全部大写 capitalize 2.全部小写 lowercase 3.全部大写 uppercase 4.默认值 none

列表属性

列表符号：list-style-type
1. disc 实心圆
2. square 方块
3. circle 空心圆
4. none 去掉列表符号（也可以用list-style:none去掉列表符合）

边框属性

	属性	属性值	注
边框颜色	border-color	1.颜色单词 2.rgb(0-255，0-255，0-255) 3.十六进制	默认情况下，边框颜色和字体颜色一样。
边框样式	border-style	1.实线 solid 2.虚线 dashed 3.点状线 dotted 4.双实线 double
边框大小	border-width	数值+px

边框的复合写法 border: 边框大小边框样式边框颜色;顺序不固定
单方向边框 border-方向(top/right/bottom/left/none(去掉边框)):边框大小边框样式边框颜色;
边框实现三角形

 /*向右的三角*/
    div {
    
    
      height: 0;
      width: 0;
        /*transparent 透明*/
      border-top: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 20px solid red;
    }

背景属性

背景颜色 background-color
1. 颜色单词/rgb（0-255，0-255，0-255）/#十六进制
2. rgba(0-255,0-255,0-255,0-1)；0表示完全透明 1表示不透明值越小越透明
背景图 background-image:url(图片路径)

背景图是否重复 background-repeat

属性值	含义
repeat	重复
repeat-x	在x轴重复
repeat-y	在y轴重复
no-repeat	不重复

背景图的位置 background-position: x轴 y轴;

属性值	含义
数值+px	向右和向下为正数,反之,可以设置负数
关键字	1.水平方向：left/center/right 2.垂直方向:top/center/bottom

复合写法：

background: 背景颜色背景图背景图是否重复背景图的位置/背景图大小;

顺序不固定
- 展开的写法写到复合写法的后面,不然会被复合写法覆盖掉
背景图和img使用的条件
1. img插入的图片占位, 图片作为网页的内容
2. 背景图不占位, 修饰性的图片用背景图插入

浮动

应用场景：让纵向排列的元素横向排列

float

属性值	含义
none	默认值，不浮动
left	左浮动
right	右浮动

浮动特点
从父元素的边缘开始按顺序挨个排列
浮动元素会脱离文档流,浮动元素会遮挡后面的兄弟元素,但是不会遮挡文字
浮动元素的宽度如果超出父元素的宽,后面的元素会掉到浮动设置的位置
浮动元素会影响后面的兄弟,但是不会影响到前面的兄弟
内联元素添加浮动之后，会转换成块级元素

PS切图方法

矩形工具(一次只能切一个)
1. 选中需要的图片 ctrl+c
2. ctrl+n 弹框中按回车
3. ctrl+v 粘贴图片
4. 菜单项文件->导出->快速导出为png格式
切片工具(可以切多个)
1. 选中多个需要的图片
2. 菜单项文件->导出->存储为web所用格式
3. 弹框中根据需求修改图片格式,完成点击存储
4. 存储的时候文件资源器的图像选择所有用户切片
5. 在对应的文件下面会生成images的文件夹

盒模型

内容区(content) ：显示文字/图片/视频等的区域，宽高确定内容区

内填充(padding)：

padding值的设置

值个数	声明	作用范围
一个值	padding:10px	四周
两个值	padding:10px 20px;	上下左右
三个值	padding: 10px 20px 30px;	上左右下
四个值	padding: 10px 20px 30px 40px;	上右下左

单方向 padding-方向(left/right/top/bottom): 数值+px;

padding值的特点
会撑大盒子,如果不想被撑大的话，要在原来宽高的基础上，减去对应方向的padding值
padding值不能设置负数
背景图/色可以在padding区域显示
可以用来调整内容区到盒子边缘的位置

边框(border)：边框也会撑大盒子，设计图从边框里面开始量取

外边距(margin)

值个数	声明	作用范围
一个值	padding:10px	四周
两个值	padding:10px 20px;	上下左右
三个值	padding: 10px 20px 30px;	上左右下
四个值	padding: 10px 20px 30px 40px;	上右下左

margin值的特点
margin值不会撑大盒子，但是会影响到旁边的元素
margin可以设置负数
背景图和背景色不在margin区域显示
调整自己和别的元素之间的距离
margin:auto; auto: 浏览器会根据当前窗口的宽，减去元素的宽，将剩余的空间进行一个自动的平均分配，实现左右的居中，垂直是不生效的

margin的bug

margin的传递：给元素的第一个子元素添加上边距的时候，边距会错误加在父元素的身上

解决margin传递的方法
使用padding
给父元素添加边框
给父元素或者是该元素添加浮动
给父元素添加overflow:hidden(溢出隐藏)

margin的重叠：给上面的元素设置下边距，给下面的元素设置了上边距，边距会产生重叠，并且以两个值的最大值显示，左右的间距是不会出现重叠的
- 解决margin重叠的方法：只给一个盒子添加外边距。

怪异盒模型

标准盒模型：box-sizing:content-box
1. 盒子宽度 = 内容区的width+padding的左右+border的左右
怪异盒模型：box-sizing:border-box (ie8以下不支持)
1. 盒子宽度 = 内容区的width

弹性盒布局 flex

父元素

形成弹性盒 display:flex;

主轴对齐方式 justify-content

属性值	含义
flex-start	默认值主轴起点
flex-end	主轴终点
center	主轴中心
space-between	两端对齐
space-around	中间空隙是两边的2倍
space-evenly	平均分配

交叉轴 align-items

属性值	含义
stretch	默认值拉伸 1.主轴是横向的话，看到该效果需要去掉子元素的高度，子元素的高会拉伸到和父元素一样高 2.主轴是纵向的话，看到该效果需要去掉子元素的度，子元素的宽会拉伸到和父元素一样宽)
flex-start	交叉轴的起点
flex-end	交叉轴的终点
center	交叉轴的中心

主轴的方向flex-direction

属性值	含义
row	默认值横向从左向右
row-reverse	横向从右向左
column	纵向从上到下
column-reverse	纵向从下到上

换行 flex-wrap

属性值	含义
nowrap	默认值不换行
wrap	换行

多行之间的对齐方式 align-content

属性值	含义
stretch	拉伸
flex-start	整个盒子的起始
flex-end	整个盒子的终点
center	主轴中心
space-between	多行内容两端对齐
space-around	多行内容中间空隙是两边的2倍
space-evenly	多行内容平均分配

子元素

子项在交叉轴的对齐方式 align-self 重写父元素中交叉轴对齐方式(align-items)

属性值	含义
stretch	拉伸
flex-start	交叉轴的起点
flex-end	交叉轴的终点
center	交叉轴的中心

排列顺序 order
1. 数值值越大，越在后面排，可以为负数
放大比例 flex-grow
1. 0 不放大
2. 数值
压缩 flex-shrink
1. 1 默认值压缩
2. 0 不压缩
3. 滚动导航的实现
  
  1.设置子项不压缩 flex-shrink:0;
  
  2.给父元素设置溢出显示滚动条 overflow-x:auto;
子项的宽度 flex-basic:数值+px
复合属性 flex:flex-grow(0) flex-shrink(1) flex-basic(auto);
flex:1; 子项占满整个剩余控件

利用弹性盒对盒子进行水平垂直居中

/*父元素*/ div{
      
      
      display:flex;
      justify-content:center;
      align-items:center;
    }

溢出属性

overflow(overflow-x（x轴溢出）/overflow-y（y轴溢出）)

属性值	含义
visible	默认值显示
hidden	溢出隐藏
scroll	显示滚动条
auto	内容没有溢出正常显示，溢出显示滚动条

单行文本溢出显示省略号

步骤一：设置宽度

步骤二：设置不换行 white-space:nowrap

步骤三：设置溢出隐藏 overflow:hidden

步骤四：设置文本溢出显示省略号 text-overflow:ellipsis

定位属性 position

static 默认值
relative 相对定位
1. 参考物：自己本身
2. 移动距离：left/right/bottom/top:数值+px
3. 特点
  1. 移动之后依然占位
  2. 定位元素的层级要比普通元素的层级要高

aboslute 绝对定位

参考物(包含块)：参考有定位属性(除static属性之外)的祖先元素,设置绝对定位的元素，会一层一层向上找有定位属性的祖先元素，谁有定位属性，就参考谁去移动，如果找到body也没有找到有定位属性的祖先元素的话，就参考body，也就相当于浏览器的窗口，一般使用相对定位去形成参考物。（子绝父相）
移动距离：left/right/bottom/top:数值+px
特点
1. 脱离文档流，会遮挡后面元素的文字
2. 给元素设置绝对定位后，margin:auto会失效
3. 给内联元素添加定位后，内联元素会变成块级元素
4. 给元素不设置宽，自适应宽度的时候，加了绝对定位，自适应会失效，需要重置元素的宽width:100%
5. 定位元素的层级要比普通元素的层级要高

应用场景

有重叠效果

<div>
    <img src="img/1.webp" alt="">
    <ul>
        <li class="first"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

div {
        
        
      width: 800px; /*设置宽高和图片一样的宽高*/
      height: 300px;
      border: 10px solid black;
      position: relative;
  }
  ul {
        
        
      /* width: 400px;
      height: 25px; */
      background-color: blueviolet;
      position: absolute; /*参考div去定位*/
      bottom: 30px;
      right: 50px;
  }

二级菜单
元素水平垂直居中

<div class="box1">
       <div class="box2"></div>
     </div>

.box1 {
        
        
    width: 600px;
    height: 400px;
    background-color: pink;
    margin: 0 auto;
    position: relative;
  }

.box2 {
        
        
    width: 200px;
    height: 200px;
    background-color: cornflowerblue;
    position: absolute;
    /* left: 150px; */
    /* top: 100px; */
    left: 50%; /*当前参考元素的宽度的50%*/
    margin-left: -100px; /*向左拉取当前盒子宽度的一半*/
    top: 50%;
    margin-top: -100px;/*向上拉取当前盒子高度的一半*/
}

fixed 固定定位

参考物：浏览器窗口
移动距离：left/right/bottom/top
特点
1. 不会跟随滚动条进行滚动
2. 脱离文档流
3. margin: auto;失效
4. 宽度自适应会失效，需要重新设置宽度
应用场景
- 侧边栏/回到顶部/头部导航/广告

sticky 粘性定位
1. 参考物：浏览器窗口
2. 移动距离 top
3. 特点
  - 未达到top值之前，普通元素，达到top值之后类似于固定定位
定位元素的层级关系 z-index
1. auto 默认值
2. 数值数值越大，层级越高，在最上面显示，可以为负数

宽高自适应

宽度自适应
1. 宽度不设置，参考父元素
2. 设置百分比，参考父元素
3. 最大宽度(max-width)和最小宽度(min-width)
高度自适应
1. auto 自动根据内容撑开
2. 高度不设置根据内容撑开
3. 百分比参考父元素
4. 最小高度(min-height)和最大高度(max-height)
5. 一屏页面(盒子的宽高和当前浏览器的宽高一样)的实现方式
```
html,body{
        
        
    height:100%;
  }
  div{
        
        
    height:100%;
    width:100%; /*(可设，可不设)*/
  }
```

高度塌陷（浮动造成的影响）

产生条件：父元素不设置高度，想要子元素撑开，子元素浮动。
解决方法
1. 给高度塌陷的父元素添加overflow:hidden;(触发BFC)
  - 弊端：会把溢出父元素的内容隐藏掉
2. 给浮动元素的下方添加一个块级元素(一般添加的是div),给块级元素设置clear属性
  1. clear:left（左浮动）/right（右浮动）/both（两侧的浮动）; 清除浮动元素对后面的元素带来的影响
  2. clear只对块级元素生效
  3. 弊端：代码中会出现很多空的标签，造成代码冗余
3. 万能清除法，给高度塌陷的父元素，通过伪元素选择器的方法添加元素
```
/*高度塌陷的父元素*/div::after{
        
        
    content:"";
    clear:both;
    display:block;
  }
```

锚点

作用：实现在同一个页面不同板块之间的跳转
利用a标签的href属性和id名(必须是id名)进行联系
```
<a href="#box">跳转</a>
    <div id="box"></div>
```

css属性的继承

给元素设置样式之后，该元素的后代都会具有该样式
可以继承
1. 字体类：font-size(字体大小)font-weight(字体加粗) font-style(字体倾斜)font-family(字体类型)
2. 文本类：color(文本颜色) text-indent(缩进) line-height(行高) letter-spacing(字符间距) word-spacing(单词之间的距离) text-align(文本对齐方式)
3. 列表属性：list-style
不可继承
1. text-decoration(文本修饰) width height float padding margin border

BFC

块级格式化上下文(独立渲染的区域)
触发条件
1. float的值为left/right
2. position的值为absolute/fixed
3. display的值inline-block/table-caption/table-cell/flex(弹性盒)/inline-flex
4. overflow的值为hidden/scroll/auto
特性
1. 在BFC的区域，浮动元素的高度也会计算在内（解决高度塌陷）
2. BFC的区域不会与浮动盒子重叠（两栏布局）

过渡属性（ie9及以下浏览器版本不支持）

需要过渡的属性：transition-property：css属性
过渡持续时间：transition-duration：数值+s/数值+ms 1s=1000ms
过渡延迟时间：transition-delay:数值+s/数值+ms 1s=1000ms
过渡执行效果：transition-timing-function：linear(匀速)
复合写法：transition:需要过渡的属性过渡持续时间过渡延迟时间过渡执行效果;（顺序不固定，出现一个时间或者两个时间的话，默认第一个时间为执行时间）
1. transition: all 1s; 过渡所有的属性，过渡时间为1s
利用外部样式表写过渡属性存在的问题及解决
1. 问题：利用外部样式表写过渡属性可能会在页面初始的时候就有过渡效果
2. 解决：给整个结构也就是html的标签下面添加
3. 过渡属性对 display:none到display:block是不生效的

浏览器内核(浏览器的解析代码机制)

ie浏览器 Trident内核 -ms-
火狐浏览器 Gecko内核 -moz-
欧鹏浏览器 Blink内核 -o-

谷歌浏览器 Webkit内核 -webkit-

过渡的兼容写法

 /* 标准写法 */
  transition: all 1s;
  /* 火狐*/
  -moz-transition: all 1s;
/*谷歌*/
  -webkit-transition: all 1s;

渐变（ ie9及以下不支持）

线性渐变：background-image/background:linear-gradient(渐变方向,颜色1,颜色2……)
1. 方向 设置方向一定要加 to
  1. to bottom; 向下
```
 background-image: linear-gradient(to bottom, red, yellow, blue, green);
```
  2. to top; 向上
  3. to left 向左
  4. to right 向右
  5. to right top 右上角
  6. to right bottom 右下角
  7. to left top 左上角
  8. to left bottom 左下角
  9. 数值+deg
```
 background-image: linear-gradient(45deg, red, yellow, blue, green);
```

重复性的线性渐变 background-image/background: repeating-linear-gradient(渐变方向,颜色1,颜色2……)

.box2 {
      
      
       /* 0-10px 红色纯色 10px-50px 红色到蓝色的过渡 50px之后是蓝色纯色*/
        background-image: repeating-linear-gradient(red 10px, blue 50px);
        font-size: 50px;
        line-height: 50px;
    }

径向渐变 background-image/background:radial-gradient(方向,颜色值1,颜色值2……)
1. 方向：和背景图的位置取值一样，设置方向一定要加浏览器前缀，否则不生效
```
background-image: -webkit-radial-gradient(left top, red, yellow);
```
重复性的径向渐变 background-image: repeating-radial-gradient(方向, 颜色值1,颜色值2……);
```
background-image: repeating-radial-gradient(blue, red 20px);
```

2d变形 transform:位移|旋转|缩放|倾斜

位移

transform:translateX(数值+px) 向右和向下为正数
transform:translateY(数值+px) 向右和向下为正数
写一个值代表的是x轴的位移
```
 transform: translate(100px); 
```

两个方向同时位移

transform: translateX(100px) translateY(-100px);
transform: translate(100px,-100px);

移动之后，原来的位置依旧存在

利用位移实现水平垂直居中

优点：不论大盒子和小盒子的宽高如何变化，都能够识别到宽高的百分比

.box{
          
          
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%); /*百分数参考的是当前盒子的宽高*/        
  }

旋转
1. x轴的旋转 transform:rotateX(数值+deg)
2. y轴的旋转 transform:rotateY(数值+deg)
3. z轴的旋转 transform:rotateZ(数值+deg) 顺时针是正数，逆时针是负数
4. 只写一个值：
  transform: rotate(-600deg); 代表的是z轴的旋转
5. 位移和旋转同时存在
```
/*表示先位移后旋转*/
 transform: translateX(300px) rotateZ(90deg);
 /*先旋转，坐标轴会跟着变化，位移会根据新的坐标轴去移动*/
 transform: rotateZ(90deg) translateX(300px);
```
缩放
1. x轴的缩放 transform:scaleX(数值) 1：正常， 0-1之间是缩小， >1是放大。
2. y轴的缩放 transform:scaleY(数值) 1：正常，0-1之间是缩小， >1是放大。
3. 两个方向都有
```
div{
        
        
    transform: scaleX(0.4) scaleY(2);
    transform: scale(0.4, 2);
    transform: scale(2);
  }
```
倾斜
1. x轴的倾斜 transform:skewX(数值deg)
2. y轴的倾斜 transform:skewY(数值deg)
3. 一个值代表的只是x轴的倾斜
4. xy轴的倾斜
```
div{
        
        
   transform: skew(40deg, 50deg);
}
```
变形原点：transform-origin:水平垂直
1. 水平：left/center/right
2. 垂直：top/center/bottom
3. 数值+px
4. 百分比

动画（ie9及以下浏览器版本不支持）

定义动画

@keyframes 动画名{
      
      
    关键帧 划分时间
    from{
      
      } /*0%*/
    to{
      
      } /*100%*/
  }
  /*若动画执行时间是5s*/
  @keyframes 动画名{
      
      
    0%{
      
      } /*0s*/
    20%{
      
      } /*1s*/
    40%{
      
      } /*2s*/
    60%{
      
      } /*3s*/
    80%{
      
      } /*4s*/
    100%{
      
      }/*5s*/
  }
  /*兼容写法
   @-moz-keyframes longer{}
   @-webkit-keyframes longer{}*/

使用动画
1. animation-name: 动画名
2. animation-duration: 动画执行的时间 s/ms
3. animation-delay: 动画的延迟时间 s/ms
4. animation-iteration-count: 动画执行的次数数值/infinite（无限循环）
5. animation-timing-funcition: 动画的执行效果 linear(匀速)
6. 复合写法 animation: 动画名动画执行的时间动画的延迟时间动画执行的次数动画的执行效果; animation: longer 1s infinite linear;
7. 兼容写法 -webkit-animation
8. animation-direction: 动画的播放方向；noraml(正向)/reverse(反向)/alternate(交替运行)
9. animation-fill-mode:动画停止的关键帧(要限制次数才可以停止)；backwards(第一帧)/forwords(最后一帧)如果设置了动画执行的方向为反向，关键帧起始和结尾也会变
10. animation-play-state:动画是否停止播放 running(播放)/paused(暂停)
```
div:hover {
        
        
     animation-play-state: paused;
  }
```

3d变形 transform

位移
1. z轴的位移 transform:translateZ(数值+px)
2. 三个轴都位移 transform:translate3d(x轴,y轴,z轴)
旋转
1. x轴的旋转 transform:rotateX(数值+deg)
2. y轴的旋转 transform:rotateY(数值+deg)
3. 三个轴都旋转 transform:rotate3d(a,b,c,数值+deg) 0或者1 0表示不旋转 1表示旋转
缩放
1. z轴缩放 transform:scaleZ(数值) 0不显示，1正常，0-1缩小，>1放大。
2. 三个轴都缩放 transform:scale3d(x轴,y轴,z轴)
景深：persepctive:数值+px 近大远小
形成3d空间： transform-style:flat(2d平面)/preserve-3d(3d空间)属性加在变形元素的父元素身上
背部隐藏：backface-visibility: hidden;

透明度

使用透明度可以实现元素从无到有的过程

第一种 rgba()

div {
      
      
        width: 200px;
        height: 200px;
        background-color: rgba(165, 42, 42, 1); /*透明度从1*/
        transition: all 1s;
    }   
  div:hover {
      
      
      background-color: rgba(165, 42, 42, 0);/*过渡到0*/
  }

第二种 opacity

div {
      
      
    width: 200px;
    height: 200px;
    background-color: brown;
    opacity: 1; /*透明度从1*/
    transition: all 1s;
  }    
  div:hover {
      
      
     opacity: 0;  /*过渡到0*/ 
  }

两种的区别：rbga不会模糊到里面的文字，opacity会影响里面的文字

css3新增的属性

盒子阴影

box-shadow: x轴偏移 y轴偏移阴影模糊大小阴影大小阴影颜色阴影位置

eg：box-shadow: 10px 10px 20px 10px green inset;

文字阴影

text-shadow:x轴偏移 y轴偏移阴影模糊大小阴影颜色
eg：text-shadow: 10px 10px 10px blue;

圆角

border-radius：数值+px/百分比;
一个值四周
两个值对角
三个值左上对角右下
四个值顺时针
圆：border-radius:50%/100%;

背景图的大小

background-size: 宽度高度
百分比可能会变形
像素
关键字
1. cover 背景图会不断放大直到充满整个盒子，可能会出现裁切的情况
2. contain 背景图会不断的放大碰到边缘后就停止放大，可能会出现留白

背景图的固定

background-attachment:srcoll/fixed(固定) 背景图不会随滚动条滚动

响应式布局

概念：根据不同的分辨率，显示不同的样式
主要修改的样式
1. 元素的隐藏与显示
2. 宽度
3. 浮动排列
4. 文本对齐方式
5. 字体大小
优点：适配性好
缺点：
1. 增大工作量
2. 出现大量的隐藏元素，导致代码量冗余
3. 一般用在小网站

媒体查询

 @media 设备类型 and (媒体特性){}

设备类型
1. all 所有的设备
2. screen 显示器/笔记本/移动端设备
3. print 打印机

媒体特性

min-width(比最小值大)/max-width(比最大值小)
媒体特性的值后面不要加分号
多个媒体特性之间用and连接
and两侧必须有空格

<style>
        /* @media 设备类型 and 媒体特性{} */
        /* 设备宽度>1000 body显示红色 */ 
        @media screen and (min-width:1000px) {
       
       
            body {
       
       
                background-color: red;
            }
        }
        /* 设备宽度500-1000 body显示蓝色 */
        
        @media screen and (min-width:500px) and (max-width:999px) {
       
       
            body {
       
       
                background-color: blue;
            }
        }
        /* 设备宽度<500 body显示粉色 */
        
        @media screen and (max-width: 499px) {
       
       
            body {
       
       
                background-color: pink;
            }
        }
    </style>

移动端准备工作

meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

+ 视口 viewport
  - 布局视口：css所作用的区域，默认是980px;
  - 可视视口：所看到的区域
  - 完美视口/理想视口：将布局视口的宽和可视视口的宽设置为一样 width=device-width
+ 参数
  - width = device-width：宽度等于当前设备的宽度
    - initial-scale： 初始的缩放比例（默认设置为1.0）
    - minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
    - maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
    - user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

设备参数
1. 屏幕尺寸：对角线的长度
2. 分辨率：宽度或者高度容纳像素的个数
3. PPI: 每英寸显示的像素点的个数
4. 物理像素: ps量取的值
5. 逻辑像素：css设置的值
6. 逻辑像素比(dpr) = 物理像素/逻辑像素
  pc端ps量取多少值就设置多少的值，移动端，因为iphone4的出现，出现了视网膜高清屏，1个css像素对应的就不是1个物理像素，物理像素和逻辑像素就产生了不对等的情况
  1. 320设计图 dpr=1
  2. 750/640设计图 dpr=2
  3. 1080/>750 dpr=3
单位
1. 百分比
2. em/rem
  1. em: 字体大小参考父元素的字体大小
  2. rem: 参考根元素(html)的字体大小 (一般将根元素的字体大小设置为100px html{font-size:100px})
3. vw(设备宽度)/vh(设备高度)
  
  1vw = 设备宽度的1%， vh等同。 10vw = 设备宽度的10% ， vh等同。
  100vw = 设备宽度的100% ，vh等同。
根元素单位转换
1. 设计图宽度750/设备宽度 375px
  1rem = 100px
  100vw = 375px
  1rem = ??vw 1rem = 26.667vw
2. 设计图宽度640/设备宽度 320px
  1rem = 100px
  100vw = 320px
  1rem = ?? vw 1rem = 31.25vw

移动端布局

百分比布局(流式布局)
rem布局(等比缩放布局)
1. 观察设计图大小，确定dpr,在ps图像->图像大小，修改图像所对应的宽度(根据量取的值除以dpr)
2. 设置HTML标签的font-size:26.667vw或者24.154vw。
  1. 100vw = 设备分辨率 ( 设计图 / dpr ) 414
  2. 1vw = 414px / 100 = 4.14px
  3. 100px = 100/1vw(4.14px) = 24.154vw
3. 在设计图里正常测量，测量出来的结果是以px单位结尾的，我们写代码的时候要把这个px换算成rem，此时px和rem的比例就是1rem:100px。如：height:0.9rem;
混合布局(百分比+rem)

CSS Sprite（雪碧图）

雪碧图的本质：将项目中所有的小图进行整合，整合为一张大图，然后使用背景图片和background-position属性来进行定位，进而显示出整张大图里某一个小的区域。
雪碧图的优势：减少服务器端硬盘的寻址压力，减少HTTP请求次数；繁忙的网站有必要使用，但不繁忙的网站完全没有必要。
劣势：1. 使用麻烦；2.维护起来不能改变原有图片的位置。
使用注意事项：
1. .确定装载图片的容器，并为其设置宽高（图标的宽高）。
2. 为装载图片的容器设置background-image属性。
3. 测量要使用的图标在雪碧中的相对位置。
4. 为装载容器设置background-position属性，属性值就为刚刚量取的相对位置（该值都为负值，没有特性情况）。

grid(网格)布局

父元素

形成网格 display: grid
设置列宽 grid-templete-columns
1. 数值px 数值px 数值+px;
2. 百分比
3. fr 占比
4. repeat(重复的次数,宽度)
设置行高 grid-templete-rows
数值px 数值px 数值+px;
百分比
fr 占比
repeat(重复的次数,宽度)

划分网格区域 grid-template-areas

 grid-template-areas: 
          "a1 a1 a2"
          "a1 a1 a2"
          "a3 a3 a2"
        ;

行间距 row-gap: 数值+px
列间距 column-gap:数值+px

水平对齐方式 justify-content

属性值
start
end
center
space-between
space-around
space-evenly
stretch

垂直对齐方式 align-content

属性值
start
end
center
space-between
space-around
space-evenly
stretch

元素在网格里的水平对齐方式 justify-items

属性值
start
center
end
stretch

元素在网格里的垂直对齐方式 align-items

属性值
start
center
end
stretch

子元素

grid-area: 区域名

p:nth-of-type(2) {
        
        
            grid-area: a2;
    background-color: blueviolet;}

多列布局

列的个数 column-count:数值
列间距 column-gap:数值+px
列之间的边框 column-rule: 值和边框的值一样
break-inside: avoid; 防止瀑布流的阻断

css选择器

标签选择器

标签名{属性：属性值}
```
p{
      
      color:red}
```

id选择器

给标签添加id的属性，值为id名。
```
<div id="box">Lorem ipsum dolo</div>
```

#id名选择元素

#box {
      
        background-color: pink; }

id名不能重复
id只能有一个

class(类)选择器

给标签添加class的属性，值为class名
```
<div class="box box1">Lorem ipsum </div>
```

class名选择元素

.box {
      
      
              color: red;
          } 
.box1 {
      
      
              font-size:12px;
          }

class名可以重复
一个标签可以有多个class名，多个之间用空格隔开

后代选择器

选择器（父亲/祖先元素）选择器（子代/后代元素）{ css样式}

可以是多个选择器
选择器之间可以跨级，但是必须存在后代关系。

群组选择器

选择器，选择器，··· { css样式}
1. 同时选中多个不同或相同的选择器，为它们设置相同的css样式。

选择器权重

设置的样式	权重
内联样式	1000
id选择器	100
class选择器/伪类选择器	10
标签选择器	1
继承样式	0

选择器权重的特点

权重值越高，优先显示该样式
后代选择器的权重由每个选择器的权重值相加
群组选择器的权重值为选择器本身的权重值
权重值相同的，就近原则
继承样式的权重值是最低的

标签命名

英文单词并且语义化
驼峰命名
短线连接
下划线连接

通用选择器

 *{
    
    
          margin:0; /*外边距*/
          padding:0;/* 内填充*/
        }

css3新增选择器

属性选择器

属性选择器权重和class选择器一样为10 ，方括号前面可以加标签名，限制元素

用法	含义
[属性名]{}	属性名可以是自定义属性
[属性名=“属性值”]{}	属性名和属性值匹配
[属性名^=“值”]{}	属性值以某个值开头
[属性名$=“值”]{}	属性值以某个值结尾
[属性名*=“值”]{}	属性名中包含某个值

伪类选择器

权重值和class选择器一样为10

结构性的伪类

child系列

用法	含义
父元素子元素:first-child{}	父元素中的第一个孩子必须和该子元素匹配
父元素子元素:last-child{}	父元素中的最后一个孩子必须和该子元素匹配
父元素子元素:nth-child(n){}	1.父元素中的第n个孩子必须和该子元素匹配。2.n可以替换成even(偶数)odd(奇数) 也可以是表达式 2n等。3.n是自然数是从0开始
父元素子元素:only-child{}	父元素中只能有该子元素一个孩子

type系列

用法	含义
父元素子元素:first-of-type{}	这么多子元素中的第一个
父元素子元素:last-of-type{}	这么多子元素中的最后一个
父元素子元素:nth-of-type(n){}	这么多子元素的第n个子元素
父元素子元素:nth-last-of-type(n){}	这么多子元素中倒数第几个元素

目标伪类

元素:target{} 点击跳转到该板块之后样式才生效（与锚点合用）

<!--锚点-->
<a href="#box">点击跳到HTML板块</a>
  <div id="box">HTML板块</div>

#box:target {
        
        
    background-color: brown;
    color: chartreuse;
    font-size: 40px;
  }

状态伪类

状态	用法	示例
可编辑	表单元素:enabled{}	input:enabled{}
不可编辑	表单元素:disabled{}	input:disabled{}
获取焦点	表单元素:focus{}	input:focus{}
选中	单选/多选::checked{}	input:checked+span{}
高亮状态	元素::selection{}	div::selection{color:blue;background-color:red;}

动态伪类

在某种状态下所显示的样式。【爱恨原则（love hate）】

伪类选择器	作用范围
超链接:link{}	链接未点击之前显示的样式
超链接:visited{}	链接访问之后显示的样式
任何元素:hover{}	鼠标滑过该元素显示的样式
超链接:active{}	鼠标按下时显示的样式

伪元素选择器

用法	含义
元素::after{ content: “”;
}	给父元素添加最后一个孩子
元素::before{ content: “”; （必须要有的声明）
}	给父元素添加第一个孩子
元素::first-letter{ css属性：css属性值;
}	选中第一个字符
元素::first-line{ css属性：css属性值;
}	选中第一行

层级选择器

类型	用法
后代选择器	选择器选择器{}
子代选择器（只能选择的孩子）	选择器>选择器
相邻并且在后面的兄弟	选择器+选择器{}
相邻并且在后面的兄弟们	选择器~选择器{}

type{} | 这么多子元素中的第一个 |
| 父元素子元素:last-of-type{} | 这么多子元素中的最后一个 |
| 父元素子元素:nth-of-type(n){} | 这么多子元素的第n个子元素 |
| 父元素子元素:nth-last-of-type(n){} | 这么多子元素中倒数第几个元素 |

目标伪类

元素:target{} 点击跳转到该板块之后样式才生效（与锚点合用）

<!--锚点-->
<a href="#box">点击跳到HTML板块</a>
  <div id="box">HTML板块</div>

#box:target {
        
        
    background-color: brown;
    color: chartreuse;
    font-size: 40px;
  }

状态伪类

状态	用法	示例
可编辑	表单元素:enabled{}	input:enabled{}
不可编辑	表单元素:disabled{}	input:disabled{}
获取焦点	表单元素:focus{}	input:focus{}
选中	单选/多选::checked{}	input:checked+span{}
高亮状态	元素::selection{}	div::selection{color:blue;background-color:red;}

动态伪类

在某种状态下所显示的样式。【爱恨原则（love hate）】

伪类选择器	作用范围
超链接:link{}	链接未点击之前显示的样式
超链接:visited{}	链接访问之后显示的样式
任何元素:hover{}	鼠标滑过该元素显示的样式
超链接:active{}	鼠标按下时显示的样式

伪元素选择器

用法	含义
元素::after{ content: “”;
}	给父元素添加最后一个孩子
元素::before{ content: “”; （必须要有的声明）
}	给父元素添加第一个孩子
元素::first-letter{ css属性：css属性值;
}	选中第一个字符
元素::first-line{ css属性：css属性值;
}	选中第一行

层级选择器

类型	用法
后代选择器	选择器选择器{}
子代选择器（只能选择的孩子）	选择器>选择器
相邻并且在后面的兄弟	选择器+选择器{}
相邻并且在后面的兄弟们	选择器~选择器{}

web前端设计

HTML的相关概念和建站流程

HTML的基本组成:

快速生成HTML的基本结构(VScode)

vscode快捷键

HTML的基本语法

H5新增的语法(ie8及以下浏览器版本不生效)

HTML的基本标签

文章类的标签

超链接标签：a

图片标签： img

img自带的3px的底部留白

布局标签

列表标签

表格标签：table

表格新增标签及属性

表单标签 form

表单元素新增属性

链接外部文件标签 link

标签(元素)类型 display

元素类型

字体图标的使用（iconfont-阿里）

H5新增的标签(ie8及以下浏览器版本不生效)

多媒体标签

CSS 层叠样式表

css概念

CSS语法

css样式表

css属性

字体属性

文本属性

列表属性

边框属性

背景属性

浮动

PS切图方法

盒模型

怪异盒模型

弹性盒布局 flex

溢出属性

定位属性 position

宽高自适应

高度塌陷（浮动造成的影响）

锚点

css属性的继承

BFC

过渡属性（ie9及以下浏览器版本不支持）

浏览器内核(浏览器的解析代码机制)

渐变 （ ie9及以下不支持）

2d变形 transform:位移|旋转|缩放|倾斜

动画 （ie9及以下浏览器版本不支持）

3d变形 transform

透明度

css3新增的属性

盒子阴影

文字阴影

圆角

背景图的大小

背景图的固定

响应式布局

媒体查询

移动端准备工作

移动端布局

CSS Sprite（雪碧图）

grid(网格)布局

多列布局

css选择器

标签选择器

id选择器

class(类)选择器

后代选择器

群组选择器

选择器权重

选择器权重的特点

标签命名

通用选择器

css3新增选择器

属性选择器

伪类选择器

伪元素选择器

渐变（ ie9及以下不支持）

动画（ie9及以下浏览器版本不支持）