CSS經常使用佈局

時間 2019-11-06

標籤 css 經常使用佈局欄目 CSS 简体版

原文原文鏈接

====== 樣例代碼不能顯示，請看原文https://magicly.me/css-layout/ ======css

佈局是CSS中一個很重要的部分，甚至我以爲是最重要也是最難的部分，其餘諸如字體大小、顏色等等都是很容易的。最近總結一下使用過的CSS經常使用佈局，包括水平居中、垂直居中、單列布局、多列布局等，以及最新的flex佈局，但願能給前端小夥伴一些幫助，也做爲本身的知識總結。html

在後面的例子中，我特地將各個塊背景顏色調出來方便你們「欣賞」。前端

水平居中

子元素爲inline

直接對父元素設置html5

text-align: center

如：shell

<div style="background-color: red; text-align: center; height: 100px;">
    <a href="https://magicly.me" style="background-color: green;">magicly</a>
</div>

顯示爲：
<div style="background-color: red; text-align: center; height: 100px;">瀏覽器

<a href="https://magicly.me" style="background-color: green;">magicly</a>

</div>ide

子元素爲block且定寬（寬度能夠是百分比）

對子元素設置左右margin爲autowordpress

margin: 0 auto;

如：佈局

<div style="background-color: red; height: 100px;">
    <div style="background-color: green; width: 500px; margin: 0 auto;">magicly</div>
</div>

顯示爲：
<div style="background-color: red; height: 100px;">字體

<div style="background-color: green; width: 500px; margin: 0 auto;">magicly</div>

</div>

子元素爲block可是不定寬

設置子元素

display: inline

以及設置父元素

text-align: center;

如：

<div style="background-color: red; text-align: center;">
    <div style="background-color: green; display: inline"><img src="http://img001.photo.21cn.com/photos/album/20120904/o/6A7A403C29766CBCB38C616BDFD48486.jpg" /></div>
</div>

顯示爲：
<div style="background-color: red; text-align: center;">

<div style="background-color: green; display: inline"><img src="http://img001.photo.21cn.com/photos/album/20120904/o/6A7A403C29766CBCB38C616BDFD48486.jpg" /></div>

</div>

垂直居中

子元素爲inline

設置父元素的height和line-height相等，如：

<div style="background-color: red; text-align: center; height: 100px; line-height: 100px;">
    <a href="https://magicly.me" style="background-color: green;">magicly</a>
</div>

顯示爲：
<div style="background-color: red; text-align: center; height: 100px; line-height: 100px;">

<a href="https://magicly.me" style="background-color: green;">magicly</a>

</div>

子元素爲block

設置子元素position:absolute 並設置top、bottom爲0（若是還要左右居中的話，能夠設置left: 0; right: 0;），父元素要設置定位爲static之外的值（如relative），margin:auto;
如：

<div style="background-color: red; height: 600px; position: relative;">
    <div style="background-color: green; height: 569px; width: 462px; position: absolute; top: 0; bottom: 0; left:0; right: 0; margin: auto;"><img src="http://img001.photo.21cn.com/photos/album/20120904/o/6A7A403C29766CBCB38C616BDFD48486.jpg" /></div>
</div>

顯示爲：
<div style="background-color: red; height: 600px; position: relative;">

<div style="background-color: green; height: 569px; width: 462px; position: absolute; top: 0; bottom: 0; left:0; right: 0; margin: auto;"><img src="http://img001.photo.21cn.com/photos/album/20120904/o/6A7A403C29766CBCB38C616BDFD48486.jpg" /></div>

</div>

單列布局

主要有兩種:

header, content, footer寬度相同，有一個max-width
header和footer佔滿瀏覽器100%寬度，content有一個max-width

第一種：

<header style="background-color: red; width: 600px; margin: 0 auto;">頭部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">內容</main>
<footer style="background-color: yellow; width: 600px; margin: 0 auto;">尾部</footer>

顯示爲：
<header style="background-color: red; width: 600px; margin: 0 auto;">頭部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">內容</main>
<footer style="background-color: yellow; width: 600px; margin: 0 auto;">尾部</footer>

