web前端面试题合集（六）
前端页面由哪三层构成，分别是什么，作用是什么
- HTML (结构) : 超文本标记语言, 由 HTML 或 xhtml之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。
- CSS (表现) : 层叠样式表 , 由css负责创建。css对“如何显示有关内容”的问题做出了回答。
- JS (行为) : 客户端脚本语言 , 内容应该如何对事件做出反应
清除浮动
浮动带来的影响：浮动之后，后面的元素会上去补位置;导致父元素的高度降低，这种情况被称为：高度塌陷解决高度塌陷方法如下：
```
前情描述:父元素不设置高度,子元素有自己的高度,当给前面的子元素添加浮动之后,后面的子元素会上去补位置,补位完成之后,父元素的的高度会降低。这种情况被称之为高度塌陷
```
```
情况1：父元素添加高度
```
```
情况2：给后面的子元素添加清楚浮动，不上去补位置，clear：both
```
```
情况3：如果只有一个子元素，添加浮动之后，父元素高度就会降低为0
如何解决高度塌陷：
给父元素添加oveflow:hidden
给浮动子元素后面悄悄的补一个元素,然后给这个补位元素,清除浮动,
记住:补位元素必须是一个块级元素,行内元素清楚不了浮动
```
```CSS
/*情况4:万能清除法*/
.box:after{
content:"铁牛最帅";
display:block;
clear:both;
/*如果上面的content没有文本的话则下面的代码可以省略*/
width:0px;
height:0px;
overflow:hidden;
visibility:hidden;
font-size:0px;
}
```
请按照如下布局在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>
```
更多关于“web前端培训”的问题，欢迎咨询千锋教育在线名师。千锋教育多年办学，课程大纲紧跟企业需求，更科学更严谨，每年培养泛IT人才近2万人。不论你是零基础还是想提升，都可以找到适合的班型，千锋教育随时欢迎你来试听。
