前端面试集中复习 -HTML+CSS

你才是向阳花

已于 2024-03-24 21:52:07 修改

阅读量843

点赞数 25

分类专栏：常见面试题文章标签：前端

于 2024-03-18 21:29:10 首次发布

本文链接：https://blog.csdn.net/weixin_54714100/article/details/136807655

版权

常见面试题专栏收录该内容

19 篇文章 0 订阅

订阅专栏

HTML篇

1. HTML DOCTYPE的含义？什么是 HTML 的标准模式与混杂模式？

HTML的文档类型声明，说明这个页面的用什么来编写的

h5 有一个比较宽松的语法，基本上完全向后兼容。

2. h5 有哪些语义化标签及其特性？HTML元素有哪些分类与特性？

优点：让我们根据结构化的内容选择合适的标签，使代码可读性更好，增加title、alt等方便了用户使用，有利于seo优化。

article header footer nav aside等

3. html中meta的作用？

可以方便解析相关属性，有利于seo优化

4. DOM和BOM有什么区别？

JavaScript在浏览器环境下一般有三部分构成

- ECMAScript 核心，描述了JS的语法和基本对象

- DOM 文档对象模型，包括一些可以操作文档的API

- BOM 浏览器对象模型，包括一些可以操作浏览器的API

5. 如何实现移动端适配？

- 响应式布局

- 媒体查询

- rem html的font-size大小

- meta viewport vw

CSS篇

1. 行内元素转换为块元素

display: block/inline-block

float：left/right 可以去除行内元素之间的空白问题

position: absolute/fixed

2. 可继承的样式有哪些

字体 font-size / weight / family

文本 text-align indent 、line-height、letter-spacing、color

元素 visibility

列表布局 list-style

光标 cursor

3. 隐藏一个元素的方法

display: none  // 节点在 不占位  不会被继承
visibility: hidden; // 占位，不可见 可继承
opacity: 0; // 占位 可选择，只是透明的
position: absolute; // 定位离开视图
z-index:负值;  // 被其他元素覆盖
clip  // 元素在，尺寸变小
transform:scale(0,0)   // 元素在，尺寸变小

display: none VS visibility

display: none 不占dom，不可继承，会影响重排

visibility 占dom，可继承，仅影响重绘

4. 盒模型及其特性

box-sizing: content-box 只包含content 标准盒模型

box-sizing: border-box 包含content border 和 padding

5. 伪类 & 伪元素

伪类：在已有的元素上加上特殊类别，不产生新的元素

eg: div:hover {}

伪元素：只出现在css中，不存在于doc中

eg: p::before {

content: ''

}

p::first-line {}

6. css 工程化与预处理

预处理器： less scss stylus 利用编译 / 库提供能力，提供层级，mixin、变量、循环、函数

后处理器：postCss 利用后处理编译，给属性增加前缀，实现跨浏览器兼容问题；变量替换等。

7. 单行多行文本超出

单行超出： overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

多行超出：

overflow: hidden; 
text-overflow: ellipsis;  // 超出省略号
display: -webkit-box; // 弹性伸缩盒子模型
-webkit-box-orient: vertical; // 从上往下垂直排列
-webkit-line-clamp: 3; // 显示的行数

// 多行超出隐藏兼容性方案

先给块标签一定的高度，超出隐藏，再定位一个省略号在末尾位置

兼容性方案不足之处：高度固定，容易出现字截断的问题