html css面试题

最新推荐文章于 2024-10-08 10:16:40 发布

小戴不吃饺子

最新推荐文章于 2024-10-08 10:16:40 发布

阅读量180

点赞数 1

文章标签： html5 css css3 html

本文链接：https://blog.csdn.net/weixin_52152212/article/details/127928060

版权

html与css面试题

1.HTML语义化的好处

阅读代码能根据标签猜出你的用意，有利于程序员的阅读，便于团队开发和维护
浏览器读取方便
有利于搜索引擎的优化
有一些标签默认会有一些样式，若浏览器禁止了CSS样式可以达到突出样式的效果，比如 h1

2.块级元素、行级元素

行级元素：多个占一行，不能设置宽高 display:inline 例如：sapn a em i b
块级元素：自己占一行，可以设置宽高 display: block 例如：p h1-h6 ul li div
行级块元素：多个占一行，可以设置宽高 display: inline-block
块元素可以嵌套行元素，行元素不可以嵌套块元素
display: none 隐藏

3.Doctype的作用是什么？

DOCTYPE 是html5标准网页声明，且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档，不同的渲染模式会影响到浏览器对于CSS代码，甚至Javasript脚本的解析
文档解析类型有：

BackCompat: 怪异模式，浏览器使用自己的怪异模式解析渲染页面。（如果没有声明DOCTYPE,默认就是这个模式）

CSS1Compat:标准模式，浏览器使用W3C的标准解析渲染页面

4.CSS选择器

id选择器（#id）
类选择器(.classname)
标签选择器（div, h1,p）
后代选择器（h1 p）
相邻后代选择器（子）选择器（ul>li）
兄弟选择器（li~a）
相邻兄弟选择器（li + a ）
属性选择器（a[rel = “external”]）
伪类选择器（a:hover, li: nth-child()）
伪类元素选择器（:: before、:: after）
通配符选择器（*）

选择器优先级

！important > style 内联 > id > class| 伪类 > 标签|伪元素

5.position定位的几种方式

absolute

绝对定位，定位后空间释放，相对于最近已经定位的祖先元素

定位原点是离自己最近一级并且position 属性为relation或者absolute的父级元素，没有则相对于浏览器定位。进行绝对定位后，元素不会继续占有原来的位置
relation

相对定位，定位后空间不释放相对于自己的初始位置

相对定位相对的位置是自己原来的位置。即定位原点为该元素本身所在的位置。进行相对定位后，该元素依然占有原来的位置
fixed

固定定位，定位后空间释放，相对于浏览器的可视窗口

相对于浏览器窗口是固定的，无论滚动条如何滚动，其位置不会改变。（大多数广告）

定义position为fixed后，可通过top、left、bottom、right来改变其位置
static

默认定位
sticky

粘性定位吸顶效果
- 使用条件：
  1. 父元素不能overflow:hidden或者overflow:auto属性。
  2. 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
  3. 父元素的高度不能低于sticky元素的高度
  4. sticky元素仅在其父元素内生效
relative、absolute、fixed属性都可通过z-index进行层次分级。z-index值大的在上方，值小的在下方。此属性适用于同辈元素，而对于父元素和子元素不适用。使用fixed、relative、absolute属性后，该元素会脱离原来的层级关系，会处于原来层级的上方。因此使用这些属性后可能回覆盖页面上其他元素

6.display:none与visibility:hidden和opacity:0的区别

隐藏元素的方法
1. display:none
  - 渲染数不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件
2. visibility:hidden
  - 元素在页面中仍然占据位置，但不会响应绑定的监听事件
3. opacity:0
  - 将元素的透明度设置为0，来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
4. z-index = 负值
  - 使其他元素遮盖该元素，以此来实现隐藏。
5. transform:scale(0,0)
  - 将元素缩放为0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但不会响应绑定监听事件
6. clip/clip-path
  - 使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但不会响应绑定监听事件
总结
1. visibility: 影响布局（占据空间），影响交互（不会响应绑定事件）
2. opacity: 影响布局（占据空间），不影响交互（会响应绑定事件）
3. display: 不影响布局（不占空间），影响交互
4. position : 不影响布局，不影响交互
display:none与visibility:hidden的区别
1. 在渲染数中
  - display: none 会让元素完全从渲染树中消失，渲染时不会占据任何空间
  - visibility:hidden 不会让元素完全从渲染数消失，渲染的元素还会占据空间，只是内容不可见
2. 是否是继承属性
  - display:none 是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
  - visibility:hidden 是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示；
3. 修改常规文档流中元素的 display 通常会造成文档的重排（不占据空间），但是修改visibility属性只会造成本元素的重绘（占据空间）；
4. 如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取

7.什么是BFC,有什么用

