2024前端面试准备-HTML&CSS

重头回顾一下知识

HTML面试题

1.怎么理解HTML语义化
让人更容易读懂(增加代码可读性),让搜索引擎更容易读懂(SEO)
2.默认情况下哪些是块元素,哪些是内联元素
块元素: display:block/table; 有dev、h1、h2、table、ul、ol、p等.
内联元素: display:inline/inline-block;有span、img、input、button等.
3. src和href的区别？
src：指向外部资源的位置，指向的内容将被加载到当前标签的位置，例如：img、js等、当浏览器加载到该元素是，会暂停其他资源的处理，直至将该资源处理完毕，这也是为什么将js放入底部的原因。
href: 指向网络资源所在的位置，建立和当前元素的直接的链接，加载该类资源不会停止对当前文档的处理。例如 用link标签加载css文件。
4. DOCTYPE(⽂档类型) 的作⽤
DOCTYPE是文档类型声明，它的目的是告诉浏览器应该以什么文档类型来解析文档，不同的渲染模式会影响浏览器对页面和脚本的解析，必须声明在第一行。
浏览器的渲染模式有两种，

• 标准模式是默认模式，W3C的标准来解析渲染页面，浏览器以其支持的最高标准呈现页面。
• 混杂模式，页面以一种比较宽松的向后兼容的方式显示。

5. script标签中defer和async的区别
script标签如果没有这两个标识，浏览器会立即加载并执行相应的脚步，会阻塞后续文档的价值。
defer和async都是异步加载，不会阻塞当前文档的加载，常用于加载外部脚本。区别点就是defer一般用于与DOM有关系的脚本，脚本会在dom渲染完之后执行，多个defer标识的脚步会按解析顺序执行，async标识一般用于加载第三方脚本，脚本会在下载完之后立即执行，多个async标识不能保证加载的顺序，谁先加载完谁先执行。

6.隐藏元素的方法有哪些
display:none、visibility:hidden、absolute移除可见范围、opacity:0透明的、z-index负值、transfrom:scale(0,0) 缩放；

7.link和@import的区别

• link是XHTML标签，除了加载CS还可以加在其他事务；@import属于CSS范畴，只能加载CSS;
• link引用CSS时候，在页面加载时同时加载，@import需要页面完全载入后加载。

CSS面试题

布局相关

1.盒模型宽度计算
offsetWidth = (内容宽度 + 内边距 + 边框), 无外边距
box-sizing: boerder-box; width = offetwidth
2.margin纵向重叠问题
相邻元素的margin-top盒margin-bottom会发生重叠
空白内容的

也会重叠


3.margin负值问题

margin-top盒margin-left设置负值,元素会向上或向左移动

margin-right负值,右侧元素往左移,自身不受影响

margin-bottom负值,下方元素上移,自身不受影响


4.BFC理解与应用

Block format content, 块级格式化上下文

一块独立渲染区域,内部元素的渲染不会影响边界以外的元素

BFC应用: 清除浮动

BFC形成条件:

• float不是none
• display是 flex inline-block等
• position是absolute或者fixed
• overflow不是visible

5.float布局 圣杯布局和双飞翼布局的
圣杯布局和双飞翼布局的技术总结:
使用float 布局
两侧使用 margin 负值，以便和中间内容横向重叠, 防止中间内容被两侧覆盖，圣杯布局用 padding 双飞翼用 margin
6.手写clearfix

.clearfix:after{
   content: '';
   display: table;
   clear: both;
}
.clearfix{
	*zoom:1; /*兼容IE低版本*/
}

7.flex布局

flex-direction : 主轴方向.

justify-content : 主轴对齐方式

align-items 其他轴对齐方式

flex-wrap 换行

align-self 字元素

定位相关

1.absolute 和 relative 分别依据什么定位?
relative 依据自身定位,不会影响外界元素,
absolute 依据最近一层的定位元素

2.居中对齐有哪些实现方式
水平居中:
inline元素: text-align:center;
block元素: margin:auto;
absolute元素: left:50%+magin-left负值50%
垂直居中:
inline元素: line-height 的值等于height值
absolute元素: top:50%+magin-top负值50%
absolute元素: transform(-50%,-50%)
absolute元素: top, left,bottom,right = 0 + margin:auto;

图文样式

1.line-height如何继承?
如果是具体数值, 如30px, 则继承该值
如果是比例,如2/1.5, 则继承该比例
如果是百分百,如200%,则继承计算出来的值

响应式

1.rem
px是绝对长度单位;em相对长度单位,相对于父元素;rem是一个相对长度单位,相对于根元素;
缺点: 具有阶梯性
2.响应式布局的常见方案
media-query 根据不同屏幕宽度设置根元素font-size, 单位采用rem方式

其他

1.display:none与visibility:hidden的区别
两个属性都是让元素隐藏不可见；
display:none会让元素在渲染树中消失，子孙节点跟着父节消失，修改常规文档流时会造成文档的重排。
visibility:hidden不会让元素在渲染树中消失，子孙节点会继承该属性，渲染的元素还会占据空间，只是内容不现实，通过属性设置可以让子孙节点显示；它会造成本元素的重绘；
**2.为什么有时候⽤translate来改变位置⽽不是定位？ **
translate不会触发浏览器重新布局或者重绘，效率更高。
3.CSS 优化和提高性能的方法有哪些？

• 压缩css减小体积、使用link标签加载、
• 遵循编码规范、减少高性能属性浮动定位的使用、属性值设置为0不要带单位等
• 相对属性的样式做抽离，通过class在页面中使用

4.Sass、Less 是什么？为什么要使用他们？
他们都是CSS预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。