CSS標簽分類,盒子模型,層模型

CSS屬性引申

  • hover偽類
    當鼠標移入執行選中的代碼,將鼠標移出忽略此代碼。
    選擇器:hover{ }
    
    **偽類也有權重值的,它的權重值和class一樣是10點**
    
    偽類當然不止hover一個,還有很多其他的偽類,我就不一一介紹了,暫時hover用的最多。
    
    

標簽分類

  • 行級元素 / 內聯元素 / 行內元素 ( inline )
    特點:
    1.不可以通過css改變他的寬高。
    2.內容決定了元素所占大小
    <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企業開發經驗

  • 先定義功能,再用功能修飾結構
    將css相同的屬性提取出來,為特定的功能封裝好css屬性,再賦給html。

  • 自定義標簽

    1. 彌補一些標簽天生的不足
    2. 利用一些廢棄標簽創造我們需要的新標簽
      <i></i>
      <b></b>
      
  • 通配符選擇器初始化

  • 一般不給標簽加id選擇器
    一般通過添加class類名來選擇的,因為id代表唯一標示,我們一般用id來做標記,后臺的php會提取出來id,然后換成他們的標記,因此可能會導致我們的選擇器選擇不出來我們想要的標簽。


盒模型問題

  • 盒模型的四個部分
    1. 外邊距 margin值可以為負數
    2. 邊框 border
    3. 內邊距 padding
    4. 內容區 content【我們設置的width,height】
  • 盒子的三部分
    盒子 = 邊框 + 內邊距 + 內容區
  • 內邊距
    包含4個值:padding-top padding-right padding-bottom padding-left
    當只設置三個值時:上 (左右) 下
    當只設置兩個值時:(上下)(左右)
    【margin與padding相同】
    <span style="color: #ff000">注意:網頁自帶8px的margin</span>
  • 盒模型的計算問題

我們現在一個盒子有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是默認的屬性,當我們沒有寫position屬性的時候,元素默認的定位就是static定位。

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

    position:fixed;
    
  • 絕對定位

     position:absolute;
    

    特點
    【1】脫離原來位置進行定位(已經在其他層面上了)。
    【2】相對于,最近的有定位的父級進行定位,如果沒有,相對于document(文檔)進行定位。

    當我們改變定位之后,這個元素就有四個屬性可以使用

    left:100px;左邊線距離瀏覽器左邊框
    top:100px;上邊線距離瀏覽器上邊框 
    right:100px;右邊線距離瀏覽器上邊框 
    bottom:100px;下邊線距離瀏覽器上邊框 
    

    這四個屬性分別可以設置當前元素距離左邊、右邊、上邊和下邊的距離為多少,但是四個屬性很少一起出現,一般都是兩兩一對出現,其中lefttop是一對,rightbottom是一對。

  • 相對定位

     position:relative;
    

    特點:
    【1】保留原來的位置進行定位,實現定位后,也在另一個層面上。
    【2】相對于自己原來位置進行定位

當我們僅僅給元素設置position:relative;并沒有設置left、right、top、bottom屬性的時候,元素的定位是沒有發生任何改變的,因為這個特性,一般在開發中,<span style="color: #ff000">relative都是用作設置參照物的</span>,一個absolute元素要相對于那個元素進行移動,就給那個元素設置relative的定位就可以了。

  • absolute和relative的區別
    看一個例子
 <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;  
}

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



現在我們給content加上定位的樣式。

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

這個時候瀏覽器中的樣式就會發生改變,content那個黃色的小方塊會跑到橘黃色的方塊外面:


這是因為,當我們給 content設置position:absolute;之后,瀏覽器在渲染的時候,會先向上找到box這個div,看看這個div有沒有定位,因為沒有,所以繼續向上找wrapper,依然沒有,再向上找body,還是沒有,所以最后就是相對于瀏覽器邊框定位,這個時候contentleft屬性就是相對于瀏覽器邊框左邊有50px的距離的意思。

現在我們把content的定位換成relative,瀏覽器中的結果變成了這個樣子:


本來content黃色小方塊在黑色方塊的左上角,然后relative相對與自身的位置進行定位,這個時候的left屬性的意思就是相對于本來在黑色左上角的那個位置向右移動了50px的距離,也就是現在這個黃色小方塊所在的位置。

  • 元素水平垂直居中
div {
      width: 100px;
      height: 100px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px;
      background-color: red;
}

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。