css基礎重點內容總結

1、目錄引入

./同級(當前) ../上級目錄  ../../上上級目錄

 

2、標籤種類：

    1.塊級標籤（block）：獨佔一行，寬高可設；

    2.行內塊標籤（inline-block）:不獨佔一行，寬高可設；

    3.行內標籤（inline）：不獨佔一行，寬高不可設，由內容決定 br是行內標籤。

 

3、三類標籤之間的轉換

    1.塊級標籤轉換爲行內標籤：display:inline;

    2.行內標籤轉換爲塊級標籤：display:block;

    3.轉換爲行內塊標籤：display:inline-block;

 

4、圖片標籤：

　 單標籤 < img src=」./img/t9.jpg」 alt=」圖片不存在」 />

 

5、CSS樣式、寫法

    1.行內樣式（內聯樣式）：<span style=「color:blue;」>文本</span>

    2.內部樣式：寫在head標籤裏面，加上style標籤，須要有選擇器（選擇給指點的標籤加樣式 結構：選擇器+花括號+樣式內容）

    3.外部樣式引入：<link rel=」stylesheet 」 href=」css/style.css」>

 

6、input經常使用的八種類型

  ①    intput類型(8)

1) <input type=」radio」 name=」」value=」」/>單選

例：<lable for="sex">Math</lable>

<input tyoe="radio" name="" id="sex" />   （選中單選）

2) <input type=」checkbox」name=」」value=‘’「>多選

3) <input type=」submit」name=」」value=」提交」>

4) <input type=」button」name=」」value=」按鈕」>

5) <input type=」password」name=」」value=」」>密碼

6) <input type=」text」name=」」value=」」>文本

7) <input type=」reset」name=」」value=」清空」>

8) <input type=」hidden」name=」country」value=」China」>隱藏

② input標籤中id、name、value的區別：

　　id惟一標識符，不容許有重複值；

　　name和id的功能是同樣的，惟一不一樣的是name容許有重複的值；

　　value表明某個html標籤的值 。如 value=「hello！」 你將看到網頁中文本框的內容爲「hello!」 

七css經常使用標籤

 

8、優先級

　　！importent>style（行內元素）>id>class>元素選擇器（在這個基礎上，考慮就近原則）

 

9、px和em區別

px特色：

　　px像素，相對長度單位，像素px相對顯示屏分辨率而言。

em特色：

　　1.em的值並非固定的；

　　2.em會繼承父級元素字體大小。

 

10、相對定位 、絕對定位 、固定定位 的區別：

　　1. position：reletive；  相對定位：該元素相對於本身原有的位置，偏移必定的距離，相對的是它本身，同時還佔據原來的位置；

　　2. position：absolute；絕對定位：相對的是父元素偏移必定距離，這個父元素須要設置position屬性，絕對定位的元素相對於最近已定位祖先元素，絕對定位不佔據原來位置；

　　3. position：fixed；      固定定位：相對於瀏覽器窗口。

 

11、僞類、僞元素區別

　  一、 僞類：類，class是就是一個類，就相似於class這樣，表示一個元素的狀態，可是無須標識的分類；   

 　 二、僞元素：就是一個元素，相似p標籤元素等，邏輯上存在，其實是不存在的 

 

12、浮動含義

　　任何元素element均可以被浮動。且文本和行內的圖像永遠不會被浮動所覆蓋。

 

十3、透明度區別

　　1.opacity：設置的透明度會被子元素繼承，而切沒法取消。

　　2.transparent：表示背景透明，不會被子元素繼承。

 例：一個div中寫有大段文字，設div的backgroud-color爲紅色透明度0.5，代碼background-color：rgba(190,19,13,0.5);刷新後的效果只是div背景色會變，其內容顏色不收影響。  但設div的opacity值爲0.5；顯示效果整個div（包括裏面的文字內容）都變成透明度爲50%。

　　3.display:none，設置該屬性後，該對象會在頁面上完全消失。寬度、高度等屬性都將「丟失」；

　　4.visibility：hidden，隱藏，視覺上看不見（徹底透明），但它所佔據空間的位置仍然存在。仍具備高度寬度等屬性值。

例：

            

 

十3、下拉列表 select標籤    option 元素位於 select 元素內部

 

<select>
      <option>請選擇</option>
      <option>山西</option>
      <option>上海</option>
      <option>北京</option>
  </select>