成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

前端技術(shù)之_CSS詳解第四天

番茄西紅柿 / 1019人閱讀

摘要：前端技術(shù)之詳解第四天一第三天的小總結(jié)盒模型，什么是盒子所有的標(biāo)簽都是盒子。如果不在標(biāo)準(zhǔn)流，比如盒子都浮動(dòng)了，那么兩個(gè)盒子之間是沒(méi)有塌陷現(xiàn)象的盒子居中的值可以為，表示自動(dòng)。

前端技術(shù)之_CSS詳解第四天

一、第三天的小總結(jié)

盒模型box model，什么是盒子？

　　所有的標(biāo)簽都是盒子。無(wú)論是div、span、a都是盒子。圖片、表單元素一律看做文本。

盒模型有哪些組成：

　　width、height、padding、border、margin。

width、height是內(nèi)容的寬度、高度，想起來(lái)丈量包子的比喻、丈量稿紙的比喻。

padding，內(nèi)邊距，邊框和文字內(nèi)容之間的距離。padding有顏色。表示方法，能夠用padding綜合寫(xiě)，4個(gè)值“上、右、下、左”，3個(gè)值“上、左右、下”，2個(gè)值“上下，左右”。還能按方向拆開(kāi)，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。 比如我們要多帶帶設(shè)置某一條邊，那么就需要寫(xiě)清楚3要素：

1 border-top:3px solid red;

如果要多帶帶設(shè)置要素： 

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

還能拆成最?。?nbsp;

1 border-bottom-style:solid;

 常用線型：solid、dashed、dotted。

標(biāo)準(zhǔn)文檔流：說(shuō)白了，就是一個(gè)“默認(rèn)”狀態(tài)。標(biāo)準(zhǔn)文檔流中，標(biāo)簽分為兩種：塊級(jí)元素、行內(nèi)元素。

塊級(jí)元素：一定是霸占一行的，能設(shè)置寬、高，不設(shè)置寬度默認(rèn)就是占滿父親。div、p、h、li

行內(nèi)元素：和其他行內(nèi)元素并排，不能設(shè)置寬、高，默認(rèn)寬度就是文字寬度。span、a、b、i、u

能夠相互轉(zhuǎn)：

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

標(biāo)準(zhǔn)流做不出網(wǎng)頁(yè)：因?yàn)槟懿⑴诺牟荒芨膶捀?。所以，要脫離標(biāo)準(zhǔn)流。 

浮動(dòng)：

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

一個(gè)浮動(dòng)的a、span ，是不需要設(shè)置display:block; 就能夠設(shè)置寬高了。因?yàn)楦?dòng)之后，脫離標(biāo)準(zhǔn)流了，所以標(biāo)準(zhǔn)流里面的法律、規(guī)則都不適用了。浮動(dòng)宏觀的看，就是做“并排”的。有幾個(gè)性質(zhì)：脫標(biāo)、貼邊、字圍、收縮。

二、浮動(dòng)性質(zhì)的復(fù)習(xí)

浮動(dòng)的性質(zhì)：脫標(biāo)、貼邊、字圍、收縮。

收縮：一個(gè)浮動(dòng)的元素，如果沒(méi)有設(shè)置width，那么將自動(dòng)收縮為文字的寬度（這點(diǎn)非常像行內(nèi)元素）。

比如：

1

 這個(gè)div浮動(dòng)了，且沒(méi)有設(shè)置寬度，那么將自動(dòng)縮緊為內(nèi)容的寬度：

整個(gè)網(wǎng)頁(yè)，就是通過(guò)浮動(dòng)，來(lái)實(shí)現(xiàn)并排的。

案例代碼：




    
    Document
View Code

案例2：

浮動(dòng)的元素如果沒(méi)有width將縮進(jìn)：




    
    Document
    


    
我是文字


:

三、浮動(dòng)的清除

來(lái)看一個(gè)實(shí)驗(yàn)：現(xiàn)在有兩個(gè)div，div身上沒(méi)有任何屬性。每個(gè)div中都有li，這些li都是浮動(dòng)的。

1     

2     
    
3     
  • HTML
    • 
4     
  • CSS
    • 
5     
  • JS
    • 
6     
  • HTML5
    • 
7     
  • 設(shè)計(jì)模式
    • 
8     

9     

10 
11     

12     
    
13     
  • 學(xué)習(xí)方法
    • 
14     
  • 英語(yǔ)水平
    • 
