HTML

注释

单行注释
```

```
多行注释
```
/*
	多行注释
*/
```

文件命名

1、有意义
2、驼峰命名
    大驼峰：MyName
    小驼峰：myName
3、不能使用中文
4、可以英文字母、数字、下划线构成
5、不适用特殊符号命名

全局架构标签

<!doctype html> <!-- 声明h5 的文档头 -->
<html> <!-- 标签放所有html标签的 -->
    <head>
        <meta charset="utf-8" /> <!-- 字符集设置 -->
        <title>标题标签</title> <!-- 标题标签 -->
    </head>

    <body>

    </body>
</html>

常用标签

标题：h1 - h6（注意：h1标签只能在页面中存在一个）
段落：<p></p>
换行：<br />
分割线：<hr />
加粗：<b></b>、<strong></strong>
斜体：<i></i>、<em></em>
下划线：<u></u>
删除线：<del></del>、<s></s>
下标：<sub></sub>
上标：<sup></sup>
无序列表：（多用于导航）
```
<ul>
    <li></li>
    <li></li>
    ...
</ul>
```
- type：
  - disc：实心圆（默认）
  - circle：空心形
  - square：正方形
有序列表：
```
<ol>
    <li></li>
    <li></li>
    ...
</ol>
```
- type属性：可以写a、i、1
  - start：从第几个开始数
- 自定义列表：

<dl>
    <dt></dt>
    	<dd></dd>
    	<dd></dd>
    <dt></dt>
    	<dd></dd>
    	<dd></dd>
    ...
</dl>

特殊符号

空格符： 
版权符：©
左尖角号：<
右尖角号：>

图片

<img src="资源路径" alt="图片损坏时的提示" title="鼠标悬停显示的文本">

路径问题：
	①相对路径：
		./  当前文件夹，可省略
		../  返回上一个文件夹
		../../  返回两层文件夹
	②绝对路径：
		以盘符为起点
	③网络路径：
		<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />

超链接（页面跳转）

<a href="链接地址"></a>

target="" 跳转的方式
- _self 在当前页面（默认）
- _blank 在新建空白页

锚链接：页面内跳转

<a></a>
第一种：通过超链接标签的name属性
	<a href="#p1">第一段</a>
	<h2><a name="p1">第一段</a></h2>
第一种：通过任意标签的id属性
	<a href="#p2">第二段</a>
	<h2 id="p2">第二段</h2>

表格：布局

表头(用于分组)：<thead></thead>
表的主体(用于分组)：<table></table>
表尾(用于分组)：<tfoot></tfoot>
列分组：<colgroup span="2"></colgroup>
- span 属性用于设置选中多少列
表格：<table></table>
标题：<caption></caption>
表头：<th></th>
行：<tr></tr>
列：<td></td>
属性：
- border="10" 边框
- bordercolor="#FF00FF" 边框颜色
- width="" 宽(行没有)
- height="" 高
- bgcolor="" 背景颜色
- background="路径" 背景图片
  - 注：当背景颜色和背景图片同时设置时，优先显示背景图片；
    - table、tr、th、td标签中都可设置
- cellspacing="" 列和列之间的距离
- cellpadding="" 列和其中内容之间的距离
- align="left/center/right" 水平方向对齐方式
- valign="top/middle/bottom" 垂直方向对齐方式
- colspan="" 列合并
- rowspan="" 行合并

表单

<form></form>
- action="" 提交数据目的路径
- method="" 提交数据方法
- get 默认，把所有的数据依附在URL连接上
  - 安全性较低，传递的数据有限，速度较快
- post 打包发送，
  - 安全性高，传递的数据较多，速度较慢
<input /> 输入框标签
- type="" 类型
  - text 文本输入框，默认
  - search 搜索框
  - password 密码输入框
  - radio 单选框
  - checkbox 多选框
  - file 文件域
  - hidden 隐藏域
  - button 普通按钮
  - reset 重置按钮
  - submit 提交按钮
  - image 图片提交，必须配合使用src属性
