前端技術之_CSS詳解第四天

時間 2019-11-19

標籤前端技術 css 詳解第四欄目 CSS 简体版

原文原文鏈接

前端技術之_CSS詳解第四天

1、第三天的小總結

盒模型box model，什麼是盒子？css

　　全部的標籤都是盒子。不管是div、span、a都是盒子。圖片、表單元素一概看作文本。html

盒模型有哪些組成：前端

　　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要素：ide

1 border-top:3px solid red;

若是要單獨設置要素：學習

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

還能拆成最小： ui

1 border-bottom-style:solid;

經常使用線型：solid、dashed、dotted。spa

標準文檔流：說白了，就是一個「默認」狀態。標準文檔流中，標籤分爲兩種：塊級元素、行內元素。

塊級元素：必定是霸佔一行的，能設置寬、高，不設置寬度默認就是佔滿父親。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; 就可以設置寬高了。由於浮動以後，脫離標準流了，因此標準流裏面的法律、規則都不適用了。浮動宏觀的看，就是作「並排」的。有幾個性質：脫標、貼邊、字圍、收縮。

2、浮動性質的複習

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

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

好比：

1     <style type="text/css">
2     div{
3     float: left;
5     }
6     </style>

這個div浮動了，且沒有設置寬度，那麼將自動縮緊爲內容的寬度：

整個網頁，就是經過浮動，來實現並排的。