15     
  • 面試技巧
    • 
16     

17

 我們本以為這些li，會(huì)分為兩排，但是，第二組中的第1個(gè)li，去貼靠第一組中的最后一個(gè)li了。

第二個(gè)div中的li，去貼第一個(gè)div中最后一個(gè)li的邊了。

原因就是因?yàn)閐iv沒(méi)有高度，不能給自己浮動(dòng)的孩子們，一個(gè)容器。

3.1 清除浮動(dòng)方法1：給浮動(dòng)的元素的祖先元素加高度。

清除浮動(dòng)方法1：父親加高度：




    
    Document
    


    

        
    
            
  • HTML
    • 
            
  • CSS
    • 
            
  • JS
    • 
            
  • HTML5
    • 
            
  • 設(shè)計(jì)模式
    • 
        

    


    

        
    
            
  • 學(xué)習(xí)方法
    • 
            
  • 英語(yǔ)水平
    • 
            
  • 面試技巧
    •

如果一個(gè)元素要浮動(dòng)，那么它的祖先元素一定要有高度。高度的盒子，才能關(guān)住浮動(dòng)。

 

只要浮動(dòng)在一個(gè)有高度的盒子中，那么這個(gè)浮動(dòng)就不會(huì)影響后面的浮動(dòng)元素。所以就是清除浮動(dòng)帶來(lái)的影響了。

3.2 清除浮動(dòng)方法2：clear:both;

網(wǎng)頁(yè)制作中，高度height很少出現(xiàn)。為什么？

　　因?yàn)槟鼙粌?nèi)容撐高！那也就是說(shuō)，剛才我們講解的方法1，工作中用的很少。




    
    Document

腦弄大開(kāi)：能不能不寫(xiě)height，也把浮動(dòng)清除了呢？也讓浮動(dòng)之間，互不影響呢？

1     

2     
    
3     
  • HTML
    • 
4     
  • CSS
    • 
5     
  • JS
    • 
6     
  • HTML5
    • 
7     
  • 設(shè)計(jì)模式
    • 
8     

9     

10 
11     
  → 這個(gè)div寫(xiě)一個(gè)clear:both;屬性
     　　
    
13     
  • 學(xué)習(xí)方法
    • 
14     
  • 英語(yǔ)水平
    • 
15     
  • 面試技巧
    • 
16     

17     
1 clear:both;

clear就是清除，both指的是左浮動(dòng)、右浮動(dòng)都要清除。意思就是：清除別人對(duì)我的影響。 

這種方法有一個(gè)非常大的、致命的問(wèn)題，margin失效了。

3.3 清除浮動(dòng)方法3：隔墻法

隔墻法：




    
    Document
    


    

        
    
            
  • HTML
    • 
            
  • CSS
    • 
            
  • JS
    • 
            
  • HTML5
    • 
            
  • 設(shè)計(jì)模式
    • 
        

    

    
    


    

        
    
            
  • 學(xué)習(xí)方法
    • 
            
  • 英語(yǔ)水平
    • 
            
  • 面試技巧
    •
View Code

 

 

 

 

1     

2     
    
3     
  • HTML
    • 
4     
  • CSS
    • 
5     
  • JS
    • 
6     
  • HTML5
    • 
7     
  • 設(shè)計(jì)模式
    • 
8     

9     

11     

13     

14     
    
15     
  • 學(xué)習(xí)方法
    • 
16     
  • 英語(yǔ)水平
    • 
17     
  • 面試技巧
    • 
18     

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

近些年，有演化出了“內(nèi)墻法”：

案例代碼：




    
    Document
    


    

        
    
            
  • HTML
    • 
            
  • CSS
    • 
            
  • JS
    • 
            
  • HTML5
    • 
            
  • 設(shè)計(jì)模式
    • 
        


        

    


    

        
    
            
  • 學(xué)習(xí)方法
    • 
            
  • 英語(yǔ)水平
    • 
            
  • 面試技巧
    •
View Code

 

內(nèi)墻法本質(zhì)：




    
    Document

內(nèi)墻法用途：




    
    Document
View Code

3.4 清除浮動(dòng)方法4：overflow:hidden;

代碼例子：




    
    Document
    


    

        
    
            
  • HTML
    • 
            
  • CSS
    • 
            
  • JS
    • 
            
  • HTML5
    • 
            
  • 設(shè)計(jì)模式
    • 
        

    


    

        
    
            
  • 學(xué)習(xí)方法
    • 
            
  • 英語(yǔ)水平
    • 
            
  • 面試技巧
    •