什么是BFC?
- BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中是这么介绍的：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素。
```
<div class="box1">
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
	<div class="box5">
		<div class="box6"></div>
         <div class="box7"></div>
		<div class="box8"></div>
     </div>
</div>
```
  假设box1和box5是两个BFC区域，那么根据上述原理能理解到的就是，box1这个BFC区域包含了子元素box2，box3，box4，box5。但不包括box678。而box5这块BFC区域则包含了box678这三个子元素。
总结
1. 每一个BFC区域只包括其子元素，不包括其子元素的子元素。
2. 每一个BFC区域都是独立隔绝的,互不影响
怎样使一个元素变成BFC区域
1. body根元素
2. 设置浮动，不包括none
3. 设置定位，absoulte或者fixed
4. 行内块显示模式，inline-block
5. 设置overflow，即hidden，auto，scroll
6. 表格单元格，table-cell
7. 弹性布局，flex
应用
1. 解决外边距塌陷问题（垂直塌陷）
2. 利用BFC解决包含塌陷
3. 清除浮动
4. BFC可以阻止标准流元素被浮动元素覆盖
https://blog.csdn.net/sqLeiQ/article/details/125261564

8.外边距合并问题

属于同一个bfc的两个相邻的box的margin会发生重叠
解决外边距合并：
1. 父元素overflow：hidden
2. 父元素加 border
3. 子元素或父元素float
4. 子元素或者父元素定位
清除浮动：
1. 浮动元素：会脱离文档流，空间释放
解决浮动塌陷问题：
1. 父元素加高度
2. 父元素overflow:hidden //触发BFC
3. 添加块级元素设置 style=“clear:both”
4. clearfix

9.CSS盒模型

组成：margin(外边距) + border(边框) + padding(内边距) + element(元素)
怪异盒模型
- ie6 已经ie6以下的浏览器中不写DOCTYPE
- css width属性 = border+padding +element
盒模型的转换
1. box-sizing:content-box(标准盒模型)
2. box-sizing:border-box(怪异盒模型)

10.CSS中哪些属性可以继承？

字体系列属性
- font、font-family、font-weight、font-size
文本系列属性
- text-indent text-align …
列表属性
- list-style
光标属性
- cursor
元素可见性
- visibility

11.css 雪碧图

雪碧图也叫CSS精灵，是⼀个CSS图像合成技术，开发⼈员往往将⼩图标合并在⼀起之后的图⽚称作雪碧图。
好处
- 减少加载多张图⽚的 HTTP 请求数(⼀张雪碧图只需要⼀个请求)。
- 提前加载资源。
不足
- Sprite维护成本较⾼，如果⻚⾯背景有少许改动，⼀般就要改这张合并的图⽚。
- 加载速度优势在http2开启后荡然⽆存，HTTP2多路复⽤，多张图⽚也可以重复利⽤⼀个连接通道搞定。

12.浏览器的渲染原理

首先解析收到的文档，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的
然后对 CSS 进行解析，生成 CSSOM 规则树。

当渲染引擎接收到CSS文本的时，会执行一个转换操作，将css文本转换为浏览器可以理解的结构–styleSheets。
根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。还有一些 DOM元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。
当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。

优化策略：

从文件大小考虑
将css放在头部，将js放在尾部
减少资源请求数量
下载的内容是否要在首屏上使用
script标签的使用加defer或async属性。

13.重绘与回流

重绘就是在一个元素的外观被改变，但没有改变布局（宽高）的情况下发生，
如改变visibility、outline、背景色等等。
回流就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性
1. 增加，删除，修改Dom节点时会导致Reflow或Repaint
2. 移动DOM的位置，或是搞个动画的时候
3. 修改CSS样式的时候
4. Resize窗口的时候，或是滚动的时候
5. 修改网页的默认字体时
我们之前用jquery时基本都是在操作dom。会频繁引起呈现树的重绘和回流，pc端处理能力还不错，但移动端性能就会很差。导致页面卡顿

14.CSS阻塞渲染

CSS不会阻塞DOM的解析，但会阻塞DOM的渲染
JS阻塞DOM解析，但浏览器会“偷看”DOM，预先下载相关资源。
浏览器遇到

15.script标签中defer和async的区别？

defer:浏览器指示脚本在⽂档被解析后执⾏，script被异步加载后并不会⽴刻执⾏，⽽是等待⽂档被解析完毕后执⾏。
async:同样是异步加载脚本，区别是脚本加载完毕后⽴即执⾏，这导致async属性下的脚本是乱序的，对于script有先后依赖关系的情况，并不适⽤。

16.水平垂直居中

水平居中：margin: 0 auto
已知宽度和高度
- 放在父元素上，子元素垂直居中
- display: flex;
- align-items:center
- justify-content: center
仅已知宽度
- 放在子元素上父元素需要定位
- width: 100px
- height: 100px
- position: absolute
- top:50%
- left:50%
- margin-top: -50px
- margin-left: -50px
未知宽度
- position: absolute
- left: 50%
- top:50%
- transform:translate(-50%,-50%)
控制文本
- text-align: center
- line-height: 高度