写在前面
大家好,我是Kerwin丶R,一路走来,受到了许许多多人的帮助,也拜读了各方大神的文章,现在把自己的笔记慢慢全部总结整理开源,希望能够帮助到更多的人,能够和您一起进步。如果文章有问题,希望能够及时提出,以免误导更多的人。
我喜欢精炼的答案,不喜欢长篇大论的回答,我会尽力把我的答案变得详细且易懂。如果想要提升自己,还需要根据相应的点去了解更多的原理。
食用对象:初级前端 & 在校生
美味指数:😋😋😋😋😋
如果您是大佬,先给您问个好,建议您Alt+F4,这篇文章不适合您啦😛
HTML
1.什么是DOCTYPE?⭐⭐⭐
DOCTYPE是document type的简写,它是一种标记语言的文档类型声明,
即告诉浏览器当前 HTML 是用什么版本编写的,应该用何种规范来解析页面。
在W3C标准出来之后,浏览器对页面的渲染有了统一的标准,这种渲染方式叫做标准模式。
<!DOCTYPE>
不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现,
就是把如何渲染html页面的权利交给了浏览器,有多少种浏览器就有多少种展示方式。
2.html语义化标签:⭐⭐⭐⭐
含义:让标签有自己的含义
1.让人更容易读懂(增加代码可读性),便于团队开发和维护
2.方便其它设备以语义的方式来渲染网页,让搜索引擎更容易读懂(SEO)
3.src与href的区别⭐⭐⭐
src:指向外部资源位置,指向的内容将会嵌入到文档中当前标签所在位置,替换当前内容,
同时会暂停其他资源的下载和处理,直至将该资源加载,编译,执行完毕,常用的有script、img。
href(Hypertext Reference的缩写,我一般读作HyRefer):
表示超文本引用,用来建立当前元素和文档之间的链接,同时会并行下载资源并且不会停止对当前文档的处理,常用的有:link、a。
4.meta标签⭐⭐⭐
<meta>
标签提供关于 HTML 文档的元数据。它不会显示在页面上,但是对于机器是可读的。
可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务,主要属性有http-equiv和name
5.块级元素和内联元素⭐⭐⭐⭐
- 块级元素(独占一行):div, h1, h2, table, form, ul, ol, p
- 内联元素(不独占一行):span, img, input, button, a, i, label
- 区别:
块级元素总是占据一行,高度,宽度等都能设置
内联元素和其他元素在同一行的,并不自己占据一行,高度,宽度不能控制,只能容纳文本或者其他内联元素,margin只有left和right起作用
6.SVG和Canvas的区别⭐⭐⭐
SVG:SVG 是一种使用 XML 描述 2D 图形的语言,绘制出来的每一个图形元素都是独立的DOM节点,可方便后期绑定事件或修改,不适合游戏应用。
Canvas:Canvas 通过 JavaScript 来绘制 2D 图形,可以看做是一个画布,其绘制出来的图形为标量图,依赖分辨率,适合做游戏。
7.h5新增标签⭐⭐⭐⭐
- header标签包含引导和导航等,通常包含
h1~h6
、搜索框、logo等。 - footer标签一般配合address标签(显示地址),包含作者信息、相关链接等。
- nav标签一般包含多个a标签,构建导航组件。
- aside标签主要装载广告、侧边栏。
- article标签包含文章,一般内嵌header、footer、h1、p标签。
- section标签可以用在以上任一一个标签中划分组件。
- hgroup顾名思义是h1~h6的集合。
CSS
1.CSS盒模型⭐⭐⭐⭐⭐
组成:content(内容), padding(内边距), border(边框), margin(外边距)
1:content-box
(W3C标准)(默认)
width: 表示content:的宽度,不包含padding 和 border
2:border-box
(IE标准)
width: 表示content + padding + border 的总和
box-sizing
可以控制盒模型,默认为content-box
2.margin重叠与margin负值问题⭐⭐⭐⭐
margin重叠:
1.相邻元素的margin-top和margin-bottom会发生重叠
2.相邻元素的margin-right和margin-left不会发生重叠
margin负值:
1.margin-top和margin-left负值,自身元素向上,向左移动
2.margin-right负值,右侧元素左移,自身不受影响
3.margin-bottom负值,下方元素上移,自身不受影响
3.BFC⭐⭐⭐⭐⭐
含义:块级格式化上下文,一块独立渲染区域,内部元素的渲染不会影响边界以外的元素
1.常见的触发BFC的条件
- html根元素
- float不是none的元素
- position是absolute或fixed的元素
- overflow不是visible的块元素
- display是flex inline-block,table-cell的元素 2.BFC的作用
- 避免外边距重叠
<style>
.box1 {
width: 100px;
height: 100px;
background-color: #07d268;
margin-bottom: 50px;
}
.box2 {
width: 100px;
height: 100px;
background-color: #833cc9;
margin-top: 20px;
}
.wrap {
overflow: hidden;
}
</style>
<div class="box1"></div>
<div class="wrap"><div class="box2"></div></div>
- 清除浮动(给父级元素加上overflow: auto)
- 阻止元素被浮动元素覆盖(给被覆盖的元素加上overflow: auto)
4.三栏布局⭐⭐⭐⭐
圣杯布局和双飞翼布局
目的:
- 三栏布局,中间一栏最先加载和渲染(内容最重要)
- 两侧内容固定,中间内容随着宽度自适应
- 一般用于PC网页
技术总结: - 使用float布局
- 两侧使用margin负值,以便和中间内容横向重叠
- 防止中间内容被两侧覆盖,一个用padding一个用margin
区别:
- 双飞翼布局采用margin留出空位,而圣杯布局采用padding
- 双飞翼布局采用margin-left负值后不用再根据自身定位,而圣杯布局需要 双飞翼布局代码:
<style>
body {
min-width: 550px
}
.column {
float: left;
}
#center {
width: 100%;
height:200px;
background-color: #cccccc;
}
#main {
margin: 0 190px 0 190px;
}
#left {
background-color: #ffff00;
width: 190px;
height:200px;
margin-left: -100%;
}
#right {
background-color: red;
width: 190px;
height:200px;
margin-left: -190px;
}
</style>
<div id="center" class="column">
<div id="main">
this is center
</div>
</div>
<div id="left" class="column">this is left</div>
<div id="right" class="column">this is right</div>
圣杯布局代码:
<style>
body {
min-width: 550px
}
#header {
text-align: center;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left
}
#center {
background-color: #ccc;
width: 100%
}
#left {
position: relative;
background-color: yellow;
width: 200px;
margin-left: -100%;
right: 200px
}
#right {
background-color: red;
width: 150px;
margin-right: -150px;
}
#footer {
clear: both;
text-align: center;
background-color: #f1f1f1
}
</style>
<div id="container">
<div id="center" class="column">this is center</div>
<div id="left" class="column">this is left</div>
<div id="right" class="column">this is right</div>
</div>
5. 两栏布局⭐⭐⭐⭐
知道了三栏布局,想来两栏布局对你一定不在话下,下面介绍三种两栏布局的方式,一定要掌握。
- 绝对定位方式
<style>
.wrap {
position: relative;
width: 100%;
height: 200px;
}
.box1 {
position: absolute;
width: 150px;
height: 200px;
background-color: #d43131;
}
.box2 {
position: absolute;
left: 150px;
right: 0;
height: 200px;
background-color: #07d268;
}
</style>
<div class="wrap">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
- 浮动方式
<style>
.box1 {
float: left;
width: 150px;
height: 200px;
background-color: #d43131;
}
.box2 {
margin-left: 150px;
height: 200px;
background-color: #07d268;
}
</style>
<div class="wrap">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
- flex方式
<style>
.wrap {
display: flex;
height: 200px;
}
.box1 {
width: 150px;
height: 200px;
background-color: #d43131;
}
.box2 {
flex: 1;
height: 200px;
background-color: #07d268;
}
</style>
<div class="wrap">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
5.关于浮动⭐⭐⭐⭐⭐
浮动的特点:
浮动会使元素脱离标准流,不占据页面空间,会覆盖标准流的元素,但不会覆盖标准流元素的文字
元素会排列在父层元素的左边或左边,或排列在已经浮动的元素的左边或者右边
清除浮动的方法:
- 触发BFC
给父级元素加上overflow: auto - 利用伪元素(clearfix)
.clearfix::after {
content: '';
display: table;
clear: both;
}
- 多设置一个兄弟元素,加上clear:both,其他方法都大同小异。
6.定位⭐⭐⭐⭐⭐
- static:默认定位
- relative:依据自身定位
- absolute:依据最近一层的定位元素定位
- fixed:固定定位,元素的位置相对于浏览器窗口是固定位置
- inherit:继承父元素的定位
- sticky:粘性定位
依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
7.水平垂直居中⭐⭐⭐⭐⭐
重点,建议尝试多种方法
- 利用absolute绝对定位,top和left: margin-left和margin-top都取负值,为元素自身宽高的一半
- 利用absolute绝对定位,top和left: 50%,transform: translate(-50%, -50%)
- 利用absolute绝对定位:top, left, bottom, right都设置为0 ,margin: auto
- 利用flex
.father {
display: flex;
justify-content: center;
align-items: center;
}
- 利用grid,网格布局
PS:行内元素还可以:
水平居中:text-align: center
垂直居中:line-height的值等于height
8.line-height的继承⭐⭐⭐
- 父亲的line-height为具体的值,如30px,子孙则继承该值,
- 如果为比例,如2/1.5,则继承该比例,计算还是根据自己的font-size计算
- 如果为百分比,如200%,则继承根据父亲的font-size乘以比例计算出来的值。(考点)
9.长度单位⭐⭐⭐⭐
- px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的
- em:相对长度单位,相对于父元素,不常用
- rem:相对长度单位,相对于根元素,常用于响应式布局
10.响应式布局⭐⭐⭐⭐
含义:响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局
实现方式:
1.媒体查询
2.百分比布局
通过百分比单位,可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化,从而实现响应式的效果
3.rem布局
REM是CSS3新增的单位,移动端的支持度很高,rem单位都是相对于根元素html的font-size来决定大小的
4.视口单位
css3中新的单位vw/vh
vw 相对于视窗的宽度,1vw 等于视口宽度的1%,即视窗宽度是100vw
vh相对于视窗的高度,1vh 等于视口高度的1%,即视窗高度是100vh
vmin vw和vh中的较小值
vmax vw和vh中的较大值
可以搭配rem使用
响应式设计与自适应设计的区别:
- 响应式开发
一套
界面,通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容; - 自适应需要开发
多套
界面,通过检测视口分辨率,来判断当前访问的设备是pc端、平板、手机,从而请求服务层,返回不同的页面。
11. CSS选择器:⭐⭐⭐⭐
- 类选择器:.X
- id选择器:#X
- 标签选择器:div
- 通用选择器:*
- 后代选择器:X Y
- 子元素选择器:X>Y
- 属性选择器:[attr],选择所有包含attr属性的
- 相邻兄弟选择器:A+B,B是A的下一个兄弟节点,B紧跟A,匹配B
- 通用兄弟选择器 A~B B是A之后的兄弟节点,匹配B,B可以使很多个
- 伪类选择器:例子:
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标移动到链接上
:active 选定的链接
:first-child等等 - 伪元素选择器
::before
::after
伪类和伪元素的区别:
- 伪类:
为了能够表达无法通过简单的选择器表达的信息,或者说用来添加一些选择器的特殊效果,一般为单个冒号加一个伪类名称
- 伪元素: 伪元素用于创建一些不在文档树中的元素,并为其添加样式,虽然用户可以看到这些文本,但是这些文本实际上不再文档树中
选择器权重:
- 内联样式,如: style="...",权值为1000。
- ID选择器,如:#content,权值为100。
- 类,伪类、属性选择器,如.content,权值为10。
- 类型选择器、伪元素选择器,如div p,权值为1。
- 通配符、子选择器、相邻选择器等。如* > +,权值为0000。
- 如果有!important优先级将会被提升到最高
12.@import和link的区别 ⭐⭐⭐
- link是html提供的标签,@import是css的语法规则,只能加载在style标签内和css文件中
- link不存在兼容问题,@import对低版本可能存在兼容问题
- 加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载
13.display: none和visibility: hidden和opacity: 0的区别⭐⭐⭐⭐
- 空间占据问题
display: none 隐藏后的元素不占据任何空间
visibility: hidden 和opacity: 0隐藏的元素空间依旧存在。 - 回流重绘问题
display: none 隐藏产生回流和重绘(reflow 和 repaint)
visibility: hidden和opacity: 0只产生重绘 - 继承性
display:none一旦设置自己和后代将会消失
visibility具有继承性,如果将子元素的visibility设置回visible,name子元素将会显示出来
opacity: 0 也会被子元素继承,但是不能通过设置子元素opacity: 0使其重新显示 - 事件绑定
display: none和visibility: hidden时绑定的事件不能触发
opacity: 0时绑定的事件能够触发。 - 过渡动画
transition对于display和visibility是无效的
transition对于opacity是有效的
14.flex ⭐⭐⭐⭐⭐
作为平时最常用的布局方式,这是必须详细掌握的,推荐阮一峰--flex ,以下是上面文章的部分总结:
flex是弹性盒子,任何一个容器都可以指定为 Flex 布局。
给容器设置display: flex后,它的所有子元素自动成为容器成员
容器默认存在两根轴:水平的主轴和垂直的交叉轴
容器有6个属性:
- flex-direction
决定主轴的方向
flex-direction: row | row-reverse | column | column-reverse - flex-wrap
如果一条轴线排不下,如何换行。
flex-wrap: nowrap | wrap | wrap-reverse - flex-flow
是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap - justify-content
定义了项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around - align-items
定义项目在交叉轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch(默认值) - align-content
定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch; 子元素的6个属性 - order
定义项目的排列顺序。数值越小,排列越靠前,默认为0 - flex-grow
定义项目的放大比例,默认为0 - flex-shrink
定义了项目的缩小比例,默认为1 - flex-basis
定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小 - flex
是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选 - align-self
允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto
align-self: auto | flex-start | flex-end | center | baseline | stretch;
15.画三角形或梯形⭐⭐⭐⭐
- CSS方法:
<style>
.box {
width: 0;
height: 0;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-top: 100px solid #d43131;
border-bottom: 100px solid transparent;
}
</style>
<div class="box"></div>
如果需要画梯形就改变width的值即可
- Canvas方法:
<style>
#box2 {
width: 300px;
height: 300px;
}
</style>
<canvas id="box2"></canvas>
const canvas = document.querySelector('#box2')
const ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.lineTo(0, 50);
ctx.closePath();
ctx.fillStyle="#8989e7";
ctx.fill();
16. z-index⭐⭐⭐
关于z-index,起初我只知道设置position后z-index大的就会在上面,但是实际做项目却出现了许许多多的问题
推荐一篇讲z-index很全面的文章彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
- 首先需要比较两个元素是否在同一个层叠上下文里,如果是再根据以下层叠顺序图比较,如果不是,就需要比较他们层叠上下文的层叠顺序 PS:层叠顺序表
17. CSS3新特性⭐⭐⭐⭐
- 边框圆角 border-radius
- 阴影box-shadow
- 选择器:
属性选择器 [attr]:选择包含attr属性的标签 [attr^=value]:选择attr属性值以value开头的标签
伪类选择器 first-child, nth-child(n) - 颜色渐变 linear-gradient
- 2D变换
translate():对元素进行进行移动
scale():对元素进行缩放
rotate():围绕中心旋转,正值顺时针,负值逆时针 - 动画 transition animation
- flex布局
18. DOM树和CSSOM的构建过程⭐⭐
DOM树和CSSOM的构建过程其实差不多
- 首先解析文件(HTML文件,CSS文件)
- 将字节转换成字符
- 确定tokens(标签)
- 将tokens转换成节点
- 最后根据节点构建DOM树 || CSSOM PS:构建DOM树的图和CSSOM的图,一看就明白
19. 回流和重绘⭐⭐⭐⭐⭐
- 回流(重排或布局)
当渲染树中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建,这就称为回流
-
重绘 当渲染树中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘
-
回流和重绘发生的时机: 首先,回流一定会发生重绘,重绘不一定会回流,在页面第一次加载时一定会回流和重绘
-
会发生回流的例子: 页面首次渲染的时候
添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化
内容发生变化,比如文本变化(文字大小、行高发生变化)
浏览器的窗口尺寸变化(因为回流是根据视口的大小来计算元素的位置和大小的) -
列举几个会发生重绘的元素属性: color
background-color
box-shadow
border-radius
visibility -
如何减少回流和重绘
- DOM操作时很贵的,要尽可能少得操作DOM,通过合并多次DOM样式的修改,来减少回流和重绘的发生次数
- 如果需要对一个DOM进行大量操作,可以先用display:none进行隐藏,操作后再显示,这样就只引发两次回流和重绘
- 对于复杂动画效果,使用绝对定位让其脱离文档流
- 使用css3硬件加速,可以让transform、opacity、filters这些动画不会引起回流重绘
- 浏览器队列机制:回流和重绘的开销很多,所以浏览器维护一个队列,当有回流和重绘时会放入这个队列,当达到了一定数量或者达到了一定的时间间隔才会触发,这样就会让多次变成一次,但是有一些元素会强制触发队列,需要注意
offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
getComputedStyle()
getBoundingClientRect
20. animation动画属性⭐⭐
- name:keyframe名称。
- duration:完成动画所花费的时间,以秒或毫秒计。
- timing-function:动画的速度曲线。
- delay:在动画开始之前的延迟。
- iteration-count:动画应该播放的次数。
- direction:是否应该轮流反向播放动画。
参考文章:
你真的了解回流和重绘吗
彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
阮一峰--flex
写在最后
非常感谢您到阅读到最后,如果您觉得对您有帮助的话,希望能够点个赞,加个关注,后续会把前端各部分知识总结发文,有任何问题都可以联系我,希望能够一起进步。
最后祝您前程似锦,我们各自攀登,高处相见🌈!