初级前端要掌握哪些知识点才能找到一个20k的工作？（一）

墨蓝 2022-11-05 08:55 110阅读 0赞

![1cc777aab25fe1d037017b918339a1dd.png][]

不要害怕做梦，但是呢，也不要光做梦，要做一个实干家，而不是空谈家，求真力行。

## 前言 ##

如果这篇文章有帮助到你，给个关注，点赞，鼓励一下作者，接收好挑战了吗？

### Web模块 ###

#### html基本结构 ####

1.  `html`标签是由`<>`包围的关键词。
2.  `html`标签通常成对出现，分为标签开头和标签结尾。
3.  有部分标签是没有结束标签的，为单标签，单标签必须使用`/`结尾。
4.  页面所有的内容，都在`html`标签中。
5.  `html`标签分为三部分：标签名称，标签内容，标签属性。
6.  `html`标签具有语义化，可通过标签名能够判断出该标签的内容，语义化的作用是网页结构层次更清晰，更容易被搜索引擎收录，更容易让屏幕阅读器读出网页内容。
7.  标签的内容是在一对标签内部的内容。
8.  标签的内容可以是其他标签。

#### 标签属性 ####

1.  `class`属性：用于定义元素的类名
2.  `id`属性：用于指定元素的唯一`id`，该属性的值在整个`html`文档中具有唯一性
3.  `style`属性：用于指定元素的行内样式，使用该属性后将会覆盖任何全局的样式设定
4.  `title`属性：用于指定元素的额外信息
5.  `accesskey`属性：用于指定激活元素的快捷键
6.  `tabindex`属性：用于指定元素在`tab`键下的次序
7.  `dir`属性：用于指定元素中内容的文本方向，属性只有`ltr`或`rtl`两种
8.  `lang`属性：用于指定元素内容的语言

#### 事件属性 ####

1.  `window`窗口事件，`onload`，在网页加载结束之后触发，`onunload`，在用户从网页离开时发生（点击跳转，页面重载，关闭浏览器窗口等）
2.  `form`表单事件，`onblur`，当元素失去焦点时触发，`onchange`，在元素的值被改变时触发，`onfocus`，当元素获得焦点时触发，`onreset`，当表单中的重置按钮被点击时触发，`onselect`，在元素中文本被选中后触发，`onsubmit`，在提交表单时触发
3.  `keyboard`键盘事件，`onkeydown`，在用户按下按键时触发，`onkeypress`，在用户按下按键后，按着按键时触发。该属性不会对所有按键生效，不生效的有，`alt,ctrl,shift,esc`
4.  `mouse`鼠标事件，`onclick`，当在元素上发生鼠标点击时触发，`onblclick`，当在元素上发生鼠标双击时触发，`onmousedown`，当元素上按下鼠标按钮时触发，`onmousemove`，当鼠标指针移动到元素上时触发，`onmouseout`，当元素指针移出元素时触发，`onmouseup`，当元素上释放鼠标按钮时触发。`Media`媒体事件，`onabort`，当退出时触发，`onwaiting`，当媒体已停止播放但打算继续播放时触发。

#### 文本标签 ####

1.  段落标签`<p></p>`，段落标签用来描述一段文字
2.  标题标签`<hx></hx>`，标题标签用来描述一个标题，标题标签总共有六个级别，`<h1></h1>`标签在每个页面中通常只出现一次
3.  强调语句标签，`<em></em>`，用于强调某些文字的重要性
4.  更加强调标签，`<strong></strong>`和`<em>`标签一样，用于强调文本，但它强调的程度更强一些
5.  无语义标签`<span></span>`，标签是没有语义的
6.  短文本引用标签`<q></q>`，简短文字的引用
7.  长文本引用标签`<blockquote></blockquote>`，定义长的文本引用
8.  换行标签`<br/>`

#### 多媒体标签 ####

1.  链接标签，`<a></a>`
2.  图片标签，`<img/>`
3.  视频标签，`<video></video>`
4.  音频标签，`<audio></audio>`

#### 列表 ####

1.  无序列表标签，`ul,li`，`<ul></ul>`列表定义一个无序列表，`<li></li>`代表无需列表中的每一个元素
2.  有序列表，`ol,li`
3.  定义列表，`<dl></dl>`，定义列表通常和`<dt></dt>`和`<dd></dd>`标签一起使用

