前端面试题-每天更新

---

一、HTML、CSS、浏览器相关

1.css 盒模型

css盒模型本质上是一个盒子，盒子包括html元素，盒子有四个属性组成content(内容)、padding(内边距)、border(边框)、margin(外边距)
盒模型分为w3c盒模型也就是标准盒模型 和 怪异盒模型IE
两者的区别在于content的不同，IE盒模型的content包括border、padding

2.视频和音频标签

都是 inline行内元素

代码如下：

视频标签
<video src="#"></video>
音频标签
<audio src="#"></audio>

3.HTML5新增的语义化标签

header 标签定义文档头部一块区域，可定义多个块级元素
<header>
   <p>头部</p>
</header>

footer 标签定义 section 或 document 的页脚
<footer >
   <p>页脚</p>
</footer >

article 标签定义独立内容
<article></article>

aside 标签定义侧边内容
<aside></aside>

time 标签定义公立时间 或 日期
<time datetime="2022-2-14">情人节</time>

ruby 标签定义注释，rt注释的内容，rp是该标签不显示时显示的文字
<ruby>
	<rt>注释内容</rt>
	<rp>该标签不显示</rp>
</ruby>

details 标签用于描述文档或文档某个部分的细节， summary的details标题
<details>
	<summary>这是标题</summary>
</details>

mark 标签定义带有记号的文本
<mark></mark>

nav 标签定义导航栏链接的部分
<nav></nav>

progress 标签定义进度条 value 当前进度 max 进度条最大值
<progress value="50" max="60"></progress>

section 标签定义文档中的节
<section ></section >

video  视频标签
<video src="#"></video>

audio 音频标签
<audio src="#"></audio>

4.Css3 新增的特性

border-radius 为元素增加圆角边框
border-radius 10px  5%

box-shadow 为元素增加阴影
box-shadow 10px 10px red

background-size 为背景图片增加尺寸
background-size 10px,20px

background-clip 用于确定背景画区
background-clip：border-box; 背景从border开始显示
background-clip：padding-box; 背景从padding开始显示
background-clip：content-box; 背景从content开始显示
background-clip：no-clip; 相当于border-box

background-origin 设置背景图片以border的左上角对齐还是以padding的左上角或者content的左上角对齐

background-break 元素可以被分成几个独立的盒子

word-wrap 文字换行
word-wrap normal使用浏览器的默认换行
word-wrap break-all 允许单词内换行

text-overflow 文字超过指定容器边界 怎么显示
text-overflow clip 裁剪文本
text-overflow ellipsis 显示省略号代表被裁剪的文本

text-shadow 文本展示阴影
text-shadow: 10px 10px red;

text-decoration 设置文本装饰
text-decoration underline 文本下一条线
text-decoration overline 文本上一条线
text-decoration line-through 穿过文本一条线
text-decoration blink 闪烁文本

transition 过渡 一个或多个
transition： width，花费时间，效果曲线(默认ease)，延迟时间(默认0)
transition-property: width; 
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

transform 使元素移动、旋转、倾斜、缩放
transform: translate(120px, 50%)：位移
transform: scale(2, 0.5)：缩放
transform: rotate(0.5turn)：旋转
transform: skew(30deg, 20deg)：倾斜

animation 动画
animation-name：动画名称
animation-duration：动画持续时间
animation-timing-function：动画时间函数
animation-delay：动画延迟时间
animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
animation-direction：动画执行方向
animation-paly-state：动画播放状态
animation-fill-mode：动画填充模式

display: flex flex 布局

5. 清除浮动的方法 和 优缺点

1.什么是浮动
元素设置float 不为none 浮动脱离文档流, 不占据空间,浮动元素碰到包含它的父元素的边框或者浮动元素的边框停留。设置浮动后的行内元素，可以设置其宽和高

2.浮动带来的问题

父元素没有高度 高度塌陷
浮动元素后面的同级非浮动元素会提高，有可能被遮挡
 若浮动元素不是同级第一个元素，其前面的元素非块级元素会紧随其后
 行内元素设置浮动后，可以设置其宽高

3.清除浮动

height：父元素设置高度
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用

clear:both;: 父元素内尾部加额外块标签，并设置clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：为了清除浮动，额外增加一个块级标签

overflow:hidden：利用bfc原理来清除浮动
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：清除浮动非常简单，但是会溢出隐藏

::after：使用伪类清除浮动
优点 ：不需要额外增加标签，也不会导致溢出隐藏，
缺点：但代码实习有些多，E8以上和非IE浏览器才支持:after

overflow:auto
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。

父级div 也一起浮动
原理：所有代码一起浮动，就变成了一个整体
优点：没有优点
缺点：会产生新的浮动问题

5. 定位属性值有何区别

css有四种定位方式，分别是静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）
relative: 相对定位 不会脱离文档流
absolute ：绝对定位 脱离文档流

---

总结