嵌套規(guī)則

• 在網(wǎng)頁(yè)中，元素可以分成兩大類

塊元素和行內(nèi)元素

塊元素

在網(wǎng)頁(yè)中獨(dú)占一行

• h1~h6 header main footer article nav section ul li...
• 塊元素主要用來(lái)將網(wǎng)頁(yè)區(qū)分不認(rèn)同的區(qū)域
• 最常用的塊元素就是div，h，p，div沒(méi)有語(yǔ)義，就表示一個(gè)獨(dú)立的區(qū)域

行內(nèi)元素（inline）

• 在網(wǎng)頁(yè)中不會(huì)獨(dú)占一行，只會(huì)占有自身大小

• 學(xué)習(xí)過(guò)的行內(nèi)標(biāo)簽<a></a>

• 行內(nèi)元素永遠(yuǎn)包裹文字，標(biāo)識(shí)文字所代表的意義

• 最常用的行內(nèi)元素就是span，span本身沒(méi)有語(yǔ)義，就標(biāo)識(shí)一段文字

• 替換元素

  
  
  替換元素.png

1.替換元素和行內(nèi)元素類似，但是替換元素不會(huì)直接在網(wǎng)頁(yè)中顯示，而是會(huì)被其他內(nèi)容替換

• 學(xué)習(xí)過(guò)的替換元素
  1.img iframe audio video..都不會(huì)獨(dú)占一行
  p元素里面不能出現(xiàn)任何塊元素
  
  2.png
  
  可以這樣
  
  3.png
  
  這樣不行
  
  4.png

元素的嵌套規(guī)則

• 通常情況下塊元素可以嵌套，塊元素可以嵌套塊元素，也可以嵌套行內(nèi)元素，說(shuō)白了塊里面什么都能放
• 在行內(nèi)元素只能嵌套行內(nèi)元素，不能嵌套塊元素

（特殊情況）

• P元素里面不能出現(xiàn)任何的塊元素，就算在p里面放塊元素，瀏覽器也會(huì)自動(dòng)把塊元素?fù)癯鰜?lái)，會(huì)導(dǎo)致代碼結(jié)構(gòu)出問(wèn)題，后期不好維護(hù)
• 在a元素中可以嵌套除了它本身以外的任意元素

繼承

樣式的繼承

可以這樣

5.png

6.png

• 和現(xiàn)實(shí)生活中后代可以繼承祖先的財(cái)產(chǎn)一樣
• 在CSS中后代元素也可以繼承到祖先元素上的樣式
• 當(dāng)我們?yōu)樽嫦仍卦O(shè)置樣式時(shí)，其后代元素也會(huì)應(yīng)用上相同的樣式
• 繼承的存在大大的簡(jiǎn)化了我們的開(kāi)發(fā)
  • 有了繼承后我們可以將樣式統(tǒng)一設(shè)置到一個(gè)元素上，這樣它的所有后代元素都可以繼承該樣式
  • 并不是所有的樣式都會(huì)被繼承
  • 比如：背景相關(guān)，布局相關(guān)的都不會(huì)被繼承，background-color默認(rèn)值是（transparent) 透明的，沒(méi)有給行內(nèi)元素設(shè)置背景顏色，所以行內(nèi)元素背景顏色還是透明，所以背景圖片和背景顏色是不會(huì)繼承的

選擇器的權(quán)重

id，類，標(biāo)簽選擇器都選擇同一個(gè)元素，都改同樣的樣式，這種是樣式?jīng)_突，

7.png

8.png

9.png

樣式的沖突

寫兩個(gè)選擇器，優(yōu)先級(jí)靠前.png

這個(gè)優(yōu)先級(jí)是單獨(dú)計(jì)算.png

這兩個(gè)是等價(jià)的.png

• 當(dāng)我們通過(guò)不同的選擇器選中同一個(gè)元素，同時(shí)為同一個(gè)樣式設(shè)置不同的值，比如顏色都設(shè)成不同的顏色，此時(shí)就發(fā)生了樣式?jīng)_突
• 當(dāng)發(fā)生樣式?jīng)_突時(shí)，那個(gè)樣式會(huì)生效由選擇器的優(yōu)先級(jí)決定

選擇器的優(yōu)先級(jí)（選擇器的權(quán)重）

• 內(nèi)聯(lián)樣式優(yōu)先級(jí)是 1，0，0，0

• id選擇器優(yōu)先級(jí)是 0，1，0，0

• 類和偽類選擇優(yōu)先級(jí)是 0，0，1，0

• 元素選擇器優(yōu)先級(jí)是 0，0，0，1

• 通配選擇器 沒(méi)有優(yōu)先級(jí)
  （不建議使用內(nèi)聯(lián)樣式，如果寫了內(nèi)聯(lián)樣式，上面所有選擇器都會(huì)失效）
  

  這時(shí)候優(yōu)先級(jí)一樣，橙色生效.png
  
  當(dāng)寫完樣式之后發(fā)現(xiàn)樣式?jīng)]生效，有可能是優(yōu)先級(jí)比較低
  
  紅色生效，因?yàn)橥ㄅ溥x擇器沒(méi)有優(yōu)先級(jí).png

• 優(yōu)先級(jí)的計(jì)算需要將多個(gè)選擇器加在一起計(jì)算

• 選擇的分組都是單獨(dú)計(jì)算

