CSS樣式的一些小總結

chavesgu 發布于2019-08-01 15:33 / 2243人閱讀

摘要：搞得頭昏昏的，這時候得看文檔才能明了，或做些小總結就心里有底了，下次不同的場景就知道用不同的屬性來實現效果，糾錯也更明確思路了。

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

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

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

 line-height: 和 padding：

1.line-height:

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

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

最經常見的是給字體居中顯示，如我給

外邊框為 200px ，所以 line-height: 200px 效果就實現了。
所以我對上面 line-height 作用于行內元素的理解是這樣的。注意是 行內元素

再給一個快級元素的，如

現在下面一張圖。

外邊框為 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;
      }

對于快級元素

那么

嗨你好！

點個贊

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;
      }

未完，待續 .....

GPU云服務器云服務器 vps日常維護中的一些要點總結 ddos一些比較小的網站 css的樣式 html的css樣式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49969.html

CSS樣式的一些小總結

摘要：搞得頭昏昏的，這時候得看文檔才能明了，或做些小總結就心里有底了，下次不同的場景就知道用不同的屬性來實現效果，糾錯也更明確思路了。這是本人學習 css 兩天的一些小總結和體會，如果有什么不足或錯誤的地方還請指教，糾錯和探討。 css 樣式最令人頭疼的地方就是一個屬性有時候在這地方用可以，到另一個地方用卻沒效果了，或是沖突了。搞得頭昏昏的，這時候得看文檔才能明了，或做些小總結就心里有底了...

zhjx922 2019-08-29 11:06 評論0 收藏0
【CSS】小妙招，各種問題總結方法處理

摘要：應用常例是屬性設置水平放置后出現間隙。邊框產生的位置只有兩個地方，在內容內，在內容外，請看下面介紹。產生在內容外，這個好理解，也是我們最普遍見到的，就是在內容外繪制邊框。1.實現div文字溢出自動省略號截取 ? overflow:hidden;??/*超過部分不顯示*/??　　　　　　text-overflow:ellipsis;??/*超過部分用點點表示*/??　　　...

springDevBird 2019-04-23 13:28 評論0 收藏0
css學習歸納總結（三）

摘要：也就是說，較寬的外邊距決定兩個元素最終離多遠。盒模型結論二沒有設定屬性的元素始終會擴展到填滿其父元素的寬度為止。布局的基本概念多欄布局有三種基本的實現方案固定寬度流動彈性。為文檔添加樣式的三種方法行內樣式行內樣式是寫在HTML標簽的style屬性里的，比如： Hello Everyone! 行內樣式會覆蓋嵌入樣式和鏈接樣式。嵌入樣式嵌入的css樣式是放在HTML文檔...

Drummor 2019-08-28 18:01 評論0 收藏0
SegmentFault 技術周刊 Vol.38 - 神奇的 CSS

摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現出多種樣式。可以讓屬性的變化過程持續一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 評論0 收藏0
cml遷移指南(CML Migrate Guide)

摘要：今天，為了讓大家的項目優雅升級，快速接入，給你帶來一份豐盛的遷移指南目錄結構和微信小程序一樣，包含一個描述整體程序的和多個描述各自頁面的。 cml 作為真正讓一套代碼運行多端的框架，提供標準的MVVM模式，統一開發各類終端。同時，擁有各端獨立的運行時框架(runtime)、數據管理(store)、組件庫(ui)、接口(api)。此外，cml在跨端能力加強、能力統一、表現一致等方面...

FreeZinG 2019-08-26 13:42 評論0 收藏0