HTML+CSS 前端初级面试题（汇总2）

在我们找工作时经常会因为面试问题而头痛，本文就来为大家收集一些前端面试的题目和答案，希望对大家有一定的帮助。

什么是Css Hack？
行内元素和块级元素的具体区别是什么？inline-block是什么？
什么是外边距重叠？重叠的结果是什么？
rgba()和opacity的透明效果有什么不同？
css中可以让文字在垂直和水平方向上重叠的两个属性是什么？
如何垂直居中一个浮动元素？
px和em的区别。
描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？
Sass、LESS是什么？大家为什么要使用他们？
display:none与visibility:hidden的区别是什么？
CSS中link和@import的区别是?
CSS的盒子模型？
为什么要初始化样式？
BFC是什么?
前端页面由哪三层构成，分别是什么？作用是什么？
列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
HTML与XHTML——二者有什么区别？
html常见兼容性问题？
对WEB标准以及W3C的理解与认识
块级元素有哪些?行内元素有哪些?常见的空元素有哪些？

1.什么是Css Hack？

由于不同厂商的浏览器，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。

2.行内元素和块级元素的具体区别是什么？inline-block是什么？

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距(padding-top/padding-bottom)和外边距(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。

浏览器还有默认的天生 inline-block 元素（拥有内在尺寸，可设置高宽，但不会自动换行）：
<input>、<img>、<button>、<texterea> 、<label>

还可以通过display属性，来规定元素应该生成的框的类型

3.什么是外边距重叠？重叠的结果是什么？

外边距重叠就是margin-collapse。
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

4.rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

5.css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height（设置行间的距离（行高））
水平方向：letter-spacing（增加或减少字符间的空白（字符间距））

<p class="text">css中可以让文字在垂直和水平方向上重叠的两个属性是什么？</p>

.text{
	word-break: normal;
	width: 100px;
	font-size: 16px;
	line-height: 10px;
	letter-spacing: -5px;
}

1.png-600

letter-spacing的妙用：
可以用于消除inline-block元素间的换行符空格间隙问题。

6.如何垂直居中一个浮动元素？

方法一（父元素相对定位）：

.child{
	width: 100px;
	height: 100px;
	background-color:red;
	float: left;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

方法二（父元素相对定位）：

.child{
	width: 100px;
	height: 100px;
	background-color:red;
	float: left;
	position: absolute;
	top:50%;
	left:50%;
	margin-top: -50px;
	margin-left: -50px;
}

方法三（父元素相对定位）：

.child {
	width: 100px;
	height: 100px;
	background-color:red;
	float: left;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto
}

如何垂直居中一个<img >？
方法一：

.img-container{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

方法二：

.img-container{
	display: flex;
	justify-content: center;
	align-items: center;
}

7. px和em的区别

px和em都是长度单位
区别:
px的值是固定的，指定是多少就是多少，计算比较容易。
em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

8. 描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？

Reset样式的目的就是清除某些浏览器的默认样式,方便css的书写：例如：*{margin:0;padding:0;list-style:none;}
normalize的理念与reset的不同，他并不是清除浏览器的默认样式，而是尽量将所有的浏览器的默认样式统一。

9.Sass、LESS是什么？大家为什么要使用他们？

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。
他们是CSS预处理器。是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。

为什么要使用它们？

结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

10.display:none与visibility:hidden的区别是什么？

display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
即是，使用display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

11.CSS中link和@import的区别是：

Link属于html标签，而@import是CSS中提供的
在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用的CSS
@import只有在ie5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题
Link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）

12. CSS的盒子模型？

CSS的盒子模型有两种： IE盒子模型、标准的W3C盒子模型模型

标准模型

2.png-600

IE模型

3.png-600

从上面两图可以看出：
标准盒模型：宽高只是内容（content）的宽高
IE盒模型：宽高是内容(content)+填充(padding)+边框(border)的总宽高

css如何设置两种模型:

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;12345

13.为什么要初始化样式？

由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异
但是初始化CSS会对搜索引擎优化造成小影响

14.BFC是什么?

BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。
在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题
BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

15.前端页面由哪三层构成，分别是什么？作用是什么？

结构层 Html ：实现页面结构
表示层 CSS ：完成页面的表现与风格
行为层 js ：实现一些客户端的功能与业务。

16. 列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

display

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）

详情请看：W3C CSS display属性

position

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位
relative	生成相对定位的元素，相对于其正常位置进行定位
static	默认值。没有定位，元素出现在正常的流中
inherit	规定应该从父元素继承 position 属性的值

详情请看：W3C CSS position属性

17. HTML与XHTML——二者有什么区别？

HTML 是用来描述网页的一种语言：

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

XHTML

XHTML 是更严格更纯净的 HTML 代码。
XHTML 是 HTML 与 XML（扩展标记语言）的结合物。
XHTML 包含了所有与 XML 语法结合的 HTML 4.01 元素。

最主要的不同：

XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

18.html常见兼容性问题？

双边距BUG float引起的使用display
3像素问题使用float引起的使用dislpay:inline -3px
超链接hover 点击后失效使用正确的书写顺序 link visited hover active
Ie z-index问题给父级添加position:relative
Png 透明使用js代码改
Min-height 最小高度！Important 解决’
select 在ie6下遮盖使用iframe嵌套
为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

IE5-8不支持opacity，解决办法：

.opacity {
    opacity: 0.4
    filter: alpha(opacity=60); /* for IE5-7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/}12345

IE6不支持PNG透明背景，解决办法: IE6下使用gif图片

19.对WEB标准以及W3C的理解与认识

web标准简单来说可以分为结构、表现和行为。

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范
包含如下几点

对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）

标签字母要小写
标签要闭合
标签不允许随意嵌套

对于css和js来说：

尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

20. 块级元素有哪些?行内元素有哪些?常见的空元素有哪些？

块级元素有：
address - 地址
blockquote- 块引用
center - 举中对齐块
dir - 目录列表
div- 常用块级容易，也是 css layout 的主要标签
dl - 定义列表
fieldset- form 控制组
form - 交互表单
h1 - 大标题
h2- 副标题
h3 - 3 级标题
h4- 4 级标题
h5 - 5 级标题
h6- 6 级标题
hr - 水平分隔线
isindex - input prompt
menu- 菜单列表
noframes- frames 可选内容，（对于不支持 frame 的浏览器显示此区块内容)
noscript - 可选脚本内容（对于不支持 script 的浏览器显示此内容）
ol- 排序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表

行内元素有：
a - 锚点
abbr - 缩写
acronym - 首字
b- 粗体 (不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码 (在引用源码的时候需要)
dfn- 定义字段
em - 强调
font - 字体设定 (不推荐)
i- 斜体
img- 图片
input- 输入框
kbd - 定义键盘文本
label- 表格标签
q - 短引用
s- 中划线 (不推荐)
samp - 定义范例计算机代码
select- 项目选择
small - 小字体文本
span- 常用内联容器，定义文本内区块
strike - 中划线
strong- 粗体强调
sub - 下标
sup - 上标
textarea- 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量

常见的空元素有：
<br> <hr> <img> <input> <link> <meta>

可变元素：
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
applet - java applet
button - 按钮
del- 删除文本
iframe - inline frame
ins - 插入的文本
map - 图片区块(map)
object- object对象
script- 客户端脚本

常见的空元素：
<br> <hr> <img> <input> <link> <meta>
鲜为人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

本文转载自：https://blog.csdn.net/weixin_40693643/article/details/104287084

更多前端开发知识，请查阅 HTML中文网！！

以上就是HTML+CSS 前端初级面试题（汇总2）的详细内容，更多请关注0133技术站其它相关文章！