案例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
    /*左浮動*/
        .box1{
            float: left;
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .box2{
            float: left;
            width: 400px;
            height: 400px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

View Code

案例2：

浮動的元素若是沒有width將縮進：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            float: left;
            width: 200px；
            background-color: gold;
        }
    </style>
</head>
<body>
    <div>我是文字</div>
</body>
</html>:

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，會分爲兩排，可是，第二組中的第1個li，去貼靠第一組中的最後一個li了。

第二個div中的li，去貼第一個div中最後一個li的邊了。

緣由就是由於div沒有高度，不能給本身浮動的孩子們，一個容器。

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

清除浮動方法1：父親加高度：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
         div{
             height: 50px;
             border: 1px solid #000;
         }
        li{
            float: left;
            width: 90px;
            height: 40px;
            margin-right: 10px;
            background-color: gold;
            /*文本居中*/
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>設計模式</li>
        </ul>
    </div>

    <div>
        <ul>
            <li>學習方法</li>
            <li>英語水平</li>
            <li>面試技巧</li>
        </ul>
    </div>
</body>
</html>

若是一個元素要浮動，那麼它的祖先元素必定要有高度。高度的盒子，才能關住浮動。

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

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

網頁製做中，高度height不多出現。爲何？

　　由於能被內容撐高！那也就是說，剛纔咱們講解的方法1，工做中用的不多。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            width: 980px;
            margin: 0 auto;
        }
        
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">
            <h1><img src="images/logo.png" /></h1>
        </div>
    </div>
</body>
</html>

腦弄大開：能不能不寫height，也把浮動清除了呢？也讓浮動之間，互不影響呢？

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;屬性
     　　<ul>
13     <li>學習方法</li>
14     <li>英語水平</li>
15     <li>面試技巧</li>
16     </ul>
17     </div>

1 clear:both;

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

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

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

隔牆法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        .box1{
            background-color: gold;
        }
        li{
            float: left;
            width: 120px;
            height: 40px;
            background-color: orange;
            text-align: center;
        }
        .cl{
            clear: both;
        }
        .h8{
            height: 8px;
            _font-size:0;
        }
        .h10{
            height: 10px;
            _font-size:0;
        }
        .h12{
            height: 12px;
            _font-size:0;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>設計模式</li>
        </ul>
    </div>
    
    <div class="cl h8"></div>

    <div class="box2">
        <ul>
            <li>學習方法</li>
            <li>英語水平</li>
            <li>面試技巧</li>
        </ul>
    </div>
</body>
</html>

View Code

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>
11     <div class="cl h16"></div>
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 }

近些年，有演化出了「內牆法」：

案例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        .box1{
            background-color: gold;
        }
         li{
             float: left;
             width: 120px;
             height: 40px;
             background-color: orange;
             text-align: center;
         }
         .cl{
             clear: both;
         }
         .h16{
             height: 16px;
         }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>設計模式</li>
        </ul>

        <div class="cl h16"></div>
    </div>

    <div class="box2">
        <ul>
            <li>學習方法</li>
            <li>英語水平</li>
            <li>面試技巧</li>
        </ul>
    </div>
</body>
</html>

View Code

內牆法本質：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            background-color: blue;
        }
        p{
            float: left;
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .cl{
            clear: both;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
        <div class="cl"></div>
    </div>
</body>
</html>

內牆法用途：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            border: 10px solid black;
        }
        .p1{
            float: left;
            width: 100px;
            height: 180px;
            background-color: red;
        }
        .p2{
            float: left;
            width: 100px;
            height: 530px;
            background-color: yellow;
        }
        .p3{
            float: left;
            width: 100px;
            height: 190px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="p1"></p>
        <p class="p2"></p>
        <p class="p3"></p>
        <div class="cl"></div>
    </div>
</body>
</html>

View Code

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

代碼例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        li{
            float: left;
            width: 120px;
            height: 40px;
            background-color: orange;
            text-align: center;
        }
        .box1{
            overflow: hidden;
            _zoom:1;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>設計模式</li>
        </ul>
    </div>

    <div class="box2">
        <ul>
            <li>學習方法</li>
            <li>英語水平</li>
            <li>面試技巧</li>
        </ul>
    </div>
</body>
</html>

View Code

案例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>
</body>
</html>

View Code

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

1 overflow:hidden;

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

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

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

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

案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
            overflow: hidden;
            border: 10px solid black;
        }
        .p1{
            float: left;
            width: 100px;
            height: 150px;
            background-color: red;
        }
        .p2{
            float: left;
            width: 100px;
            height: 380px;
            background-color: yellow;
        }
        .p3{
            float: left;
            width: 100px;
            height: 120px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p class="p1"></p>
        <p class="p2"></p>
        <p class="p3"></p>
    </div>
</body>
</html>

View Code

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

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
         .news{
             width: 400px;
             height: 100px;
             border: 1px solid #000;
             margin: 100px;
             overflow: hidden;
         }
         .news ul{
             list-style: none;
         }
         .news ul li{
             overflow: hidden;
             _zoom:1;
             border-bottom: 1px dashed gray;
         }
         .news ul li span.title{
             float: left;
         }
         .news ul li span.date{
             float: right;
         }
    </style>
</head>
<body>
    <div class="news">
        <ul>
            <li>
                <span class="title">哈哈哈哈哈哈哈哈</span>
                <span class="date">2015年10月24日</span>
            </li>
            <li>
                <span class="title">嘻嘻嘻嘻嘻</span>
                <span class="date">2015年10月24日</span>
            </li>
            <li>
                <span class="title">嗚嗚嗚嗚嗚嗚嗚</span>
                <span class="date">2015年10月24日</span>
            </li>
        </ul>
    </div>
</body>
</html>

View Code

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>

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

在兩部分浮動元素中間，建一個牆。隔開兩部分浮動，讓後面的浮動元素，不去追前面的浮動元素。

牆用本身的身體當作了間隙。

1 <div>
2     <p></p>
3     <p></p>
4     <p></p>
5 </div>
7 <div class="cl h10"></div>
9 <div>
10     <p></p>
1     <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>
    <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 _

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

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;清除浮動的時候。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        .box1{
            overflow: hidden;
            _zoom:1;
            margin-bottom: 10px;
        }
        .box1 li{
            float: left;
            width: 120px;
            height: 40px;
            background-color: orange;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>設計模式</li>
        </ul>
    </div>

    <div class="box2">
        <ul>
            <li>學習方法</li>
            <li>英語水平</li>
            <li>面試技巧</li>
        </ul>
    </div>
</body>
</html>

View Code

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

這個咱們稱爲伴生屬性。

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

1 overflow:hidden;
2 _zoom:1;

4、margin

4.1 margin的塌陷現象

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .p1{
            width: 300px;
            height: 200px;
            background-color: orange;
            margin-bottom: 30px;
        }
        .p2{
            width: 300px;
            height: 200px;
            background-color: orange;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <p class="p1"></p>
    <p class="p2"></p>
</body>
</html>

View Code

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

4.2 盒子居中margin:0 auto;

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0;
        } div{ width: 400px; height: 100px; background-color: orange; margin:100px auto; text-align: center;
        } p{ width: 100px; height: 100px; background-color: green; margin: 0 auto; float: left;
        } </style> </head> <body> <div>哈哈哈</div> <p></p> </body> </html>

View Code

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;是在居中盒子，不是居中文本。

文本的居中，要使用

1 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實際上踹的是「流」，踹的是這「行」。因此，父親總體也掉下來了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 250px;
            padding-top: 50px;
            background-color: orange;
        }
        p{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

View Code

這個p有一個margin-top踹父親，試圖將本身下移

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

結果：

margin這個屬性，本質上描述的是兄弟和兄弟之間的距離；最好不要用這個marign表達父子之間的距離。

因此，咱們必定要善於使用父親的padding，而不是兒子的margin。

4.4 關於margin的IE6兼容問題

IE6雙倍margin bug

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            border: 1px solid #000;
            height: 100px;
            list-style: none;
        }
        ul li{
            float: left;
            width: 120px;
            height: 40px;
            margin-left: 40px;
            background-color: orange;
        }
        ul li.no1{
            margin-left:20px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="no1"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

View Code

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

解決方案：

1）使浮動的方向和margin的方向，相反。

因此，你就會發現，咱們特別喜歡，浮動的方向和margin的方向相反。而且，前端開發工程師，把這個當作習慣了。

1     float: left;
2     margin-right: 40px;

2）使用hack（不必，別慣着這個IE6）

單獨給隊首的元素，寫一個一半的margin

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

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

IE6的3px bug

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
            height: 400px;
            background-color: orange;
        }
        div p{
            margin-right: 10px;
            float: right;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>