CSS樣式的一些小總結

這是本人學習 css 兩天的一些小總結和體會，若是有什麼不足或錯誤的地方還請指教，糾錯和探討。

css 樣式最使人頭疼的地方就是一個屬性有時候在這地方用能夠，到另外一個地方用卻沒效果了，或是衝突了。搞得頭昏昏的，這時候得看文檔才能明瞭，或作些小總結就內心有底了，下次不一樣的場景就知道用不一樣的 屬性來實現效果，糾錯也更明確思路了。

第一部分 ：line-height: 和 padding：

line-height: 和 padding：

1.line-height:

line-height: 說明：檢索或設置對象的行高。即字體最底端與字體內部頂端之間的距離。

這句話看來半天越看越奇怪，實際開發中也常常碰到 行高不精確的問題

最常常見的是給字體居中顯示，如我給<a 標籤設置垂直居中，

外邊框爲 200px ，因此 line-height: 200px 效果就實現了。
因此我對上面 line-height 做用於行內元素的理解是這樣的。注意是 行內元素

再給一個 快級元素的，如 <p 標籤
如今下面一張圖。

外邊框爲 200px ，因此 line-height: 200px 效果就 MD 尷尬了。

因此我對上面 line-height 做用於塊級元素的理解是上圖所標記的，因此要對 塊級元素居中，實際行高要減去 2倍 字體大小，及 line-height：160px

其餘行內元素和塊級元素遇到行高問題能夠依照上面這種思路分析分析。

2.padding：

padding： 說明：檢索或設置對象四邊的內部邊距。

padding也跟上面 line-height 同樣受行內元素和塊級元素的影響

注意要點：行內元素能夠使用該屬性設置左、右兩邊的內補丁；若要設置上、下兩邊的內補丁，必須先使該對象表現爲塊級或內聯塊級。

第二部分: margin:0 auto; 和 text-align:center;

margin:0 auto; 和  text-align:center;

1.margin:0 auto;

margin:0 auto：說明：上下間距爲0，左右自適應，及居中

這裏只討論居中的狀況，不討論 margin-left,marging-top等一些狀況

行內元素能夠使用該屬性設置左、右兩邊的外補丁；若要設置上、下兩邊的外補丁，必須先使該對象表現爲塊級或內聯塊級。

對於 行內元素設置居中：

但對於圖片不用設置大小，

.text_div img{
          display: block;
          margin:0 auto;
      }

就能居中

對於塊級元素

2. text-align:center;

text-align:center：說明：設置或檢索對象中內容的水平對齊方式。

對於 行內元素使用 text-align，與 margin:0 auto 不一樣的是，不一樣設置元素的大小

.text_div a{
          display: block;
          text-align: center;
      }

對於 快級元素

那麼 <img 標籤呢，發現 text-align: center ；只對能做用於文字的標籤有用，好比<a 標籤， <p 標籤等，<img標籤須要外面嵌套個< a 標籤才行，實際中也常常這麼作。

最後來個效果圖：

代碼：
html:

<div class="text_div"  >
               <img src="img/img.jpg"/>
               <p> 嗨 你好 ！</p>
               <a href=""> 點個贊</a>
           </div>

css:

.text_div{
          margin-top: 100px;
          margin-left: 50px;
          width:400px;
          height:400px;
          border: 1px solid  #7e1a05;

      }
      .text_div img{
          display: block;
          margin:0 auto;
      }
      .text_div p{
          text-align: center;
      }
      .text_div a{
          width: 70px;
          height: 22px;
          background:  #7e1a05;
          color: #FFF;
          border-radius: 2px;
          display: block;
          text-align: center;
          margin:0 auto;
          text-decoration:none;
          line-height: 22px;
      }

未完 ， 待續 .....