CSS 經典佈局方式以及水平垂直居中技巧

時間 2019-11-24

標籤 css 經典佈局方式以及水平垂直居中技巧欄目 CSS 简体版

原文原文鏈接

CSS是什麼？

CSS，層疊樣式表(英語：Cascading Style Sheets)，是一種用來爲結構化文檔 (如：HTML文檔) 添加樣式 (字體、顏色、間距等) 的計算機語言，由 W3C 定義和維護。當前最新的版本是 CSS2.1，爲W3C的推薦標準。CSS3(2011年) 已經被現代瀏覽器支持。css

CSS發展歷史

1994年哈肯.維姆.萊提出了CSS的最初建議。伯特.波斯加入一塊兒設計CSS。
1997年初，W3C內組織了專門管CSS的工做組，其負責人是克里斯.裏雷。
1998年5月W3C發表了CSS2，CSS2.1修改了CSS2中的一些錯誤，刪除了其中不被支持的內容和增長了一些已有瀏覽器的擴展內容。
從2001年開始CSS被分爲了多個單獨的模塊，統稱爲CSS3。這些模塊有：
- CSS 選擇器 level 3
- CSS 媒體查詢 level 3
- CSS Color level 3
- ……

周邊工具html

Less CSS 一種簡化、功能更多的 CSS 語言中文官網英文官網
SASS 一種簡化、功能更多的 CSS 語言中文官網
Post CSS 一種 CSS 處理程序

CSS 學習資源

MDN 查詢關鍵字，遇到不會的 CSS 屬性就去查閱MDN
CSS Tricks，能夠根據屬性搜索不少好看的CSS效果；
Google: 阮一峯老師 css
張鑫旭大神的 240 多篇 CSS 博客
Codrops 炫酷 CSS 效果
CSS揭祕
CSS 2.1 中文 spec
Google 搜索 CSS Generator ，能夠生成css樣式

CSS 開始寫

引入 CSS 的幾種方式css3

行間 <div style="color:red;"></div>
內聯 <style>div{color: red}</style>
外部 <link href="index.css" rel="stylesheet">
import引入 @import url(./index.css)

佈局小技巧git

HTML 除 div 與 span 外，都有默認樣式，因此在佈局以前咱們一般會清除一些標籤的默認樣式，如：github

body,p,h1,h2,dl,dt {
  margin: 0;
}
ul,ol {
  list-style: none;
  padding: 0;
  margin: 0
}
/* 一般不建議這麼寫 *{margin: 0; margin: 0} */
複製代碼

清除浮動，如子級用浮動佈局，則需給父級添加浮動清除代碼，代碼一般寫法，給父級添加 clearfix 類選擇器：chrome
```
.clearfix::after{
  content: '';
  clear: both;
  display: block;
}
複製代碼
```
chrome 瀏覽器默認字體大小 16px，默認間距 8pxsegmentfault
一個元素的高度是由其內部 文檔流 的高度總和決定的瀏覽器
文檔流就是文檔內元素的流動方向sass
- 內聯元素從左往右流動，若是流動遇到阻礙則換行繼續，從左向右流動less
- 塊級元素，每個塊級元素獨佔一行，從上往下流動
- CSS 屬性值 word-break:break-all，能夠將單詞打斷點，會把整個詞分開斷點，以下代碼預覽：
  
  jsbin.com/ketaxum/2/e…
- CSS float:left; positon:fixed; position:absolute 都能使元素脫離文檔流
爲何內聯元素中間會有一個空格的距離，由於內聯元素之間若是有換行符或者空格存在，瀏覽器會解析爲一個空格
每個字體都有一個建議行高，默認的 line-heigth 由字體設計師決定
CSS 中 width 的默認值是 auto
box-sizing:content-box 的 width 不包含 padding 與 border，元素默認
box-sizing:border-box 的 width 包含 padding 與 border
在佈局時，儘可能不要給元素定義寬度和高度，會有不少不肯定性，妙用 max-width 與 min-width

CSS 經典佈局方式

兩欄佈局

方法一：浮動佈局

<div class="aside"></div>
<div class="main"></div>
複製代碼

div {
  height: 500px;
}
.aside {
  width: 300px;
  background-color: #f60;
  float: left;
}
.main {
  background-color: green;
  margin-left: 300px;
}
複製代碼

