FRONT END REVIEW

HTML

声明HTML的版本 保存供及其处理的信息 设置页面的标题

<title> 
小米商城
</title>

行内元素（inline）：不换行 + 宽高由内容决定

1. 不独占一行
2. 和文字一样水平排列
3. 不能设置 width / height
4. 上下 margin / padding 不生效（左右有效）

E.g.

<span>
<a>
<em> <strong>
<i> <b>
<label>

块元素（block）：独占一行 + 能设置宽高。 不管多窄，一定换行

EXAMPLE:

<div>
<p>
<h1> ~ <h6>
<ul> <ol> <li>
<table>
<form>

注意：

1. 块级元素 不能放在 里面（HTML 规范不允许）

2. 很多布局（如横向排列）不能只靠 block

行内块元素（inline-block）: 像行内一样排成一行 + 像块一样能设置宽高

1. 不换行（可并排）
2. 可以设置 width / height
3. margin / padding 四个方向都生效

<img>        /* 天生就是 inline-block */
<input>
<button>

span {
  display: inline-block;
}

音频视频标签

视频

<video src="" controls="controls" autoplay muted loop poster="../">

</video>

controls是视频的控制键

autoplay (自动播放前记得静音！！)

loop

muted

poster（视频的封面）

音频

<audio src=" ">

注意：音频不让自动播放，除非使用js

链接

target:

_self：会替换自己的网站

_blank： 新窗口打开

超链接

1. 内部链接（自己下载好的）

<a href="../"> 视频</a>

2. 外部链接（别的外部链接）
3. 空链接

<a href="#"> 视频</a>

先空着

4. 下载链接

5. 邮件链接

<a href="mailto:xxxx.com"> 视频</a>

锚点连接

锚点连接能够创建挑战链接：

step1: 使用id属性创建锚点目标 <h2 id="1"> 点我可以跳转到下面那个链接哦</h2>

step2: 在链接中使用#标记锚点目标 ```html
你在找我啊

页面滑动效果： 

```html
<style>
html {
	scroll-behavior: smooth; 
} 
</style>

布局标签

网站结构标签：

head： 网页头部

main： 网页内容

nav：导航栏

article： 文章相关

section： 分块

aside： 侧边栏

footer：页眉页脚

列表标签

1. 无序列表
   只能放li，里面可以放其他的html元素

<ul>
	<li> aaa </li>
	<li> bbb </li>
</ul>

2. 有序列表：自动加上编号

1. aaa
2. bbb

```

3. 描述列表： 描述有关，默认缩紧
   家电：
   电视
   冰箱
   。。。

<dl>
<dt>家电</dt>
<dd>冰箱</dd>
<dd>空调</dd>
</dl>

表格

colspan, rowspan能跨行跨列，需要将内容写到左上的格子里，然后删除多余的单元格

<td rowspan="2">
</td>

表单form：收集用户的输入信息

1. 表单容器
   定义，包裹所有表单控件
2. 表单控件
   输入框，提交按钮等

（1）输入框 input

默认选女，radio只能选一个

<ul>
        <li>性别： <input type="radio" name="gender" checked> 女 <input type="radio" name="gender"> 男</li>
    </ul>

checkbox可多选

(2) textarea

需要指定 rows和cols

(3) select

<select name="region" id="">
        <option value="beijing" selected>北京</option>
        <option value="shanghai">上海</option>
    </select>

(4)button

3. 辅助标签
   label 用于扩大选择范围，提升用户体验感，直接将选项包起来

文本布局

text-align: left/right/center/justify(两端对齐)

text-indent:首行缩进 em (相对单位)

letter-spacing: 设置文本字符的间距

line-height: 设置文本的上下间距，可让单行的文本垂直居中（让行高等于盒子的高度），不带单位是当前字体大小的倍数

伪类选择器

1. 未访问的状态
a:link {
}

2. 已访问
a:visited {
}

