前端-自學第五天--CSS的三大特性和CSS盒子模型

一，CSS的三大特性

分别是層疊性 繼承性 優先級

1 層疊性

相同選擇器給設定相同的樣式，此時一個樣式就好覆寫（層疊）另一個沖突樣式。層疊性注意解決樣式沖突的問題。。

層疊性原則：

①樣式沖突，遵循的原則就是就近原則，那個樣式離結構近，就執行那個樣式。

②樣式不沖突，不會層疊。

2 繼承性

CSS中的繼承，子标簽會繼承父标簽的某些樣式，如文本顔色和字号。

①恰當使用繼承可以簡化代碼，降低CSS樣式的複雜性。

②子元素可以繼承父元素的樣式（text,font-,line- 這些元素開頭的可以繼承，以及color屬性）

2.1行高的繼承性

body {

font: 12px/1.5 '微軟雅黑';

}

①行高可以跟機關也可以不跟機關

②如果子元素沒有設定行高，則會繼承父元素的行高為1.5.

③此時子元素的行高是：目前子元素的文字大小*1.5。

④body行高1.5 這樣寫法最大的優勢就是裡面子元素可以根據自己文字大小自動調整行高。

3 優先級

給同一個元素指定多個選擇器，就好有優先級的産生。

①選擇器相同，則執行層疊性

②選擇器不同，則根據選擇器權重執行。

選擇器權重：

選擇器 選擇器權重

繼承 或者* 0,0,0,0

元素選擇器 0,0,0,1

類選擇器，僞類選擇器 0,0,1,0

ID選擇器 0,1,0,0

行内樣式style=“” 1,0,0,0

!importa 重要的 =無窮大

優先級注意點

①權重是由4組數字組成，但是不會有進位。

②可以了解為 類選擇器永遠大于元素選擇器 id選擇器永遠大于類選擇器 以此類推。

③從左往右依次比較，如果某一位數相同，則判斷下一位數值。

④簡單記憶法：通配符和繼承權重為0，标簽選擇器為1，類（僞類）選擇器為10，id選擇器為100，行内樣式為1000，！important為無窮大。

⑤繼承的權重是0 如果該元素沒有直接選中，不管父元素權重多高，子元素得到的權重都是0.

權重疊加：如果是複合選擇器，則會有權重疊加，需要計算權重

di ui li----------------------0,0,0,3

.nav ul li---------------------0,0,1,2

a:hover----------------------0,0,1,1

.anv a------------------------0,0,1,1

一，盒子模型

網頁布局三大核心：盒子模型，浮動和定位

1.1看透網頁布局的本質

網頁布局過程：

①先準備好相關的網頁元素，網頁元素基本都是盒子Box.

②利用CSS設定好盒子的樣式，然後擺放到相應的位置

③往盒子裡面裝内容。

核心：就是利用CSS擺盒子。

1.2 盒子模型（BOX Model）組成

盒子模型：就是把HTML頁面中的布局元素看作是一個矩形盒子，也就是一個裝内容的容器。

CSS盒子模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊框，外邊距，内邊距，和實際内容。

border 邊框 content 内容 padding 内邊距 margin 外邊距

1.2.1邊框（border）

邊框： 邊框的粗細 邊框的樣式 邊框的顔色

文法：

border:border-width/border-style/bortder-color

屬性 作用

border-witdh 定義邊框粗細，機關是px

border-style 邊框的樣式

border-color 邊框的顔色

邊框簡寫：

border: l px solid red ; 沒有順序

邊框分開寫法：

border-top：1px solid red; // 隻設定上邊框 其餘同理//

1.4表格的細線邊框

border-collapse屬性控制浏覽器繪制表格表框的方式，它控制相鄰單元格的邊框。

border-collapse：collapse；

①collapse 單詞是合并的意思

②border-collapse：collapse 表示相鄰邊框合并在一起

1.5 邊框會影響盒子實際大小

邊框會額外增加盒子的實際大小

①測量盒子大小的時候，不量邊框

②如果 測量的時候包含了邊框，則需要width/height減去邊框寬度

1.6内邊距（padding）

padding屬性用于設定内邊距，即邊框與内容之間的距離。

屬性 作用

padding-left 左内邊距

padding-right 右内邊距

padding-top 上内邊距

padding-bottom 下内邊距

padding屬性（簡寫屬性）可以有一個到四個值。

值的個數 表達意思

padding：5px 1一個值，代表上下左右都有5像素内邊距；

padding：5px 10px; 2個值，代表上下内邊距是5像素，左右内邊距10像素；

padding：5px 10px 20px; 3個值，代表上内邊距5像素，左右内邊距10像素，下邊距20像素；

padding：5px 10px 20px 30px; 4個值，上是5像素右10像素 下20像素 左是30像素 順時針

當給盒子指定了padding值之後，發生了2件事

①内容和邊框有了激勵。添加了内邊距。

②padding也會影響盒子的實際大小。會撐大盒子

解決方案：如果保證盒子跟效果圖大小保持一緻，則讓width/height減去多出來的内邊距大小即可。

如果盒子本身沒有指定width/height屬性，則此時padding不會撐開盒子大小。

1.7 外邊距（margin）

margin屬性用于設定外邊距，即控制盒子和盒子之間的距離。

屬性 作用

margin-left 左外邊距

margin-right 右外邊距

margin-top 上外邊距

margin-buttom 下外邊距

margin跟padding簡寫一緻

1.8 外邊距典型應用

外邊距可以讓塊級盒子水準居中，但必須滿足兩個條件：

①盒子必須指定寬度（width）。

②盒子左右外邊距都設定為auto。

.header{ width:960px;margin:0 auto;}

常見寫法：

①margin-left:auto;margin-right auto；

②margin：auto；

③margin：0 auto；（常用）

以上方法是讓塊級元素水準居中，行内元素或者行内塊元素水準居中給其父元素添加 text-align：center即可

1.9 外邊距合并

使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合并

1.9.1 相鄰塊元素垂直外邊距的合并

當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距 margin-buttom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom和margin-top之和，取兩個值中的較大者這種現象被稱為相鄰塊元素垂直外邊距的合并。

1.9.2嵌套塊元素垂直外邊距的塌陷。

對于兩個嵌套關系（父子關系）的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距。

解決方案：

①可以為父元素定義上邊框

②可以為父元素定義上邊距

③可以為父元素添加overflow:hidden

1.10 清除内外邊距

網頁元素很多都帶有預設的内外邊距，而且不同浏覽器的預設也不同，是以我們在布局，首先要清除下網頁元素的内外邊距。

*{

padding：0；

margin：0；

行内元素為了照顧間距性，盡量隻設定左右内外邊距，不要設定上下内外邊距，但是轉換為塊級和行内塊元素就可以了

二，PS 基本操作

因為網頁美工大部分效果圖利用PS（photoshop）來做的，是以以後我們大部分切圖工作都是在PS裡面完成。