前端必须要掌握的HTML和CSS面试题

如何理解HTML语义化

1:使人更容易理解(增强代码可读性)
2:使机器更容易理解(利于搜索引擎SEO)

默认情况下，哪些HTML标签是块级元素，哪些是内联元素

块级元素：
h1~h6 p div body table ol ul article footer等
行内元素：
span img input button等

块级元素的特点是独占一行，且宽高可以被设置，而行内元素不能独占一行，且宽高无法设置
使用display:block可以将行内元素转换为块级元素，使用display:inline可以将行内元素转化为块级元素,使用display:inline-block将元素转化为行内块元素(也即是不能够换行，但可以设置宽高)

如下代码，div1的offersetWidth是多大

.div1{
	width:100px;
	padding:10px;
	border:1px solid #ccc;
	margin:10px;
}

<div class="div1"></div>

该题考察盒模型的宽度如何计算；首先要知道的是offsetWidth = 内边距+内容宽度+边框,当我们不对元素设置box-sizing的时候，box-sizing的值默认为content-box，给元素设置的width只是内容的宽度，此时offsetWidth的值为100 + 10*2 + 1*2;当box-sizing为border-box时，此时给元素设置的width的值包括元素内边距，内容宽度，边框的width之和，此时offsetWidth的值为100

如下代码，AAA和BBB的距离是多少

p{
	font-size:10px;
	line-height:1;
	margin-top:10px;
	margin-bottom:15px;
}

<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>

该题考察margin纵向重叠问题，中间的3个p标签因为没有内容，所以可以直接忽略，接着第一个p标签的margin-bottom会和最后一个p标签的margin-top进行重叠，因此结果为15px

描述一下margin负值的情况

首先当我们对元素设置margin-left和margin-top为负值的时候，元素自身发生移动，并分别往左或往上移动
接着，当我们对元素设置margin-bottom和margin-right设置值为负值的时候，元素自身不会发生移动，元素下方的元素会往上移动或元素右边的元素往左移动

讲一下BFC

定义：
BFC也即是块级格式化上下文，也就是创建一个空间，使空间内部元素的渲染不影响外部

形成块级作用域的条件：
1：float的值不为none
2：overflow的值不为visible
3：position的值为absolute或fixed等
4：display的值为flex,inline-block等

作用：
清除浮动

手写clearfix

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

居中有哪些实现方式

水平居中
对于行内元素，直接对其使用text-align:center即可
对于块级元素，可以直接使用margin:auto,也可以position:absolute;left:50%;margin-left:-元素宽度的1/2

垂直居中
对于行内元素，对元素设置line-height:父级元素的高度即可
对于块级元素，可以

position:absolute;
top:50%;
margin-top:-自身元素高度的一半

也可以

position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto

或者

position:absolute;
transform:translate(-50%,-50%);
left:50%;
top:50%;

当然，其实我们实际项目开发最常用到的还是弹性布局来实现水平垂直居中

display:flex;
justify-content:center;
align-items:center

如果不考虑浏览器兼容性，还可以使用栅格布局

display:grid;
place-item:center;

下列代码，p标签的line-height的值是多少

body{
	font-size:20px;
	line-height:200%;
}
p{
	font-size:16px;
	background-color:#ccc;
}

答案是20*200%；
如果body属性的line-height的值为一个小数的话，比如1.5,那么此时p标签的line-height值为16*1.5
如果body属性的line-height的值为一个整数的话，比如30，那么此时p标签的line-height值为30

rem是什么

rem是一个相对于根元素（html）节点的相对长度单位

响应式布局的常见方案

1:媒体查询media-query，接着在根节点(html)上设置不同的font-size,配合rem使用
2:vm,vh

vm表示网页视口高度的1/100,也即是window.innerWidth,浏览器内容高度，vh同理
window.screen.height表示屏幕高度(屏幕亮起的区域)
document.body.clientHeightbody的高度