HTML+CSS中常见的面试题

软哈哈

于 2019-11-30 15:47:58 发布

阅读量195

点赞数

文章标签： HTML CSS

本文链接：https://blog.csdn.net/qq_40198420/article/details/103301409

版权

1.简述<!doctype html>的作用

//声明文档，这是html5的声明方式,告诉浏览器的解析器使用哪种规范来解析该文档
<!DOCTYPE html>决定浏览器渲染方式
<!DOCTYPE>：告知 浏览器当前的 HTML 或 XML 文档是哪一个版本. Doctype 是一条 声明, 而不是一个标签; 也可以把它叫做 "文档类型声明", 或 简称为 "DTD".
<!DOCTYPE html>：用HTML5的doctype声明文件包含HTML5标记

2.常见浏览器及内核

浏览器：IE，Chrome，FireFox，Safari，Opera。
内核：Trident，Gecko，Blink，Webkit。

谷歌浏览器：webkit→blink
火狐浏览器：gecko
苹果浏览器：webkit
欧朋浏览器：persto→webkit→blink
IE浏览器：trident（IE内核）

3.常见的块标签和内联标签的区别

Html中常见行级标签：span、a、em、strong、b ......

特点：在一行内显示（在一行中可以并列多个行级标签）
不能设置宽高属性，水平方向的padding和margin可以设置，垂直方向的无效。

Html中常见块级标签：div、p、ul、li、dl、td、dd、h1~h6 ......
特点：独占一行，能设置width，height，margin和padding等属性

4.B和strong的区别，em和i的区别

b标签是一个实体标签，它所包围的字符被设为bold（粗体)
strong标签是一个语义标签，作用是加强字符的语义
em标签告诉浏览器把其中的文本表示为强调的内容。
对于所有浏览器来说，这意味着要把这段文字用斜体来显示。
i标签仅仅将文字规定为斜体，并无特殊语义。

5.谈谈你对语义化的理解

语义化是指使用特有的标签和特有的属性来格式化文档
好处：
1.在没有css的情况下，可以使页面有更好的内容结构
2.方便开发和维护
3.对用户体验好
4.对seo好

6.如何合并表格单元格

跨列合并:colspan="2"
横着的两个单元格合并,在需要被合并的单元格的最左侧的单元格里写这个属性
跨行合并:rowspan="3"
竖着的3个单元合并,在需要被合并的单元格的最上面的单元格里写这个属性

7.Thead,tbody,tfoot的作用

thead　表格的头 用来放标题之类的东西
tbody　表格的身体 放数据本体
tfoot　 表格的脚 放表格的脚注之类

8.常见表单元素有哪些

（1）type="text"  文本框
（2）type="password"  密码框
（3）type="radio"
（4）type="checkbox"  复选框
（5）type=“submit”  提交按钮
（6）type=“reset” 重置按钮
（7）type="button"  没有提交功能的按钮（通常用来启动某些js程序）
（8）type="image"  用src引入图片路径  图片形式的按钮
（9）type=“file”  上传文件的按钮
（10）下拉框 (select 和option配合使用 ，是固定嵌套)
	<select name="">
	<option value="1991">1991</option>
	<option value="1992" selected>1992</option>
	</select>年
（11）textarea 文本域(用户可以拖拽改变大小,在css里设置resize:none)

9.引入css的方式有几种，分别是什么

1.内嵌式(内部样式)
通过<style></style>来书写CSS代码。只能应用于当前网页，不能被其它网页共享。
注意：<style>标记可以放在网页的任何地方，但一般放在<head>。

2.外联式(外部样式)
通过<link>标记来引入外部的CSS文件(.css)。可以被其它网页共享。
格式：<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />
注意：<link>标记只能放在<head>中

3.行内样式
通过style的属性来书写CSS代码。
举例：<p style=“font-size:24px;”></p>

10.单行文本水平垂直如何实现居中

1.水平居中
text-align:center:控制单行文字水平居中
2.垂直居中
设置行高，line-height：元素的高度，如果元素的高度是50px，则line-height:50px

11.选择器优先级如何计算

