【前端面试题】有关html和css的前端面试27问

CSDN话题挑战赛第2期
参赛话题：面试宝典

📋 个人简介

• 💖 作者简介：大家好，我是阿牛，全栈领域优质创作者。😜
• 📝 个人主页：馆主阿牛🔥
• 🎉 支持我：点赞👍+收藏⭐️+留言📝
• 📣 系列专栏：软磨css🍁
• 💬格言：要成为光，因为有怕黑的人！🔥
  

---

前言

手里有一些前端面试题，今天正好把和html和css相关的一些总结出来，复习并且学习一下，下一篇我们总结有关js的一些面试题！

1. 网络中使用最多的图片格式有哪些

JPEG,GIF,PNG,JPG,最流行的是jpeg格式，可以把文件压缩到最小 在ps以jpeg格式存储时，提供11级压缩级
别

2. 请简述css盒子模型

一个css盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）。默认情况下，盒子的 width 和 height 属性只是设置 content（内容）的宽和高，
盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框
盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框

3. 视频/音频标签的使用

视频：

<video src="">video>

视频标签属性：

• src：需要播放的视频地址
• width/height：设置播放视频的宽高，和img标签的宽高属性一样
• autoplay：是否自动播放
• controls：是否显示控制条
• poster：没有播放之前显示的展位图片
• loop：是否循环播放
• perload：预加载视频（缓存）与autoplay相冲突，设置了autoplay属性，perload属性会失效。
• muted：静音模式

音频:

<audio> 
<source src=”” type=””> 
audio>

• 音频属性和视频属性差不多，不过宽高和poster属性不能用

4. HTML5新增的内容有哪些

• 新增语义化标签
• 新增表单类型
• 表单元素
• 表单属性
• 表单事件
• 多媒体标签

5. HTML5 新增的语义化标签有哪些

• Header：页面头部
• main：页面主要内容
• footer：页面底部
• Nav：导航栏
• aside：侧边栏
• article：加载页面一块独立内容
• Section：相当于div
• figure：加载独立内容（上图下字）
• figcaption：figure的标题
• Hgroup：标题组合标签
• mark：高亮显示
• dialog 加载对话框标签（必须配合open属性）
• Embed加载插件的标签
• video加载视频
• audio加载音频（支持格式ogg，mp3，wav）

语义化标签优点：

• 提升可访问性
• seo
• 结构清晰，利于维护

6. CSS3新增的特性

边框：

• border-radios：添加圆角边框
• border-shadow：给框添加阴影 （水平位移，垂直位移，模糊半径，阴影尺寸，阴影颜色，
• insetr（内/外部阴影））
• border-image：设置边框图像
• border-image-source 边框图片的路径
• border-image-slice 图片边框向内偏移
• border-image-width 图片边框的宽度
• border-image-outset 边框图像区域超出边框的量
• border-image-repeat 图像边框是否平铺（repeat平铺 round铺满 stretch 拉伸）

背景：

• background-size 背景图片尺寸
• background-origin规定background-position属性相对于什么位置定位
• background-clip 规定背景的绘制区域（padding-box，border-box，content-box）

渐变：

• linear-gradient（）线性渐变
• radial-gradient（）径向渐变

文本效果：

• word-break：定义如何换行
• word-wrap：允许长的内容可以自动换行
• text-overflow：指定当文本溢出包含它的元素，应该干啥
• text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）

转换：

• transform 应用于2D3D转换，可以将元素旋转，缩放，移动，倾斜
• transform-origin 可以更改元素转换的位置，（改变xyz轴）
• transform-style 指定嵌套元素怎么样在三位空间中呈现

2D转换方法：

• rotate旋转 translate（x，y）指定元素在二维空间的位移 scale（n）定义缩放转换

3D转换方法：

• perspective（n）为3D转换 translate rotate scale

过渡：

• transition-proprety 过渡属性名
• transition-duration 完成过渡效果需要花费的时间
• transition-timing-function 指定切换效果的速度
• transition-delay 指定什么时候开始切换效果

动画：animation

• animation-name 为@keyframes动画名称
• animation-duration 动画需要花费的时间
• animation-timing-function 动画如何完成一个周期
• animation-delay 动画启动前的延迟间隔
• animation-iteration-count 动画播放次数
• animation-direction 是否轮流反向播放动画

7. 清除浮动的方式有哪些？请说出各自的优点

高度塌陷：当所有的子元素浮动的时候，且父元素没有设置高度，这时候父元素就会产生高度塌陷。

清除浮动方式1：给父元素单独定义高度

• 优点：快速简单，代码少
• 缺点：无法进行响应式布局

清除浮动方式2：父级定义overflow：hidden；zoom：1（针对ie6的兼容）

