HTML CSS 面试题笔记&知识点复习

最新推荐文章于 2024-10-12 14:14:19 发布

PorkCanteen

最新推荐文章于 2024-10-12 14:14:19 发布

阅读量163

点赞数

分类专栏：前端面试题笔记文章标签： css html5 html

本文链接：https://blog.csdn.net/PorkCanteen/article/details/120637471

版权

前端面试题笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

HTML CSS 面试题总结

1. HTML

如何理解 HTML 语义化

让人更容易读懂 (增加代码可读性)
让搜索引擎更容易读懂 (SEO)
默认情况下，哪些 HTML 标签是块级元素、哪些是内联元素

display: block/table 包括 div h1 h2 table ul ol p 等
display: inline/inline-block 包括 span img input button 等

2. CSS

布局

盒子模型宽度计算（高度同理）

offsetWidth = ( 内容宽度 + 内边距 + 边框 )，无外边距
通过 box-sizing: border-box 可以使得宽度包含 padding margin border

⚓️ 视图相关属性复习
margin 纵向重叠问题

相邻元素的 margin-top 和 margin-bottom 会发生重叠 (取较大值)
空白内容也会重叠(忽略)
margin 负值问题

margin-top 和 margin-left 负值，元素分别向上、向左移动
margin-right 负值，右侧元素左移，自身不受影响
margin-bottom 负值，下方元素上移，自身不受影响
BFC 理解和运用

Q：什么是 BFC？如何应用？

块级格式化上下文 (Block ormat context)
一块独立渲染区域，内部元素的渲染不会影响边界外的元素 (内部元素不会跑出外部容器)

形成 BFC 的常见条件：

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

⚓️ BFC复习
float 布局问题以及 clearfix

Q：如何实现圣杯布局和双飞翼布局

① 目的：
三栏布局，中间一栏最先加载和渲染 (内容最重要)
两侧内容固定，中间内容随着宽度自适应
一般用于 PC 网页

② 技术总结：
使用 float 布局
两侧使用 margin 负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用 padding 一个用 margin

③ 区别理解：
a. 圣杯布局
父元素包含左中右三个元素并设置 padding
左右元素（非主要元素）分别占据父元素 padding 区域
b. 双飞翼布局（较常用）
主要元素添加外层元素，并为内层主要元素设置 margin
左右元素（非主要元素）分别占据主要元素 margin 区域
Q：手写 clearfix
```
.clearfix:after {
  content: '';
  display: table;
  clear: both;
}
.clearfix {
  *zoom: 1;
}
```
🔔 伪元素使用 “:” 或 “::” 均可

flex 布局

flex 实现一个三点的色子

.box {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
}
.item {
  /* 背景色、大小、边框等 */
}
.item:nth-child(2) {
  align-self: center; /* 第二项居中对齐 */
}
.item:nth-child(3) {
  align-self: flex-end; /* 第三项尾对齐 */
}

⚓️ flex 属性复习

定位

absolute 和 relative 依据什么定位

relative 依据自身定位
absolute 依据最近一层的定位元素定位

定位元素：absolute/relative/fixed 或 body
居中对齐实现方式

① 水平居中
inline 元素：text-align: center
block 元素：margin:auto
absolute 元素：left: 50% + margin-left 负值

② 垂直居中
inline 元素：line-height 的值等于 height 的值
absolute 元素：top: 50% + margin-top 负值 (需要知道子元素宽高)
absolute 元素：transform: translate(-50%, -50%)
absolute 元素：top, left, bottom, right = 0 + margin: auto

图文样式

line-height 继承问题

若写具体数值，如 10px ，则继承该值
若写比例，如 2 ，则继承该比例 (使用子元素 font-size 乘该比例)
若写百分比，如 200% ，则继承计算出来的值

响应式

rem 是什么，

px 绝对长度单位，最常用
em 相对长度单位，相对于父元素，不常用
rem 相对长度单位，相对于根元素，常用于响应式布局
如何实现响应式

media-query 根据不同的屏幕宽度设置根元素 font-size (一般无需手写)
rem 基于根元素的相对单位
vw/vh

① rem 的弊端：阶梯性
② 网页的视口尺寸：
window.screen.height 屏幕高度
window.innerHeight 网页视口高度
document.body.clientHeight body 高度
③ vw/vh
vh 为网页视口高度的 1/100
vw 为网页视口宽度的 1/100
vmax 为以上二者的最大值；vmin 为以上二者的最小值

CSS3

关于 CSS3 动画 (不啷个重要)

HTML CSS 知识点复习 🌌

1. 视图相关属性复习

元素视图属性

offsetWidth 水平方向 width + 左右padding + 左右border-width
offsetHeight 垂直方向 height + 上下padding + 上下border-width

clientWidth 水平方向 width + 左右padding
clientHeight 垂直方向 height + 上下padding

offsetTop 获取当前元素到定位父节点的top方向的距离
offsetLeft 获取当前元素到定位父节点的left方向的距离

scrollWidth 元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度，包括由于overflow溢出而在屏幕上不可见的内容，它还可以包括伪元素的宽度。内容不超出盒子高度时为盒子的clientWidth
（scrollHeight 同理）

Window视图属性（低版本IE浏览器[<IE9]不支持）

innerWidth 浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏）
innerHeight 浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏）

Document文档视图

（低版本IE的innerWidth、innerHeight的代替方案）
document.documentElement.clientWidth 浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏、滚动条）
document.documentElement.clientHeight 浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏、滚动条）

document.documentElement.offsetHeight 获取整个文档的高度（包含body的margin）
document.body.offsetHeight 获取整个文档的高度（不包含body的margin）

document.documentElement.scrollTop 返回文档的滚动top方向的距离（当窗口发生滚动时值改变）
document.documentElement.scrollLeft 返回文档的滚动left方向的距离（当窗口发生滚动时值改变）

2. flex 属性复习

2.1 父项容器属性

flex-direction 主轴方向

row 水平方向，起点为左（默认）
row-reverse 水平方向，起点为右
column 垂直方向，起点在上
column-reverse 垂直方向，起点在下

justify-content 主轴对齐方式

flex-start 从行首开始排列，所有后续的元素与前一个对齐（默认）
flex-end 从行尾开始排列，剩余元素与后一个对齐
center 居中，每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同
space-between 均匀分配，相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
space-around 均匀分配，相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
space-evenly flex项都沿着主轴均匀分布在指定的对齐容器中。相邻flex项之间的间距，主轴起始/结束位置到首位/末位flex项的间距,都完全一样。

flex-wrap 换行

wrap 多行
nowrap 单行（默认）

align-items 侧轴对齐方式（单行）

stretch 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
flex-start 元素向侧轴起点对齐。
flex-end 元素向侧轴终点对齐。
center 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。

align-content 侧轴对齐方式（多行）

类似 justify-content

flex-start
flex-end
center
space-between
space-around
space-evenly
stretch

flex-flow

flex-direction与flex-wrap的简写

2.2 子项属性

flex 所占份数

设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

align-self 单独设置对齐方式

对齐当前 grid 或 flex 行中的元素，并覆盖已有的 align-items 的值。

auto
flex-start
flex-end
center

order 排布顺序

可以设置为任意整数（正整数、负整数、0），值越小越排在前面
默认为 0

3. BFC 复习

BFC的布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。