前端面试知识 - HTML、CSS篇

原创已于 2022-02-13 00:03:55 修改 · 206 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

于 2021-04-22 16:36:15 首次发布

前端专栏收录该内容

16 篇文章

订阅专栏

本文概述了前端面试中常见的知识点，包括HTML语义化、CSS布局与新特性（如BFC和Flex）、CSS盒子模型、定位与响应式设计，以及CSS基础知识如伪类、浮动和 clearfix。掌握这些将提升面试通过率。

前端面试常见知识点

前言
html
css

前言

这部分相对来说比较简单，大神可以直接跳过哈！

html

html部分（考察较少较简单，组织好语言即可）

如何理解语义化
（1）便于理解，提高代码可读性
（2）有利于SEO
解释块状元素和行内元素
(1）设置宽高无效
(2) 对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3) 不会自动进行换行
h5的一些新特性
（1）标签语义化
（2）新增media查询
（3）新增了一些标签，eg：video、audio等
（4）本地存储（可能会引申到cookie、sessionStory、localStory等问题）

css

盒子模型宽度计算
（1）offsetWidth = 除了margin的所有宽度相加
（2）box-sizing常用值和作用

box-sizing: content-box|border-box;
为border-box时offsetWidth = width（即宽度包含border和padding）

伪类选择器和伪元素：看这里
浮动，解释高度塌陷，如何清除浮动或者说怎样解决高度塌陷（详见8，9，还有增加新div元素，css设置为clear: both）
css实现三角型、梯形、圆
margin纵向重叠问题
（1）相邻元素的margin-top和bottom会重叠
（2）且空白标签也会重叠

// 举例说明（这里只有css和html哈）
// 好好好、棒棒棒之间的距离是多少
   <style type="text/css">
        div {
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
        }
        p {
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>

<div>好好好</div>
<div></div>
<p></p>
<div>棒棒棒</div>

</body>
// 答案：15px

margin负值
（1）margin-top、margin-left负值，元素分别向上向左移动
（2）margin-right负值，自身不动，右侧元素左移
（3）margin-bottom负值，自身不动，下侧元素上移
BFC相关问题（BFC详细讲解看这里.）
（1）形成BFC常见条件
overflow 值不为 visible 的元素
float不是none
display 值为 flow-root 的元素
position 为 absolute 或 fixed
（2）BFC常见使用场景
两个BFC可以避免margin重叠（但是BFC内部相邻容器不能避免）
可以用来自适应两栏布局（BFC的区域不会与float box重叠）
包含有浮动的元素，不会造成高度塌陷
（3）BFC的布局规则
BFC内部的盒子会垂直排列
BFC区域不会和float盒子重叠
BFC即页面上独立的容器，不会影响外部布局
手写clearfix

.clearfix:after {
	content: ''
	display: table
	clear: both
}

flex布局
感觉比较简单，这里就不细说了哈，有需要看这里（阮一峰的flex语法.）
定位
（1）relative和absolute
relative：相对自己定位
absolute：相对上级relative元素，如果没有上级，则相对当前窗口
（2）居中对齐
水平居中

垂直居中
（1）inline元素：line-height = height
（2）position: absolute; top: 50%; margin-top: 50%
（3）position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)
（4）position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto
（5）display: flex; flex-direction: cloumn; justify-content: center
响应式
（1）line-height继承

具体数值（eg：20px），直接继承；
比例（eg：2），则继承比例
百分比（eg：200%），则继承计算后的值

// 比例：p的line-height为16 * 2 = px
		body {
            font-size: 20px;
            line-height: 2;
        }
        p {
            background-color: #ccc;
            font-size: 16px;
        }

// 百分比：p的line-height为20 * 200% = 40px
		body {
            font-size: 20px;
            line-height: 200%;
        }
        p {
            background-color: #ccc;
            font-size: 16px;
        }

（2）rem和em区别
都是相对长度，
但rem相对于根元素来定，在根元素中设定font-size后，即可自动相应；
em是相对于父元素来定，可以随着font-size变化，适用于在非默认字体大小的元素上的padding、 margin、 width、 height和line-height等值
（3）响应式常用方案（用过哪些说哪些，结合自己项目就行，这里大概罗列一下）

百分比；
rem搭配media query（注意：iphone 6/7/8/x 375-414px）
vw、vh使用（也可以称作vmax、vmin）

浏览器的兼容问题
Css动画：菜鸟教程解释的很全面

// 一个简单的栗子
{
	background:red;
	animation:mymove 5s infinite;
	/*Safari 和 Chrome:*/
	-webkit-animation:mymove 5s infinite;
}

@keyframes mymove
	{
	from {background-color:red;}
	to {background-color:blue;}
}