• 其實(shí) CSS 一開始設(shè)計(jì) float 屬性的主要目的是為了實(shí)現(xiàn)文本繞排圖片的效果趋艘。 然而這個(gè)屬性居然成了創(chuàng)建多欄布局的最簡(jiǎn)單方式瘟滨。 先來看看 float 實(shí)現(xiàn)文本繞排的效果。
  img {
  float: left;

        width: 180px;
        height: 120px;
        margin: 0 12px;
    }
  
    p {
        width: 480px;
        margin: 12px;
        padding: 12px;
  
        border: 1px solid #ccc;
    }
  

demo01.png

上面我們提到了仪媒，設(shè)置了 float 之后，圖片就會(huì)脫離文檔流谢鹊，所以它的父元素也就看不到它了算吩，這樣就會(huì)出現(xiàn)一個(gè)問題，比如當(dāng)父元素包裹不住圖片的時(shí)候佃扼，父元素的緊鄰兄弟節(jié)點(diǎn)會(huì)自動(dòng)讓出左邊的空間偎巢，比如下面這樣。
<section>
<img alt="picture" src="15.jpg" />
<p>
Section
</p>
</section>

    <footer>
        This is footer</footer>
    </footer>

demo02.png

有沒有什么辦法能解決上述這種尷尬的情景呢兼耀？ 問題的答案是有的压昼，而且有三種，下面來一一介紹瘤运。

1. 為父元素添加 overflow:hidden
   section{
   overflow: hidden;
   }
   

   demo03.png

2. 同時(shí)浮動(dòng)父元素窍霞。 浮動(dòng)父元素之后，它就會(huì)將它的子元素全部包含在自己內(nèi)部（無論是浮動(dòng)元素還是不浮動(dòng)的元素）拯坟， 所以我們還需要將父元素的寬度設(shè)置為與瀏覽器同寬但金，不然父元素會(huì)不斷換行以包裝不同的子元素。 還有郁季，要在footer 中清除左浮動(dòng)冷溃，不然 footer 會(huì)極力擠到 section 的旁邊去。
   img {
   float: left;

       width: 180px;
       height: 120px;
    }
   
    section {
       float: left;
   
       width: 100%;
    }
   
    footer {
       clear: left;
    }
   

3. 添加非浮動(dòng)的清除元素梦裂。

    section:after{
       content: "";
       display: block;
       height:0;
       visibility: hidden;
       clear: both;
    }
   

• 如果把 display 的值設(shè)置為 none秃诵， 該元素以及包含在其中的元素都不會(huì)在頁面中顯示，它們占用的空間也會(huì)被回收塞琼，就好像這些標(biāo)記根本不存在一樣菠净。 于此相對(duì)應(yīng)的屬性是 visibility, 常用的兩個(gè)值是 visible 和 hidden。 把 visibility 的值設(shè)置為 hidden 后彪杉，元素會(huì)不可見毅往，但是它仍會(huì)占有其原本的空間，不會(huì)被回收派近。

• 下面我們來講講背景圖片和背景漸變的一些知識(shí)攀唯。 假如有一個(gè) div ， 為其設(shè)置很大的背景圖片渴丸。

  div {
    width: 480px;
    height: 320px;
  
    background-image: url('15.jpg');
  }
  

demo04.png

    background-position: center;

demo05.png

1. 50% ： 縮放圖片昭齐，使其填充背景區(qū)的一半。
2. 100px 50px ： 把圖片調(diào)整到 100 像素寬矾柜， 50 像素高司浪。
3. cover : 拉大圖片，使其完全填滿背景區(qū)把沼，保持寬高比。
4. contain ： 縮放圖片吁伺， 使其恰好適合背景區(qū)饮睬，保持寬高比。

下面是將 background-size 設(shè)置成 cover 的效果篮奄。

demo06.png

    background: linear-gradient(red,green);
  }

demo07.png

可見，線性漸變默認(rèn)是從上到下的夸赫，當(dāng)然我們可以根據(jù)我們的需要改變這種默認(rèn)方式菩帝，比如我們讓其從左到右漸變。
background: linear-gradient(to right,red,green);

demo08.png

甚至可以從左上角到右下角進(jìn)行漸變茬腿。
background: linear-gradient(135deg, red, green);

demo09.png

demo10.png

background: linear-gradient(red 20%, white 50%, green 80%);

demo11.png

demo12.png

由于漸變是 CSS3 新屬性惊搏，所以別忘了對(duì)瀏覽器進(jìn)行適配，比如說下面這樣忧换。

   background: -webkit-linear-gradient(red, white 20%, green 50%, blue 80%, red);
   background: -o-linear-gradient(red, white 20%, green 50%, blue 80%, red);
   background: linear-gradient(red, white 20%, green 50%, blue 80%, red);

講完了線性漸變恬惯，下面來看看放射性漸變。

  background: radial-gradient(white, red, green);

demo13.png

可見亚茬，圖形為按照 白紅綠 填充滿酪耳。當(dāng)然，我們還可以指定漸變形狀刹缝，比如設(shè)置為圓形碗暗。

  background: radial-gradient(circle, white, red, green);

demo14.png

還可以設(shè)置放射中心的位置，比如下面這樣梢夯。

  background: -webkit-radial-gradient(100px 100px, circle, white, red, green);

demo15.png

• 關(guān)于設(shè)置文本的 line-height 屬性言疗，我們可以利用其實(shí)現(xiàn)文本垂直居中的效果。

  div {
    height: 32px;
  
    background: rgba(123,23,89,.5);
  }
  
  p {
    line-height: 32px;
  
    color: white;
  }
  

其中颂砸， div 是 p 的父節(jié)點(diǎn)噪奄，我們通過設(shè)置 line-height 和父元素的高度相等，就可以讓文本居中人乓，這是為什么呢梗醇？ 假設(shè)文本的大小為 16px，而這個(gè)時(shí)候的行高為 32px, 那么瀏覽器就會(huì)在文本的上下添加 (32-16)/2 px 的空白撒蟀。

很多情況下叙谨，我們會(huì)使用第三方字體， Google Web Foots 是個(gè)不錯(cuò)的網(wǎng)站保屯，我們只需要選中我們要使用的字體手负，它就會(huì)提供一個(gè) link涤垫， 供我們使用字體，比如像下面這樣竟终。

demo16.png

在涉及文字排版的時(shí)候蝠猬，最好借助網(wǎng)格線，比如下面這個(gè)圖片

grid_18px.png

利用這個(gè)圖片我們將文字與基線對(duì)齊统捶，然后再將圖片去除榆芦，這樣我們的排版就會(huì)看起來很美觀，比如下面這樣喘鸟。

demo17.png

本來還想介紹更多的內(nèi)容匆绣，限于篇幅，只能在下一篇文章中再介紹了什黑。