前端CSS（1）之兩列布局和三列布局

時間 2019-11-06

標籤前端 css 佈局欄目 CSS 简体版

原文原文鏈接

網頁佈局就是將網頁根據不一樣的內容進行劃分，這樣作不只能夠美化網頁外觀，還能夠讓用戶對你的網頁功能一目瞭然，提高用戶體驗。
兩列布局和三列布局是咱們最多見的兩種佈局，我今天總結一下實現這兩種佈局的多種方式。本文代碼沒有考慮兼容性。css

兩列布局

側欄寬度固定，左邊內容部分寬度自適應。header和footer高度固定。html

利用浮動來佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> * { margin: 0; padding: 0; } html, body, #app { height: 100%; } #header, #footer { height: 50px; background-color: burlywood; text-align: center; line-height: 50px; } #aside { height: calc(100% - 100px); width: 200px; text-align: center; background-color: aquamarine; float: left; } #main { height: calc(100% - 100px); width: calc(100% - 200px); background-color: #eee; text-align: center; overflow: hidden; //使其成爲BFC，清除浮動，由於浮動也是一個BFC，兩個BFC不會重疊 } </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
複製代碼

利用絕對定位來佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> * { margin: 0; padding: 0; } html, body, #app { height: 100%; } #app { position: relative; } #header, #footer { height: 50px; background-color: burlywood; text-align: center; line-height: 50px; } #footer { position: absolute; bottom: 0; width: 100% } #aside { /* height: calc(100% - 100px); */ width: 200px; text-align: center; background-color: aquamarine; position: absolute; left: 0; bottom: 50px; top: 50px; } #main { /* height: calc(100% - 100px); */ width: calc(100% - 200px); background-color: #eee; text-align: center; position: absolute; right: 0; bottom: 50px; top: 50px; } </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
複製代碼

利用伸縮盒flex來佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> * { margin: 0; padding: 0; } html, body, #app { height: 100%; } #app { display: flex; flex-wrap: wrap; } #header, #footer { height: 50px; background-color: burlywood; text-align: center; line-height: 50px; flex-basis: 100%; } #aside { width: 200px; height: calc(100% - 100px); text-align: center; background-color: aquamarine; } #main { height: calc(100% - 100px); width: calc(100% - 200px); background-color: #eee; text-align: center; } </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
複製代碼

利用網格grid來佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> * { margin: 0; padding: 0; } html, body, #app { height: 100%; } #app { display: grid; grid-template-columns: 200px auto; grid-template-rows: 50px auto 50px; grid-template-areas: "header header" "aside main" "footer footer" } #header, #footer { background-color: burlywood; text-align: center; line-height: 50px; } #header { grid-area: header; } #footer { grid-area: footer } #aside { grid-area: aside; } #main { grid-area: main; } #aside { text-align: center; background-color: aquamarine; } #main { background-color: #eee; text-align: center; } </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
複製代碼

三列布局

兩邊側欄寬度固定，中間內容部分寬度自適應。header和footer高度固定。app

利用浮動float來佈局

float元素是有浮動範圍的，在它的包含塊中，若是它以前有內容，會阻止它向上浮動，所以在不要求content元素首先渲染的狀況下咱們纔會用浮動佈局，由於此時content元素必須位於浮動元素下方。ide

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> * { margin: 0; padding: 0; } html, body, #app { height: 100%; } #header, #footer { height: 50px; background-color: burlywood; text-align: center; line-height: 50px; } #aside1, #aside2 { height: calc(100% - 100px); width: 200px; text-align: center; background-color: aquamarine; } #aside1 { float: left; } #aside2 { float: right; } #main { height: calc(100% - 100px); background-color: #eee; text-align: center; overflow: hidden; } </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside1">aside</aside>
        <aside id="aside2">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
複製代碼

利用absolute定位來實現佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> * { margin: 0; padding: 0; } html, body, #app { height: 100%; } #app { position: relative; } #header, #footer { height: 50px; background-color: burlywood; text-align: center; line-height: 50px; } #footer { position: absolute; bottom: 0; width: 100% } #aside1, #aside2 { /* height: calc(100% - 100px); */ width: 200px; text-align: center; background-color: aquamarine; } #aside1 { position: absolute; left: 0; bottom: 50px; top: 50px; } #aside2 { position: absolute; right: 0; bottom: 50px; top: 50px; } #main { /* height: calc(100% - 100px); */ width: calc(100% - 400px); background-color: #eee; text-align: center; position: absolute; right: 200px; bottom: 50px; top: 50px; } </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <main id="main">main</main>
        <aside id="aside1">aside</aside>
        <aside id="aside2">aside</aside>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
複製代碼

利用flex和grid佈局

它們的佈局方式與兩列布局時的方式大同小異，這裏就很少加闡述。咱們來總結一下實際網頁三列布局中會用的兩種佈局：聖盃佈局和雙飛翼佈局。佈局

聖盃佈局和雙飛翼佈局

聖盃佈局

爲了中間content不被遮擋，爲外層section設置了padding，使得邊側欄有地方放。且利用了margin爲負對浮動元素的影響。flex

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> * { margin: 0; padding: 0; } html, body, #app { height: 100%; } #header, #footer { height: 50px; background-color: burlywood; text-align: center; line-height: 50px; } section { padding: 0 200px; height: calc(100% - 100px); /* height: 100px; */ } #main { float: left; background-color: #eee; text-align: center; height: 100%; width: 100%; } #aside1, #aside2 { float: left; width: 200px; height: 100%; background-color: aquamarine; position: relative; text-align: center; } #aside1 { left: -200px; margin-left: -100%; } #aside2 { right: -200px; margin-left: -200px; } </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <section id="section">
            <main id="main">main</main>
            <aside id="aside1">aside1</aside>
            <aside id="aside2">aside2</aside>
        </section>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
複製代碼

雙飛翼佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> * { margin: 0; padding: 0; } html, body, #app { height: 100%; } #header, #footer { height: 50px; background-color: burlywood; text-align: center; line-height: 50px; } section { float: left; height: calc(100% - 100px); width: 100%; /* height: 100px; */ } #main { background-color: #eee; text-align: center; height: 100%; margin: 0 200px; } #aside1, #aside2 { float: left; width: 200px; height: calc(100% - 100px); background-color: aquamarine; text-align: center; } #aside1 { margin-left: -100%; } #aside2 { margin-left: -200px; } </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <section id="section">
            <main id="main">main</main>
        </section>
        <aside id="aside1">aside1</aside>
        <aside id="aside2">aside2</aside>
        <p style="clear:both"></p>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。