左側欄固定寬度向左浮動，右側主要內容用 margin-left 留出左側欄的寬度，默認寬度是auto, 自動填滿剩下寬度 demo

右側固定寬度，左側自適應則是同理，只要將固定欄右浮動，使用 margin-right 便可，

div {
  height: 500px;
}
.aside {
  width: 300px;
  background-color: #f60;
  float: right;
}
.main {
  background-color: green;
  margin-right: 300px;
}
複製代碼

方法二：浮動佈局 + 負外邊距

<div class="clearfix">
  <div class="aside">
  </div>
  <div class="main">
    <div class="content"></div>
  </div>
</div>
複製代碼

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
div {
  height: 500px;
}
.aside {
  width: 300px;
  float: left;
  margin-right: -100%;
  background-color: #f60;
}
.main {
  width: 100%;
  float: left;
}
.main .content {
  background-color: green;
  margin-left: 300px;
}
複製代碼

左側固定欄指定一個右側的100%的負邊距，爲整個屏幕的寬度，這就使得main的最左側與屏幕的最左側對齊，此時的main的寬度是100%，所以須要其子內容content指定一個左側的外邊距空出左側欄的位置，即左側欄的寬度300px；適應一側寬度爲100%的佈局 demo

方法三：絕對定位

<div class="box">
  <div class="aside">
  </div>
  <div class="main">
  </div>
</div>
複製代碼

body {
  margin: 0;
}
div {
  height: 500px;
}
.aside {
  width: 300px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #f60;
}
.main {
  background-color: green;
  margin-left: 300px;
}
複製代碼

採用絕對定位，根據絕對定位脫離文檔流的特性，demo

方法四： flex 佈局

<div class="cainter">
  <div class="aside"></div>
  <div class="main"></div>
</div>
複製代碼

div {
  height: 500px;
}
.cainter {
  display: flex;
}
.aside {
  flex: 0 0 300px;
  background-color: #f60;
}
.main {
  flex: 1 1;
  background-color: green;
}
複製代碼

彈性盒模型的方式是最簡單的，若是不考慮瀏覽器兼容性的話，則可使用此方法 demo

三欄佈局(左中右)

三欄佈局的特色：兩邊定寬，而後中間的 width 是 auto, 能夠自適應內容

方法一：用絕對定位的方法

原理則是，左側和右側佈局用絕對定位分別定位在左側和右側，中間的佈局則用 margin-left 和 margin-right 空出左右欄位置來，demo

<div class="cainter">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>
複製代碼

div {
  height: 500px;
}
.cainter {
  position: relative;
}
.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  background: red;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  background: green;
}
.center {
  background: yellow;
  margin-left: 100px;
  margin-right: 100px;
}
複製代碼

因爲採用了絕對定位，因此在佈局上三者的位置能夠隨意更換；

方法二使用 float 屬性

左右兩欄使用 float 屬性，中間欄使用 margin 屬性撐開；demo

<div class="cainter clearfix">
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</div>
複製代碼

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
div {
  height: 500px;
}
.cainter {
  position: relative;
}
.left {
  width: 100px;
  background: red;
  float: left;
}
.right {
  width: 100px;
  background: green;
  float: right;
}
.center {
  background: yellow;
  margin-left: 100px;
  margin-right: 100px;
}
複製代碼

缺點：1. 當寬度小於左右兩邊寬度之和時，右側欄會被擠下去；2. html結構不正確

方法三，浮動 + 負外邊距 (雙飛翼佈局)
- 三欄都採用左浮動
- 中間欄也是左浮動，默認狀況下因爲前面中間欄佔據了 100% 的寬度，所以左側是在另起一行顯示，爲左側欄設置 margin-left: -100%; 即整個屏幕的寬度100%，這就令左側欄佈局到中間欄的最左側
- 右側欄也是左浮動，此時默認的狀況下也是在中間欄的下一行，一樣利用 margin-left: -300px; 300px 爲右側模塊寬度，使其到上一行最右側位置
- 中間欄內容部分則須要利用分別等於左右欄寬度外邊距來空出它們的位置
```
<div class="cainter clearfix">
  <div class="center">
    <div class="main"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>
複製代碼
```
```
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
div {
  height: 500px;
}
.cainter {
  position: relative;
}
.center {
  float: left;
  width: 100%;
  background: yellow;
}
.left {
  float: left;
  width: 200px;
  margin-left: -100%;
  background: green;
}
.right {
  float: left;
  width: 300px;
  background: red;
  margin-left: -300px;
}
.main {
  margin-left: 200px;
  margin-right: 300px;
}
複製代碼
```
這種方法的好處就是主體內容能夠在前面優先加載；缺點：結構不正確，且多了一層標籤 demo