#### 表格 ####

1.  表格标签`<table></table>`
2.  表格的一行`<tr></tr>`
3.  表格的表头`<th></th>`
4.  单元格`<td></td>`
5.  表格合并，同一行内，合并几列`colspan="2"`，同一列内，合并几行`rowspan="3"`

#### 表单标签 ####

1.  表单标签`<form>`

`<form></form>`表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

`<form method="传送方式" action="服务器文件">`

`action`，浏览者输入的数据被传送到的地方

`method`，数据传送的方式

1.  输入标签`<input/>`

`name`：为文本框命名，用于提交表单，后台接收数据用。

`value`：为文本输入框设置默认值。

`type`：通过定义不同的`type`类型，`input`的功能有所不同。

text	单行文本输入框
    password	密码输入框（密码显示为***)
    radio	单选框 （checked属性用于显示选中状态）
    checkbox	复选框（checked属性用于显示选中状态）
    file	上传文件
    button	普通按钮
    reset	重置按钮（点击按钮，会触发form表单的reset事件）
    submit	提交按钮（点击按钮，会吃饭form表单的submit事件）
    email	专门用于输入 e-mail
    url	专门用于输入 url
    number	专门用于number
    range	显示为滑动条，用于输入一定范围内的值
    date	选取日期和时间（还包含：month、week、time、datetime、datetime-local）
    color	选取颜色

`button`按钮，下拉选择框`<select></select>`

<option value="提交值">选项</option>是下拉选择框里面的每一个选项

1.  文本域：`<textarea></textarea>`，当用户想输入大量文字的时候，使用文本域。`cols`，多行输入域的列数，`rows`，多行输入域的行数。

#### 其他语义化标签 ####

1.  盒子`<div></div>`
2.  网页头部`<header></header>`，`html5`新增语义化标签，定义网页的头部，主要用于布局，分割页面的结构
3.  底部信息`<footer></footer>`，`html5`新增语义化标签，定义网页的底部，主要用于布局，分割页面的结构
4.  导航`<nav></nav>`，`html5`新增语义化标签，定义一个导航，主要用于布局，分割页面的结构
5.  文章`<article></article>`，`html5`新增语义化标签，定义一篇文章，主要用于布局，分割页面的结构
6.  侧边栏`<aside></aside>`，语义化标签，定义主题内容外的信息，主要用于布局，分割页面的结构。
7.  时间标签`<time></time>`，语义化标签，定义一个时间

#### 网页结构 ####

1.  `<!DOCTYPE html>` 定义文档类型，告知浏览器用哪一种标准解释`HTML`
2.  `<html></html>`可告知浏览器其自身是一个 `HTML` 文档
3.  `<body></body>`标签之间的内容是网页的主要内容
4.  `<head></head>`标签用于定义文档的头部，它是所有头部元素的容器
5.  `<title></title>`元素可定义文档的标题
6.  `<link>`标签将`css`样式文件链接到`HTML`文件内
7.  `<meta>`定义文档的元数据

#### 模块划分 ####

1.  常见的企业网站，多由头部区，展示图片区域，主题区域，底部信息区域组成
2.  网页拆分原则: – 由上到下 - 由内到外

#### CSS代码语法 ####

1.  `CSS`全称为层叠样式表`(Cascading Style Sheets)`，它主要是用于定义`HTML`内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
2.  `css`代码通常存放在`<style></style>`标签内
3.  `css` 样式由选择符和声明组成，而声明又由属性和值组成
4.  选择符`{属性:值}`
5.  选择符：又称选择器，指明网页中要应用样式规则的元素

#### CSS 放置位置 ####

1.  行内样式，不建议使用
2.  内联式样式表
3.  外联样式表

#### CSS的继承 ####

1.  `CSS`的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
2.  不可继承样式：`display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear`
3.  可以继承的样式：`letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、visibility、cursor`

#### 选择器的种类 ####

