id選擇器

id選擇器使用“#”進行標識，后面緊跟id名，其基本語法格式如下：

#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

該語法中，id名即為HTML元素的id屬性值，大多數HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應于文檔中某一個具體的元素。

用法基本和類選擇器相同。

id選擇器和類選擇器區別

W3C標準規定，在同一個頁面內，不允許有相同名字的id對象出現，但是允許相同名字的class。

類選擇器（class） 好比人的名字， 是可以多次重復使用的， 比如 張偉 王偉 李偉 李娜

id選擇器 好比人的身份證號碼， 全中國是唯一的， 不得重復。 只能使用一次。

id選擇器和類選擇器最大的不同在于 使用次數上。

通配符選擇器

通配符選擇器用“*”號表示，他是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：

* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標記的默認邊距。

* {
  margin: 0;                    /* 定義外邊距*/
  padding: 0;                   /* 定義內邊距*/
}

注意：

這個通配符選擇器，就像我們的電影明星中的夢中情人， 想想它就好了，但是它不會和你過日子。

CSS字體樣式屬性

font-size:字號大小

font-size屬性用于設置字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位。其中，相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少。具體如下：

font-family:字體

font-family屬性用于設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等，

例如將網頁中所有段落文本的字體設置為微軟雅黑，可以使用如下CSS樣式代碼：

p{ font-family:"微軟雅黑";}

可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。

常用技巧：

1. 現在網頁中普遍使用14px+。
2. 盡量使用偶數的數字字號。ie6等老式瀏覽器支持奇數會有bug。
3. 各種字體之間必須使用英文狀態下的逗號隔開。
4. 中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位于中文字體名之前。
5. 如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-family: "Times New Roman";。
6. 盡量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。

CSS Unicode字體

在 CSS 中設置字體名稱，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時會產生亂碼的錯誤。xp 系統不支持 類似微軟雅黑的中文。

方案一： 你可以使用英文來替代。 比如 font-family:"Microsoft Yahei"。

方案二： 在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的。font-family: "5FAE8F6F96C59ED1"，表示設置字體為“微軟雅黑”。可以通過escape() 來測試屬于什么字體

為了照顧不同電腦的字體安裝問題，我們盡量只使用宋體和微軟雅黑中文字體

font-weight:字體粗細

字體加粗除了用 b 和 strong 標簽之外，可以使用CSS 來實現，但是CSS 是沒有語義的。

font-weight屬性用于定義字體的粗細，其可用屬性值：normal、bold、bolder、lighter、100~900（100的整數倍）。

小技巧：

數字 400 等價于 normal，而 700 等價于 bold。  但是我們更喜歡用數字來表示。  

font-style:字體風格

字體傾斜除了用 i 和 em 標簽之外，可以使用CSS 來實現，但是CSS 是沒有語義的。

font-style屬性用于定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值如下：

normal：默認值，瀏覽器會顯示標準的字體樣式。

italic：瀏覽器會顯示斜體的字體樣式。

oblique：瀏覽器會顯示傾斜的字體樣式。

小技巧：

平時我們很少給文字加斜體，反而喜歡給斜體標簽（em，i）改為普通模式。

font:綜合設置字體樣式 (重點)

font屬性用于對字體樣式進行綜合設置，其基本語法格式如下：

選擇器{font: font-style  font-weight  font-size/line-height  font-family;}

使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。
?
注意：其中不需要設置的屬性可以省略（取默認值），但必須保留font-size和

font-family屬性，否則font屬性將不起作用。

CSS外觀屬性

color:文本顏色

color屬性用于定義文本的顏色，其取值方式有如下3種：

1.預定義的顏色值，如red，green，blue等。

2.十六進制，如#FF0000，#FF6600，#29D794等。實際工作中，十六進制是最常用的定義顏色的方式。

3.RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代碼的百分比顏色值，取值為0時也不能省略百分號，必須寫為0%。

line-height:行間距

ine-height屬性用于設置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。line-height常用的屬性值單位有三種，分別為像素px，相對值em和百分比%，實際工作中使用最多的是像素px

一般情況下，行距比字號大7.8像素左右就可以了。

text-align:水平對齊方式

text-align屬性用于設置文本內容的水平對齊，相當于html中的align對齊屬性。其可用屬性值如下：

