前端面试题（html+css）

HTML

1、h5新增标签

header、footer、 nav、article、aside、audio、video ……等

2、html语义化

HTML语义化就是指在使用HTML标签构建页面时，要求尽可能的使用具有语义的标签，比如，header、footer等

易于用户阅读，样式文件未加载时，页面结构清晰。 - 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。 - 方便屏幕阅读器解析，如盲人阅读器根据语义渲染网页。 - 有利于开发和维护，代码更具可读性，代码更好维护。

3、举例行内元素和块元素

行内元素：span、a、br，em，i，b，strong，img……

块元素：div，ul，li，hr，p，h1~h5

css

1、元素宽高不明的垂直居中的方法

<div style="width: 50px;height:50px;
           background-color: rgb(61, 40, 111);
           position: absolute;
           left: 50%;
           top: 50%;
           transform: translate(-50%,-50%);
           "></div>

 <div style="display: flex;

             justify-content: center;

             align-items: center"></div>

 <div style="display: grid;

             justify-content: center;

             align-items: center"></div>

 <div style="display: table-cell"

             `text-align: center;vertical-align: middle;` ></div>

<!--设置子元素为行内块`display: inline-block; -->

2、说说position定位

静态定位（static）：默认值

相对定位（relative）：相对于原元素位置变化，不脱离文档流

绝对定位（absolute）：相对开启了定位的最近的父元素位置变化，脱离文档流

固定定位（fixed）：相对于第一视口进行位置变化，脱离文档流

粘性定位（sticky）：吸顶，不脱离文档流

3、BFC

块级格式化上下文、独立的渲染区域、不会影响边界以外的元素

开启BFC的方法：float，flex布局，绝对定位和固定定位，ovreflow:hidden | scroll | auto; 非 visible;

4、样式优先级的规则

！important、行内样式、id选择器、类选择器、元素选择器、通配符

5、浮动

浮动可以使元素脱离文档流，不占位置

清除浮动的方法：

overflow:hidden；

加空div，设置clear：both

.clearfix::after{

clear:both,

 display:block;

content:""

}

5、css尺寸单位

px：

rpx：

rem：rem 是一个相对单位，始终相对html根元素的font-size显示， html一个文字的大小=1rem。

6、盒模型

 怪异盒子：border-box，width和height包含content、padding、border

 标准盒子：content-box，width和height包含content

7、三栏布局

 圣杯布局：左右浮动 设置宽高 中间设置高 宽度自适应

双飞翼布局：左右浮动 中间overflow：hidden

3.flex布局 父元素设置flex 中间元素 设置flex：1