1.  标签选择器:通过标签的名字，修改`css`样式
2.  通配符选择器:选择页面中所有的元素
3.  属性选择器
4.  后代选择器:选择某个父元素下面所有的元素
5.  一级子元素选则器:选择某个父元素的直接子元素，后代选择器是选择父元素的所有子孙元素，一级子元素原则器只选择第一级子元素，不会再向下查找元素
6.  `id`选择器：通过`id`查找页面中唯一的标签
7.  `class`选择器:通过特定的`class`（类）来查找页面中对应的标签，以 `.class`名称
8.  伪类选择器:`:hover`鼠标移入某个元素;`:before`在某个元素的前面插入内容;`:after`在某个元素的后面插入内容
9.  群组选择器:可以对多个不同的选择器设置相同的样式

#### 选择器的优先级 ####

1.  当有不同的选择器对同一个对象进行样式指定时，并且两个选择器有相同的属性被赋予不同的值时。
2.  通过测算那个选择器的权重值最高，应用哪一个选择器的样式
3.  权重计算方式:

标签选择器：1
    
    class选择器：10
    
    id选择器：100
    
    行内样式：1000
    
    !important 最高级别，提高样式权重，拥有最高级别

#### 背景样式 ####

1.  背景颜色`background-color`
2.  背景图片`background-image`

background-image:url(bg01.jpg);

1.  背景图片位置`background-position`

background-position:10px 100px;
    
    // 代表坐标x，y轴

1.  背景图片重复`background-repeat`

background-repeat:no-repeat
    
    // no-repeat 设置图像不重复，常用
    
    // round 自动缩放直到适应并填充满整个容器
    
    // space 以相同的间距平铺且填充满整个容器

1.  背景图片定位`background-attachment`

background-attachment:fixed
    
    // 背景图像是否固定或者随着页面的其余部分滚动
    
    // background-attachment的值可以是scroll（跟随滚动），fixed（固定）

1.  `background`缩写

background:#ff0000 url(bg01.jpg) no-repeat fixed center

#### 字体样式 ####

1.  字体族`font-family`

font-family:"微软雅黑","黑体";

1.  字体大小`font-size`

font-size:12px;

> 网页默认字体大小是`16px`

1.  字体粗细`font-weight`

font-weight:400;
    
    normal（默认）
    bold（加粗）
    bolder（相当于<strong>和<b>标签）
    lighter （常规）
    100 ~ 900 整百（400=normal，700=bold）

1.  字体颜色`color`

颜色的英文单词color:red;
    
    十六进制色：color: #FFFF00;
    
    RGB(红绿蓝)color:rgb(255,255,0)
    
    RGBA（红绿蓝透明度）A是透明度在0~1之间取值。color:rgba(255,255,0,0.5)

1.  字体斜体`font-style`

font-style:italic
    
    normal 文本正常显示
    
    italic 文本斜体显示
    
    oblique 文本倾斜显示

#### 文本属性 ####

1.  行高`line-height`

line-height:50px;

可以将父元素的高度撑起来

1.  文本水平对齐方式`text-align`

left 左对齐
    center 文字居中
    right 右对齐

1.  文本所在行高的垂直对齐方式`vertical-align`

baseline 默认
    
    sub 垂直对齐文本的下标，和<sub>标签一样的效果
    
    super 垂直对齐文本的上标，和<sup>标签一样的效果
    
    top 对象的顶端与所在容器的顶端对齐
    
    text-top 对象的顶端与所在行文字顶端对齐
    
    middle 元素对象基于基线垂直对齐
    
    bottom 对象的底端与所在行的文字底部对齐
    
    text-bottom 对象的底端与所在行文字的底端对齐

1.  文本缩进`text-indent`

text-indent:2em;

> 通常用在段落开始位置的首行缩进

1.  字母之间的间距`letter-spacing`
2.  单词之间间距`word-spacing`
3.  文本的大小写`text-transform`

capitalize 文本中的每个单词以大写字母开头。
    
    uppercase 定义仅有大写字母。
    
    lowercase 定义仅有小写字母。

1.  文本的装饰`text-decoration`

none 默认。
    underline 下划线。
    overline 上划线。
    line-through 中线。

1.  自动换行`word-wrap`

word-wrap: break-word;

#### 基本样式 ####

1.  宽度`width`

width:200px;
    定义元素的宽度

1.  高度`height`

height:300px
    元素默认没有高度
    需要设置高度
    可以不定义高度，让元素的内容将元素撑高

1.  鼠标样式`cursor`

