CSS樣式—— 字體、元素的垂直水平居中


1.CSS樣式與HTML中標簽屬性的區別:

  標簽的屬性是采用 屬性名=“屬性值” 表示的

  CSS樣式是采用名值對 屬性名:屬性值; 表示的

2.內聯元素(行內元素)與塊元素

  (1)內聯元素及其特點:

     所謂的行內元素,指的是只占自身大小,不會獨占一行
          常見的內聯元素:
     a img iframe span
           span沒有任何語義,span標簽專門用來選中文字,並對該文字設置樣式

    對內聯元素設置寬高是無效的,也不可以設置行高,其寬度和高度都默認被元素撐開

    將內聯元素放在 li 標簽中可以設置其寬高

    可以對內聯元素設置內邊距,IE6以上瀏覽器支持

    可以對內聯元素設置外邊距,但只對左右外邊距起作用

   (2)塊元素:

    所謂的塊元素是會獨占一行的元素,無論他的內容多少都會獨占一行
           p h1 h2 h3...都是塊元素
           div標簽沒有任何語義,就是一個純粹的塊元素,並不會對其里面的元素設置任何樣式

    可以對塊元素設置高度和邊距

    如果不自己設置寬度,其寬度為其父元素寬度

    塊元素中可以容納塊元素和內聯元素,但內聯元素中不能包含塊元素

3.幾種居中方式

  (1)設置塊元素中文字水平居中

    使用text-align 樣式設置塊中文本或圖片居中。

    該樣式只能操作塊元素或者被CSS 顯示成塊元素的內聯元素

    對一個塊元素設置該樣式后,其子塊元素中的文本或者圖片也會相對於其子塊元素居中

  (2)塊元素自身水平居中

    通過設置 magin:0 auto; 使該塊元素在其父元素中水平居中顯示

  (3)內聯元素的垂直居中

    通過設置 vertical-algin 樣式

    該屬性適用於:

      內聯元素(被轉換成內聯元素的塊元素)

      display 設置為 table-cell 的元素

      在 table 也就是表格中的元素

  (4)設置塊元素中文字垂直居中

      通過設置塊元素的內邊距

  (5)塊元素自身垂直居中

      可以通過設置外邊距實現

      通過絕對定位設置其距離父元素的 left right top bottom 來實現

      

   


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM