css--小白入門篇4

時間 2019-11-18

標籤 css 入門欄目 CSS 简体版

原文原文鏈接

1、前文回顧

盒模型box model

什麼是盒子？全部的標籤都是盒子。不管是div、span、a都是盒子。圖片、表單元素一概看作文本。
盒模型有哪些組成：width、height、padding、border、margin。
width、height是內容的寬度、高度，想起來丈量包子的比喻、丈量稿紙的比喻。
padding，內邊距，邊框和文字內容之間的距離。padding有顏色。表示方法，可以用padding綜合寫，4個值「上、右、下、左」，3個值「上、左右、下」，2個值「上下，左右」。還能按方向拆開，padding-left、padding-top、padding-right、padding-bottom。
border，邊框，3要素，4條邊。
3要素：
border-width、border-style、border-color；
4條邊：
border-top、border-right、border-bottom、border-left。好比咱們要單獨設置某一條邊，那麼就須要寫清楚3要素：css

1   border-top:3px solid red;

若是要單獨設置要素：前端

1   border-width:3px;
2   border-color:red;
3   border-style:solid;

還能拆成最小,同時指定要素和方向：面試

1   border-bottom-style:solid;

經常使用線型：solid、dashed、dotted。設計模式

標準文檔流

說白了，就是一個「默認」狀態。
標準文檔流中，標籤分爲兩種：塊級元素、行內元素。
塊級元素：必定是霸佔一行的，能設置寬、高，不設置寬度默認就是佔滿父親。div、p、h、li
行內元素：和其餘行內元素並排，不能設置寬、高，默認寬度就是文字寬度。span、a、b、i、u瀏覽器

他們可以相互轉化：佈局

1   display:block;
2   或者：
3   display:inline;

標準流作不出網頁：由於能並排的不能改寬高。因此，要脫離標準流。
脫離標準流手段之浮動：學習

1   float:left;
2   或者
3   float:right;

浮動宏觀的看，就是作「並排」的。
有幾個性質：脫標、貼邊、字圍、收縮。
一個浮動的a、span ，是不須要設置display:block; 就可以設置寬高了。由於浮動以後，脫離標準流了，因此標準流裏面的法律、規則都不適用了。ui

2、浮動性質的複習

浮動的性質：脫標、貼邊、字圍、收縮。url

收縮：一個浮動的元素，若是沒有設置width，那麼將自動收縮爲文字的寬度（這點很是像行內元素）。
好比：spa

