前端面试准备笔记之html和css(01)

01. 什么是盒模型？

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容(content)，元素的边距(padding),元素的边框(border),元素的边距(margin)四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的模型。

02. 行内元素有哪些？块级元素有哪些？空元素有哪些？

行内元素: a、b、span、img、input strong select label em button textarea

块级元素: div ul li dl dt dd p h1-h6 blockQuote

空元素: br meta hr link input

03. CSS实现水平居中？

https://blog.csdn.net/qq_43633937/article/details/93758524

// HTML
<div class="wrapper">
<div class="content"></div>
</div>

//CSS
.wrapper {
position: relative;
width: 500px;
height: 500px;
border: 1px solid red; 
}
.content{
position: absolute;
width: 200px;
height: 200px;
/*top、bottom、left和right 均设置为0*/
top: 0;
bottom: 0;
left: 0;
right: 0;
/*margin设置为auto*/
margin:auto;
border: 1px solid green; 
}

04. 简述一下src和href的区别？

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

05. px和rem的区别

• rem 是相对于根元素html，浏览器默认的是16px。

06. 浏览器的内核分别是什么？

• IE: trident内核

• Firefox：gecko内核

• Safari：webkit内核

• Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

• Chrome：Blink(基于webkit，Google与Opera Software共同开发)

07. 什么叫优雅降级和渐进增强？

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

• a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

• b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

• c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带