摘要：前端技術之詳解第三天二權重問題深入同一個標簽，攜帶了多個類名，有沖突我是什么顏色我是什么顏色我是什么顏色我是什么顏色微軟雅黑紅色的。

 前端技術之_CSS詳解第三天  

二、權重問題深入

2.1 同一個標簽，攜帶了多個類名，有沖突：

    
    
    


    
我是什么顏色？
    
我是什么顏色？

1     
我是什么顏色？

2     
我是什么顏色？

1     .spec2{
2     color:blue;
3     }
4     .spec1{
5     color:red;
6     }
7     

紅色的。因為css中red寫在后面。和在標簽中的掛類名的書序無關，只和css的順序有關：

2.2 !important標記

    
    
    


    
文字

1     

1 k:v !important;

來給一個屬性提高權重。這個屬性的權重就是無窮大。important是英語里面的“重要的”的意思。我們可以通過語法：

一定要注意語法：

正確的：

1 font-size:60px !important;

 錯誤的：

1 font-size:60px; !important;     → 不能把!important寫在外面
1 font-size:60px important;      →  不能忘記感嘆號

!important需要強調3點：

1） !important提升的是一個屬性，而不是一個選擇器

1     p{
2     color:red !important;   → 只寫了這一個!important，所以就字體顏色屬性提升權重
3     font-size: 100px ;      → 這條屬性沒有寫!important，所以沒有提升權重
     }
5     #para1{
6     color:blue;
7    font-size: 50px;
8     }
9     .spec{
10     color:green;
11     font-size: 20px;
12     }

 所以，綜合來看，字體顏色是red（聽important的）；字號是50px（聽id的）;

2） !important無法提升繼承的權重，該是0還是0

比如HTML結構：

1     

2     
哈哈哈哈哈哈哈哈
3     

1     div{
2     color:red !important;
3     }
4     p{
5     color:blue;

6     }

由于div是通過繼承性來影響文字顏色的，所以!important無法提升它的權重，權重依然是0。

    
    
    


    

        
哈哈哈哈哈哈哈哈
    

有CSS樣式：

干不過p標簽，因為p標簽是實實在在選中了，所以字是藍色的（以p為準）。

3）!important不影響就近原則

    
    
    


    

        

            
猜猜我是什么顏色
        
    

如果大家都是繼承來的，按理說應該按照“就近原則”，那么important能否影響就近原則呢？

答案是：不影響。遠的，永遠是遠的。不能給遠的寫一個important，干掉近的。

! important做站的時候，不允許使用。因為會讓css寫的很亂。

現在，我們知道層疊性能比較很多東西：

選擇器的寫法權重，誰離的近，誰寫在下面。

2.3 權重計算的總結

還要知道   ! important 的性質。

三、盒模型

3.1 盒子中的區域

    
    
    


    
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

一個盒子中主要的屬性就5個：width、height、padding、border、margin。

width是“寬度”的意思，CSS中width指的是內容的寬度，而不是盒子的寬度。

height是“高度”的意思，CSS中height指的是內容的高度，而不是盒子的高度

padding是“內邊距”的意思

border是“邊框”

margin是“外邊距”

盒模型的示意圖：

代碼演示：

這個盒子width:200px; height:200px; 但是真實占有的寬高是302*302。 這是因為還要加上padding、border。

寬度和真實占有寬度，不是一個概念！！

    
    
    


    
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
    
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

3.2 認識width、height

一定要知道，在前端開發工程師眼中，世界中的一切都是不同的：

比如丈量一個包子多寬？前端開發工程師，只會丈量包子餡：

丈量稿紙，前端開發工程師只會丈量內容寬度：

丈量人臉，只會丈量五官：

下面這兩個盒子，真實占有寬高，完全相同，都是302*302：

1     .box1{
2     width: 100px;
3     height: 100px;
4     padding: 100px;
5     border: 1px solid red;
6     }
7 
8     .box2{
9     width: 250px;
10     height: 250px;
11     padding: 25px;
12     border:1px solid red;
13     }

這兩個盒子的盒模型圖，見下表：真實占有寬度=  左border  +  左padding  +  width  +  右padding  +  右border

答案（答案有無窮多種，我們只寫其中三種）：小練習，大家自己寫三個402*402的盒子

1 .box1{
2     width: 400px;
3     height: 400px;
4     border: 1px solid red;
5 }
6 .box2{
7     width: 200px;
8     height: 200px;
9     border: 6px solid red;
10     padding: 95px;
11 }
12 .box3{
13     width: 0px;
14     height: 0px;
15     padding: 200px;
16     border: 1px solid red;
17 }

 這三個盒子的盒模型圖：

如果想保持一個盒子的真是占有寬度不變，那么加width就要減padding。加padding就要減width。

3.3 認識padding

padding就是內邊距。padding的區域有背景顏色，css2.1前提下，并且背景顏色一定和內容區域的相同。

也就是說，background-color將填充所有boder以內的區域。