定义鼠标的样式`cursor:pointer`

default默认
    pointer小手形状
    move移动形状

1.  透明度`opacity`

opacity:0.3

透明度的值0~1之间的数字，0代表透明，1代表完全不透明
    
    透明的元素，只是看不到了，但是还占据着文档流

1.  可见性`visibility`

visibility:hidden;
    
    visible 元素可见
    
    hidden 元素不可见
    
    collapse 当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。

1.  溢出隐藏 `overflow`

> 设置当对象的内容超过其指定高度及宽度时如何显示内容

visible 默认值，内容不会被修剪，会呈现在元素框之外。
    hidden 内容会被修剪，并且其余内容是不可见的。
    scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

1.  边框颜色`outline`

`input`文本输入框自带边框，且样式丑陋，我们可以通过`outline`修改边框

outline:1px solid #ccc;
    
    outline:none清除边框

#### 样式重置 ####

早期的网页没有`css`样式，为了界面美观，很多元素自带`margin、padding`等样式，但这些样式在不同浏览器解析的值都不一样，需要将`css`样式重置，保证在不同浏览器显示一致。

清除元素的margin和padding
    去掉自带的列表符
    去掉自带的下划线

#### 盒模型样式 ####

1.  块状元素、内联元素和内联块状元素。

块级元素:

*  每个块级元素都从新的一行开始，并且其后的元素也另起一行。
 *  元素的高度、宽度、行高以及顶和底边距都可设置。
 *  元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。

行内元素:

*  和其他元素都在一行上
 *  元素的高度、宽度、行高及顶部和底部边距不可设置
 *  元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状元素:

*  和其他元素都在一行上
 *  元素的高度、宽度、行高以及顶和底边距都可设置。

1.  元素分类转换`display`

`block`：将元素转换为块级元素

`inline`：将元素装换为行级元素

`inline-block`：将元素转换为内联块元素

`none`: 将元素隐藏

1.  描边`border`

border:2px solid #f00;

线条的样式：

dashed（虚线）| dotted（点线）| solid（实线）。

`css`样式中允许只为一个方向的边框设置样式：

下描边border-bottom:1px solid red;
    
    上描边border-top:1px solid red;
    
    右描边border-right:1px solid red;
    
    左描边border-left:1px solid red;

1.  间距`margin`

div{margin:20px 10px 15px 30px;}

1.  内填充`padding`

padding:10px

#### 浮动float ####

1.  浮动原理

*  浮动使元素脱离文档普通流，漂浮在普通流之上的。
 *  浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。
 *  浮动会产生块级框（相当于设置了`display:block`），而不管该元素本身是什么。

1.  清除浮动带来的影响

`clear` 清除浮动：

none : 不清除（默认值）。
    
    left : 不允许左边有浮动对象
    right : 不允许右边有浮动对象
    both : 不允许两边有浮动对象

1.  利用伪类实现清除浮动

.clearFix {
      	content="";
      	display:block;
      	width:0;
      	height:0;
      	clear:both;
    }

#### 定位position ####

1.  定位功能可以让布局变的更加自由。
2.  层模型–绝对定位（相对于父类）

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

#box_relative {
      position: absolute;
      left: 30px;
      top: 20px;
    }

如下图所示：

![7251e8fbbe25a9ebd68310a8af304211.png][]

> 如果想为元素设置层模型中的绝对定位，需要设置`position:absolute`(绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用`left、right、top、bottom`属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于`body`元素，即相对于浏览器窗口。

1.  层模型–相对定位（相对于原位置）

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

#box_relative {
      position: relative;
      left: 30px;
      top: 20px;
    }

如下图所示：

![7c56b34860c3c660f9217e85b8e296a4.png][]

> 如果想为元素设置层模型中的相对定位，需要设置`position:relative`（相对定位），它通过`left、right、top、bottom`属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按`static(float)`方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于原位置移动，移动的方向和幅度由`left、right、top、bottom`属性确定，偏移前的位置保留不动。

1.  层模型–固定定位（相对于网页窗口）

position:fixed

> 与`absolute`定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与`background-attachment:fixed`属性功能相同。

#### 浏览器默认样式 ####

1.  页边距

`IE`默认为`10px`，通过`body`的`margin`属性设置

