成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS樣式的一些小總結(jié)

chavesgu / 2252人閱讀

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

這是本人學(xué)習(xí) css 兩天的一些小總結(jié)和體會(huì)，如果有什么不足或錯(cuò)誤的地方還請指教，糾錯(cuò)和探討。

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

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

 line-height: 和 padding：

1.line-height:

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

這句話看來半天越看越奇怪，實(shí)際開發(fā)中也經(jīng)常碰到 行高不精確的問題

最經(jīng)常見的是給字體居中顯示，如我給

外邊框?yàn)?200px ，所以 line-height: 200px 效果就實(shí)現(xiàn)了。
所以我對上面 line-height 作用于行內(nèi)元素的理解是這樣的。注意是 行內(nèi)元素

再給一個(gè) 快級元素的，如

現(xiàn)在下面一張圖。

外邊框?yàn)?200px ，所以 line-height: 200px 效果就 MD 尷尬了。

所以我對上面 line-height 作用于塊級元素的理解是上圖所標(biāo)記的，所以要對 塊級元素居中，實(shí)際行高要減去 2倍 字體大小，及 line-height：160px

其他行內(nèi)元素和塊級元素遇到行高問題可以依照上面這種思路分析分析。

2.padding：

padding： 說明：檢索或設(shè)置對象四邊的內(nèi)部邊距。

padding也跟上面 line-height 一樣受行內(nèi)元素和塊級元素的影響

注意要點(diǎn)：行內(nèi)元素可以使用該屬性設(shè)置左、右兩邊的內(nèi)補(bǔ)??；若要設(shè)置上、下兩邊的內(nèi)補(bǔ)丁，必須先使該對象表現(xiàn)為塊級或內(nèi)聯(lián)塊級。

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

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

1.margin:0 auto;

margin:0 auto：說明：上下間距為0，左右自適應(yīng)，及居中

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

 行內(nèi)元素可以使用該屬性設(shè)置左、右兩邊的外補(bǔ)??；若要設(shè)置上、下兩邊的外補(bǔ)丁，必須先使該對象表現(xiàn)為塊級或內(nèi)聯(lián)塊級。

對于 行內(nèi)元素設(shè)置居中：

但對于圖片不用設(shè)置大小，

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

就能居中

對于塊級元素

2. text-align:center;

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

對于 行內(nèi)元素使用 text-align，與 margin:0 auto 不同的是，不同設(shè)置元素的大小

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

對于 快級元素

那么

嗨 你好 ！

 點(diǎn)個(gè)贊

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

未完 ， 待續(xù) .....

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/49969.html

相關(guān)文章

  • CSS樣式的一些小總結(jié)

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

    zhjx922 評論0 收藏0

  • 【CSS】小妙招，各種問題總結(jié)方法處理

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

    springDevBird 評論0 收藏0

  • css學(xué)習(xí)歸納總結(jié)（三）

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

    Drummor 評論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.38 - 神奇的 CSS

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

    elliott_hu 評論0 收藏0

  • cml遷移指南(CML Migrate Guide)

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

    FreeZinG 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<