吾昂王

loading动效。

前言Web前端技术由 html、css 和 javascript 三大部分构成，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文主要对Web前端知识体系进行简单的梳理，对应的每个知识点 点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。因为知识点过多，导出图片会出现失真，所以此处只显示了大概知识点，需要查看具体内容的，可以点击前端地位导

HTML && CSS视频教程HTML学习笔记CSS学习笔记HTML && CSS 查漏补缺笔记Sass文档Javascript官方笔记视频教程 – 壹视频教程 – 贰项目教程学习笔记TypeScript官方文档入门文档视频教程 – 尚硅谷视频教程 – 千锋Webpack官方文档视频教程JQuery官方文档视频教程Ajax基础文档视频教程

径向渐变 径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周颜色渐变 语法： background：radial-gradient（shape at center，start-color，...，last-color）； center：渐变起点的位置，可以为百分比，默认是图形的正中心 shape：渐变的形状，ellipse表示椭圆形，corcle表示圆形，默认为ellipse，如果元素...

定位定位三要素：定位目标、参照物、坐标position（static：默认值，不进行定位） 1、absolute(绝对定位) 定位目标：给需要定位的元素添加定位 参照物：距离其最近的且带有定位的父元素，如果父元素一直未找到，会找到html 坐标：可以通过top/bottom/left/right四个属性值对元素进行坐标的设置 top：目标元素的上边离参照物的上边的位置 ...

弹性盒【控制子元素在父元素中的位置】： display： flex /inline-flex 特点： 1】在弹性盒内部，所有元素都是按照主轴排列的（可以从上往下排，也可以从左往右排） 2】在弹性盒内部的所有元素，都会默认转成块状元素，可以直接添加宽高 3】弹性盒只能影响它的子元素，不能影响孙元素 让父元素形成弹性盒【display:flex;】： 【给父元素加的属性】 1、改变主轴方向 ...

一、层级选择器 E>F 子选择器 选自匹配的F元素，且匹配的F元素所匹配的E元素的子元素 E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面 先会找到页面里面所有的E元素，看E元素后面的相邻的兄弟元素是否是F，是的话，给F添加样式 E~F 通用选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 先会找到页面里面所有的E元...

3D位移： CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数； 3D旋转： CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数； 3D缩放： CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数； 在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。 translate3d...

表单：必写：action、method、name （1）表单字段集<fieldset></fieldset>： 用于对表单中的元素进行分组，可以嵌套 功能：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。 （2）字段集标题<legend></legend>： 功能：legend元素可以再fieldset对象绘制的方框内插入一个标题。l...

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。圣杯布局与双飞翼布局圣杯布局来源于文章In Search of the Holy Grail，而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异，不过都遵循了以下要点：两侧宽度固定，中间宽度自适应 中间部分在DOM结构上优先，以便先行渲染 允许三列中的任意一列成为最高列 只需要使用一个额外的<div>标签下面我将依次介绍圣杯布局和.

高度塌陷：父元素高度自适应，子元素 float 后，造成父元素高度为0解决高度塌陷：1、个给高度塌陷的元素添加一个属性 overflow:hidden 触发了BFC，在计算BFC元素高度时，浮动元素也会参与计算 弊端：溢出隐藏2、清除浮动 2.1、在高度塌陷的元素里面的最下面，添加一个空的<div></div> 2.2、给空的div加一个属性clear:b...