CSS佈局（下）

一、CSS佈局之浮動

1.一、float之圖文混排

float的意思就是元素漂浮在上層。

能夠直接經過設置float屬性實現圖文混排，代碼以下：

<div style="width:200px;height:200px;border: 1px solid gray;">
  <img src="" alt="" style="width:100px;height:100px;float:right;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

1.二、float的反作用

當爲元素設置float只有，它將會漂浮起來。那麼它以後的元素就會忽略它，而進行定位。因此會致使元素重疊：

<div style="width:50px;height:50px;border:1px solid red;float:left">
  我是懸浮元素
</div>
<div style="width:100px;height:100px;border:1px solid blue;">
  我是標準div元素內容
</div>

我是懸浮元素

我是標準div元素內容

這個時候，就須要清除浮動(clear:both)，另外，還能夠經過clear:left|right來分別清除左右浮動：

<div style="width:50px;height:50px;border:1px solid red;float:left">
  我是懸浮元素
</div>
<div style="width:100px;height:100px;border:1px solid blue;clear:both;">
  我是標準div元素內容
</div>

我是懸浮元素

我是標準div元素內容

1.三、奇怪的浮動效果

在內容的浮動元素高度大於外部容器時，效果以下：

<div style="width:100px;border:1px solid blue;">
  <div style="width:50px;height:150px;border:1px solid red;float:right">
    我是懸浮元素
  </div>
  我是標準div元素內容
</div>

我是懸浮元素

我是標準div元素內容

 

**如何修復？**

能夠經過clearfix樣式來修復：

<style>
  .clearfix {
    overflow: auto;
    zoom: 1;/*針對IE須要額外關照*/
  }
</style>
<div class="clearfix" style="width:100px;border:1px solid blue;">
  <div style="width:50px;height:150px;border:1px solid red;float:right">
    我是懸浮元素
  </div>
  我是標準div元素內容
</div>

我是懸浮元素

我是標準div元素內容

二、CSS佈局之百分比寬度

百分比寬度能夠很是容易的實現動態佈局，可是當窗口變得很窄的時候，元素的展現可能會錯亂。因此須要選擇最合適的佈局方式。

另外，不能使用min-width來修復這個問題，由於若是是左右結構，對左邊的元素設定min-width，右邊的元素是不會遵照的，可能會引發重疊。

三、CSS佈局之媒體查詢（Media Query）

「響應式設計（Responsive Design）」是一種讓網站針對不一樣的瀏覽器和設備「響應」不一樣顯示效果的策略，這樣可讓網站在任何狀況下顯示的很棒！

若是要兼容移動端，請加上以下相似meta

<meta name="viewport" content="width=device-width, maximum-scale=2, minimum-scale=0.5, user-scalable=no">

由於衆所周知，手機端的屏幕分辨率至關多，因此能夠強制指定屏幕的width是等於設備寬度的，忽略分辨率。 maximum-scale 是指最大縮放比例。

四、CSS佈局之column

CSS columns是較新的標準，不支持IE9及如下和Opera Mini，因此須要使用瀏覽器前綴。Column能夠很輕鬆的實現文字的多列布局，示例以下：

<div style="width:150px;-webkit-column-count:3;-webkit-column-gap: 1em;">
  CSS佈局CSS佈局CSS佈局CSS佈局CSS佈局CSS佈局CSS佈局CSS佈局CSS佈局CSS佈局
</div>

CSS佈局CSS佈局CSS佈局CSS佈局CSS佈局CSS佈局CSS佈局CSS佈局CSS佈局CSS佈局

五、CSS佈局之flexbox

flexbox佈局模式被用來從新定義CSS中的佈局方式。

<style>
  .container{
    width: 80%;
    border: 1px solid red;
    height:50px;
    display: flex;
  }
</style>
<div class="container">
  <div style="width:100px;"></div>
  <div style="flex:3;background:lightgray;">1</div>
  <div style="flex:5;background:lightyellow;">2</div>
</div>

 

1

2

分析一下以上代碼，只須要在容器上設置display:flex，那麼內部元素的若是設置了flex樣式，那麼就會按照flex進行計算，而後實現flex佈局。

flex佈局，還能實現簡單的垂直居中佈局。

<div class="container" style="align-items: center; justify-content: center;">
  我是垂直居中的元素
</div>

我是垂直居中的元素

其中，align-items設置水平居中，justify-content設置了垂直居中。