第二種：

<header style="background-color: red;">頭部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">內容</main>
<footer style="background-color: yellow;">尾部</footer>

顯示爲：
<header style="background-color: red;">頭部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">內容</main>
<footer style="background-color: yellow;">尾部</footer>

兩列

float + margin

用float將邊欄與主要內容拉到一行，而後設置主要內容的margin。

左邊欄:

<main style="background-color: red;">
  <aside style="background-color: yellow; float: left; width: 50px;">邊欄</aside>
  <section style="background-color: green; margin-left: 50px;">主要內容</section>
</main>

右邊欄

<main style="background-color: red;">
<aside style="background-color: yellow; float: right; width: 50px;">邊欄</aside>
<section style="background-color: green; margin-right: 50px;">主要內容</section>
</main>

position: absolute + margin

左邊欄:

<main style="background-color: red; position: relative;">
  <aside style="background-color: yellow; position: absolute; left: 0; width: 50px;">邊欄</aside>
  <section style="background-color: green; margin-left: 50px;">主要內容</section>
</main>

右邊欄

<main style="background-color: red; position: relative;">
<aside style="background-color: yellow; position: absolute; right: 0; width: 50px;">邊欄</aside>
<section style="background-color: green; margin-right: 50px;">主要內容</section>
</main>

三列布局

比較經典有聖盃佈局，以及聽說是淘寶UED（玉伯）提出的雙飛翼佈局。

聖盃佈局

<header style="background-color: red;">頭部</header>
<main style="background-color: black; position: relative; padding: 0 100px 0 90px;">
  <section style="background-color: green; height: 100px; float: left; width: 100%;">主要內容</section>
  <aside style="background-color: yellow; height: 100px; float: left; width: 90px; margin-left: -100%; position: relative; left: -90px;">左邊欄</aside>
  <aside style="background-color: yellow; height: 100px; float: left; width: 100px; margin-left: -100px; position: relative; right: -100px;">右邊欄</aside>
</main>
<div style="background-color: blue; clear: left;">尾部</div>

顯示爲：
<header style="background-color: red;">頭部</header>
<main style="background-color: black; position: relative; padding: 0 100px 0 90px;">
<section style="background-color: green; height: 100px; float: left; width: 100%;">主要內容</section>
<aside style="background-color: yellow; height: 100px; float: left; width: 90px; margin-left: -100%; position: relative; left: -90px;">左邊欄</aside>
<aside style="background-color: yellow; height: 100px; float: left; width: 100px; margin-left: -100px; position: relative; right: -100px;">右邊欄</aside>
</main>
<div style="background-color: blue; clear: left;">尾部</div>

雙飛翼佈局

傳統的雙飛翼佈局不是這樣的，只是我發現直接在section用padding也能夠達到效果。

<header style="background-color: red;">頭部</header>
<main style="background-color: black; position: relative;">
  <section style="background-color: green; height: 100px; float: left; width: 100%; padding: 0 100px 0 90px;">主要內容</section>
  <aside style="background-color: yellow; height: 100px; float: left; width: 90px; margin-left: -100%;">左邊欄</aside>
  <aside style="background-color: yellow; height: 100px; float: left; width: 100px; margin-left: -100px;">右邊欄</aside>
</main>
<div style="background-color: blue; clear: left;">尾部</div>

顯示爲：
<header style="background-color: red;">頭部</header>
<main style="background-color: black; position: relative;">
<section style="background-color: green; height: 100px; float: left; width: 100%; padding: 0 100px 0 90px;">主要內容</section>
<aside style="background-color: yellow; height: 100px; float: left; width: 90px; margin-left: -100%;">左邊欄</aside>
<aside style="background-color: yellow; height: 100px; float: left; width: 100px; margin-left: -100px;">右邊欄</aside>
</main>
<div style="background-color: blue; clear: left;">尾部</div>

聖盃佈局和雙飛翼佈局的原理這篇文章講解得比較清楚，我就再也不贅述。