<style type="text/css"> .test{ // float: left; background: burlywood; } </style>
</head>
<body>
    <div class="test">我是文字</div>
</body>

浮動後：

<style type="text/css"> .test{ float: left; background: burlywood; } </style>
</head>
<body>
    <div class="test">我是文字</div>
</body>

這個div浮動了，且沒有設置寬度，那麼將自動縮緊爲內容的寬度，整個網頁，就是經過浮動，來實現並排的。

3、浮動的清除

來看一個實驗：如今有兩個div，div身上沒有任何屬性。每一個div中都有li，li也沒有任何屬性。

1       <div>
2           <ul>
3               <li>HTML</li>
4               <li>CSS</li>
5               <li>JS</li>
6               <li>HTML5</li>
7               <li>設計模式</li>
8           </ul>
9       </div>
10  
11      <div>
12          <ul>
13              <li>學習方法</li>
14              <li>英語水平</li>
15              <li>面試技巧</li>
16          </ul>
17      </div>

再給li加上浮動屬性後，咱們猜測，li變爲一行，可是有兩份ul，因此應該是兩行，可是：

第二組中的第1個li，去貼靠第一組中的最後一個li了
緣由就是由於div沒有高度，不能給本身浮動的孩子們，一個容器。
由此先總結出浮動元素的兩個影響：
一、浮動元素會覆蓋標準流
二、浮動元素不能把父級元素撐出一個高度。

這裏引出一個問題：
Css – 高度坍塌問題的產生以及解決
在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。
可是當爲子元素設置浮動之後，子元素會徹底脫離文檔流，此時將會致使子元素沒法撐起父元素的高度，致使父元素的高度塌陷。
因爲父元素的高度塌陷了，則父元素下的全部元素都會向上移動，這樣將會致使頁面佈局混亂。

因此在開發中必定要避免出現高度塌陷的問題,咱們能夠將父元素的高度寫死，以免塌陷的問題出現，可是一旦高度寫死，父元素的高度將不能自動適應子元素的高度，因此這種方案是不推薦使用的。

3.1 清除浮動方法1：給浮動的元素的祖先元素加高度。

若是一個元素要浮動，那麼它的祖先元素必定要有高度。有高度的盒子，才能關住浮動。
給上例li的父級標籤div添加height：100px後的效果：

只要浮動在一個有高度的盒子中，那麼這個浮動就不會影響後面的浮動元素。因此就是清除浮動帶來的影響了。

上面的div高度屬性對兩個div都產生了影響，可是若是隻給一個div添加高度屬性呢？
通過驗證，當第一個div盒子有高度是，不管第二個div是否有高度屬性，都會清除浮動，因此，當前的盒子是否有高度屬性會對其後面的浮動的盒子產生影響，對自身是否清除了浮動沒有影響。

3.2 清除浮動方法2：clear:both;

再講這個方法前，咱們得知道clear left/right的效果、做用對象、使用的對象：
假如頁面中只有兩個元素div一、div2，它們都是左浮動，場景以下：

此時div一、div2都浮動，根據規則，div2會跟隨在div1後邊，但咱們仍然但願div2能排列在div1下邊，就像div1沒有浮動，div2左浮動那樣。

這時候就要用到清除浮動（clear），若是單純根據官方定義，
語法：

clear : none | left | right | both

   取值：

   none  :  默認值。容許兩邊均可以有浮動對象

   left   :  不容許左邊有浮動對象

   right  :  不容許右邊有浮動對象

   both  :  不容許有浮動對象

讀者可能會嘗試這樣寫：在div1的CSS樣式中添加clear:right;，理解爲不容許div1的右邊有浮動元素，因爲div2是浮動元素，所以會自動下移一行來知足規則。

其實這種理解是不正確的，這樣作沒有任何效果。

對於CSS的清除浮動(clear)，必定要牢記：這個規則只能影響使用清除的元素自己，不能影響其餘元素。

怎麼理解呢？就拿上邊的例子來講，咱們是想讓div2移動，但咱們倒是在div1元素的CSS樣式中使用了清除浮動，試圖經過清除div1右邊的浮動元素(clear:right;)來強迫div2下移，這是不可行的，由於這個清除浮動是在div1中調用的，它只能影響div1，不能影響div2。

要想讓div2下移，就必須在div2的CSS樣式中使用浮動。本例中div2的左邊有浮動元素div1，所以只要在div2的CSS樣式中使用clear:left;來指定div2元素左邊不容許出現浮動元素，這樣div2就被迫下移一行。

那麼假如頁面中只有兩個元素div一、div2，它們都是右浮動呢？讀者此時應該已經能本身推測場景，以下：
此時若是要讓div2下移到div1下邊，要如何作呢？

咱們但願移動的是div2，就必須在div2的CSS樣式中調用浮動，由於浮動只能影響調用它的元素。能夠看出div2的右邊有一個浮動元素div1，那麼咱們能夠在div2的CSS樣式中使用clear:right;來指定div2的右邊不容許出現浮動元素，這樣div2就被迫下移一行，排到div1下邊。

回到主題，經過clear屬性清除浮動。在網頁製做中，高度height不多出現。爲何？由於能被內容撐高！

這是一個沒有高度的div中放置一張logo，logo的大小給盒子撐出了高度，在這種狀況下，再給div設置height：47px會顯得麻煩。真正的前端高手不多看獲得height屬性。
那也就是說，剛纔咱們講解的方法1，工做中用的不多。
既然不寫height，就試一試咱們剛纔講的clear屬性

1       <div>
2           <ul>
3               <li>HTML</li>
4               <li>CSS</li>
5               <li>JS</li>
6               <li>HTML5</li>
7               <li>設計模式</li>
8           </ul>
9       </div>
10  
11      <div class="box2">  → 這個div寫一個clear:both;屬性 
12          <ul>
13              <li>學習方法</li>
14              <li>英語水平</li>
15              <li>面試技巧</li>
16          </ul>
17      </div>

1   clear:both;

clear就是清除，both指的是左浮動、右浮動都要清除。意思就是：清除別人對個人影響。
效果：

這種方法有一個很是大的、致命的問題，margin失效了。

即便咱們在類box1中添加margin-bottom屬性，可是並無出現。

.box1 { margin-bottom: 10px; }

本質的緣由也是box不存在高度這一個問題引發的，在審查元素的時候甚至選不到div。方法一從根本上解決了這個問題，但方法二不能徹底解決。

總結：

利用clear屬性，
標準流元素能夠避免被覆蓋。
浮動元素能夠「被迫」轉到下一行。

3.3 清除浮動方法3：隔牆法

首先是外牆法
經過在兩個div中間添加一堵」牆「，來阻斷浮動。

1       <div class="box1">
2           <ul>
3               <li>HTML</li>
4               <li>CSS</li>
5               <li>JS</li>
6               <li>HTML5</li>
7               <li>設計模式</li>
8           </ul>
9       </div>
10      
11      <div class="cl h16"></div>
12  
13      <div class="box2">
14          <ul>
15              <li>學習方法</li>
16              <li>英語水平</li>
17              <li>面試技巧</li>
18          </ul>
19      </div>

1   .cl{ 2 clear: both; 3 }
4   .h16{ 5 height: 16px;6 }

注意：外牆法中，第一個div是沒有高度的
近些年，演化出了「內牆法」：

1       <div class="box1">
2           <ul>
3               <li>HTML</li>
4               <li>CSS</li>
5               <li>JS</li>
6               <li>HTML5</li>
7               <li>設計模式</li>
8           </ul>
            <div class="cl h16"></div>//內盒子作牆
9       </div>
10      <div class="box2">
14          <ul>
15              <li>學習方法</li>
16              <li>英語水平</li>
17              <li>面試技巧</li>
18          </ul>
19      </div>

內牆法將包含clear屬性的div放置在本身div的最後用來清除浮動，在這種狀況下，相較於外外牆法，內牆法的父元素div被子元素撐出了高，有高的話就能夠設置父級元素的背景顏色。（奇淫技巧）
這裏回答一個小問題，爲何父元素的最後一個元素div要有clear屬性，實際上是由於li子元素是浮動的，而子元素div是標準流，浮動元素對標準流的影響是覆蓋，沒有clear屬性會被li元素遮住。
（當元素浮動的時候，它們就脫離了文檔流，就好像兩片雲朵在空中飄着，那麼它們在地面上就不佔位置，地面就是這個文檔流，當你在後面的元素設置clear:both的時候，就給以前的飄着的雲朵賦予了地面位置，其餘元素不能佔那個位置了）

3.4 清除浮動方法4：overflow:hidden;

overflow就是「溢出」的意思， hidden就是「隱藏」的意思。

1   overflow:hidden;

表示「溢出隱藏」。全部溢出邊框的內容，都要隱藏掉。

內容太多，溢出了盒子：	overflow:hidden; 溢出盒子邊框的內容，隱藏了。

本意就是清除溢出到盒子外面的文字。可是，前端開發工程師又發現了，它能作偏方。

一個父親不能被本身浮動的兒子，撐出高度。可是，只要給父親加上overflow:hidden; 那麼，父親就能被兒子撐出高了。這是一個偏方。

1           div{ 2 width: 400px; 3 border: 10px solid black; 4 overflow: hidden; 5 }

3.5 清除浮動總結與案例

總結一下：

1）加高法：

浮動的元素，只能被有高度的盒子關住。也就是說，若是盒子內部有浮動，這個盒子有高，那麼妥妥的，浮動不會互相影響。可是，工做上，咱們絕對不會給全部的盒子加高度，這是由於麻煩，而且不能適應頁面的快速變化。

1   <div>   → 設置height
2       <p></p>
3       <p></p>
4       <p></p>
5   </div>
6   
7   <div>   → 設置height
8       <p></p>
9       <p></p>
10      <p></p>
11  </div>

2) clear:both;法