padding是4個方向的，所以我們能夠分別描述4個方向的padding。

    
    
    


    
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容

方法有兩種，第一種寫小屬性；第二種寫綜合屬性，用空格隔開。

    
    
    


    
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容

小屬性：

1 padding-top: 30px;
2 padding-right: 20px;
3 padding-bottom: 40px;
4 padding-left: 100px;

這種屬性，就是復合屬性。比如不寫padding-left那么就是沒有左內邊距。top上、right右、bottom下、left左。

快捷鍵就是pdt、pdr、pdb、pdl 然后按tab。

綜合屬性：

如果寫了4個值：

1 padding:30px 20px 40px 100px;

上、右、下、左 

空格隔開的，四個數字就是上、右、下、左。

也就是說，前端開發工程師眼中的順序不一樣。

老百姓：上下左右

強調開發工程師：上、右、下、左

如果只寫3個值：

1 padding: 20px 30px 40px;

 上、右、下、??和右一樣

如果只寫2個值：

1 padding: 30px 40px;

也就是說， 

1 padding: 30px 40px;

 等價于：

1 padding-top: 30px;
2 padding-bottom: 30px;
3 padding-left: 40px;
4 padding-right: 40px;

要懂得，用小屬性層疊大屬性：

 對應的盒模型圖：

1 padding: 20px;
2 padding-left: 30px;

下面的寫法錯誤：

1 padding-left: 30px;
2 padding: 20px;

 不能把小屬性，寫在大屬性前面。

下面的題，會做了，說明你聽懂了：

題目1，說出下面盒子真實占有寬高，并畫出盒模型圖：

1     div{

2     width: 200px;

3     height: 200px;

4     padding: 10px 20px 30px;

5     padding-right: 40px;

6     border: 1px solid #000;

7     }

 真實占有寬度 = 200 + 20 + 40 + 1 + 1 = 262px

題目2，說出下面盒子真實占有寬高，并畫出盒模型圖：

1     div{
2     width: 200px;
3     height: 200px;
4     padding-left: 10px;
5     padding-right: 20px;
6     padding:40px 50px 60px;
7     padding-bottom: 30px;
8     border: 1px solid #000;
9     }

 padding-left:10px； 和padding-right:20px; 沒用，因為后面的padding大屬性，層疊掉了他們。

強調一點，padding-left 不是padding-left-width

1 padding-left:10px;  √
2 padding-left-width:30px; ×

第3題，我現在給你盒模型圖，請寫出代碼，試著用最最簡單的方法寫

width:123px;
height:123px;
padding:20px 40px;
border:1px solid red;

第4題：

width:123px;
height:123px;
padding:20px;
padding-right:40px;
border:1px solid red;

一些元素，默認帶有padding，比如ul標簽。

所以，我們為了做站的時候，便于控制，總是喜歡清除這個默認的padding：

1     *{
2     margin: 0;
3     padding: 0;
4     }

1 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
2     margin:0;
3     padding:0
4 }

 *的效率不高，所以我們使用并集選擇器，羅列所有的標簽（不用背，有專業的清除默認樣式的樣式表，今后學習）：

3.4 border

就是邊框。邊框有三個要素：粗細、線型、顏色。

顏色如果不寫，默認是黑色。另外兩個屬性不寫，要命了，顯示不出來邊框。

1 border: 1px dashed red;

所有的線型： 

比如，border:10px ridge red;  在chrome和firefox、IE中有細微差別：

如果公司里面的設計師，處女座的，追求極高的頁面還原度，那么不能使用css來制作邊框。

就要用到圖片，就要切圖了。所以，比較穩定的就幾個：solid、dashed、dotted

border是一個大綜合屬性，

1 border:1px solid red;

border屬性能夠被拆開，有兩大種拆開的方式：就是把4個邊框，都設置為1px寬度、線型實線、red顏色。

1） 按3要素:border-width、border-style、border-color

2） 按方向：border-top、border-right、border-bottom、border-left

按3要素拆開：

1 border-width:10px;    → 邊框寬度
2 border-style:solid;     → 線型
3 border-color:red;      → 顏色。

1 border:10px solid red;

現在心里要明白，原來一個border是由三個小屬性綜合而成：等價于：

border-width  border-style   border-color。

如果某一個小要素后面是空格隔開的多個值，那么就是上右下左的順序：

1 border-width:10px 20px;

2 border-style:solid dashed dotted;

3 border-color:red green blue yellow;

按方向來拆

1 border-top:10px solid red;

2 border-right:10px solid red;

3 border-bottom:10px solid red;

4 border-left:10px solid red;

 等價于

1 border:10px solid red;

按方向還能再拆一層，就是把每個方向的，每個要素拆開，一共12條語句：

1 border-top-width:10px;

2 border-top-style:solid;

3 border-top-color:red;

4 border-right-width:10px;

5 border-right-style:solid;

6 border-right-color:red;

7 border-bottom-width:10px;

8 border-bottom-style:solid;