方法四： flex佈局

<div class="container">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>
複製代碼

div {
  height: 500px;
}
.container {
  width: 100%;
  display: flex;
}

.left {
  width: 100px;
  background: green;
}
.middle {
  width: 100%;
  background: yellow;
}
.right {
  width: 100px;
  background: red;
}
複製代碼

不考慮兼容性的話，最靠譜的一種方式 demo

CSS 垂直居中，水平居中方式

1、水平居中

1. 行內元素水平居中

text-align:center; 能夠實現塊級元素內部的行內元素的的水平居中，此方法只對 display:inline-block display:inlie; display:inline-table 和 display:inline-flex 元素水平居中有效，而且是給父級設置樣式：

.parent {
  text-align: center;
}
複製代碼

小技巧：若是是一個塊級元素，咱們能夠先改變爲 display:inline-block; 就可使用 text-align:center;

2. 塊級元素的水平居中

將該元素的左右外邊距設置爲 auto , 此方法必須是塊級元素有寬度才能夠，不然不起做用；
```
.box {
  width: 100px; // 寬度屬性是必須的
  margin: 0 auto;
}
複製代碼
```

使用 table + margin 先將子元素設置爲塊級表格顯示，再將其居中，display:table 在表現上相似 block 元素，可是寬度爲內容寬;

<div class="parent">
  <div class="child">Demo</div>
