html+css面试题合集（一）

时间：2023-10-02 03:54:01 | 来源：网站运营

时间：2023-10-02 03:54:01 来源：网站运营

html+css面试题合集（一）：XHTML与HTML的有何异同？

HTML是一种基于WEB的网络设计语言，XHTML是基于XML的置标语言，XHTML可以认为是XML版的HTML，所以它的语法比较严谨：元素必须关闭，嵌套必须正确，大小写区分，属性值必须用双引号，id属性代替name属性




介绍一下CSS的盒子模型？弹性盒子模型是什么？

盒子模型由content+padding+border+margin组成，分为标准盒子和IE盒子，标准盒子的width指content，IE盒子的width包括content，padding，border

弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。

*Doctype的作用？标准模式与兼容模式各有什么区别?

声明在文档的第一行，位于html的前面，用于告知浏览器的解析器以什么样的文档标准来解析这个文档，如果没有声明文档就会以兼容模式呈现

标准模式的排版和JS都是以浏览器支持的最高的标准运行

兼容模式页面以宽松向后兼容的方式显示，模仿老式浏览器，防止站点无法工作




行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素有：a b span img input select strong（强调的语气）

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

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




介绍一下你对浏览器内核的理解？

浏览器内核分为渲染引擎和JS引擎




常见的浏览器内核有哪些？

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]

Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支]




cssSprite是什么 ？有什么优缺点？

精灵图是一种网页图片的应用技术，它把背景图片都整合到一张图片上，再利用background-position进行图片定位，优点是有效的减少了http请求，减少了图片的字节，缺点是合成比较麻烦，需要精准定位




前端页面有哪三层构成？ 分别是什么？ 作用是什么？

结构层由HTML负责，负责搭建页面的结构

表示层由CSS负责，负责页面的样式

行为层由JavaScript负责，负责页面的交互




css选择符有哪些？优先级算法如何计算？

标签选择符，类选择符，ID选择符，伪类选择符，相邻选择符，子代选择符，后代选择符，通配符选择符，属性选择符

优先级：

就近原则，下面覆盖上面

!important＞内联＞ID＞类＞标签




HTML中div与span区别

div是块级元素，独自占一行，宽度默认是占满父级的宽度，可以设置宽高

span是行内元素，排列在一行里，宽度是内容的宽度，不能设置宽高




css实现垂直水平居中

定位，top和left设置50%，再通过transform的translate(-50%, -50%)设置实现垂直水平居中

定位，top和left设置50%，再通过margin-top和margin-left自己宽高的一半设置实现垂直水平居中

定位，top，bottom，left，right都设置为0，再通过margin设置为auto实现垂直水平居中

flex布局，先设置justify-content为center实现水平居中，再设置align-items为center实现垂直居中

table布局，设置父元素display为table-cell，再设置vertical-align为middle实现垂直居中，把自己display设置为inline-block，父级设置text-align为center实现水平居中




alt和title分别表示什么含义以及具体应用体现

alt是代替图片的文字，图片不能显示时会显示alt，title是鼠标指上去时的解释文字