• 优点：简单快速、代码少，兼容性较高
• 缺点：超出部分被隐藏，布局时要注意

清除浮动方式3：在浮动元素后面加一个空标签，clear：both；height：0；overflow：hidden

• 优点：简单快速、代码少，兼容性较高。
• 缺点：增加空标签，不利于页面优化

清除浮动方式4：父级定义overflow：auto

• 优点：简单，代码少，兼容性好
• 缺点：内部宽高超过父级div时，会出现滚动条

清除浮动方式5：万能清除法：给塌陷的元素添加伪对象

• 优点：写法固定，兼容性高
• 缺点：代码多

.father:after{ 
	 Content:" "; 
	 Clear:both; 
	 display:block;
	 Height:0; 
	 Overflow:hidden; 
	 Visibility:hidden;
}

8. 定位的属性值有何区别

position有四个属性值：relative 、absolute 、 fixed 、 static

• relative 相对定位：不脱离文档流，相对于自身定位
• absolute 绝对定位：脱离文档流 相对于父级定位
• fixed 固定定位：脱离文档流，相对于浏览器窗口定位
• static 默认值：元素出现在正常的流中

9. 子元素如何在父元素中居中

水平居中：

• 子父元素宽度固定，子元素设置 margin：auto，并且子元素不能设置浮动，否则居中失效
• 子父元素宽度固定，父元素设置 text-align：center，子元素设置display：inline-block，并且子元素不能设置浮动，否则居中失效

水平垂直居中：

• 子元素相对于父元素绝对定位，子元素 top，left 设置 50%，子元素 margin-top 和 margin-left 减去各自宽高的一半。
• 子元素相对于父元素绝对定位，子元素上下左右全为 0，然后设置子元素 margin：auto
• 父元素设置 display：table-cell，vertical-align：middle，子元素设置margin：auto
• 子元素相对定位，子元素top，left值为50%，transform：translate（-50%，-50%）
• 子元素相对父元素绝对定位，子元素top，left值为50%，transform：translate（-50%，-50%）
• 父元素设置弹性盒子。

10. Border-box与content-box的区别

content-box 标准盒模型 width不包括 padding和border
border-box 怪异盒模型 width包括 padding和border

11. 元素垂直居中

• 设置子元素和父元素的行高一样。
• 子元素设置为行内块，再加 vertical-align：middle
• 已知父元素高度，子元素相对定位，通过 transform：translateY（-50%）
• 不知道父元素高度，子绝父相，子元素 top：50%，transform：translateY（-50%）
• 创建一个隐藏节点，让隐藏节点的 height 为剩余高度的一半。
• 给父元素 display：table，子元素 display：table-cell，vertical-align：middle
• 给父元素添加伪元素。
• 弹性盒，父元素 display：flex，子元素 align-self：center

12. 如何让chrome浏览器显示小于12px的文字

本来添加谷歌私有属性 -webkit-text-size-adjust : none
现在 -webkit-transform : scale（）

13. CSS选择器有哪些，那些属性可以继承，优先级如何计算？CSS3新增的伪类有

CSS2选择器:

元素选择器，id选择器，群组选择器，类选择器，*通配符选择器，后代选择器

CSS2伪类选择器：a:link / visited / hover / active

CSS3选择器：

1.结构伪类选择器：

查找第几个nth-child(n)
查找同一类型第几个nth-of-type
查找唯一类型 only-of-type

2.属性选择器：根据标签属性查找 [attr=value]
:root 查找根元素html标签
:empty 查赵空标签

3.目标伪类选择器：（表单）
:enabled 查找可以使用的标签
:disabled 查找禁止使用的标签
:checked 查找被选中的标签

4.伪元素选择器 ::selection设置选中文本内容的高亮显示（只能用于背景色和文本颜色）
否定伪类选择器 not（）
语言伪类选择器 lang（取值）

优先级（权重）：

• 元素选择器 1
• 伪元素选择器 1
• class选择器 10
• 伪类选择器 10
• 属性选择器 10
• Id选择器 100
• 内联样式的权重 1000
• 包含选择器权重为权重之和
• 继承样式权重为 0

那些属性可以继承：

css继承特性主要是文本方面

• 所有元素可继承：visibility 和 cursor
• 块级元素可继承：text-indent 和 text-align
• 列表元素可继承：list-style，list-style-type，list-style-position，list-style-image
• 内联元素可继承：letter-spacing，word-spacing，line-height，color，font，font-family，font-size,font-style，font-variant，font-weight，text-decoration，text-transform，direction

14. 网页中有大量图片加载很慢 你有什么办法进行优化？

