前端常见的HTML CSS面试知识点总结

HTML

1.如何理解HTML语义化？

· 让人更容易读懂（增加代码可读性）

· 让搜索引擎更容易读懂（SEO）

对比

<div> //不容易读懂
	<div>
		这是一个大标题
	</div>
	<div>
		这是一个小标题
	</div>
	<div>
		这是一段文本
	</div>
</div>

<div> //显而易见的内容，方便读懂
	<h1>这是一个大标题</h1>
	<h3>这是一个小标题</h3>
	<p>这是一段文本</p>
</div>

2.块状元素 & 内联元素

· 块状元素独占一行。display:block/table;有div、h1、h2、table、ul、ol、p等

· 内联元素不独占一行。display:inline/inline-block;有span、img、input、button等

CSS

盒模型宽度计算

offsetWidth = (内容宽度+内边距+边框) ,无外边距

设置box-sizing:border-box 使设置的width为offsetWidth

举例

.box1{ /* 此时的offsetWidth为122px,即offsetWdth = content + padding + border */
	width: 100px;
	height: 100px;
	border: 1px solid black;
	margin: 20px;
	padding: 10px;
}
.box2{ /* 此时 offsetWidth为100px,content = width - padding - border = 78*/
	width: 100px;
	height: 100px;
	border: 1px solid black;
	margin: 20px;
	padding: 10px;
	box-sizing: border-box;
}

margin纵向重叠问题

· 相邻元素的margin-top 和 margin-bottom 会发生重叠

· 空白内容也会发生重叠

举例

<div>
	<p class="box">第一个文本</p>
	<p class="box"></p>
	<p class="box"></p>
	<p class="box"></p>
	<p class="box">第二个文本</p>
</div>
<style>
	.box{
		margin-top: 30px;
		margin-bottom: 20px;
	}
</style>

对比两张图片可以发现此时空内容标签已被完全覆盖。有内容的标签的margin-top 和 margin-bottom 已经发生重叠，即第一个文本和第二个文本的垂直距离为30px，并不是50px。

margin负值问题

· margin-top 为负值时，元素向上移
· margin-left 为负值时，元素向左移
· margin-bottom 为负值时，元素自身无影响，右边的元素向左移
· margin-right 为负值时，元素自身无影响，下边的元素向上移

这里就不举例说明了

BFC理解与应用

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

形成BFC的条件

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

BFC的常见应用

清除浮动

float布局

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

圣杯布局和双飞翼布局的目的

三栏布局，中间一栏最先加载和渲染
两侧内容固定，中间内容随着宽度自适应
一般用户PC网页

圣杯布局和双飞翼布局的技术总结

使用float布局
两侧使用margin负值，以便和内容纵向重叠
防止中间内容被两侧覆盖，一个用padding，一个用margin
圣杯布局通过margin为左右留白
双飞翼布局通过margin为左右留白

关于圣杯布局和双飞翼布局网上有很多，可自行搜索，这里不再做过多阐述。

手写一个clearfix

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

flex 布局

常用语法回顾

flex-direction 方向
justify-content 主轴对齐方式
align-items 交叉轴对齐方式，即垂直于主轴的对齐方式
flex-wrap 换行
align-self 子元素交叉轴的对齐方式

flex实现一个三点的骰子

给父级设置 display: flex;
主轴对齐：justify-content: space-between;两端对齐
给第二个子元素设置交叉轴对齐： align-self: center;居中对齐
给第三个子元素设置交叉轴对齐： align-self: flex-end;尾部对齐

CSS定位

absolute 和 relative 分别依据什么定位？

relative 依据自身定位
absolute 依据最近一层定位元素定位（依次向上找，直到找到定位元素）

居中对齐的方式

水平居中
inline 元素： text-align: center;
block 元素： margin: auto;
absolute 元素： left: 50%; margin-left: 复制（需知道该元素的大小）
垂直居中
inline 元素： line-height 的值等于 height 的值
absolute 元素：top: 50%;margin-top: 负值（需知道该元素的大小）
absolute 元素：top: 50%;left:50%;transform: translate(-50%,-50%)
absolute 元素：top,left,bottom,right = 0;margin: auto;

CSS图文样式

line-height 如何继承

· 写具体数值，如30px，则继承该值
· 写比例，如2/1.5，则继承该值
· 写百分百，如200%，则继承计算出来的值

举例

<div class="box">
	<div class="content1">具体数值</div>
</div>
<div class="box">
	<div class="content2">比例</div>
</div>
<div class="box">
	<div class="content3">百分比</div>
</div>
<style>
	.box{
		height: 20px;
		margin-bottom: 20px;
	}
	.content1{
		line-height: 20px;
	}
	.content2{
		line-height: 2;
		font-size: 20px;
	}
	.content3{
		line-height: 200%;
		font-size: 16px;
	}
</style>

具体数值如上图所示

比例如上图所示

百分比如上图所示，百分比是基于自身的font-size的值

CSS相应式

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

响应式布局常用方案

media-query,根据不同屏幕宽度设置根元素font-size

window.screen.height 屏幕高度
window.innerheight 网页视口高度
document.body.clientHeight body高度

vh 网页视口高度的1%
vw 网页视口宽度的1%
vmax取两者最大值，vmin取两者最小值

以上全部内容只是前段HTML CSS面试部分重要知识的总结，具体题目可自行根据知识点搜索。有错误或者不足的地方，请给予您的宝贵意见或建议。