autofocus 自动获得焦点，每个页面只能有一个
- datalist 用于设置提示选项
  - list 用于设置跟哪个 datalist 进行绑定
name="" 名字，传递数据的依据
- checked="checked" 默认被选中，只用于单选和多选框
  - 可简写成 checked
value="" 值，默认值，传递的数据
placeholder="" 提示语
size="" 大小/宽度
maxlength="" 最多可输入的字符数量
readonly="readonly" 只读，简写readonly
disabled="disabled" 禁用，简写disabled
autocomplete 用于设置是否使用历史记录提示，="on"是打开，="off"是关闭
pattern="[A-Z][0-9]{3}" 使用正则表达式校验提交的内容

下拉列表：

<select name="ccc">
    <option value="1">选项1</option>
    <option value="2" selected="selected">选项2</option>
    <option value="3">选项3</option>
</select>

selected="selected"  默认被选中，简写selected

多行文本域：
```
<textarea></textarea>
```
- cols="40" 列数，控制宽度
- rows="6" 行数，控制高度

另外一个页面：

<iframe src="路径" name=""></iframe>
<a href="路径" target="">百度一下</a>
name和target使用同一个值，a标签将在iframe中跳转

frame 框架布局

frameset 不能和body共存
cols 代表划分的列
rows 代表划分的行

<frameset rows="150px,*,100px"  border="2px">
    <frame name="top" src="top.html" noresize/>
    <frameset cols="150px,*">
        <frame name="left" src="left.html" noresize/>
        <frame name="right" src="right.html"/>
    </frameset>
    <frame name="foot" src="foot.html"/>
</frameset>

marquee 滚动文本(跑马灯)

<marquee direction="right"></marquee>
direction="right" 滚动方向

H5新增标签

<section></section>一个内容区块
<article></article>一块与上下文无关的独立内容
<aside></aside>与内容相关的辅助信息
<header></header>头部
<footer></footer>尾部
<nav></nav>导航
<main></main>主要内容
<figure>
    <figcaption>标题</figcaption>
</figure>
<audio src=""></audio>插入音频
<video src="" controls loop poster="./nsyw.jpg"></video>
    controls 显示控件
    autoplay 自动播放
    muted    静音播放
    loop     循环播放

H5新增input的type类型

颜色选择框: type="color"
电话号码输入框: type="tel"
搜索输入框: type="searth"
拉杆: type="range"
数字输入框: type="number"
邮件输入框: type="email"
网址输入框: type="url"
日期选择框: type="date"
月份选择框: type="month"
周选择框: type="week"
时间选择框: type="time"
年月日时分选择框: type="datetime-local"
- required 必填项
- mutiple 允许同时提交多个信息，中间用逗号隔开
- min 最小值
- max 最大值
- minlength 最小长度
- maxlength 最大长度
- step 步长

文档流布局需要注意的点

1、浮动元素和非浮动元素最好不要是兄弟关系
2、子元素不要跑到父元素外边去
3、布局无非就是横着排或者竖着排

CSS

注释

/*  css 代码注释内容 */

CSS链接的几种方式

行间样式表
```
<div style="width:100px;">盒子</div>
```
内联样式表
```
div{
    width:100px;
}
```
- 写在style标签里面，style标签写在head标签里面