行间1000>id100>class10>标签1
当选择到了同一个标签时，比较权重，权重大的优先更高
当选择到了同一个标签时，权重相等，则遵循就近原则
父元素给子元素继承时，遵循继承来的样式小于给本身设置的样式
当加！importend时，则优先级要大于行间样式的优先级

12.Css中哪些属性是可以继承的

1.字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
line-height：行高
letter-spacing/Word-spacing:字母与字母之间和单词与单词之间的距离

2.文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
color：文本颜色
text-decoration：文本修饰

13.盒模型是由什么组成的

盒模型又称框模型（Box Model）,包含了:
元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；

元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。

14.如何使用border实现小三角

/**向下的三角**/
.trangle_down{
    width:0;
    height:0;
    overflow:hidden;
    font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border-width:10px;
	border-style:solid;  /*ie6下会出现不透明的兼容问题*/
	border-color:#f30 transparent transparent transparent;
}

15.Margin常见问题及解决办法

在父元素里面有子元素时，若父元素在没有设置overflow:hidden或者是border属性则父元素的margin-top的值为父元素和子元素中的margin-top的最大值。

margin常见的问题：

当margin-top和margin-bottom遇到时，上下距离会发生重叠的现象，哪一个值大，取那一个值。
解决办法：给其中一个margin设定值
当在一个大盒子里有一个小盒子时，给小盒子加margin-top时，会发生大盒子和小盒子一起向下移动现象（除小盒子是大盒子中的第一个元素，大盒子有padding-top，大盒子有边框）
解决办法：给大盒子设定padding-top

16.浮动产生的问题，清除浮动的方案

问题：当大盒子里潜逃一个小盒子时，给小盒子设置浮动时，大盒子的宽度就会变为0

解决：

直接给大盒子设置高度
给大盒子设置overflow：hidden/scroll/auto
给浮动的标签后面加入一个空的块元素，设置clear：both
设置一个CSS样式，clear{context=’’; display:block; clear:both}
给大盒子也设置浮动样式

17.如何让盒子水平垂直居中

当知道大小盒子的具体宽高时：直接设置margin值或者padding值
当知道小盒子的具体宽高，大盒子不知道时：
-给小盒子设置绝对定位，大盒子设置相对定位，

left：50%；
top：50%；
margin-left：（负小盒子宽度的一半）；
margin-top：（负小盒子高度的一半）

当大盒子小盒子都不知道具体数值时：
给小盒子设置绝对定位，大盒子设置相对定位

 top：0；
 left：0；
 right：0；
 bottom：0 ；
 margin：0 auto；

18.如何生成BFC

根元素 html
float的值为left或right
overflow的值为hidden或scroll或auto
display的值为inline-block
position的值为absolute或fixed

19.BFC规则

内部的标签会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠
每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。
BFC的区域不会与float的标签区域重叠
计算BFC的高度时，浮动子标签也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然

20.BFC能解决什么问题

外边距问题
自适应两栏或三栏布局
防止字体环绕
清除浮动

21.图片间隙问题如何解决

使用vertical-align：top/middle/bottom
将图片转化成块
给图片设置font-size：0；line-height=0；
这种方式可以解决图片的间隙问题，但是字体看不见，需要重新设置字体的大小

22.说说常见浏览器兼容问题

小高度问题
在ie6及以下版本，会有小高度问题
解决办法：给这个元素设置
font-size: 0;
line-height: 0;
overflow: hidden;
双边距问题
在ie6及以下版本，给元素设置浮动，再设置margin-left，最左侧的元素会出现双倍的margin-left值
解决办法：给元素设置
_display:inline;
块转内联块不在同一行显示
在ie7及以下版本，给块元素设置转内联块，不在同一行显示
解决办法：给元素设置
*display:inline;
*zoom:1;
子元素相对定位，父元素溢出隐藏失效问题
在ie6 7里，给子元素设置相对定位，给父元素设置溢出隐藏，溢出隐藏失效
解决办法：给父元素也设置
position: relative;
li的子元素里有两个或两个以上浮动的时候，会出现空白间隙问题
ie7及以下
解决办法：给li设置vertical-align: top/middle/bottom;
图片外面蓝圈问题
ie8及以下，图片外面包a标签，图片就会出现蓝圈
解决办法：给图片设置border: none;
不透明度
opacity和rgba 在ie8及以下都不兼容
opacity兼容的处理办法：
opacity: 0.5;
filter: alpha(opacity=50);
opacity 是整个元素都半透明
rgba是背景颜色或者文字颜色半透明，不会让整个元素都半透明
ie6 7 三角形设置transparent的边框是黑色
解决办法：把边框样式设置成虚线

