前端頁(yè)面由哪三層構(gòu)成，分別是什么，作用是什么

　　- HTML (結(jié)構(gòu)) : 超文本標(biāo)記語(yǔ)言, 由 HTML 或 xhtml之類的標(biāo)記語(yǔ)言負(fù)責(zé)創(chuàng)建。標(biāo)簽，也就是那些出現(xiàn)在尖括號(hào)里的單詞，對(duì)網(wǎng)頁(yè)內(nèi)容的語(yǔ)義含義做出了描述，但這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息。

　　- CSS (表現(xiàn)) : 層疊樣式表 , 由css負(fù)責(zé)創(chuàng)建。css對(duì)“如何顯示有關(guān)內(nèi)容”的問題做出了回答。

　　- JS (行為) : 客戶端腳本語(yǔ)言 , 內(nèi)容應(yīng)該如何對(duì)事件做出反應(yīng)

　　清除浮動(dòng)

　　浮動(dòng)帶來(lái)的影響：浮動(dòng)之后，后面的元素會(huì)上去補(bǔ)位置;導(dǎo)致父元素的高度降低，這種情況被稱為：高度塌陷解決高度塌陷方法如下：

　　```

　　前情描述:父元素不設(shè)置高度,子元素有自己的高度,當(dāng)給前面的子元素添加浮動(dòng)之后,后面的子元素會(huì)上去補(bǔ)位置,補(bǔ)位完成之后,父元素的的高度會(huì)降低。這種情況被稱之為高度塌陷

　　```

　　```

　　情況1：父元素添加高度

　　```

　　```

　　情況2：給后面的子元素添加清楚浮動(dòng)，不上去補(bǔ)位置，clear：both

　　```

　　```

　　情況3：如果只有一個(gè)子元素，添加浮動(dòng)之后，父元素高度就會(huì)降低為0

　　如何解決高度塌陷：

　　給父元素添加oveflow:hidden

　　給浮動(dòng)子元素后面悄悄的補(bǔ)一個(gè)元素,然后給這個(gè)補(bǔ)位元素,清除浮動(dòng),

　　記住:補(bǔ)位元素必須是一個(gè)塊級(jí)元素,行內(nèi)元素清楚不了浮動(dòng)

　　```

　　```CSS

　　/*情況4:萬(wàn)能清除法*/

.box:after{

content:"鐵牛最帥";

display:block;

clear:both;

/*如果上面的content沒有文本的話則下面的代碼可以省略*/

width:0px;

height:0px;

overflow:hidden;

visibility:hidden;

font-size:0px;

}

```

　　請(qǐng)按照如下布局在pc端實(shí)現(xiàn)html和css樣式

　　```

　　要求如下:

　　a)A區(qū)域是header部分，高度100像素，寬度根據(jù)屏幕自適應(yīng)，居頂部展示

　　b)B區(qū)域固定寬度200像素，居左側(cè)展示

　　d)D區(qū)域固定寬度200像素，居右側(cè)展示。

　　e)E區(qū)域高度80像素，寬度自適應(yīng)，當(dāng)整體內(nèi)容不夠滿屏展示，E居屏幕底部展示。

　　f)當(dāng)整體內(nèi)容超出屏幕高度，出現(xiàn)垂直滾動(dòng)

```html

<!--結(jié)構(gòu)：-->

<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>

```

　　更多關(guān)于“web前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬(wàn)人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來(lái)試聽。