left：左對齊（默認值）

right：右對齊

center：居中對齊

text-indent:首行縮進

text-indent屬性用于設置首行文本的縮進，其屬性值可為不同單位的數值、em字符寬度的倍數、或相對于瀏覽器窗口寬度的百分比%，允許使用負值, 建議使用em作為設置單位。

1em 就是一個字的寬度 如果是漢字的段落， 1em 就是一個漢字的寬度

text-decoration 文本的裝飾

text-decoration 通常我們用于給鏈接修改裝飾效果

開發者工具（chrome）

此工具是我們的必備工具，以后代碼出了問題，我們首先第一反應就是：

“按F12”或者是 “shift+ctrl+i” 打開 開發者工具。

菜單： 右擊網頁空白出---查看

小技巧：

1、ctrl+滾輪 可以 放大開發者工具代碼大小。

2、左邊是HTML元素結構 右邊是CSS樣式。

3、右邊CSS樣式可以改動數值和顏色查看更改后效果。

記憶技巧：

交集選擇器 是 并且的意思。 即...又...的意思

比如：   p.one   選擇的是： 類名為 .one  的 段落標簽。  

用的相對來說比較少，不太建議使用。

并集選擇器

并集選擇器（CSS選擇器分組）是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。

CSS復合選擇器

復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標簽。

交集選擇器

交集選擇器由兩個選擇器構成，其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如h3.special。

記憶技巧：

并集選擇器 和 的意思， 就是說，只要逗號隔開的，所有選擇器都會執行后面樣式。

比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 這三個選擇器都會執行顏色為紅色。  通常用于集體聲明。

后代選擇器

后代選擇器又稱為包含選擇器，用來選擇元素或元素組的后代，其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔。當標簽發生嵌套時，內層標簽就成為外層標簽的后代。

子元素選擇器

子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個 進行連接，注意，符號左右兩側各保留一個空格。

偽類選擇器

偽類選擇器用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果， 比如可以選擇 第1個，第n個元素。

為了和我們剛才學的類選擇器相區別，  類選擇器是一個點 比如 .demo {}   而我們的偽類 用 2個點 就是 冒號  比如  :link{}

鏈接偽類選擇器

:link /* 未訪問的鏈接 */

:visited /* 已訪問的鏈接 */

:hover /* 鼠標移動到鏈接上 */

:active /* 選定的鏈接 */

注意寫的時候，他們的順序盡量不要顛倒 按照 lvha 的順序。 love hate 愛上了討厭 記憶法 或者 lv 包包 非常 hao

a {   /* a是標簽選擇器  所有的鏈接 */
            font-weight: 700;
            font-size: 16px;
            color: gray;
        }
a:hover {   /* :hover 是鏈接偽類選擇器 鼠標經過 */
            color: red; /*  鼠標經過的時候，由原來的 灰色 變成了紅色 */
}

CSS注釋

CSS規則是使用     /*  需要注釋的內容  */  進行注釋的，即在需要注釋的內容前使用 “/*” 標記開始注釋，在內容的結尾使用 “*/”結束。

例如：

p {
  font-size: 14px;                 /* 所有的字體是14像素大小*/}

sublime快捷方式

sublime可以快速提高我們代碼的書寫方式

生成標簽 直接輸入標簽名 按tab鍵即可 比如 div 然后tab 鍵， 就可以生成

如果想要生成多個相同標簽 加上 * 就可以了 比如 div*3 就可以快速生成3個div

如果有父子級關系的標簽，可以用 > 比如 ul > li就可以了

如果有兄弟關系的標簽，用 + 就可以了 比如 div+p

如果生成帶有類名或者id名字的， 直接寫 .demo 或者 #two tab 鍵就可以了

標簽顯示模式（display）

塊級元素(block-level)

每個塊元素通常都會獨自占據一整行或多整行，可以對其設置寬度、高度、對齊等屬性，常用于網頁布局和網頁結構的搭建。

常見的塊元素有

~

、

、

、