23.等高布局、.双飞翼布局、圣杯布局实现原理及代码

详细→ https://blog.csdn.net/qq_40198420/article/details/102935542.

24.精灵图的原理及优缺点

好处：

减少http的请求
减少图片命名的好处
页面更换风格方便

缺点：

制作麻烦，需要设置盒子的宽度和测量背景的位置
如果需要改变其中一个图标，需要重新整合这张图片

25.网页中常见图片格式及特点

常用图片格式及特点

格式	优点	缺点	使用场景
jpg	色彩丰富,文件小	有损压缩,反复保存图片质量下降明显	色彩丰富的图片/渐变图片
gif	文件小、支持动画、透明无兼容性问题	只支持256种颜色	色彩简单的logo/icon/动图
png	无损压缩、支持透明、简单图片尺寸小	不支持动画,色彩丰富的图片尺寸大	logo/icon/透明图
webp	文件小、支持有损和无损压缩、支持动画、透明	浏览器兼容性不好	支持webp格式的app和webview

26.为什么初始化css样式?哪些样式需要初始化?

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

27.让元素在页面中消失有几种?

display：none
给元素设置透明
设置元素移除浏览器
设置优先层级低于其他层级
设置元素宽高为0
visibility-align：hidden

28.标签应该如何合理嵌套?

ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；ul、ol下都只能跟li，dl下只能跟dt.dd。

p,dt,h标签里面不能嵌套块元素；

a标签不能嵌套a；

行内元素不能嵌套块元素；

29.如何处理HTML5新标签的浏览器兼容问题?

进入html5shiv.js文件
在页面中使用
<!--end>
在页面中使用
<script> document.createElement（“hearer”） </script>
再将这个转换成块
display：block；

30.什么事less,less有什么好处?

less是使用一种规定的编程语言，将用户css转化成文件，使用特有的规定来编写css样式
好处

方便维护，便于开发，适应性强，可读性强
完全兼容css的代码
可以很好的实现多重继承
方便处理各浏览器的私有语法问题

31.常见的移动端布局有什么?原理是什么?

固定布局: 在里把viewport加好，根pc端一样，设想整个网页的宽度为320px居中即可，超出部分留白。
优点：思路沿用PC端，上手简单。
缺点：大屏幕手机及手机横屏时，两边是留白较大，且大屏幕手机下看起来页面会特别小，操作的按钮也很小，用户体验较差
流式布局:重点就是使用百分比来代替传统px，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样。
优点：流动布局可以很好解决自适应需求
缺点：通过大量的百分比布局，会出现兼容性的问题，且更适用于对横向拉伸的设计元素，设计的时候存在很多局限性。
响应式:根据目标用户的访问设备的主要类型做三种或四种布局。每种布局有一个区间即可利用媒体查询@media，可以为不同分辨率的设备加载不同的样式。
优点：可以相对精确的控制显示效果
缺点：可能需要对同一个类书写不同的样式会导致代码比较繁复，后期维护困难。
rem布局 rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。

32.简述rem布局原理?

rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。
比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。
rem布局实现步骤：

设置页面的viewport 动态计算并设置html的fontsize值
按照pc端布局方式正常布局，把px单位换算成rem（较小的长度比如1px的边框就不需要转换成rem,直接设置px）

33.html5的新特性?

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

34.单行和多行文本溢出显示省略号

//单行文本省略：
white-space：nowrap；
overflow：hidden；
text-overflow：ellipsis；

//多行：
display：-webkit-box；
-webkit-box-orient：vertical；
-webkit-box-line-clamp：3
overflow：hidden；