• 優(yōu)先級(jí)的計(jì)算是不會(huì)超過(guò)最大的數(shù)量的級(jí)

• 如果兩個(gè)選擇器的優(yōu)先級(jí)一樣，則優(yōu)先顯示靠下的樣式

  
  
  如果為一個(gè)樣式添加了！important.png

• 如果為一個(gè)樣式添加了！important 則該樣式會(huì)自動(dòng)獲得一個(gè)最高的優(yōu)先級(jí)，優(yōu)先于所有的樣式顯示甚至超過(guò)內(nèi)聯(lián)樣式，慎用！
  繼承的樣式?jīng)]有優(yōu)先級(jí)，隨便寫一個(gè)都可以覆蓋繼承的樣式

偽類的順序

• :link
• :visited
• :hover
• :active
  一般lin和visited很少用，如果要用一定要寫在hover和active前面
  一般看兩種狀態(tài)會(huì)不會(huì)同時(shí)出現(xiàn)在同一個(gè)元素上，如果會(huì)，就會(huì)有沖突問(wèn)題
  
  10.png
  
  
  11.png
  
  
  這兩種可能同時(shí)出現(xiàn)，點(diǎn)擊就不會(huì)變顏色，誰(shuí)在后邊誰(shuí)顯示.png

單位

• 長(zhǎng)度單位（px）

  • 像素，計(jì)算機(jī)的屏幕是由一個(gè)一個(gè)發(fā)光的小點(diǎn)構(gòu)成
  • 每一個(gè)小點(diǎn)都是一個(gè)像素，像素越多，屏幕越清晰
  • 百分比，會(huì)自動(dòng)依據(jù)父元素的指定屬性去計(jì)算大小

    • 使用百分比作為單位時(shí)，元素可以根據(jù)父元素的大小自動(dòng)改變

      
      
      這里指的父元素的50%.png

• 顏色單位

1. 顏色名

• CSS中直接使用顏色名來(lái)表示各種顏色
• red orange yellow green blue tomato ...用顏色名有很多限制

2. rgb值

• RGB值就是通過(guò)紅綠藍(lán)三種顏色調(diào)配出其他各種不同顏色

• RGB（紅色，綠色，藍(lán)色）不是美術(shù)的三元色，這個(gè)是光的三元色，是把一個(gè)一個(gè)顏色轉(zhuǎn)換成數(shù)字，不方便我們的識(shí)別，數(shù)字不方便人類識(shí)別，方便工具識(shí)別

• 每種值的取值范圍0-255之間

  
  
  image.png

• 三個(gè)都是255得到一個(gè)白色，

• 值也可以取在0%-100%之間，一般就用數(shù)值就行

十六進(jìn)制RGB值

• 使用十六進(jìn)制的數(shù)字來(lái)表示顏色
  0 1 2 3 4 5 6 7 8 9 a b c d e f 1a ..1f,2a..2f,3a...3f,4a...4f,5a...5f單個(gè)數(shù)字16個(gè)，最大的數(shù)是f

• 語(yǔ)法

  
  
  語(yǔ)法.png

紅色綠色藍(lán)色

顏色取值范圍00-ff

• 如果顏色是兩位兩位重復(fù)的，則可以省略

盒模型

盒子模型、盒模型、框模型（box model）

• 網(wǎng)頁(yè)布局面臨的兩個(gè)問(wèn)題，一個(gè)是元素的大小，一個(gè)是元素的位置
• 在CSS中將頁(yè)面中的每一個(gè)元素都設(shè)置一個(gè)矩形的盒子，所有元素都是矩形，這樣網(wǎng)頁(yè)的布局就變成將不同的矩形擺放到不同位置，調(diào)整位置和大小達(dá)到不同的顯示效果

每一個(gè)元素從內(nèi)到外由以下幾個(gè)部分組成：

• 內(nèi)容區(qū)（content）
• 內(nèi)邊距（padding） 內(nèi)容區(qū)和邊框的距離
• 邊框（border）

• 外邊距（margin）

  
  
  盒子模型.png
• 每個(gè)元素最內(nèi)部的區(qū)域稱為內(nèi)容區(qū)
• 內(nèi)容區(qū)相當(dāng)于一個(gè)盒子的容積，一個(gè)元素的子元素和它文本內(nèi)容都在元素的內(nèi)容區(qū)中排列
• 內(nèi)容區(qū)的大小決定了一個(gè)元素能裝多少東西

內(nèi)容區(qū)的大小需要通過(guò)兩個(gè)屬性設(shè)置

• width 設(shè)置內(nèi)容區(qū)的寬度

• height 設(shè)置內(nèi)容區(qū)的高度

  
  
  內(nèi)容區(qū)的大小.png

邊框（border）

• 邊框是盒子可見(jiàn)框的最邊緣
• 要設(shè)置邊框需要使用三個(gè)屬性
  • 邊框?qū)挾?border-width
  • 邊框的顏色 border-color
  • 邊框的樣式border-style
    
    10像素紅色實(shí)線邊框.png
    
    width和height只是設(shè)置內(nèi)容區(qū)，影響盒子大小的還有內(nèi)邊距和邊框?qū)挾?/strong>
• 邊框（border）
  • 盒子可見(jiàn)框的邊緣，也會(huì)影響盒子可見(jiàn)框的大小