3. 鼠标悬停
a:hover{


4. 被点击 active
a:active {
}


对于input需要用
input:focus {
	transition: .5s;
}

写的时候需要按照 l v h a顺序来写（lv 好！）

结构伪类选择器

根据元素的位置来选择目标元素

ul li:first-child 
ul li:last-child
ul li:nth-child(n)
ul li:nth-child(3n) 3的倍数
ul li:nth-child(n+2) 从第二个开始
ul li:nth-child(-n+3) 前面三个
ul li:nth-child(odd)
ul li:nth-child(even)

伪元素选择器

::placeholder 用来选中textarea或者是input中的占位符

::first-letter 用于选中第一个字符

::first-line 用于选中第一行

::before

::after

在某个元素前面或者后面插入一个类似内联元素的盒子

属性选择器

a[class] {
} 表示属性里包含class属性的所有元素

a[class="font" ] {
} 表示属性里严格写的是：class="font"的所有元素

a[class^="font" ] {
} 表示属性里以font开头的所有元素

a[class$="font" ] {
} 表示属性里以font结尾的所有元素

a[class*="font" ] {
} 表示属性里任意包含font的所有元素

#盒子模型

行内元素无法设置宽高

也没法设置上下外边距，可以设置左右外边距

行内元素可以设置上下左右的padding

margin:0 auto 实现块元素的水平居中

上下margin问题：

1. 合并问题：上下相邻的盒子的外边距会折叠，以最大的外边距为准
2. 塌陷问题：对于嵌套的父子盒子，子元素设置了上下margin会让父元素塌陷让父元素和子元素连在一起。解决方案：（1）给父盒子增加上边框 （2）给父盒子增加上padding （3）给父盒子添加：overflow:hidden属性

content box/ border box

box-sizing中，

box-sizing=content-box 则 width=内容的宽度
box-sizing=border-box，则width=内容+border+padding的宽度

盒子背景

拉伸图片来覆盖 background-size:cover 
background-size:contain

背景颜色渐变

.box {
	background-color:linear-gradient(to right, pink, red) 从左（粉）到右（红）
}

.box {
	background-color:linear-gradient(to right, pink 0%, red 100%) 百分数是色标的位置，粉色在0%（最左边的位置），红色在最右边的位置
}

如何达到文字渐变的效果？

-webkit-background-clip: text;//背景裁剪，按照文字形式裁剪，-webkit-是google老版本兼容性写法
background-clip: text;背景裁剪
-webkit-text-fill-cold:transparent; 文本填充颜色为透明

盒子阴影

box-shadow: X Y 10px black// X,Y是偏移量，10px是模糊半径，10px是阴影半径，black是阴影颜色

加inset是内阴影

.box {
	transition:属性 .3s //给这个属性加过渡效果
	transition:all .3s //所有属性都要发生过度变化
}

.box：hover {
	box-shadow: 0 0 10px black// X,Y是偏移量，10px是模糊半径，10px是阴影半径，black是阴影颜色
}

浮动

让元素脱离原本的文档流，

float:left 让元素向左浮动直至碰到父容器边缘或者其他浮动元素

float:right 让元素向右浮动直至碰到父容器边缘或者其他浮动元素

Flex布局

1. 父盒子控制子盒子
2. 排列方向 ： 主轴：水平方向 / 交叉轴：垂直方向

注意：

3. 若子元素有大小，则按照给定大小显示

4. 若没有规定大小，则高度拉伸充满父容器，宽度是根据内容来拉伸的

5. 若子元素总宽度 超过父元素，会压缩子元素

6. inline元素如果设定为flex，则可以设定宽高

justify-content 定义主轴上的对齐方式

align-items 定义交叉轴上的对齐方式

对于单行：

对于多行：

改变方向

改变主轴方向 flex-direction: column

换行

flex-wrap：

盒子尺寸弹性变化

写到子盒子身上，优先级比width和height高

flex:1; 表示每个盒子在父盒子的剩余空间中占一份

定位

1. 固定导航栏
2. 元素滚到某个位置后固定
3. 弹出菜单/下拉框
4. 悬浮想过，元素悬浮在其他元素上方

相对定位

position: relative

1. 元素相对于自身正常位置进行偏移，不脱离标准流
2. top 优先级高于 bottom，left高于right
3. 是绝对

绝对定位

position: absolute

场景：弹出菜单，悬浮效果

1. 脱离正常流
2. 以最近的定位的祖先元素为基准，若没有则以视口为基准

常用布局技巧： 子绝父相

固定定位

position:fixed

1. 脱离文档流并始终相对于浏览器** 视口**定位的布局技术
2. 通过top/bottom/left/right属性进行偏移，top优先级高于bottom，left高于right

场景：

3. 固定导航栏

4. 页面广告

注意：margin:0 auto 对于定位的盒子无效

对于定位的盒子，如果上下左右要留出一点空隙，可以用inset；... px

粘性定位

position:sticky

1. 混合定位，融合相对定位和固定定位的特性, 元素在滚动指定位置（如相对于父盒子的top：10培px;）前为相对定位，之后转为固定定位
2. 父容器的overflow需为visible，否则粘性定位失效，并且需指定top，right，bottom，left其中之一才可以使粘性定位生效
3. 可以通过top，bottom，left。right属性进行偏移

场景：

1. 吸顶效果：元素滚到某个位置后固定
2. 表格表头固定：长表格滚动时表头始终可见

定位布局-层叠顺序

z-index 属性z轴方向的层叠顺序，也就是决定哪个元素显示在最上层。

注意：仅对定位元素有效

场景：

1. 提高层级悬浮效果
2. 实现图片层叠效果

网格布局 Grid

一种二维布局，适合多行多列布局

Display: grid （块级）

display: inner-grid (行内)

绘制网格（网格轨道）

grid-template-columns 定义网格中的列

grid-template-rows定义网格中的行

grid-template-columns:200px 200px 200px 定义3列，每列宽度为200px
grid-template-rows:200px 200px 200px 定义3行 没行高度为200px

justify-content控制列轨道在容器内的水平分布
align-content控制行诡道在容器内的水平分布

fr表示占几份的单位

gap控制网格间隙

适用于响应式布局，使得列数随容器宽度变化

auto-fill 自动填充列，尽可能的创建列 repeat(auto-fill,minmax(100px,1fr) )

auto-fit 尽可能拉伸列充满容器，会合并空白，列宽不小于minmax的最小值

网格线 实现元素跨越多个网格单元：

i)

