HTML+CSS面试知识点分享(一)
src和href的区别?
相同点:都是用来引用外部的资源文件的
不同点:
1. 使用src进行资源加载的时候,会阻塞后面的任务进行
2. 使用href进行加载资源的时候,属于并行加载,不会阻塞
一般使用<script src="XXX">的时候,都建议放在页面最底部,最后一步操作就不会阻塞其它资源执行了
文档声明的DOCTYPE的作用?
浏览器有两种解析模式:严格模式和混杂模式
严格模式:按照W3C标准解析
混杂模式:兼容模式,兼容老的浏览器
声明:<!doctype html>目的就是让浏览器进入严格模式,按照HTML5规范,W3C标准解析
行内元素有哪些?块级元素有哪些?
行内元素:a span img strong small sub sup button u等标签
块级元素:div ul li ol h1 h2 h3等等h系列标签 p标签 header section aside footer
script标签中defer和async的区别?
1. 首先如果只是<script src='XXXX'>这种写法,当浏览器执行到这段代码时,就会先去执行加载这块资源,阻塞后面的文档解析。举个例子也就是:如果我执行的<script src='XXXX'>这个资源需要5s,后面的文档的解析需要等到5s后才能开始继续进行。然后defer和async的属性,主要就是解决以上同步执行阻塞的问题,可以达到异步加载资源的效果。
2. 其实说到资源加载我们还有多懂一个概念就是:这个过程中,有加载资源阶段 和 执行阶段。 举个例子: 我们平时很多人要去玩王者荣耀,这个游戏里面经常会打开界面让我们开始下载压缩包资源, 那这个过程就和script里面加载资源阶段一个道理, 然后我们游戏压缩包资源下载好了,要去启动游戏了,启动游戏到进入游戏界面大概需要1s,这个过程就和script里面执行阶段一个道理。
3. 所以我们了解了这俩个概念后,来看defer和async,结论就是: defer和async在加载资源阶段都是并行的, 区别在于async 加载资源阶段下载完毕后,进入到执行阶段会阻塞主线程。 而defer优先级就低了很多,只有主线程要做的事情都处理完成,到最后才开始进入他的执行阶段开始使用。举个例子: 俩个组长(async组长和defer组长)手上都有自己的活在做,所以把加载资源的活交给了各自的小弟并行去做, 当各自小弟安排的活做好了告诉自己组长,如果是async组长那就是比较高效,直接停下手上活,把这个小弟做好的活演示下,演示完成后继续做手上的活。 defer组长就是比较佛系,虽然小弟和他说东西做好了,可是他还是把自己手上活全部做完了,到最后再去演示小弟做出的东西。
共同点:都可以并行加载JS文件,而且不会阻塞页面的加载
不同点:
1. defer加载完以后,它会等整个页面加载完成以后再执行JS
2. asyn是页面加载完以后,它会立即执行JS,所以说 如果对JS执行顺序有严格要求的话,建议还是使用defer来进行加载
CSS选择器及其优先级?
对于选择器的优先级权重:
1. 标签选择器、伪类选择器:1
2. 类选择器、伪类选择器、属性选择器:10
3. id选择器:100
4. 内联样式:1000
注意事项:
!important声明的样式的优先级最高;
如果优先级相同的情况下,则最后出现的样式生效;
继承得到的样式优先级最低;
通用选择器 (*)、子选择器(>)和相邻同胞选择器(+)并不在这个四个等级内,所以它们的权值都为0;
样式表的来源不同时,优先级顺序为:内联样式>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式;
display的属性值和作用?
none元素是不显示,会从文档流中移除;
block块类型,默认的宽度是父元素宽度,可设置宽高,换行显示;
inline行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。
inline-block默认宽度为内容宽度,可以设置宽高,同行显示。
list-item像块类型元素一样显示,并添加样式列表标记。
table此元素会作为块级表格来显示。
display的block、inline和inline-block的区别?
block: 会独占一行,多个元素会另起一行,可以设置width、height、margin和padding属性;
inline: 元素不会独占一行,设置width、height属性无效。但可以设置水平方向的margin和padding属性,不能设置垂直方向的padding和margin;
inline-block: 将对象设置为inline对象,但对象的内容作为block对象呈现,之后的内联对象会被排列在同一行内。
隐藏元素的方法有哪些?
display: none:该元素不会在页面中占置,点击响应事件也不会触发。
visibility: hidden:元素在页面中仍占据空间,点击响应事件也不会触发。
transform: scale(0,0):将元素缩放为 0,来实现元素的隐藏。元素仍在页面中占据位置,点击响应事件也不会触发。 (和visibility: hidden一样的效果)
opacity: 0:将元素的透明度设置为 0,元素在页面中仍占据空间,点击响应事件会触发。
position: absolute:使用绝对定位将元素移出可视区域内,来实现元素的隐藏。
z-index: 负值:来使其他元素遮盖住该元素,来实现隐藏。
Link和@import的区别?
相同点: 它们都是可以用来引用CSS样式的
不同点:
1. link是并发加载, @import会被阻塞,需要等网站加载完毕才开始加载
2. @import是CSS高版本提出的,对老的浏览器兼容不友好
3. @import只能加载CSS, link出了能加载CSS,其他的一些也可以