要清除页边距一定要清除这两个属性值

body { margin:0; padding:0;}
    复制代码

1.  段间距

`IE`默认为`19px`，通过`p`的`margin-top`属性设置

`p`默认为块状显示，要清除段间距，一般可以设置

p { margin-top:0; margin-bottom:0;}

### html5 ###

#### HTML5 的优势 ####

1.  解决跨浏览器，跨平台问题
2.  增强了 `web` 的应用程序

#### HTML5 废弃元素 ####

frame frameset noframes
    acronym applet dir
    basefont big center font strike tt

#### HTML5 新增元素 ####

<header>	用于定义文档或节的页眉
    
    <footer>	用于定义文档或节的页脚
    
    <article>	用于定义文档内的文章
    
    <section>	用于定义文档中的一个区域（或节）
    
    <aside>	用于定义与当前页面或当前文章的内容几乎无关的附属信息
    
    <figure>	用于定义一段独立的引用，经常与说明(caption)<figcaption>配合使用，通常用在主文中的图片，代码，表格等。
    
    <figcaption>	用于表示是与其相关联的引用的说明/标题，用于描述其父节点<figure>元素里的其他数据。
    
    <hgroup>	用于对多个<h1>~<h6>元素进行组合
    
    <nav>	用于定义页面上的导航链接部分
    
    <mark>	用于定义高亮文本
    
    <time>	用于显示被标注的内容是日期或时间（24小时制）
    
    <meter>	用于表示一个已知最大值和最小值的计数器
    
    <progress>	用于表示一个进度条
    
    <audio>	定义声音，比如音乐或其他音频流
    
    <video>	定义视频，比如电影片段或其他视频流
    复制代码

#### HTML5 表单相关元素和属性 ####

input新增type类型
    
    color	用来创建一个允 许用户使用颜色选择器，或输入兼容 CSS 语法的颜色代码的区域
    
    time	生成一个时间选择器
    
    datetime	生成一个 UTC 的日期时间选择器
    
    datetime-local	生成一个本地化的日期时间选择器
    
    date	显示一个日期输入区域，可同时使用日期选择器，结果值包括年、月、日，不包括时间。
    
    month	生成一个月份选择器，它结果值包括年份和月份， 但不包括日期
    
    week	生成一个选择的几周的选择器
    
    email	生成一个 E-mail 输入框
    
    number	生成一个只能输入数字的输入框
    
    range	生成一个拖动条，通过拖动条，使得用户只能输入指定范围，指定步长的值
    
    search	生成一个专门用于输入搜索关键字的文本框
    
    tel	生成一个只能输入电话号码的文本框
    
    url	生成一个 URL 输入框

HTML5 input新增属性
    
    placeholder	主要用在文本框，规定可描述输入字段预期值的简短的提示信息
    
    autocomplete	为了完成表单的快速输入，一般浏览器提供了自动补全的功能选择
    
    autofocus	当为某个表单控件增加该属性后，当浏览器打开这个页面， 这个表单控件会自动获得焦点
    
    list	为文本框指定一个可用的选项列表，当用户在文本框中输 入信息时，会根据输入的字符，自动显示下拉列表提示，供用户从中选择
    
    pattern	用于验证表单输入的内容，通常 HTML5 的 type 属性，比如 email、tel、 number、url 等，已经自带了简单的数据格式验证功能了，加上 pattern 属性后， 验证会更加高效
    
    novalidate	当提交表单时不对其进行验证
    
    required	必需在提交之前填写输入字段
    
    spellcheck	拼写检查，为<input>、<textarea>等元素新增属性
    
    formenctype	规定在发送到服务器之前应该如何对表单数据进行编码
    
    formtarget	带有两个提交按钮的表单，会提交到不同的目标窗口
    
    multiple	一次上传多个文件
    
    maxlength wrap	<textarea>新增<br />maxlength：用于规定文本区域最大字符数。<br />wrap：是否包含换号符（soft/ hard）

### css3 ###

#### CSS3 新增选择器 ####

1.  兄弟选择器

`元素 1 ~ 元素 2` 第1个元素之后，所有的元素2都会被选择，且这些元素和第一个元素拥有同一个父元素（两个元素之间不一定要相邻）。

1.  属性选择器