、
、
1. 等，其中
   標簽是最典型的塊元素。

   塊級元素的特點：

   （1）總是從新行開始

   （2）高度，行高、外邊距以及內邊距都可以控制。

   （3）寬度默認是容器的100%

   （4）可以容納內聯元素和其他塊元素。

   行內元素(inline-level)

   行內元素（內聯元素）不占有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度、高度、對齊等屬性，常用于控制頁面中文本的樣式。

   常見的行內元素有、、、、、、、、、等，其中標簽最典型的行內元素。

    

    

   行內元素的特點：

   （1）和相鄰行內元素在一行上。

   （2）高、寬無效，但水平方向的padding和margin可以設置，垂直方向的無效。

   （3）默認寬度就是它本身內容的寬度。

   （4）行內元素只能容納文本或則其他行內元素。（a特殊）

   注意：

   1、只有 文字才 能組成段落 因此 p 里面不能放塊級元素，同理還有這些標簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標簽，里面不能放其他塊級元素。

   2、鏈接里面不能再放鏈接

   塊級元素和行內元素區別

   塊級元素的特點：

   （1）總是從新行開始

   （2）高度，行高、外邊距以及內邊距都可以控制。

   （3）寬度默認是容器的100%

   （4）可以容納內聯元素和其他塊元素。

   
   行內元素的特點：
   （1）和相鄰行內元素在一行上。
   （2）高、寬無效，但水平方向的padding和margin可以設置，垂直方向的無效。
   （3）默認寬度就是它本身內容的寬度。
   （4）行內元素只能容納文本或則其他行內元素。

   標簽顯示模式轉換 display

   塊轉行內：display:inline;

   行內轉塊：display:block;

   塊、行內元素轉換為行內塊： display: inline-block;

    

    

   此階段，我們只需關心這三個，其他的是我們后面的工作。

   CSS書寫規范

   開始就形成良好的書寫規范，是你專業化的開始。

   空格規范

   【強制】 選擇器 與 { 之間必須包含空格。

   示例： .selector { }

   【強制】 屬性名 與之后的 : 之間不允許包含空格， : 與 屬性值 之間必須包含空格。

   示例：

   font-size: 12px;

   選擇器規范

   【強制】 當一個 rule 包含多個 selector 時，每個選擇器聲明必須獨占一行。

   示例：

   /* good */

   .post,

   .page,

   .comment {

       line-height: 1.5;

   }

   /* bad */

   .post, .page, .comment {

       line-height: 1.5;

   }

    

    

   【建議】 選擇器的嵌套層級應不大于 3 級，位置靠后的限定條件應盡可能精確。

   示例：

   /* good */

   #username input {}

   .comment .avatar {}

    

   /* bad */

   .page .header .login #username input {}

   .comment div * {}

   屬性規范

   【強制】 屬性定義必須另起一行。

   示例：

   /* good */

   .selector {

       margin: 0;

       padding: 0;

   }

    

   /* bad */

   .selector { margin: 0; padding: 0; }

   【強制】 屬性定義后必須以分號結尾。

    

    

    

    

   示例：

   /* good */

   .selector {

       margin: 0;

   }

   /* bad */

   .selector {

       margin: 0

   }

   CSS 三大特性

   層疊 繼承 優先級 是我們學習CSS 必須掌握的三個特性。

   CSS層疊性

   所謂層疊性是指多種CSS樣式的疊加。

   是瀏覽器處理沖突的一個能力,如果一個屬性通過兩個相同選擇器設置到同一個元素上，那么這個時候一個屬性就會將另一個屬性層疊掉

   比如先給某個標簽指定了內部文字顏色為紅色，接著又指定了顏色為藍色，此時出現一個標簽指定了相同樣式不同值的情況，這就是樣式沖突。

   一般情況下，如果出現樣式沖突，則會按照CSS書寫的順序，以最后的樣式為準。

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

   2、樣式不沖突，不會層疊

   CSS最后的執行口訣：  長江后浪推前浪，前浪死在沙灘上。

    

    

   行內塊元素（inline-block）

   在行內元素中有幾個特殊的標簽——、、，可以對它們設置寬高和對齊屬性，有些資料可能會稱它們為行內塊元素。

   行內塊元素的特點：

   （1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。

   （2）默認寬度就是它本身內容的寬度。

   （3）高度，行高、外邊距以及內邊距都可以控制。

   CSS繼承性

   所謂繼承性是指書寫CSS樣式表時，子標簽會繼承父標簽的某些樣式，如文本顏色和字號。想要設置一個可繼承的屬性，只需將它應用于父元素即可。

   簡單的理解就是： 子承父業。

   CSS最后的執行口訣：  龍生龍，鳳生鳳，老鼠生的孩子會打洞。

   注意：

   恰當地使用繼承可以簡化代碼，降低CSS樣式的復雜性。子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的都可以繼承，以及color屬性）

   CSS優先級

   定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，這時就會出現優先級的問題。

   在考慮權重時，初學者還需要注意一些特殊的情況，具體如下：

    

    

    

    

    

    

   繼承樣式的權重為0。即在嵌套結構中，不管父元素樣式的權重多大，被子元素繼承時，他的權重都為0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。

    

   行內樣式優先。應用style屬性的元素，其行內樣式的權重非常高，可以理解為遠大于100。總之，他擁有比上面提高的選擇器都大的優先級。

    

   權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先級，或者說排在最后的樣式優先級最大。

    

   CSS定義了一個!important命令，該命令被賦予最大的優先級。也就是說不管權重如何以及樣式位置的遠近，!important都具有最大優先級。

   CSS特殊性（Specificity）

   關于CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity，我們稱為CSS 特性或稱非凡性，它是一個衡量CSS值優先級的一個標準 具體規范入如下：

   specificity用一個四位的數 字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大于一級，數位之間沒有進制，級別之間不可超越。 

   權重是可以疊加的

   比如的例子：

    

   注意：

   1.數位之間沒有進制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不會存在10個div能趕上一個類選擇器的情況。

   繼承的 權重是 0

   總結優先級：

   1、使用了 !important聲明的規則。

   2、內嵌在 HTML 元素的 style屬性里面的聲明。

   3、使用了 ID 選擇器的規則。

   4、使用了類選擇器、屬性選擇器、偽元素和偽類選擇器的規則。

   5、使用了元素選擇器的規則。

   6、只包含一個通用選擇器的規則。

   7、同一類選擇器則遵循就近原則。

   總結：權重是優先級的算法，層疊是優先級的表現

   CSS 背景(background)

   CSS 可以添加背景顏色和背景圖片，以及來進行圖片設置。

   背景圖片(image)

   語法： 

   background-image : none | url (url)

   參數：

   none : 　無背景圖（默認的）url : 　使用絕對或相對地址指定背景圖像

   background-image 屬性允許指定一個圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。 如果圖片不重復地話，圖片覆蓋不到地地方都會被背景色填充。 如果有背景圖片平鋪，則會覆蓋背景顏色。

   小技巧： 我們提倡 背景圖片后面的地址，url不要加引號。

   背景平鋪（repeat）

   語法： 

   background-repeat : repeat | no-repeat | repeat-x | repeat-y 

   參數： 

   repeat : 　背景圖像在縱向和橫向上平鋪（默認的）

   no-repeat : 　背景圖像不平鋪

   repeat-x : 　背景圖像在橫向上平鋪

   repeat-y : 　背景圖像在縱向平鋪

    

    

   設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。

   repeat-x : 　背景圖像在橫向上平鋪

   repeat-y : 　背景圖像在縱向平鋪

   背景位置(position)

   語法：

   
   background-position : length || length
   ?
   background-position : position || position 

   參數： 

   length : 　百分數 | 由浮點數字和單位標識符組成的長度值。請參閱長度單位 position : 　top | center | bottom | left | center | right

   說明： 

   設置或檢索對象的背景圖像位置。必須先指定background-image屬性。默認值為：(0% 0%)。如果只指定了一個值，該值將用于橫坐標。縱坐標將默認為50%。第二個值將用于縱坐標。

   注意：

   1、position 后面是x坐標和y坐標。 可以使用方位名詞或者 精確單位。

   2、如果和精確單位和方位名字混合使用，則必須是x坐標在前，y坐標后面。比如 background-position: 15px top; 則 15px 一定是 x坐標 top是 y坐標。

   3、實際工作用的最多的，就是背景圖片居中對齊了。

   背景附著

   語法： 

   background-attachment : scroll | fixed 

   參數：

    

    

   scroll : 　背景圖像是隨對象內容滾動fixed : 　背景圖像固定

   說明： 

   設置或檢索背景圖像是隨對象內容滾動還是固定的。

   背景簡寫

   background屬性的值的書寫順序官方并沒有強制標準的。為了可讀性，建議大家如下寫：

   background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置

   background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

   背景透明(CSS3)

   CSS3支持背景半透明的寫法語法格式是:

   background: rgba(0,0,0,0.3);

   最后一個參數是alpha 透明度 取值范圍 0~1之間

   注意： 背景半透明是指盒子背景半透明， 盒子里面的內容不收影響。

   導航欄案例

   使用技巧：在一行內的盒子內，我們設定行高等于盒子的高度，就可以使文字垂直居中。

   
           
           
       
       
       專區說明
       申請資格
       兌換獎勵
       下載游戲
       

   盒子模型（CSS重點）

   其實，CSS就三個大模塊： 盒子模型 、 浮動 、 定位，其余的都是細節。要求這三部分，無論如何也要學的非常精通。

   所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。

   看透網頁布局的本質

   網頁布局中，我們是如何把里面的文字，圖片，按照美工給我們的效果圖排列的整齊有序呢？

   盒子邊框（border）

   邊框就是那層皮。 橘子皮。。柚子皮。。橙子皮。。。

   語法： 

   border : border-width || border-style || border-color 

   邊框屬性—設置邊框樣式（border-style）

   邊框樣式用于定義頁面中邊框的風格，常用屬性值如下：

    

    

    

   none：沒有邊框即忽略所有邊框的寬度（默認值）

    

   solid：邊框為單實線(最為常用的)

    

   dashed：邊框為虛線  

    

   dotted：邊框為點線

    

   double：邊框為雙實線

   盒子邊框寫法總結表

   表格的細線邊框

   以前學過的html表格邊框很粗，這里只需要CSS一句話就可以美觀起來。 讓我們真的相信，CSS就是我們的白馬王子（白雪公主）。

   table{ border-collapse:collapse; } collapse 單詞是合并的意思

   border-collapse:collapse; 表示邊框合并在一起。

   圓角邊框(CSS3)

   從此以后，我們的世界不只有矩形。radius 半徑（距離）

   語法格式：

   border-radius: 左上角  右上角  右下角  左下角;

   內邊距（padding）

   padding屬性用于設置內邊距。 是指 邊框與內容之間的距離。

   padding-top:上內邊距

   padding-right:右內邊距

   padding-bottom:下內邊距

   padding-left:左內邊距

   注意： 后面跟幾個數值表示的意思是不一樣的。

   外邊距（margin）

   margin屬性用于設置外邊距。 設置外邊距會在元素之間創建“空白”， 這段空白通常不能放置其他內容。

   margin-top:上外邊距

   margin-right:右外邊距

   margin-bottom:下外邊距

   margin-left:上外邊距

   margin:上外邊距 右外邊距 下外邊距 左外邊

   取值順序跟內邊距相同。

   外邊距實現盒子居中

   可以讓一個盒子實現水平居中，需要滿足一下兩個條件：

   必須是塊級元素。

   盒子必須指定了寬度（width）

    

   然后就給左右的外邊距都設置為auto，就可使塊級元素水平居中。

   實際工作中常用這種方式進行網頁布局，示例代碼如下：

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

   文字盒子居中圖片和背景區別

   1、文字水平居中是 text-align: center

   2、盒子水平居中 左右margin 改為 auto

   text-align: center; /*  文字居中水平 */
   margin: 10px auto;  /* 盒子水平居中  左右margin 改為 auto 就闊以了 */

    

    

   插入圖片 我們用的最多 比如產品展示類

   背景圖片我們一般用于小圖標背景 或者 超大背景圖片

   section img {  
           width: 200px;/* 插入圖片更改大小 width 和 height */
           height: 210px;
           margin-top: 30px;  /* 插入圖片更改位置 可以用margin 或padding  盒模型 */
           margin-left: 50px; /* 插入當圖片也是一個盒子 */
       }
   ?
   aside {
           width: 400px;
           height: 400px;
           border: 1px solid purple;
           background: #fff url(images/sun.jpg) no-repeat;
       
           background-size: 200px 210px; /*  背景圖片更改大小只能用 background-size */
           background-position: 30px 50px; /* 背景圖片更該位置 我用 background-position */
       }

   清除元素的默認內外邊距

   為了更方便地控制網頁中的元素，制作網頁時，可使用如下代碼清除元素的默認內外邊距：

   * {
      padding:0;         /* 清除內邊距 */
      margin:0;          /* 清除外邊距 */
   }

   注意： 行內元素是只有左右外邊距的，是沒有上下外邊距的。 內邊距，在ie6等低版本瀏覽器也會有問題。

   我們盡量不要給行內元素指定上下的內外邊距就好了。

   外邊距合并

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

    

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

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

   嵌套塊元素垂直外邊距的合并

   對于兩個嵌套關系的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合并。

   解決方案：

   1、可以為父元素定義1像素的上邊框或上內邊距。

   2、可以為父元素添加overflow:hidden。

   content寬度和高度

   使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。

   width和height的屬性值可以為不同單位的數值或相對于父元素的百分比%，實際工作中最常用的是像素值。

   大多數瀏覽器，如Firefox、IE6及以上版本都采用了W3C規范，符合CSS規范的盒子模型的總寬度和總高度的計算原則是：

   /*外盒尺寸計算（元素空間尺寸）*/
     Element空間高度 = content height + padding + border + margin
     Element 空間寬度 = content width + padding + border + margin
     /*內盒尺寸計算（元素實際大小）*/
     Element Height = content height + padding + border （Height為內容高度）
     Element Width = content width + padding + border （Width為內容寬度）

   注意：

   1、寬度屬性width和高度屬性height僅適用于塊級元素，對行內元素無效（ img 標簽和 input除外）。

   2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合并的情況。

   3、如果一個盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會影響本盒子大小。

   盒子模型布局穩定性

   開始學習盒子模型，同學們最大的困惑就是， 分不清內外邊距的使用，什么情況下使用內邊距，什么情況下使用外邊距？

   答案是：

   GPU云服務器 云服務器 適合新手linux 適合入門的python書 java開發入門筆記 html入門教程適合初學者

   文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

   轉載請注明本文地址：http://www.hztianpu.com/yun/1384.html

   • 上一篇：CSS3
   • 下一篇：屬性設置百分比時的計算參考匯總

相關文章

• 100天漲薪4k！從功能測試到自動化測試，我整理的超全學習指南！

  摘要：事實上，自動化測試是相對于手動的。減少人為的錯誤自動化測試是機器完成，不存在執行過程中人為的疏忽和錯誤，測試設計完全決定了測試的質量，可以降低減少人為造成的錯誤。而接口自動化測試，主要是對接口進行測試。 今年6月份，由于經濟壓力讓我下定決心進階自動化測試，已經24的我做了3年功能測試，坐標廣...

  TwIStOy 2021-10-12 10:11 評論0 收藏0

• 庫&插件&框架&工具

  摘要：一些有用的一些有用的，包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享 淺談前端線上部署與運維 說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與SRE對接、一起完...

  Codeing_ls 2019-08-01 18:22 評論0 收藏0

• 庫&插件&框架&工具

  摘要：一些有用的一些有用的，包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享 淺談前端線上部署與運維 說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與SRE對接、一起完...

  xiaowugui666 2019-08-21 18:43 評論0 收藏0

• Docker之旅——入門篇(一)

  摘要：常見問題點擊之后提示錯誤，我們點擊瀏覽選擇安裝目錄的下載鏡像很慢，參考提供的加速器文檔鏈接之旅使用搭建私服二其他參考非常詳細的學習筆記最佳實踐一命令詳解超全版本基于打造前端持續集成開發環境 Docker進行感性認知 Docker 最初的2小時(Docker從入門到入門).md 開啟Docker之旅 環境: win7, 64位 工具準備： 1. 官網地址: https://get....

  JinB 2019-06-28 16:18 評論0 收藏0

• Docker之旅——入門篇(一)

  摘要：常見問題點擊之后提示錯誤，我們點擊瀏覽選擇安裝目錄的下載鏡像很慢，參考提供的加速器文檔鏈接之旅使用搭建私服二其他參考非常詳細的學習筆記最佳實踐一命令詳解超全版本基于打造前端持續集成開發環境 Docker進行感性認知 Docker 最初的2小時(Docker從入門到入門).md 開啟Docker之旅 環境: win7, 64位 工具準備： 1. 官網地址: https://get....

  時飛 2019-08-15 14:27 評論0 收藏0

發表評論

登陸后可評論

0條評論