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

<main>

</main>

</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万人。不论你是零基础还是想提升，都可以找到适合的班型，千锋教育随时欢迎你来试听。