• 图片懒加载，在图片未可视区域加一个滚动条事件，判断图片位置与浏览器顶端和页面的距离，如果前者小于后者，优先加载。
• 使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
• 使用csssprite（精灵图）或者svgsprite。

15. 行内元素/块级元素有哪些？

• 行内元素：相邻的行内元素会排列在同一行，不会独占一行 设置宽高无效 ，例如span标签。
• 块级元素：会独占一行 可以设置宽高等属性div
• 可变元素：根据上下文预警决定该元素为块元素还是内联元素
• 块级元素：div h1-h6 hr p ul ol table address blockquote dir from menu
• 行内元素：a br I em img input select span sub sup u textarea
• 可变元素：button del iframe ins

16. 浏览器的标准模式和怪异模式区别？

• 标准模式：浏览器按照W3C标准解析执行代码
• 怪异模式：浏览器根据自己的方式解析执行代码，因为不同浏览器解析执行方式不一样，所以叫怪
  异模式

区别：

• 在怪异模式下，盒模型为怪异盒模型 而在标准模式下为标准盒子模型
• 图片元素的垂直对齐方式： 对于行内元素和table-cell元素，标准模式下vertical-align属性默认值是baseline，因此在图片底部会有几像素的空间；而在怪异模式下，table单元格中的图片的vertical-align属性默认值是bottom。
• 元素中的字体： css中font的属性都是可以继承的，怪异模式下，对于table元素，字体的某些元素不能从其他封装元素继承中得到，特别是font-size属性
• 内联元素的尺寸 ：标准模式下，non-replaced inline元素无法自定义大写，怪异模式下，定义元素的宽高会影响元素的尺寸
• 元素的百分比高度： 当一个元素使用百分比高度时，在标准模式下，高度取决于内容变化，在怪异迷失下，百分比被准确应用
• 元素溢出的处理 ：标准模式下，overflow取值默认值为visible，在怪异模式下，这个溢出会被当做扩展box对待，就是元素的大小由内容决定，溢出不会裁剪，元素框自动调整，包含溢出内容

17. margin和padding在什么场合下使用

margin 外边距：自身边框到另一个边框之间的距离
padding 内边距：自身边距到自身内容之间的距离
当需要在border外侧添加空白时用margin，当需要在border内侧添加空白时用padding

18.弹性盒子布局属性有那些请简述?

• flex-direction：弹性容器中子元素排列方式（主轴排列方式）
• flex-wrap：设置弹性盒子的子元素超出父容器时是否换行
• flex-flow：是flex-direction和flex-wrap简写形式
• align-item：设置弹性盒子元素在侧轴上的对齐方式
• align-content：设置行对齐
• justify-content：设置弹性盒子元素在主轴上的对齐方式

19.怎么实现标签的禁用

添加disabled属性

20.flex布局原理

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

21. px，rem，em的区别

px：绝对长度单位，像素px是相对于显示器屏幕分辨率来说的

em：相对长度单位，相对于当前对象内文本的字体尺寸

• em的值并不是固定的
• em会继承父级元素的字体大小（参考物是父元素的font-size）
• em中所有的字体都是相对于父元素的大小决定的

rem: 相对于html根元素的font-size
一般的，各大主流浏览器的font-size默认值为 16px，此时 1rem = 16px（所以 12px = 0.75rem）；把 html 设置成 font-size: 62.5%，此时 1rem = 16px*62.5% = 10px（所以 12px = 1.2rem）；（1：10的比例更好换算）

22. 网页的三层结构有哪些

结构（html或xhtm标记语言）
表现（css样式表）
行为（js）

23. 请简述媒体查询

媒体查询扩展了media属性, 就是根据不同的媒体类型设置不同的css样式，达到自适应的目的。

24. 三栏布局方式两边固定中间自适应

• margin负值法：左右两栏均左浮动，左右两栏采用负的margin值。中间栏被宽度为100%的浮动元素包起来
• 自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后
• 绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。
• flex 左右固定宽 中间flex：1
• 网格布局
• table布局

25. Doctype作用

声明文档类型

26. css 预处理 sass和less 是什么？为什么使用他们

sass和less都是css预处理器，是css上的一种抽象层，是一种特殊的语法，最终会编译成css，less是一种动态样式语言，给css赋予了动态语言的特性，比如：变量，继承，嵌套。less既可以在客户端运行，也可以在服务端运行（需要借助node）

27. 怎么转换less为css

• 用node将less文件生成为css文件
• 用webstorm自动生成
• vscode中的easy less插件

结语

如果你觉得博主写的还不错的话，可以关注一下当前专栏，博主会更完这个系列的哦！也欢迎订阅博主的其他好的专栏。

🏰系列专栏
👉软磨 css
👉硬泡 javascript
👉flask框架快速入门