2022常见前端基础面试题（含答案）四
请按照如下布局在pc端实现html和css样式
```
要求如下:
a)A区域是header部分，高度100像素，宽度根据屏幕自适应，居顶部展示
b)B区域固定宽度200像素，居左侧展示
d)D区域固定宽度200像素，居右侧展示。
e)E区域高度80像素，宽度自适应，当整体内容不够满屏展示，E居屏幕底部展示。
f)当整体内容超出屏幕高度，出现垂直滚动
```
```html
<!--结构：-->
<div class="outer">
<header>a</header>
<main>
<div class="left">b</div>
<div class="right">d</div>
</main>
<footer>e</footer>
</div>
<!--样式部分：-->
<style>
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 200px;
background-color: skyblue;
}
.left{
width: 200px;
background-color: slateblue;
}
.right{
width: 200px;
background-color: springgreen;
}
footer{
height: 80px;
background-color: tomato;
}
.outer{
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
}
main{
flex: 1;
display: flex;
justify-content: space-between;
}
</style>
```
请戳出ie6/7下特有的cssbug
- li边距“无故” 增加 设置ul的显示形式为display:inline一block;即可，前面加是只 针对IE6/IE7有效
- IE6 不支持min-height属性，但它却认为height就是最小高度 使用ie6不支持但其余浏览器支持的属性!important。
- Overflow: 在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。
- border：none 在IE6不起作用： 写成border：0 就可以了 五:100%高度 在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义 height:100%;。
- 双边距 Bug 当元素浮动时，IE6会错误的的把浮动方式的margin值双倍计算，给float的元素添加一个display：inline
- 躲猫猫bug 定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。 1.在(那个未浮动的)内容之后添加一个 2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;
- IE6 绝对定位的元素1px 间距bug 当绝对定位的父元素或宽度为奇数时，bottom和right会多出现1px， 解决方案，针对IE6进行hack处理
请写出XHTML和css如何注释
HTML注释： 快捷键 ctrl+/
CSS注释：/* */ 快捷键 ctrl+/
请写出至少20个HTML5标签
```
header——标记头部区域的内容(用于整个页面或页面中的一块区域)
footer——标记脚部区域的内容(用于整个页面或页面中的一块区域)
section——Web页面中的一块区域
article——独立的文章内容
aside——相关内容或者引文
nav——导航类辅助内容
main----主要内容区域
figure----独立的文档流区域
figcaption---独立文档流区域标题
time------时间标签
mark-----着重标记,默认高亮背景变黄
audio-----音频
video-----视频
canvas----绘图
datalist---模拟虚拟搜索列表
output---- 输出框
var------倾斜标签
meter----标签来显示该给定范围内的数据
progress--标签显示某个任务完成的进度的指示器
time------标签用来表示HTML网页中出现的日期和时间
```
如何居中一个浮动元素
单纯的浮动元素其实不是很好居中的，除非你再给他嵌套一个盒子，那这也就不是给浮动盒子居中了;要么就是加相对定位进行辅助，具体代码如下：
- 方法一：嵌套一个父盒子
```CSS
.container{width:200px;margin:0 auto;} /*设置父盒子的宽度和子盒子一样就可以了*/
.container .inner{width:200px; float:left}
```
- 方法二：利用相对定位
```CSS
.box{width:200px;float:left; position:relative;left:50%; margin-left:-100px}
```
更多关于html5培训的问题，欢迎咨询千锋教育在线名师，如果想要了解我们的师资、课程、项目实操的话可以点击咨询课程顾问，获取试听资格来试听我们的课程，在线零距离接触千锋教育大咖名师，让你轻松从入门到精通。
