CSS屬性引申

• hover偽類
  當(dāng)鼠標移入執(zhí)行選中的代碼局劲，將鼠標移出忽略此代碼勺拣。

  選擇器：hover{ }
  
  **偽類也有權(quán)重值的，它的權(quán)重值和class一樣是10點**
  
  偽類當(dāng)然不止hover一個鱼填，還有很多其他的偽類药有，我就不一一介紹了，暫時hover用的最多苹丸。
  
  

標簽分類

• 行級元素 / 內(nèi)聯(lián)元素 / 行內(nèi)元素 （ inline ）
  特點：
  1.不可以通過css改變他的寬高愤惰。
  2.內(nèi)容決定了元素所占大小

  <span></span>
  <a></a>
  <strong></strong>
  <em></em>   
  

• 塊級元素 （block）
  特點：
  1.可以通過css改變他的寬高。
  2.獨占一行赘理，沒滿足一行就占用一行宦言，沒滿足兩行就占用兩行

  <div></div>
  <p></p>
  <h1></h1>~~~~<h6></h6>
  <adress></adress>
  <ul>
      <li>
      </li>
  </ul>
  <table></table>
  <form></form>
  

• 行級塊元素 （inline-block）
  特點：
  1.可以通過css改變他的寬高。
  2.不獨占一行

  <img>    
  <input> 
  

自定義行級元素 display：inline商模；
自定義塊級元素 display：block奠旺；
自定義行級塊元素 display ：inline-block；

css企業(yè)開發(fā)經(jīng)驗

• 先定義功能施流，再用功能修飾結(jié)構(gòu)
  將css相同的屬性提取出來凉倚，為特定的功能封裝好css屬性，再賦給html嫂沉。

• 自定義標簽

  1. 彌補一些標簽天生的不足
  2. 利用一些廢棄標簽創(chuàng)造我們需要的新標簽

     <i></i>
     <b></b>
     

• 通配符選擇器初始化

• 一般不給標簽加id選擇器
  一般通過添加class類名來選擇的稽寒，因為id代表唯一標示，我們一般用id來做標記趟章，后臺的php會提取出來id杏糙，然后換成他們的標記慎王，因此可能會導(dǎo)致我們的選擇器選擇不出來我們想要的標簽。

盒模型問題

• 盒模型的四個部分
  1. 外邊距 margin值可以為負數(shù)
  2. 邊框 border
  3. 內(nèi)邊距 padding
  4. 內(nèi)容區(qū) content【我們設(shè)置的width宏侍，height】
• 盒子的三部分
  盒子 = 邊框 + 內(nèi)邊距 + 內(nèi)容區(qū)
• 內(nèi)邊距
  包含4個值：padding-top padding-right padding-bottom padding-left赖淤；
  當(dāng)只設(shè)置三個值時：上 （左右） 下
  當(dāng)只設(shè)置兩個值時：（上下）（左右）
  【margin與padding相同】
  <span style="color: #ff000">注意：網(wǎng)頁自帶8px的margin</span>
• 盒模型的計算問題

我們現(xiàn)在一個盒子有10px的margin、5px的border谅河、10px 20px 30px 40px的padding和100px的content咱旱，那么這個盒子的寬高分別是多少呢？
答案：
width = 5 + 40+ 100 + 20+ 5 = 170px;
height = 5 + 10 + 100 + 30 + 5 = 150px;
寬度的計算是：5px的border+40px的padding-left+100px的content+20px的padding-right+5px的border=170px绷耍；
高度的計算是： 5px的border+10px的padding-top+100px的content+30px的padding-bottom+5px的border=150px吐限；

層模型

css中元素的層次模型主要是由 position 這個屬性來決定的。

position屬性：
position的意思是定位褂始，同樣這個屬性的作用就是給元素施加定位诸典。它一共有四個值，分別是 static崎苗、absolute狐粱、relative、fixed

默認值：
static是默認的屬性胆数，當(dāng)我們沒有寫position屬性的時候肌蜻，元素默認的定位就是static定位。

• 相對于可視區(qū)視口進行定位
  【IE6 不支持】

  position：fixed必尼；
  

• 絕對定位

   position：absolute蒋搜；
  

  特點
  【1】脫離原來位置進行定位（已經(jīng)在其他層面上了）。
  【2】相對于胰伍，最近的有定位的父級進行定位，如果沒有酸休，相對于document（文檔）進行定位骂租。

  當(dāng)我們改變定位之后，這個元素就有四個屬性可以使用

  left：100px斑司；左邊線距離瀏覽器左邊框
  top：100px渗饮；上邊線距離瀏覽器上邊框 
  right：100px；右邊線距離瀏覽器上邊框 
  bottom：100px宿刮；下邊線距離瀏覽器上邊框 
  

  這四個屬性分別可以設(shè)置當(dāng)前元素距離左邊互站、右邊、上邊和下邊的距離為多少僵缺，但是四個屬性很少一起出現(xiàn)胡桃，一般都是兩兩一對出現(xiàn)，其中left和top是一對磕潮，right和bottom是一對翠胰。

• 相對定位

   position：relative容贝；
  

  特點：
  【1】保留原來的位置進行定位，實現(xiàn)定位后之景，也在另一個層面上斤富。
  【2】相對于自己原來位置進行定位

當(dāng)我們僅僅給元素設(shè)置position:relative;并沒有設(shè)置left、right锻狗、top满力、bottom屬性的時候，元素的定位是沒有發(fā)生任何改變的轻纪，因為這個特性油额，一般在開發(fā)中，<span style="color: #ff000">relative都是用作設(shè)置參照物的</span>桐磁，一個absolute元素要相對于那個元素進行移動悔耘，就給那個元素設(shè)置relative的定位就可以了。

• absolute和relative的區(qū)別
  看一個例子

 <div class=”wrapper”>
       <div class=”box”>
             <div class=”content”></div>
       </div>
 </div>

.wrapper { 
      width: 200px;
      height: 200px;
      background-color: orange;
      margin-top: 100px;
      margin-left: 100px;
}
.box{
      width:100px;
      height: 100px;
      background-color: black;
      margin-left:100px;
}
.content{
      width: 50px;
      height: 50px;
      background-color: yellow;  
}

此時我們在瀏覽器中看到的樣式是這個樣子的：

現(xiàn)在我們給content加上定位的樣式我擂。

.content{
      position:absolute;
      left: 50px;
      width: 50px;
      height: 50px;
      background-color: yellow;
}

這個時候瀏覽器中的樣式就會發(fā)生改變衬以，content那個黃色的小方塊會跑到橘黃色的方塊外面：

現(xiàn)在我們把content的定位換成relative，瀏覽器中的結(jié)果變成了這個樣子：

• 元素水平垂直居中

div {
      width: 100px;
      height: 100px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px;
      background-color: red;
}

這個div就會在有定位的父級里面水平垂直居中了