1. 跨列 grid-column:1/3 开始线编号/结束线编号
2. 跨行 grid-row:1/3 开始线编号/结束线编号
   改属性需要写到子元素身上

ii)

3. grid-column:1 /span2，跨2个单元格

4. grid-row 1/ span2, 1线开始，跨2个单元格

网格填充方式

grid-auto-flow决定网格容器中子元素排列填充方式

grid-auto-flow:row （默认） 子元素按先把行填充完，再填充下一行

grid-auto-flow:column 子元素按先列填充完，再填充下一列

object-fit

用于控制替换元素（如img, video等夹在外部资源的元素）内容如何适应其容器尺寸的属性

object-position:center/ top left/... 以调整位置

项目对齐方式

控制元素在**

**的对齐方式

justify-items: 水平对齐方式

alignt-items： 垂直对齐方式

place-items: 水平+垂直

注意：此属性是 给父元素添加

多列布局

将元素的内容自动分割 为指定数量的垂直列

column-count;分为几列 ，根据父盒子自动分配列宽

column-gap：列之间的间距

column-rule：列舰的分割线样式（颜色、宽度、样式） （和border很像）

底部盒子被切断问题解决：break-inside:avoid-column

CSS动画

CSS transform是元素进行2D/3D变换的核心属性，支持平移，旋转，缩放，倾斜等效果，且不破坏原有文档流布局。

2D坐标系

使用到transform 属性

1. translate 沿X/Y轴移动元素位置，不改变元素的实际布局
   场景：1. 悬停元素微调，鼠标放上后元素上下或左右移动 2. 元素居中

transform: translate(20px, 30px); x y同时移动
transform: translateX(50%) X轴移动
transform: translateY(-50%) Y轴移动 50%是指元素的自身尺寸，与父盒子无关

平移不影响页面布局，仅仅是视觉上的移动。

直接平移视觉不够好，可以加过渡 transition，谁做过渡给谁加此属性

2. 旋转rotate
   场景：1.悬停动画，如按钮旋转 2.加载动画 （无限循环旋转）

tansform:rotate(360deg)  正为顺，负为逆
transform-origin:left top 旋转的基点

注意：行内元素不能使用，如果需要使用，需要转换为block元素/行内块元素

3. scale 缩放
   用于调整元素尺寸，不影响布局

场景：1.悬停放大

transform: scale(1.5) 整体放大1.5倍
transform: scale(1.5, 1) X轴放大1.5倍，Y轴不变

4. 倾斜
   通过沿X轴或Y轴扭曲元素的几何形状

场景： 1. 鼠标经过元素倾斜效果

transform: skew(30deg, 30deg); X轴倾斜30d，Y轴倾斜30d
transform: skew(30deg); 一个参数则默认Y轴为0
transform:skew(30deg);

transform-origin 设置倾斜中心点

transition 完整写法

transition：过度属性 持续时间 速度曲线 延迟时间

transition： all 1s linear 1s

