元素類型的分類

在網(wǎng)頁布局中有的標(biāo)簽可以直接設(shè)置寬高大小藤韵，但有的標(biāo)簽不可以直接設(shè)置，因?yàn)槊總€標(biāo)簽都有自己的類型熊经。在css中根據(jù)顯示分類可以分為：塊級元素荠察、行內(nèi)元素置蜀、可變元素。

塊元素悉盆、行內(nèi)元素盯荤、行內(nèi)塊元素

可變元素根據(jù)上下文語境決定該元素為塊元素或行內(nèi)元素，因此現(xiàn)在的css元素將可變元素考慮為行內(nèi)塊元素焕盟。

（如果提問兩種元素類型秋秤，回答塊元素和行內(nèi)元素即可）

塊元素

別名：塊級元素、塊狀元素

1. 常見的塊元素：div脚翘、h灼卢、p、ul>li
2. 塊元素的特點(diǎn)
   • 塊元素可以直接設(shè)置寬高大小来农，通常是以一個盒子的形狀在瀏覽器中顯示的
   • 塊元素默認(rèn)獨(dú)占一行鞋真，后面的空間也是屬于當(dāng)前元素的
   • 作用：塊元素可以嵌套行內(nèi)元素或者其他元素作為盒子實(shí)現(xiàn)網(wǎng)頁布局

行內(nèi)元素

別名：內(nèi)聯(lián)元素

1. 常見的行內(nèi)元素：a、span沃于、i涩咖、em、b繁莹、strong
2. 行內(nèi)元素的特點(diǎn)
   • 不可以直接設(shè)置寬高大小檩互，元素的大小是由文本內(nèi)容決定的
   • 行內(nèi)元素默認(rèn)在一行內(nèi)逐個顯示
   • 注意：行內(nèi)元素在設(shè)置margin-top/margin-bottom會失效（存在Bug）

行內(nèi)塊元素

可以理解為是從行內(nèi)元素中分出來的一種元素類型。

1. 常見的行內(nèi)塊元素：img咨演、input
2. 行內(nèi)塊元素特點(diǎn)
   • 可以直接設(shè)置寬高大小 => 擁有塊元素的特點(diǎn)
   • 在一行內(nèi)逐個顯示 => 擁有行內(nèi)元素的特點(diǎn)
   • 同時擁有兩個元素類型的特點(diǎn)叫做行內(nèi)塊元素
3. 問題：所有的行內(nèi)塊元素都是以基線對齊的（布局問題）
4. 解決：使用css屬性 vertical-align:top/bottom/middle

   • 行高line-height：本質(zhì)是基線對齊

     
     
     4.png

常見的置換元素與非置換元素有哪些闸昨？

置換元素概念：

1. 有自己的初始寬高大小

2. 可以跟隨標(biāo)簽內(nèi)的屬性和屬性值的改變而有不同的樣式

常見置換元素：img、input

非置換元素：其他標(biāo)簽

元素類型的轉(zhuǎn)換屬性

1. 屬性：display（控制薄风、顯示方式）

2. 屬性值：官方提供了19個

   • block 塊饵较，可以將其他元素轉(zhuǎn)換為塊元素，使其擁有塊元素的特點(diǎn)
   • inline 行內(nèi)遭赂，可以將其他元素轉(zhuǎn)換為行內(nèi)元素告抄，使其具有行內(nèi)元素的特點(diǎn)
   • inline-block 行內(nèi)塊元素，可以將其他元素轉(zhuǎn)換成行內(nèi)塊元素嵌牺，使其具有行內(nèi)塊元素的特點(diǎn)
   • 【了解】list-item 列表項(xiàng)目打洼，本質(zhì)是塊元素
   • 【重點(diǎn)】none 表示隱藏/刪除元素（不占位置了）
     • list-style:none 清除列表的默認(rèn)樣式
     • text-decoration:none 清除a標(biāo)簽的默認(rèn)下劃線
     • border:none 清除邊框
     • background:none 清除背景
     • outline:none 點(diǎn)擊表單控件外面的邊框

3. 拓展：關(guān)于浮動的設(shè)置

   • 浮動可以讓元素脫離文檔流，改變元素的排列位置（垂直 => 水平）
   • 改變元素類型逆粹，改為行內(nèi)塊元素

4. 【重點(diǎn)】none和block之間的應(yīng)用(表示顯示和隱藏)

改變鼠標(biāo)樣式cursor -- 障眼法

pointer 手型募疮；help 問號；wait 等待沙漏

/* 改變鼠標(biāo)的樣式 */
cursor: pointer;

動態(tài)偽類選擇器

可以改變元素的樣式

a:link{color: red;} /* 未訪問的鏈接狀態(tài)僻弹，必須給a */
a:visited{color:green} /* 已訪問的鏈接狀態(tài)阿浓，必須給a */
a:hover{color:blue} /* 鼠標(biāo)滑過鏈接狀態(tài)，可以隨便給 */
a:active{color:yellow} /* 鼠標(biāo)按下去時的狀態(tài)蹋绽，必須給a */

注意點(diǎn)：偽類選擇器有常見的四個芭毙，如果四個要使用的話必須按照當(dāng)前的順序去寫筋蓖，其中最為重要的是hover選擇器。

hover選擇器

表示當(dāng)鼠標(biāo)移入時候可以改變的一種狀態(tài)

1. hover改變自己的狀態(tài) => 自己的選擇器:hover{}

   div:hover{
       color:red;
   }
   

2. hover改變子級狀態(tài) => 父級選擇器：hover 子級選擇器{}

   <div>
       A
       <p>
           B
       </p>
   </div>
   

   div:hover p{
    color:green;
    font-size:30px;
   }
   

拓展 -- hover不常見的情況

1. 通過自己改變相鄰一個兄弟 +

   <h1>AA</h1>
   <h2>BB</h2>
   <h2>CC</h2>
   

   h1:hover+h2{
       color:green;
   }
   

2. 通過自己改變相鄰所有兄弟 ~

   h1:hover~h2{
       color:red;
   }
   

案例1：鼠標(biāo)移出移入控制二維碼的顯示與隱藏
http://www.reibang.com/p/bfa55e6ae057
案例2：中英文切換導(dǎo)航的實(shí)現(xiàn)
http://www.reibang.com/p/437ebc0409e5
案例3：電商頁面商品的聚焦效果展示
http://www.reibang.com/p/a25ddb494c1c