最簡單的清除浮動的方法，就是給盒子增長clear:both；表示本身的內部元素，不受其餘盒子的影響。

1   <div>
2       <p></p>
3       <p></p>
4       <p></p>
5   </div>
6   
7   <div>   → clear:both;
8       <p></p>
9       <p></p>
10      <p></p>
11  </div>

浮動確實被清除了，不會互相影響了。可是有一個問題，就是margin失效。兩個div之間，沒有任何的間隙了。

3）外牆法：

在兩部分浮動元素中間，建一個牆。隔開兩部分浮動，讓後面的浮動元素，不去追前面的浮動元素。
牆用本身的身體當作了間隙。

1   <div>
2       <p></p>
3       <p></p>
4       <p></p>
5   </div>
6   
7   <div class="cl h10"></div>
8   
9   <div>
10      <p></p>
11      <p></p>
12      <p></p>
13  </div>

咱們發現，外牆法好用，可是第一個div，仍是沒有高度。若是咱們如今想讓第一個div，自動的根據本身的兒子，撐出高度，咱們就要想一些「小伎倆」，「奇淫技巧」。

內牆法：

1   <div>
2       <p></p>
3       <p></p>
4       <p></p>
5       <div class="cl h10"></div>
6   </div>
7   
8   <div>
9       <p></p>
10      <p></p>
11      <p></p>
12  </div>

內牆法的優勢就是，不只僅可以讓後部分的p不去追前部分的p了，而且能把第一個div撐出高度。這樣，這個div的背景、邊框就可以根據p的高度來撐開了。

4）overflow:hidden;

這個屬性的本意，就是將全部溢出盒子的內容，隱藏掉。可是，咱們發現這個東西可以用於浮動的清除。
咱們知道，一個父親，不能被本身浮動的兒子撐出高度，可是，若是這個父親加上了overflow:hidden；那麼這個父親就可以被浮動的兒子撐出高度了。這個現象，不能解釋，就是瀏覽器的小偏方。
而且,overflow:hidden;可以讓margin生效。