所有属性添加过渡效果，过渡持续1s，匀速，延迟1s执行

对于速度曲线：

变换函数-复合写法

想要变化并行就需要复合写法，否则只能执行一个

transform:A() B() C()

注意：该写法需要遵守从右到左的执行顺序

顺序不同，得到的结果也不同

3D变换与透视

场景：1.卡片反转效果 2. 3D幻灯片/轮播图 3.数据可视化，如立体图标（3D柱状图等）

1. rotate

transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);

透视：

perspective:1000px 透视效果

1. 数值越小，透视效果越强
2. 给父元素添加，里面所有子元素都会添加透视效果
3. 给子元素添加，就是给当前元素添加透视效果
4. 注意：perspective()必须作为transform属性的第一个函数，否则无效

旋转的方向：

2. 两面翻转的盒子

   需要准备好两个页面，正面和背面，背面需要提前绕y轴转180度将字反转过来。再将两个页面重合在一起

   backface-visibility:hidden 控制某个盒子里的页面被翻转过来后内容不可见

3. 3d平移

translate:translate3d(x,y,z);
transform-style:perspective-3d;注意一定要给**父容器**设置perspective否则z轴平移不生效
translateZ(100px) 沿z轴平移，正值放大靠近屏幕，负值缩小远离

Animation动画

通过定义关键帧和动画属性来实现元素动态效果。

先定义动画，后使用动画

定义

@keyframe move {   //@keyframe是用来定义动画的 定义move这个动画
0% {  //关键帧
tranform:translateX(0);
}

20% { //关键帧
transform:translateX(50px);
}

...

100% { //关键帧
transform:translateX(100px);
}

@keyframe move {   //@keyframe是用来定义动画的 定义move这个动画
from {  //关键帧
tranform:translateX(0);
}

to { //关键帧
transform:translateX(50px);
}

使用

动画属性要写到目标元素中：

animation: move 1s; 动画名称 动画时长 

animation完整写法

其中：

单写属性：

逐帧动画

animation:move 1s steps(8) infinite

steps为步数

经常和精灵图一起来实现动画效果

动画时间线

允许将动画进度与特定事件绑定

animation-timeline

1. 滚动时间线：动画进度与页面或容器的滚动位置关联

animation: scrollbar 2s linear forwards; 给滚动线条一个动画
让动画绑定时间线： animation-timeline:scroll();

2. 视图时间线：动画进度与元素进入/离开视口的可见性关联

 animation-timeline:view();

Others

鼠标样式

cursor: 鼠标样式

样式如下：

CSS书写顺序

布局，盒模型，视觉，交互，其他

倒影效果

box-reflect：倒影方向 倒影距离 倒影图像

svg

特性：1.矢量图 2. 可编辑 3. 可交互 4.兼容性强

svg必须包裹在svg标签内，下载svg素材后需要打开源代码复制后使用

svg CSS属性

svg类似行内块元素，可以设置大小，移动位置，动画等

@keyframe move {
0% {
stroke-dasharray:0 600; // 实线长度为0 空隙长度为600
}

100% {
stroke-dasharray:600 0; // 实线长度为600 空隙长度为0
}

实线会从0->600 虚线会从600->0

@keyframe move {
0% {
strok-dashoffset:2783;
}

100% {
strok-dashoffset:0;
}

反向擦出也就是慢慢绘制出图形

overflow

overflow: visible 溢出可见

overflow: hidden 溢出隐藏

overflow: auto 溢出则自动显示滚动条

clip-path

用于初见负责的裁剪形状，使得元素仅显示被裁减区域内的部分

裁剪网站

filter

对元素或子元素进行实时处理，无需修改原始素材

滤镜阴影更完整，更明显

背景滤镜是对元素背后的背景应用滤镜，设置和元素的filter基本一致。

如果要设置毛玻璃背景效果，要结合background：transparent来使用

CSS 计算

变量

使用场景：1.主题切换 2.响应式设计 3.交互动画等

先定义变量 再使用变量

1. 定义color

--color: #000;

定义全局变量
:root {
--color: #000;
}

定义局部变量 {
--bgcolor:pink;
}

2. 使用

color: var(--color);
background-color: var(--bgcolor);

函数运算

注意： 运算符左右需要保留一个空格

calc() 可以执行数学运算

视口单位

vw和vh是viewport units

vw表示视口宽度的1%

vh表示视口高度的1%

注意就算是嵌套的盒子，设定vw和vh也和父盒子无关，仍然按照视口来