*  `E[attribute^=value]` 用于选取带有以指定值开头的属性值的元素
 *  `E[attribute$=value]` 用于选取属性值以指定值结尾的元素
 *  `E[attribute*=value]` 用于选取属性值中包含指定值的元素，位置不限，也不限制整个单词

1.  伪类选择器

*  `:root` 选择文档的根元素，HTML 里，永远是`<html>`元素
 *  `:last-child` 向元素添加样式，且该元素是它的父元素的最后一个子元素
 *  `:nth-child(n)` 向元素添加样式，且该元素是它的父元素的第 n 个子元素
 *  `:nth-last-child(n)` 向元素添加样式，且该元素是它的父元素的倒数第 n 个子 元素
 *  `:only-child` 向元素添加样式，且该元素是它的父元素的唯一子元素
 *  `:first-of-type` 向元素添加样式，且该元素是同级同类型元素中第一个元 素
 *  `:last-of-type` 向元素添加样式，且该元素是同级同类型元素中最后一个 元素
 *  `:nth-of-type(n)` 向元素添加样式，且该元素是同级同类型元素中第 n 个元 素
 *  `:nth-last-of-type(n)` 向元素添加样式，且该元素是同级同类型元素中倒数第 n 个元素
 *  `:only-of-type` 向元素添加样式，且该元素是同级同类型元素中唯一的元素
 *  `:empty` 向没有子元素（包括文本内容）的元素添加样式

1.  伪元素选择器

*  `:enabled` 向当前处于可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样式
 *  `:disabled` 向当前处于不可用状态的元素添加样式，通常用于定义表单的 样式或者超链接的样式
 *  `:checked` 向当前处于选中状态的元素添加样式
 *  `:not(selector)` 向不是 `selector` 元素的元素添加样式
 *  `:target` 向正在访问的锚点目标元素添加样式
 *  `::selection` 向用户当前选取内容所在的元素添加样式

#### CSS3 新增属性 ####

1.  新增背景属性

*  `background-clip` 设置背景覆盖范围 `border-box/paddingbox/content-box`
 *  `background-origin` 设置背景覆盖的起点 `border-box/paddingbox/content-box`
 *  `background-size` 设置背景的大小 `cover/contain/长度/百分比`

1.  新增的字体文本相关属性

*  `text-overflow` 设置当文本溢出元素框时处理方式 `clip/ellipsis`
 *  `word-wrap` 规定单词的换行方式 `normal/break-word`
 *  `word-break` 规定自动换行的方式 `normal/break-all/keep-all`

1.  新增盒模型属性

*  `box-shadow` 阴影 `h-shadow v-shadow <br />blur spread color inset`
 *  `resize` 调整尺寸 `none/both/horizontal`
 *  `outline-offset` 轮廓的偏移量 `length/inherit`

#### 新增变形动画属性 ####

1.  `transform`

*  `translate(x,y)`
 *  `rotate(angle)`
 *  `scale(x,y)`
 *  `skew(angleX ,angleY)`

1.  `transform-origin`

表示元素旋转的中心点，默认值为 `50% 50%。`

*  第一个值表示**元素旋转中心点的水平位置**，它还可以赋值 `left、right、center`、长度、百分比
 *  第二个值表示**元素旋转中心点的垂直位置**，它还可以赋值 `top、bottom、 center`、长度、百分比。

#### 3D 变形属性 ####

1.  `transform 3D`函数

`transform` 增加了三个变形函数：

*  `rotateX`：表示元素沿着 `x` 轴旋转。
 *  `rotateY`：表示元素沿着 `y` 轴旋转。
 *  `rotateZ`：表示元素沿着 `z` 轴旋转。

1.  `transform-style`用来设置嵌套的子元素在 `3D` 空间中显示效果。
2.  `perspective`设置成透视效果，透视效果为近大远小。
3.  `perspective-origin`设置 `3D` 元素所基于的 `x` 轴和 `y` 轴，改变 `3D` 元素的底部位置，该属性取值同 `transform-origin`，默认值为 `50% 50%。`
4.  `backface-visibility`用来设置当元素背面面向屏幕时是否可见，通常用于设置 不希望用户看到旋转元素的背面。

它的属性值有`visible`（背面可见，默认值）、 `hidden`（背面不可见）两个。