外联样式表（最常用的）

  ```html
  	<link rel="stylesheet" type="text/css" href="out.css" />

三者的优先级：行间 > 内联 > 外联

选择器

标签选择器
```
标签{
	属性名:属性值;
	...
}
```

类选择器（使用特别多）

给标签起class名字 class="box"
.box{
    属性名:属性值;
    ...
}

id选择器

给标签起id名字 id="box"
#box{
    属性名:属性值;
    ...
}
id名字是唯一的，整个页面当中只能存在一个id

通配符选择器
```
*{
    属性名:属性值;
    ...
}
```

层级选择器（后代选择器）

.box p
一层一层往里查找(空格隔开)
如果子集没样式，那么子集会继承父级的样式

子代选择器
```
.box>p
```
相邻兄弟选择器
```
.p2+p 只能选中自己后边的
```

兄弟选择器

.box~h3  (弟弟选择器)，只能选中自己后边的

组合选择器

选中的对象（选择器）用逗号隔开
可以批量进行修饰你要修饰的对象

伪类选择器

每个元素中可以有至多两个伪元素，分别是before和after
伪元素相当于行内类型的子元素，before在前，after在后
content:""是必写的

.box1::before{
    content: '我是before';设置伪元素的内容
}
.box1::first-letter设置第一个字的样式
.box1::first-line设置第一行的样式

属性选择器

.box1[title]选择所有 有title属性 class="box1"的元素
.box1[title="wo"]选择所有 title="wo"的class="box1"的元素
.box1[title~="wo"]选择所有title属性值中包含wo的class="box1"的元素
.box1[title^="wo"]选中所有title属性值以wo开头的class="box1"的元素
.box1[title$="wo"]选中所有title属性值以wo结尾的class="box1"的元素
.box1[title*="wo"]选中所有title属性值中有wo的class="box1"的元素
.box1[title|="wo"]选中所有title属性值为wo或者wo-xxx的class="box1"的元素

结构性伪类选择器

.box1 p:first-child	如果box1中的第一个标签是p，则选中该p标签
.box1 p:last-child	如果box1中的最后一个标签是p，则选中该p标签
.box1 p:nth-child(3)如果box1中第n个标签是p，那么选中该p标签
.box2 p:only-child	如果p是box2的唯一子元素，那么选中该p标签
:root	选中根元素，在HTML中就是html标签
.box3:empty		选中里边什么都没有的class="box3"的标签,有空格也不行
:nth-child(odd)	获取奇数个()
:nth-child(even)	获取偶数个()

目标伪类选择器

div:target	用于设置被锚点选中的样式

ui元素状态伪类选择器

input:enabled	选中所有可用的input
input:disabled	选中所有不可用的input
input:checked	选中所有被勾选的input
.box::selection	用于设置box1中被鼠标选中的样式

否定伪类选择器

.box:not(p)	选中class="box"中所有不是p的标签

动态伪类选择器

a:link	超链接的初始状态
a:visited	超链接被访问后的状态
a:active	超链接鼠标按下时超链接的状态
a:hover		鼠标悬停移入超链接时的状态
input:focus	当获取到焦点时，被选中

a标签清除默认样式
```
a {text-decoration: none;color: #000;}
```

选择器命名规范

1.必须使用英文、数字、字母、下划线组成 
2.开头使用英文，不能使用数字和特殊符号
3.起名字一定要有意义
4.遵循驼峰命名法则 例如 MyName、myName
5.下划线命名法 head_box、man_box、nav_left

选择器权重

选择器权重问题优先级问题

行间>id选择器>类选择器>标签>通配符

代码覆盖问题

1、代码自上而下执行
2、同级别的代码块，下面的会覆盖上面的
3、谁的更加精确使用谁的样式
4、样式继承问题 - 子集会继承父级的样式

浏览器前缀

谷歌前缀 -webkit-
火狐前缀 -moz-
欧朋前缀 -o-
IE前缀 -ms-

CSS常用属性

宽度：width: auto(默认)
高度：height: auto(默认)
最小宽度：min-width:
最大宽度：max-width:
最小高度：min-height:
最大高度：max-height:
字体大小：font-size: px(像素) em(相对父级字体大小) rem(相对html(默认16px)根文档的字体大小)
下划线：text-decoration:underline;
上划线：text-decoration:overline;
删除线：text-decoration:line-through;
去除下划线：text-decroation:none;
文本倾斜：font-style:
- italic 文本
- normal 文本不倾斜
- oblique 文本倾斜（了解）
文本加粗：font-weight:
- bold 加粗常用
- bolder 更粗（了解）
- normal 不加粗
- 可以使用数字表示 100 - 900
文本水平居中：text-align:
- center 水平居中常用
- left (默认值)左边
- right 右边
垂直方向居中：vertical-align
- top
- middle
- baseline
- bottom
行高：line-height:
首行缩进：text-indent
- 1、可以根 px
- 2、推荐使用 rem
font缩写： 字体加粗字体倾斜字体大小字体样式
单词首字母大写：text-transform:capitalize;
所有字母大写：text-transform:uppercase;
所有字母小写：text-transform:lowercase;
字体间距：
- letter-spacing（修饰汉字）
- word-spacing （修饰单词）
列表属性：list-style
- none 去除列表的默认样式
- circle 空心圆
- square 实心的方块
- disc 默认值
边框：border:1px粗细 solid 实心 red 颜色;
- 实线 border-style:solid;
- 虚线 border-style:dashed;
- 点化线 border-style:dotted;
- 双实线 border-style:double;
- 边框粗细 border-width:
  - border-width:5px(上下) 10px（左右）;
  - border-width:5px上 10px左右 15px下;
  - border-width:5px上 10px右 15px下 20px 左;
- 左边框： border-left
- 右边框： border-right
- 上边框： border-top
- 下边框： border-bottom
外轮廓：outline: 5px solid red;(不增加额外的宽高)

盒子模型

margin 外边距
- 左 margin-left
- 上 margin-top:
- 右 margin-right
- 下 margin-bottom margin:100px(上下) auto（左右自动）; margin:100px; 都为100px margin:100px上下 300px左右; margin:50px上 100px左右 150px下; margin:50px上 100px右 150px下 200px左;
- 注意：外边距并不会改变你的盒子大小
- margin 在垂直方向,margin-top 和 margin-bottom 不会做叠加,会取最大值
padding 内边距
- 与margin类似
- 注意：padding 它会改变盒子大小

浮动

float:
- left 左浮
- right 右浮
- none 默认

特点：

1、飘起来
2、半脱离文档流
3、不占空间
4、共处一行
5、浮动会改变你的元素类型

超出隐藏：overflow:hidden;
overflow-x: auto; 子元素宽度超出，X轴出现滚动条
overflow-y: auto; 子元素高度超出，Y轴出现滚动条

隐藏滚动条

/*.box*/::-webkit-scrollbar{
    display: none;
}

火狐隐藏滚动条 scrollbar-width: none;
display:none; 隐藏该元素脱离文档流从页面消失
display:block; 显示
visibility:visible 显示（默认）、hidden 隐藏但还会占据本来的位置，相当于透明
opacity: 0.2; 透明度实现隐藏（0~1）
background-color: transparent; 透明色
注意：透明色和透明度不一样，透明色只是一个特殊的颜色，透明度会把该元素以及它所有子元素都变得半透明

元素类型转换

display:
- block; 转换成块元素
- inline;转换成行内元素
- inline-block; 转换成行内块元素
- none;隐藏元素，从页面消失

文本溢出

white-space:nowrap; 不让文字换行
text-overflow:ellipsis; 出现省略号

定位

position:

相对定位 relative

1、不会脱离文档流(保留原位置)
2、参照物是自己本身
3、主要的作用就是给绝对定位元素当爸爸用

绝对定位 absolute

1、如果你的父级元素没有定位，参照物为body
2、父级元素如果么有定位，参照物会找有定位的父级。
3、完全脱离文档流(不保留原位置)

粘性定位 sticky

1、相对于浏览器窗口的位置定位

层叠顺序

z-index:数字

值越大越靠上
配合定位一起使用

层级问题

普通元素<浮动元素<定位元素 < z-index:数字

透明度

opacity:
- 0 - 1 之间
- 0 完全透明
- 1 完全不透明
- color:rgba（1,2,3，透明度）

清楚浮动

clear:
- left;
- right;
- both;

万能清除浮动

.clearFix:after{
    content:'';
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
    clear:both;
}

圆角

圆形 border-radius:50%; 
对角 border-radius:10px 40px; 
	border-radius:10px左上 30px右上左下 40px右下; 
	border-radius:5px左上 10px右上 15px右下 20px左下;    
左上 border-top-left-radius: 20px 20px;
右上 border-top-right-radius: 20px 20px;
左下 border-bottom-left-radius: 20px 20px;
右下 border-bottom-right-radius: 20px 20px;

注意：具体写法先写上下后写左右

注意：

该属性的完全体写法是8个值

border-radius:10px 20px 30px 40px / 10px 20px 30px 40px;
前四个值:水平距离，后四个值:垂直距离，
前边的四个值和/后边的四个值相互独立，都符合上边的规则

calc计算函数

width: calc(100% - 200px * 2);

1、支持+、-、*、/运算
2、运算符两侧必须有空格
3、四则运算的优先级和数学里一样

表格

单元格之间的间距 border-spacing:
合并相邻的边框 border-collapse:
- separate 不合并，默认值
- collapse 合并`
表格固定宽度 table-layout:
- auto 不固定，哪列字多哪列宽，默认值
- fixed 固定宽度
无内容单元格是否显示 empty-cells
- show 显示，默认值
- hide 隐藏
注意：当border-collapse设置为ollaps时无效
表格标题的位置 caption-side:top、bottom
隔行变色 tbody tr:nth-child(odd)
- odd表示奇数
- even表示偶数
- 3n表示每隔3行变色
- 4n表示每隔4行变色

文本阴影

text-shadow: 10px 10px 10px red  ,  -10px -10px -10px yellow;
可以有多个阴影叠加，中间用逗号隔开
    第1个值：水平阴影位置
    第2个值：垂直阴影位置
    第3个值：模糊距离
    第4个值：阴影颜色

盒子阴影

box-shadow: 10px 10px 10px 10px red inset;
可以有多个阴影叠加，中间用逗号隔开
    第1个值：水平阴影位置
    第2个值：垂直阴影位置
    第3个值：模糊距离(可选，不写默认为0)
    第4个值：阴影大小(可选，不写默认为0)
    第5个值：阴影颜色(可选，不写默认为0)
    第6个值：阴影模式(可选)，可以设置为inset

字体模块

<style>
    @font-face {
        font-family: "超级无敌好看字体";
        src: url(./font/STHUPO.ttf);
    }
    .box{
        font-family: "超级无敌好看字体";
    }
</style>

背景图新增属性

背景图尺寸
- background-size:
  - 第1个参数:横向尺寸，默认是auto
  - 第2个参数:纵向尺寸，默认是auto
    - 支持的取值有：
      - 像素值
      - 百分比
      - cover 在图片不变形的前提下，用单张图片覆盖整个容器，但图片可能显示不完整
      - contain 让容器包含一张完整的图片，但在禁止平铺状态下，容器可能有空白的部分
- 是否平铺 background-repeat:
  - repeat; 平铺(默认值)
  - no-repeat; 不平铺
  - repeat-x; x轴平铺
  - repeat-y; y轴平铺
背景图位置定位
- background-position: 100px 200px;(参数1:x轴参数2:y轴)
- background-position-x:
- background-position-y:
  - top、bottom、left、right、top right、...

线性渐变

linear-gradient 线性渐变

background: linear-gradient(to right,blue,red);
	第一个参数用来设置方向，默认是to bottom
		可选值有：
            to left、
            to right、
            to top、
            to bottom
            to left top、
            to left bottom、
            to right top、
            to right bottom
            角度：30deg(30度)...

线性渐变的分割

background: linear-gradient(45deg,red 50%,blue 60%,green 70%);
百分比表示渐变线的哪个位置对应的颜色

重复线性渐变

background: repeating-linear-gradient(45deg,red,yellow 20%,green 30%);

径向渐变

radial-gradient 径向渐变

background: radial-gradient(circle,yellow 30%,skyblue 50px);

-webkit-radial-gradient(60% 40%,closest-side,blue,green,yellow,black);
注意:必须要加-webkit-
    60%表示渐变的中心点在横向60%的位置
    40%表示渐变的中心点在纵向40%的位置
    closest-side  最近边
    closest-corner 最近角
    farthest-side  最远边
    farthest-corner 最远角

重复径向渐变

background: repeating-radial-gradient(red 0%,yellow 10%,green 20%);

过度效果

transition 设置过渡属性 transform 设置CSS3效果 translate 设置平移

transition 过度效果

transition-property: 
设置需要过渡效果的属性,可以写具体属性(多个属性用逗号隔开)，也可以写all(所有属性，默认值)

transition-duration: 
过渡效果的持续时间

transition-timing-function: 
过渡的动画时间曲线，也就是描述动画进程和时间的关系
    ease  逐渐慢下来，默认值
    linear  匀速
    ease-in  加速
    ease-out  减速
    ease-in-out  先加速后减速
    贝塞尔曲线 cubic-bezier(x,x,x,x)

transition-delay: 
过渡的延迟时长

[简写](常用)
transition: 过度属性(默认all，可省略) 过渡时长 时间曲线(默认ease，可省略) 延迟时长(默认0s，可省略)

注意:唯一一个不能实现过度效果的属性 display:none/block

平移

translate 平移

transform: translate(80px,80px);
    translate(横向平移距离,纵向平移距离) 
    translateX  设置横向平移距离
    translateY  设置纵向平移距离
    允许使用负值

缩放

scale 缩放

transform: scale(3);
    大于1：放大
    小于1：缩小
transform: scale(.5,2);
    第1个值表示横向
    第2个值表示纵向
	scaleX  设置水平方向缩放
	scaleY  用于设置垂直方向缩放

旋转

rotate 旋转

transform: rotate(360deg);  平面旋转
    rotateX	  X轴旋转
    rotateY	  Y轴旋转
    rotateZ	  Z轴旋转，,和平面旋转一样

倾斜

skew 倾斜

transform: skew(45deg,20deg);
    写一个值时，表示水平方向倾斜角度
    当写两个值时，第1个表示水平方向，第2个表示垂直方向(X和Y方向同时倾斜)
	skewX  表示水平方向的倾斜角度
	skewY  表示垂直方向的倾斜角度
transform: skewX(45deg) skewY(-45deg); 先倾斜X轴再倾斜Y轴

设置变形原点

origin 设置变形原点

transform-origin: 0px 0px;
    第1个参数表示横向位置，0表示最左侧
    第2个参数表示纵向位置，0表示最上侧
		单位可以是px和%，可以是负值

3D平移和视点

perspective: 1000px;设置视点距离舞台多远：Z轴
perspective-origin: 50px 50px;设置视点的位置：X轴、Y轴
给每个盒子独立设置视点(不常用):
	transform: perspective(1000px) translateZ(500px);

3D旋转

rotate3d 3D旋转

transform: rotate3d(1,1,5,360deg);
	X、Y、Z三轴同时转
    前3个参数是三个轴的矢量关系
    第4个参数是旋转的角度

立体效果

transform-style: 用于规定后代元素如何在3D空间呈现
	flat  后代元素在2D平面呈现，默认值
	preserve-3d  后代元素在3D平面呈现

动画

定义动画：只需要指定几个关键帧

@keyframes AAA {
    0%{
        transform: rotate(45deg);
        width: 100px;
    }
    50%{
        transform: rotate(80deg);
        width: 190px;
    }
    100%{
        ransform: rotate(90deg);
        width: 200px;
    }
}

animation-name: AAA;设置应用的动画名称
animation-duration: 1s;定义动画的持续时间
animation-timing-function: ease;定义动画时间曲线
animation-delay: 1s;定义动画延迟时长
animation-iteration-count: infinite;设置执行的次数，infinite表示无限次
animation-direction: alternate-reverse;设置动画执行方向
    normal  正常方向
    reverse  反方向
    alternate  交替执行（首次执行是正方向）
    alternate-reverse  反方向交替执行（首次执行是反方向）
animation-play-state: paused;设置运动还是暂停
    running  运动，默认值
    paused  暂停

动画的简写(常用)

animation: AAA动画名称  1s持续时间  ease时间曲线  0s延迟时长 infinite执行次数 alternate执行方向;

怪异盒子

box-sizing设置使用哪种盒子模型
    content-box  使用标准盒模型，默认值
    border-box   使用怪异盒模型
    怪异盒模型下，wigth=内容区宽度+padding宽度+border宽度，高度同理

弹性盒子

弹性盒子（父元素使用）

display: flex;  成块级弹性盒子
    弹性盒子的子元素默认在主轴方向上排列
    默认状态下，主轴就是横轴，侧轴就是纵轴。侧轴方向永远是主轴反向的对立方向

弹性盒子的主轴和侧轴

flex-direction  设置主轴方向
    row 横向，默认值
    row-reverse 反转横向
    column  纵向
    column-reverse 反转纵向

主轴方向对齐方式

justify-content  设置主轴方向的对齐方式
    flex-start  起点对齐，默认值
    flex-end  终点对齐
    center  居中
    space-between  两端对齐，其余自动分配
    space-around  自动分配空余空间(环绕对齐)
    space-evenly  表示均分空余空间

侧轴方向对齐方式

align-items  设置侧轴的对齐方式
    flex-start  起点对齐
    flex-end  终点对齐
    center  居中
    baseline  基线对齐

换行方式

flex-wrap  设置是否换行
    nowrap  不换行
    wrap  换行
    wrap-reverse  反转换行

align-content  设置如何处理纵轴方向的空余空间
    flex-start  没有行间距
    flex-end  底部对齐且没有行间距
    center  居中且没有行间距
    space-between  两端对齐剩余空间剩余空间自动分配
    space-around  自动分配空余空间

单个元素侧轴位置

align-self  设置单个元素在侧轴的位置
    flex-start  起点对齐
    flex-end  终点对齐
    center  居中
    stretch  拉伸

排序顺序

order  设置排列顺序
	默认是0，可以为负数，值越大越靠后

flex-grow 用于设置占据空间的比例
flex-shrink 用于设置如何按比例分摊被压缩的量
flex-basis 用于设置项目的长度，如果总长度足够，那就和设置宽度一样，如果总长度不够，那就按比例显示
合体写法：
- flex是flex-grow、flex-shrink、flex-basis的合体写法

多列

column-count: 2;设置分割的列数
column-gap设置列与列之间的间隔宽度
column-rule设置列与列之间的边框
column-fill设置所有高度是否统一
    balance  统一高度，默认值
    auto 自动排布
column-width设置每列的宽度
	注意:列宽(column-width)不能与列数(column-count)共存
column-span设置是否横跨所有列(一般用于标题)
	none 不跨列
	all  横跨所有列

移动端布局

<meat> 标签

width=device-width  宽度等于设备的逻辑宽度
initial-scale=1.0  初始缩放值为1
minimum-scale=1  最小缩放值为1
maximum-scale=1  最大缩放值为1
user-scalable=no  禁止用户缩放
dpr 设备像素比=物理像素/逻辑像素
物理像素：指手机上有多少个像素点，手机出厂的时候就固定死了，相当于分辨率
逻辑像素：CSS能控制的像素，高分辨率手机上，1逻辑像素往往等于多个物理像素

几种新单位

1vw=视口宽度的1%
1vh=视口高度的1%
rem  指根标签的字号，比如html字号是16px，那1rem=16px

html{
    /* 
    以窗口宽375px为标准，1vw=3.75px
    所以16px=4.26666667vw
    当视口宽度变宽时，1vw对应的像素值就会变大，4.26666667vw对应的像素值也会变大，所以html的字号就会变大，所以2.8125rem对应的像素值就会变大
    */
    /* font-size: 16px;默认 */
    /* font-size: 4.26666667vw; */
    font-size: .26666667vw;/*1px*/
}

媒体查询(响应式)

@media screen and (min-width:300px) and (max-width:350px) {
    .box1{
        background-color: yellow;
    }
}

min-width用于设置屏幕宽度下限
max-width用于设置屏幕宽度上限
注意：一般写在底下

网格布局

网格布局基础
- 网格布局包括一个容器（container）和多个项目（item）
- display 触发网格布局
  - grid 变成网格容器
  - inline-grid 变成行内网格容器
- 规定行数以及每行高度 grid-template-rows: 100px 200px;
- 规定列数以及每列宽度 grid-template-columns: 200px 200px
  - repeat(重复次数，重复的值) 重复多少次，可以简化重复的值
  - auto-fill 表示自动填充，让一行或一列尽可能容纳更多的单元格
  - 1fr 表示网格容器中可用空间的一等份
  - minmax(最小值，最大值) 用来规定数值的范围
  - auto 自动占据剩余空间
grid行列间距
- 设置行间距 row-gap: 10px;
- 设置列间距 column-gap: 10px;
- 同时设置行、列间距 gap: 10px 20px;

grid单元格的命名和使用

命名：给网格命名,无用且懒得起名可以用 . 代替
```
grid-template-areas: 'a . .'
					'a . six';
```

使用：

grid-area: six;
把该标签放到名字为six的网格里

自定义盒子位置和所占空间

网格线从左往右数是正值，从右往左数是负值，-1表示从右往左数的第一条
网格线从上往下数是正值，从下往上数是负值，-1表示从下往上数的第一条

设置左边框所在的垂直网格线  grid-column-start: 1;
设置右边框所在的垂直网格线  grid-column-end: -2;
左边框、右边框所在的垂直网格线的简写模式 grid-column: 1/-2;

设置上边框所在的水平网格线  grid-row-start: 1;
设置下边框所在的水平网格线  grid-row-end: 3;
上边框、下边框所在的水平网格线的简写模式 grid-row: 1/3;

设置自动排布方向

grid-auto-flow 设置自动排布方向
    row 横向，默认值
    column  纵向
    row dense  横向且尽可能填满表格
    column dense  纵向尽可能填满表格

设置项目的位置

justify-items设置网格中项目的横向位置
    stretch 拉伸，默认值
    start  在起始位置
    center  居中
    end  在结束位置

align-items设置网格中项目的纵向位置
    取值和justify-items一样

place-items是横向和纵向位置的简写
    第1个值表示纵向
    第2个值表示横向

网格在容器中的位置

justify-content设置网格区域在容器中横向的排列方式
    start 在起始位置
    center 居中
    end 在结束位置
    space-between  两端对齐
    space-around  环绕
    space-evenly  均分

align-content设置网格区域在容器中纵向的排列方式
    取值和justify-content一样

place-content是横向和纵向排列方式的简写
    第1个值是纵向
    第2个值是横向

补充

color: inherit;/*字体颜色继承父元素的*/
cursor: pointer;/*鼠标移入变成手形指针*/
outline: none;/*去轮廓*/
pointer-events:none;鼠标穿透

/* 阻止选择文本 */
user-select: 
    auto默认
    none防止文本选取
    text文本可被用户选取
    all单击选取文本;

HTML+CSS