CSS常见面试题

Posted 2023-04-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS常见面试题相关的知识，希望对你有一定的参考价值。

参考技术A 1.position:absolute+transform:translate(-50%,-50%)
2.position:absolute+margin-top:-100px+margin-left:-100px(需要直到div的宽高)
3.flex
4.绝对定位的top，left，bottom，right都设置为0，然后通过margin:auto实现水平垂直居中
5.display:table-cell;vertical-align:middle;text-align:center
6.calc函数计算实现

1. DOM结构：元素不会渲染
2. 事件监听：不能监听DOM事件
3. 继承：子元素不会继承
4. 性能：改变此属性会重排，性能较差

1. DOM结构：元素会渲染
2. 事件监听：能监听DOM事件
3. 继承：子元素会继承，可以通过visibility:visible;来取消继承
4. 性能：改变此属性会重绘，性能较好

1. DOM结构：元素会渲染
2. 事件监听：能监听DOM事件
3. 继承：子元素会继承，而且不能通过opcity：1;来取消隐藏
4. 性能：改变此属性会重绘，性能较好

window.divicePixelRatio=2(默认)
意思是：我们css中1px相当于实际移动端设备2px

1.border-width:0.5px

2.box-shadow内阴影模拟边框，
box-shadow:inset 0px -1px 1px 1px red;
3.通过viewport设置rem的基准值，就可以直接写rem了，较好的解决方案
4.伪类+transform
通过:after或:before设置border，结合定位

两侧宽度固定，中间宽度自适应

所以我们要尽量少使用以上属性和方法

HTML常见面试题

*doctype`(文档类型) 的作用是什么？

1.告诉浏览器是用什么样的html或者xhtml规范来解析html文档。

2.对浏览器的渲染模式产生影响；不同的渲染模式会影响到浏览器对css代码甚至js的解析。

* 浏览器标准模式 (standards mode) 、几乎标准模式（almost standards mode）和怪异模式 (quirks mode) 之间的区别是什么？

　　由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。

* HTML 和 XHTML 有什么区别？

　　HTML与XHTML之间的差别，粗略可以分为两大类比较：一个是功能上的差别，另外是书写习惯的差别。关于功能上的差别，主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页。

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

* 如果页面使用 ‘application/xhtml+xml‘ 会有什么问题吗？

　　大多数浏览器可以正常使用，接收xhtml类型的文档。
* 如果网页内容需要支持多语言，你会怎么做？
* 在设计和开发多语言网站时，有哪些问题你必须要考虑？

1- 应用字符集的选择；所以对提供了多语言版本的网站来说，Unicode字符集应该是最理想的选择。它是一种双字节编码机制的字符集，不管是东方文字还是西方文字，在Unicode中一律用两个字节来表示，因而至少可以定义65536个不同的字符，几乎可以涵盖世界上目前所有通用的语言的每一种字符。所以在设计和开发多语言网站时，一定要注意先把非中文页面的字符集定义为“utf-8”格式。

2- 语言书写习惯&导航结构。

3- 数据库驱动型网站
对一个数据库驱动型的网站，尤其是当客户可以留言并向数据库添加信息时，则应当考虑如何从技术上实现对不同语言数据信息的收集和检索。

4- 搜索引擎&市场推广。
* 使用 `data-` 属性的好处是什么？

方便js直接调用自定义属性。
* 如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？
* 请描述 `cookies`、`sessionStorage` 和 `localStorage` 的区别。

技术分享
* 请解释 `<script>`、`<script async>` 和 `<script defer>` 的区别。

可以在<script>中加入defer属性，告诉浏览器这段script不必立即执行，那么浏览器就会在完全载入文档之后再执行这个script，相当于window.onload，但它比window.onload更灵活。

使用async属性加载JavaScript，这样整个脚本就可以异步加载和执行。

* 为什么通常推荐将 CSS `<link>` 放置在 `<head></head>` 之间，而将 JS `<script>` 放置在 `</body>` 之前？你知道有哪些例外吗？

css和JavaScript不一定写在head里比较好，我习惯于单独设立css和js文件，把代码写在里面，这样方便查找和管理，而你所说的head 和 body标签本身就属于是HTML语言。
而CSS和js的引用位置是放在头部还是尾部取决于一个加载顺序，在网页传输过程当中，浏览器会先加载html，当加载头部以后会同步加载头部中引用的文件，而css样式表在这里加载会规定网页的总体样式，js如果需要先加载后运行则写在头里，需要其他内容加载完之后在运行则可以写在尾部。

* 什么是渐进式渲染 (progressive rendering)？
* 你用过哪些不同的 HTML 模板语言

以上是关于CSS常见面试题的主要内容，如果未能解决你的问题，请参考以下文章