9 border-bottom-color:red;

10 border-left-width:10px;

11 border-left-style:solid;

12 border-left-color:red;

 等價于

1 border:10px solid red;

工作中到底用什么？很簡答：什么簡單用什么？

 寫法：

1 border:10px solid red;

2 border-right-color:blue;

寫法：

1 border:10px solid red;

2 border-style:solid dashed;

border可以沒有， 

1 border:none;

也可以調整左邊邊框的寬度為0：某一條邊沒有：

1 border-left: none;

1 border-left-width: 0;

四、標準文檔流

宏觀的講，我們的web頁面和photoshop等設計軟件有本質的區別：web頁面的制作，是個“流”，必須從上而下，像“織毛衣”。而設計軟件，想往哪里畫個東西，都能畫。

我們要看看標準流有哪些微觀現象：

    
    
    


    

        人人人人 人人姚明人人人人人人人
        
        
    

1） 空白折疊現象：

比如，如果我們想讓img標簽之間沒有空隙，必須緊密連接：

1 
2 
3 

2） 高矮不齊，底邊對齊： 

3） 自動換行，一行寫不滿，換行寫。

4.1 塊級元素和行內元素

    
    
    


    
哈哈哈哈
    
嘻嘻嘻嘻


    哈哈哈哈
    嘻嘻嘻嘻

學習的初期，你就要知道，標準文檔流等級森嚴。標簽分為兩種等級：

1） 塊級元素

● 霸占一行，不能與其他任何元素并列

● 能接受寬、高

● 如果不設置寬度，那么寬度將默認變為父親的100%。

2） 行內元素

● 與其他行內元素并排

● 不能設置寬、高。默認的寬度，就是文字的寬度。

在HTML中，我們已經將標簽分過類，當時分為了：文本級、容器級。

文本級：p、span、a、b、i、u、em

容器級：div、h系列、li、dt、dd

CSS的分類和上面的很像，就p不一樣：

所有的文本級標簽，都是行內元素，除了p，p是個文本級，但是是個塊級元素。

所有的容器級標簽都是塊級元素。

4.2 塊級元素和行內元素的相互轉換

塊級元素可以設置為行內元素

    
    
    


    
我是一個div
    
我是一個div

    
我
愛
你
們

行內元素可以設置為塊級元素

    
    
    


    點擊我去網易

    我是一個span
    我是一個span

1     div{
2     display: inline;
4     width: 500px;
5     height: 500px;
6     }

inline就是“行內”。display是“顯示模式”的意思，用來改變元素的行內、塊級性質

一旦，給一個標簽設置

1 display: inline;

● 此時這個div不能設置寬度、高度；那么，這個標簽將立即變為行內元素。此時它和一個span無異：

● 此時這個div可以和別人并排了

同樣的道理，

1     span{
2     display: block;
3     width: 200px;
4     height: 200px;
5 
6     }

讓標簽變為塊級元素。此時這個標簽，和一個div無異：“block”是“塊”的意思

● 此時這個span能夠設置寬度、高度

● 此時這個span必須霸占一行了，別人無法和他并排

● 如果不設置寬度，將撐滿父親

標準流里面限制非常多，標簽的性質惡心。比如，我們現在就要并排、并且就要設置寬高。

所以，移民！脫離標準流！

css中一共有三種手段，使一個元素脫離標準文檔流：

1） 浮動

2） 絕對定位

3） 固定定位

五、浮動

浮動是css里面布局用的最多的屬性。

1     .box1{
2     float: left;
3     width: 300px;
4     height: 400px;
6     }
7     .box2{
8     float: left;
9     width: 400px;
10     height: 400px; 
12     }

兩個元素并排了，并且兩個元素都能夠設置寬度、高度了（這在剛才的標準流中，不能實現）。 

浮動想學好，一定要知道三個性質。

5.1 浮動的元素脫標

證明1：

證明2：

    
    
    


    我是span
    我是span
    我是span
    我是span
    我是span

一個span標簽不需要轉成塊級元素，就能夠設置寬度、高度了。所以能夠證明一件事兒，就是所有標簽已經不區分行內、塊了。也就是說，一旦一個元素浮動了，那么，將能夠并排了，并且能夠設置寬高了。無論它原來是個div還是個span。

1     span{
2     float: left;
3     width: 200px;
4     height: 200px;
6     }

5.2 浮動的元素互相貼靠

如果有足夠空間，那么就會靠著2哥。如果沒有足夠的空間，那么會靠著1號大哥。

如果沒有足夠的空間靠著1號大哥，自己去貼左墻。

右浮動：   float:right; 

    
    
    


    
1
    
2
    
3

    
    
    


    
1
    
2
    
3

5.3 浮動的元素有“字圍”效果

    
                 

                                                                                                                    
                         GPU云服務器
                                             
                         云服務器
                                                                                                                                                 
                                      
                     
                    
                                                                                               第三天
                                                                                                           前端css
                                                                                                           css前端
                                                                                                           前端css框架