View Code

案例代碼：




    
    Document
    


    
內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容
View Code

overflow就是“溢出”的意思， hidden就是“隱藏”的意思。

1 overflow:hidden;

 表示“溢出隱藏”。所有溢出邊框的內(nèi)容，都要隱藏掉。

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

 

本意就是清除溢出到盒子外面的文字。但是，前端開(kāi)發(fā)工程師又發(fā)現(xiàn)了，它能做偏方。

一個(gè)父親不能被自己浮動(dòng)的兒子，撐出高度。但是，只要給父親加上overflow:hidden; 那么，父親就能被兒子撐出高了。這是一個(gè)偏方。

案例：

 




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


 

 

例子：




    
    Document
    


    

        
    
            
  • 
                哈哈哈哈哈哈哈哈
                2015年10月24日
            
    • 
            
  • 
                嘻嘻嘻嘻嘻
                2015年10月24日
            
    • 
            
  • 
                嗚嗚嗚嗚嗚嗚嗚
                2015年10月24日
            
    •
View Code

3.5 清除浮動(dòng)總結(jié)與案例

總結(jié)一下：

1） 加高法：

浮動(dòng)的元素，只能被有高度的盒子關(guān)住。 也就是說(shuō)，如果盒子內(nèi)部有浮動(dòng)，這個(gè)盒子有高，那么妥妥的，浮動(dòng)不會(huì)互相影響。但是，工作上，我們絕對(duì)不會(huì)給所有的盒子加高度，這是因?yàn)槁闊⑶也荒苓m應(yīng)頁(yè)面的快速變化。

1 
   → 設(shè)置height
2     

3     

4     

5 

6 
7 
   → 設(shè)置height
8     

9     

10     

11

2) clear:both;法 

最簡(jiǎn)單的清除浮動(dòng)的方法，就是給盒子增加clear:both；表示自己的內(nèi)部元素，不受其他盒子的影響。

1 

2     

3     

4     

5 

6 
7 
   → clear:both;
8     

9     

10     

11

3）隔墻法：浮動(dòng)確實(shí)被清除了，不會(huì)互相影響了。但是有一個(gè)問(wèn)題，就是margin失效。兩個(gè)div之間，沒(méi)有任何的間隙了。

在兩部分浮動(dòng)元素中間，建一個(gè)墻。隔開(kāi)兩部分浮動(dòng)，讓后面的浮動(dòng)元素，不去追前面的浮動(dòng)元素。

墻用自己的身體當(dāng)做了間隙。

1 

2     

3     

4     

5 

7 

9 

10     

1     

12     

13

內(nèi)墻法：我們發(fā)現(xiàn)，隔墻法好用，但是第一個(gè)div，還是沒(méi)有高度。如果我們現(xiàn)在想讓第一個(gè)div，自動(dòng)的根據(jù)自己的兒子，撐出高度，我們就要想一些“小伎倆”，“奇淫技巧”。

1 

2     

3     

4     

5     

6 

7 
8 

    

10     

11     

12

 內(nèi)墻法的優(yōu)點(diǎn)就是，不僅僅能夠讓后部分的p不去追前部分的p了，并且能把第一個(gè)div撐出高度。這樣，這個(gè)div的背景、邊框就能夠根據(jù)p的高度來(lái)?yè)伍_(kāi)了。

4）overflow:hidden;

這個(gè)屬性的本意，就是將所有溢出盒子的內(nèi)容，隱藏掉。但是，我們發(fā)現(xiàn)這個(gè)東西能夠用于浮動(dòng)的清除。

我們知道，一個(gè)父親，不能被自己浮動(dòng)的兒子撐出高度，但是，如果這個(gè)父親加上了overflow:hidden；那么這個(gè)父親就能夠被浮動(dòng)的兒子撐出高度了。這個(gè)現(xiàn)象，不能解釋?zhuān)褪菫g覽器的小偏方。

并且,overflow:hidden;能夠讓margin生效。

3.6 瀏覽器兼容問(wèn)題

上述知識(shí)點(diǎn)遇見(jiàn)的瀏覽器兼容問(wèn)題

第一，IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大

解決辦法很簡(jiǎn)單，就是將盒子的字號(hào)，設(shè)置小（小于盒子的高），比如0px。

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