#### CSS3 的过渡属性 ####

*  `transition-delay` 设置过渡的延迟时间
 *  `transition-duration` 设置过渡的过渡时间
 *  `transition-timing-function` 设置过渡的时间曲线
 *  `transition-property` 设置哪条 `CSS` 使用过渡
 *  `transition` 一条声明设置 所有过渡属性

#### CSS3 的动画属性 ####

1.  `animation`

*  `@keyframes` 定义动画选择器
 *  `animation-name` 使用`@keyframes` 定义的动画
 *  `animation-delay` 设置动画的持续动画时间
 *  `animation-timing-function` 设置动画的时间曲线
 *  `animation-iteration-count` 设置动画播放次数
 *  `animation-direction` 设置动画反向播放
 *  `animation-play-state` 设置动画播放状态
 *  `transition` 一条声明设置所有动画属性

#### CSS3 新增多列属性 ####

*  `column-count` 设置元素应该被分隔的列数
 *  `column-width` 设置列的宽度
 *  `columns` 一条声明设置列宽和列数 `column`
 *  `column-gap` 设置列之间的间隔
 *  `column-span` 设置元素应该横跨的列数
 *  `column-rule-style` 设置列之间间隔的样式
 *  `column-rule-color` 设置列之间间隔的颜色
 *  `column-rule-width` 设置列之间间隔的宽度
 *  `column-rule` 一条声明设置列之间间 隔所有属性

#### CSS3新增单位 ####

`px、em、rem、vh、 vw和%` 移动端长度单位

> 使用CSS单位`px、em、rem、vh、 vw`等实现页面布局。

*  `px`：绝对单位，页面按精确像素展示
 *  `em`：相对单位，基准点为父节点字体的大小，如果自身定义了`font-size`按自身来计算（浏览器默认字体是`16px`），整个页面内`1em`不是一个固定的值。

`em`会根据父级元素的大小而变化，但是如果嵌套了多个元素，要计算它的大小，是很容易出错的，这样就引申出了`rem`。

*  `rem`：相对单位，可理解为`”root em”`, 相对根节点`html`的字体大小来计算，`CSS3`新加属性。
 *  `%`：`%` 百分比，相对长度单位，相对于父元素的百分比值
 *  `vw、vh、vmin、vmax` 主要用于页面视口大小布局

`vw：viewpoint width`，视窗宽度，`1vw`等于视窗宽度的`1%。`

`vh：viewpoint height`，视窗高度，`1vh`等于视窗高度的`1%。`

*  `vmin：vw`和`vh`中较小的那个。
 *  `vmax：vw`和`vh`中较大的那个。

#### 弹性盒模型 ####

弹性盒模型的语法基础概念

> 任何一个容器都可以指定弹性布局

本文连载中，敬请期待哦~

下面要分享的前端面试题是我面试过程中遇到的题目，每一次面试后我都会复盘总结。我做了一个整理，并且在技术博客找到了专业的解答，大家可以参考下：

![4a5419a1c90ddbb21a2fdcf130577364.png][]

![0432b8e539325b94948089383d0bfa8c.png][]

![9749ea39072fc4b7b27af6f3a4db5ab1.png][]

#### **由于篇幅有限，只能分享部分面试题，完整版面试题及答案可以[【点击我】][Link 1]阅读下载哦~无偿分享给大家** ####

[1cc777aab25fe1d037017b918339a1dd.png]: /images/20221023/025371009fb34709830ad908e288330c.png
[7251e8fbbe25a9ebd68310a8af304211.png]: /images/20221023/590328fc0d3347e581badbaf3a6bcbc1.png
[7c56b34860c3c660f9217e85b8e296a4.png]: /images/20221023/9ce86b050ce84e26a57a1eb1d6eecd38.png
[4a5419a1c90ddbb21a2fdcf130577364.png]: /images/20221023/8399bc00d27a4c3da3bc8e03bf65e155.png
[0432b8e539325b94948089383d0bfa8c.png]: /images/20221023/231d065293824646bd6964817bce73bb.png
[9749ea39072fc4b7b27af6f3a4db5ab1.png]: /images/20221023/f45babfe6d77407dbc6073291d771c45.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=SBb7oFqq