</div>
<style> .parent { border: 1px solid #ddd; height: 100px; } .child { display: table; margin: 0 auto; background: red; } </style>
複製代碼

使用 absolute + transform 先將父元素設置爲相對定位，而後子元素設置爲絕對定位，left 值設置爲 50% , 而後經過移動子元素的一半寬度便可
```
<div class="parent">
  <div class="child">Demo</div>
</div>
<style> .parent { border: 1px solid #ddd; height: 100px; position: relative; } .child { position: absolute; left: 50%; transform: translateX(-50%); } </style>
複製代碼
```
transform 屬於 css3 內容，存在兼容性問題，高版本瀏覽器需加上前綴

使用 flex + justify-content 給父級加

<div class="parent">
  <div class="child">Demo</div>
</div>
<style> .parent { display: flex; justify-content: center; } </style>
複製代碼

使用flex+margin，經過flex將父容器設置爲 flex 佈局，再設置子元素居中

<div class="parent">
  <div class="child">Demo</div>
</div>
<style> .parent { display: flex; } .child { margin: 0 auto; } </style>
複製代碼

3. 多塊級元素水平居中

利用彈性佈局(flex)，實現水平居中，其中 justify-content 用於設置彈性盒模型子元素在主軸(默認橫屏)方向上的對齊方式,

<div class="parent">
  <div class="child">demo1</div>
  <div class="child">demo2</div>
  <div class="child">demo3</div>
</div>
<style> .parent { border: 1px solid #ddd; height: 100px; display: flex; justify-content: center; } .child { background: red; padding: 10px; margin: 10px; } </style>
複製代碼

demo

利用inline-block ，子級所有設置爲 display:inline-block; 父級設置 text-align:center;

<div class="parent">
  <div class="child">demo1</div>
  <div class="child">demo2</div>
  <div class="child">demo3</div>
</div>
<style> .parent { border: 1px solid #ddd; height: 100px; text-align: center; } .child { background: red; padding: 10px; margin: 10px; display: inline-block; } </style>
複製代碼

demo

4. 浮動元素水平居中

定寬的浮動元素，經過設置子元素 relative + 負margin，原理如圖：

demo 注意：樣式設置在浮動元素的自己

不定寬的浮動元素，原理如圖：

demo

通用辦法 flex 佈局

<div class="parent">
  <span class="chlid">水平居中</span>
</div>
<style> .parent { display:flex; justify-content:center; } .chlid{ float: left; width: 200px;// 有無寬度不影響居中 } </style>
複製代碼

5. 絕對定位元素水平居中

經過子元素絕對定位，加上 marging:0 auto 實現；

demo

垂直居中

1. 單行內聯元素重置居中

<div class="box">
  <span>單行文本元素垂直居中</span>
</div>
<style> .box { height: 100px; line-height: 100px; border: 1px solid #ddd; } </style>
複製代碼

2. 多行內聯元素垂直居中

利用 flex 佈局，實現垂直居中，其中 flex-direction: column; 定義主軸方向爲縱向

<div class="parent">
  <p>多行文本實現居中，多行文本實現居中，多行文本實現居中，多行文本實現居中，    
    多行文本實現居中，多行文本實現居中，多行文本實現居中，多行文本實現居中，    
    多行文本實現居中，多行文本實現居中，多行文本實現居中，多行文本實現居中</p>
</div>
<style> .parent { height: 140px; display: flex; flex-direction: column; justify-content: center; border: 2px solid #ddd; } </style>
複製代碼

demo

利用表格佈局， vertical-align: middle 能夠實現子元素的垂直居中

<div class="parent"> 
	<p>多行文本實現居中，多行文本實現居中，多行文本實現居中，多行文本實現居中，    
    多行文本實現居中，多行文本實現居中，多行文本實現居中，多行文本實現居中，    
    多行文本實現居中，多行文本實現居中，多行文本實現居中，多行文本實現居中</p>
</div>
<style> .parent { height: 140px; border: 2px solid #ddd; display: table; } .child { display: table-cell; vertical-align: middle; } </style>
複製代碼

3. 塊級元素垂直居中

使用 absolute + 負 maring 前提是已知模塊的寬度和高度, 與絕對定位的水平居中遙相呼應，是平時用的多的佈局方式；

<div class="parent">
    <div class="child">固定高度的塊級元素垂直居中。</div>
</div>
<style> .parent { position: relative; } .child { position: absolute; top: 50%; height: 100px; margin-top: -50px; } </style>
複製代碼

使用 absolute + transform 此方法適用於高度和寬度未知時

<div class="parent">
    <div class="child">固定高度的塊級元素垂直居中。</div>
</div>
<style> .parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); } </style>
複製代碼

使用 flex + alig-items 與作水平居中的 flex + justify-content:center; 對應，是目前佈局常常用的，有兼容性問題；

<div class="parent">
   <div class="child">未知高度的塊級元素垂直居中。</div>
</div>
<style> .parent { display:flex; align-items:center; } </style>
複製代碼

3、水平垂直居中

經常使用的適合沒有兼容問題或者沒有定寬高的佈局

方法1：絕對定位與負邊距實現 (已知寬高)

<div id='container'>
  <div id='center' style="width: 100px;height: 100px;background-color: #666">center</div>
</div>
<style> #container { position: relative; } #center { position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; } </style>
複製代碼

方法2：絕對定位與 margin:auto (已知寬高)

<div id='container'>
  <div id='center' style="width: 100px;height: 100px;background-color: #666">center</div>
</div>
<style> #container { position: relative; } #center { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; // 此處是重要寫法 } </style>
複製代碼

方法3：絕對定位 + CSS3 (未知寬高) 不考慮兼容性的話此方法很是舒服

<div id='container'>
  <div id='center' style="background-color: #666">center</div>
</div>
<style> #container { position: relative; } #center { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); } </style>
複製代碼

方法4： flex 佈局移動端經常使用，pc不考慮兼容可用

<div id='container'>
  <div id='center' style="width: 100px;height: 100px;background-color: #666">center</div>
</div>
<style> #container { height: 100vh; display: flex; justify-content: center; align-items: center; } </style>
複製代碼

後記

這篇總結也是站在一些前輩(大神)的基礎上總結的一些技巧、方法，他們的文章教會了我不少，學到了不少！但願之後能夠達到他們所在的成就，加油吧！持續不斷的學習（折騰！！！）
CSS 的學習是由易到難，越日後學，越以爲CSS的難點所在，因此不論是在平時的工做中仍是在本身折騰的項目中都是須要重視CSS的書寫，多多的嘗試一些新的CSS屬性以及更多的CSS佈局，多多的總結吧！