我們現(xiàn)在介紹一下瀏覽器hack。hack就是“黑客”，就是使用瀏覽器提供的后門(mén)，針對(duì)某一種瀏覽器做兼容。 

IE6留了一個(gè)后門(mén)，就是只要給css屬性之前，加上下劃線，這個(gè)屬性就是IE6認(rèn)識(shí)的專(zhuān)有屬性。

比如：

1 _

  

解決微型盒子，正確寫(xiě)法：

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

第二，IE6不支持用overflow:hidden;來(lái)清除浮動(dòng)的 

解決辦法，以毒攻毒。追加一條

1 _zoom:1;

完整寫(xiě)法： 

1 overflow: hidden;
2 _zoom:1;

 實(shí)際上，_zoom:1;能夠觸發(fā)瀏覽器hasLayout機(jī)制。這個(gè)機(jī)制，不要深究了，因?yàn)榫虸E6有。我們只需要讓IE6好用，具體的實(shí)現(xiàn)機(jī)制，有興趣的同學(xué)，自行百度。

強(qiáng)調(diào)一點(diǎn)， overflow:hidden;的本意，就是溢出盒子的border的東西隱藏，這個(gè)功能是IE6兼容的。不兼容的是overflow:hidden;清除浮動(dòng)的時(shí)候。




    
    Document
    


    

        
    
            
  • HTML
    • 
            
  • CSS
    • 
            
  • JS
    • 
            
  • HTML5
    • 
            
  • 設(shè)計(jì)模式
    • 
        

    


    

        
    
            
  • 學(xué)習(xí)方法
    • 
            
  • 英語(yǔ)水平
    • 
            
  • 面試技巧
    •
View Code

我們剛才學(xué)習(xí)了兩個(gè)IE6的兼容問(wèn)題，這兩個(gè)IE6的兼容問(wèn)題，都是通過(guò)多寫(xiě)一條hack來(lái)解決的。

這個(gè)我們稱(chēng)為伴生屬性。

1 height:6px;
2 _font-size:0;
1 overflow:hidden;
2 _zoom:1;

四、margin

4.1 margin的塌陷現(xiàn)象

標(biāo)準(zhǔn)文檔流中，豎直方向的margin不疊加，以較大的為準(zhǔn)。




    
    Document
View Code

 

如果不在標(biāo)準(zhǔn)流，比如盒子都浮動(dòng)了，那么兩個(gè)盒子之間是沒(méi)有塌陷現(xiàn)象的：

 

 

4.2 盒子居中margin:0 auto;

margin的值可以為auto，表示自動(dòng)。當(dāng)left、right兩個(gè)方向，都是auto的時(shí)候，盒子居中了：




    
    Document
    


    
哈哈哈
View Code 
1 margin-left: auto;

2 margin-right: auto;

簡(jiǎn)寫(xiě)為 

1 margin:0 auto;

注意：

　　1） 使用margin:0 auto; 的盒子，必須有width，有明確的width

　　2） 只有標(biāo)準(zhǔn)流的盒子，才能使用margin:0 auto; 居中。

　　也就是說(shuō)，當(dāng)一個(gè)盒子浮動(dòng)了、絕對(duì)定位了、固定定位了，都不能使用margin:0 auto;

　　3） margin:0 auto;是在居中盒子，不是居中文本。

文本的居中，要使用

1 text-align:center;
1 margin:0 auto;   → 讓這個(gè)div自己在大容器中居中。

2 text-align: center;  → 讓這個(gè)div內(nèi)部的文本居中。

普及一下知識(shí)，text-align還有

1 text-align:left;     沒(méi)啥用，因?yàn)槟J(rèn)居左

2 text-align:right;    文本居右

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

如果父親沒(méi)有border，那么兒子的margin實(shí)際上踹的是“流”，踹的是這“行”。所以，父親整體也掉下來(lái)了




    
    Document
View Code

這個(gè)p有一個(gè)margin-top踹父親，試圖將自己下移

1     

2     

3

 結(jié)果：

 

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

所以，我們一定要善于使用父親的padding，而不是兒子的margin。

4.4 關(guān)于margin的IE6兼容問(wèn)題

IE6雙倍margin bug

當(dāng)出現(xiàn)連續(xù)浮動(dòng)的元素，攜帶和浮動(dòng)方向相同的margin時(shí)，隊(duì)首的元素，會(huì)雙倍marign。




    
    Document