3.6 瀏覽器兼容問題

上述知識點碰見的瀏覽器兼容問題
第一，IE6，不支持小於12px的盒子，任何小於12px的盒子，在IE6中看都大。
解決辦法很簡單，就是將盒子的字號，設置小（小於盒子的高），好比0px。

1   height: 4px;
2   _font-size: 0px;

咱們如今介紹一下瀏覽器hack。hack就是「黑客」，就是使用瀏覽器提供的後門，針對某一種瀏覽器作兼容。
IE6留了一個後門，就是隻要給css屬性以前，加上下劃線，這個屬性就是IE6認識的專有屬性。
好比：

1   _background-color: green;

解決微型盒子，正確寫法：

1   height: 10px;
2   _font-size:0;

第二，IE6不支持用overflow:hidden;來清除浮動的
解決辦法，以毒攻毒。追加一條

1   _zoom:1;

完整寫法：

1   overflow: hidden;
2   _zoom:1;

實際上，_zoom:1;可以觸發瀏覽器hasLayout機制。這個機制，不要深究了，由於就IE6有。咱們只須要讓IE6好用，具體的實現機制，有興趣的同窗，自行百度。

強調一點， overflow:hidden;的本意，就是溢出盒子的border的東西隱藏，這個功能是IE6兼容的。不兼容的是overflow:hidden;清除浮動的時候。

咱們剛纔學習了兩個IE6的兼容問題，這兩個IE6的兼容問題，都是經過多寫一條hack來解決的。
這個咱們稱爲伴生屬性。

1   height:6px;
2   _font-size:0;

1   overflow:hidden;
2   _zoom:1;

4、margin

4.1 margin的塌陷現象

標準文檔流中，豎直方向的margin不疊加，以較大的爲準。

若是不在標準流，好比盒子都浮動了，那麼兩個盒子之間是沒有塌陷現象的：

4.2 盒子居中margin:0 auto;

margin的值能夠爲auto，表示自動。當left、right兩個方向，都是auto的時候，盒子居中了：

1   margin-left: auto;
2   margin-right: auto;

簡寫爲

1   margin:0 auto;

注意：
1）使用margin:0 auto; 的盒子，必須有width，有明確的width
2）只有標準流的盒子，才能使用margin:0 auto; 居中。
也就是說，當一個盒子浮動了、絕對定位了、固定定位了，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子，不是居中文本。
文本的居中，要使用
text-align:center;

1   margin:0 auto;   → 讓這個div本身在大容器中居中。
2   text-align: center;  → 讓這個div內部的文本居中。

普及一下知識，text-align還有

1   text-align:left;     沒啥用，由於默認居左
2   text-align:right;    文本居右

4.3 善於使用父親的padding，而不是兒子的margin

若是父親沒有border，那麼兒子的margin實際上踹的是「流」，踹的是這「行」。因此，父親總體也掉下來了
這個p有一個margin-top踹父親，試圖將本身下移

1       <div>
2           <p></p>
3       </div>

| | |
| ————- |:————-:| —–:|
margin這個屬性，本質上描述的是兄弟和兄弟之間的距離； 最好不要用這個marign表達父子之間的距離。
因此，咱們必定要善於使用父親的padding，而不是兒子的margin。

4.4 關於margin的IE6兼容問題

IE6雙倍margin bug
當出現連續浮動的元素，攜帶和浮動方向相同的margin時，隊首的元素，會雙倍marign。

1       <ul>
2           <li></li>
3           <li></li>
4           <li></li>
5       </ul>

解決方案：
1）使浮動的方向和margin的方向，相反。
因此，你就會發現，咱們特別喜歡，浮動的方向和margin的方向相反。而且，前端開發工程師，把這個當作習慣了。
2）使用hack（不必，別慣着這個IE6）
單獨給隊首的元素，寫一個一半的margin

1   <li class="no1"></li>

1   ul li.no1{
2       _margin-left:20px;3 }

IE6的3px bug:

解決辦法：
不用管，由於根本就不容許用兒子踹父親。因此，若是你出現了3px bug，說明你的代碼不標準。

IE6，千萬不要跟他死坑、較勁，它不配。

5、Fireworks和精確盒子還原

fireworks是Adobe公司的一個設計軟件。功能很是多
Fireworks的默認文件格式是png。
新建畫布快捷鍵：ctrl+N。

精確盒子的還原須要利用設計軟件。
分辨率是72像素/英寸（我們不用知道，由於設計師把設計圖給你）
視圖下的標尺屬性，用於量取大小像素。
標尺的快捷鍵，是ctrl+alt+r。

css中，任何文本都有行高。行高就是