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

資訊專欄INFORMATION COLUMN

css之display

Rocture / 3222人閱讀

摘要：塊級(jí)元素元素默認(rèn)是塊級(jí)元素默認(rèn)也是塊級(jí)元素塊級(jí)元素的特點(diǎn)元素的內(nèi)容會(huì)充滿整行行內(nèi)元素屬性為的元素被稱為內(nèi)連元素。行內(nèi)塊級(jí)元素屬性為的元素被稱為行內(nèi)塊級(jí)元素。

display

css定位屬性Positioning

display: none

不再頁(yè)面渲染元素





  
  
  
  css-test
  



  
這一段落不會(huì)被顯示出來(lái)

  
這個(gè)段落會(huì)被顯示出來(lái)

  
當(dāng)一個(gè)元素中的display屬性是none時(shí)，瀏覽器不會(huì)渲染這個(gè)元素里的任何內(nèi)容，不會(huì)占據(jù)瀏覽器窗口空間，但它存在與文檔流當(dāng)中。
display: block

塊級(jí)元素





  
  
  
  css-test
  



  
p元素默認(rèn)是block塊級(jí)元素

  
div默認(rèn)也是block塊級(jí)元素

  
塊級(jí)元素的特點(diǎn)：元素的內(nèi)容會(huì)充滿整行
display: inline

行內(nèi)元素





  
  
  
  css-test
  




  
display屬性為inline的元素被稱為內(nèi)連元素。

  
相鄰元素也是inline屬性時(shí)，如果內(nèi)容不夠撐開(kāi)整行。相鄰元素的內(nèi)容會(huì)顯示在它傍邊，當(dāng)窗口整行不夠顯示時(shí)，內(nèi)容會(huì)換行顯示。
display: inline-block

行內(nèi)塊級(jí)元素





  
  
  
  css-test
  



  
display屬性為inline-block的元素被稱為行內(nèi)塊級(jí)元素。

  
行內(nèi)塊級(jí)元素的特性是獨(dú)占一行，內(nèi)容不會(huì)撐開(kāi)整行
display: flex

彈性布局





  
  
  
  css-test
  



  

    
1

    
2

    
3

    
4

  

  
class="content" 的元素會(huì)占用整行

  
子元素寬高由內(nèi)容撐開(kāi)

  

    
1

    
2

    
3

    
4
display: inline-flex 




  
  
  
  css-test
  



  

    
1

    
2

    
3

    
4

  

  
class="content" 的元素寬高由子元素?fù)伍_(kāi)

  
子元素寬高由內(nèi)容撐開(kāi)

  

    
1

    
2

    
3

    
4
display: list-item

列表屬性





  
  
  
  css-test
  



  
display屬性為list-item時(shí)元素會(huì)作為列表顯示

  
下班要買菜

  
回家要做飯
display: inherit

繼承父級(jí)元素的屬性





  
  
  
  css-test
  



  

    正常的span元素效果，內(nèi)容不會(huì)撐開(kāi)整行
    繼承父級(jí)屬性的效果，父級(jí)的display屬性值是block 繼承后內(nèi)容撐開(kāi)整行

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

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

相關(guān)文章

  • 讀 Zepto 源碼之樣式操作

    摘要：方法也在讀源碼之內(nèi)部方法有過(guò)分析。不太明白為什么要用全局變量來(lái)接收，用局部變量不是更好點(diǎn)嗎保存當(dāng)前類的字符串，使用函數(shù)獲得。這是的依然是全局變量，但是接收的是當(dāng)前元素的當(dāng)前樣式類字符串為什么不用局部變量呢。 這篇依然是跟 dom 相關(guān)的方法，側(cè)重點(diǎn)是操作樣式的方法。 讀Zepto源碼系列文章已經(jīng)放到了github上，歡迎star: reading-zepto 源碼版本 本文閱讀的源碼為...

    snowell 評(píng)論0 收藏0

  • CSS之各種居中

    摘要：轉(zhuǎn)自個(gè)人博客本博客討論居中情況設(shè)定為總寬度不定內(nèi)容寬度不定的情況。改變大小時(shí)，仍然居中。寬高改變時(shí)，不再是居中效果。配合優(yōu)點(diǎn)居中元素不對(duì)其他元素產(chǎn)生影響。水平居中當(dāng)父元素設(shè)置時(shí)，子元素為，默認(rèn)為內(nèi)容寬度。 轉(zhuǎn)自個(gè)人博客 本博客討論居中情況設(shè)定為總寬度不定,內(nèi)容寬度不定的情況。（改變大小時(shí)，仍然居中）。 特別說(shuō)明：在元素設(shè)置position:absolute;來(lái)設(shè)置居中效果時(shí)，除去博客...

    happyfish 評(píng)論0 收藏0

  • CSS篇之水平導(dǎo)航

    摘要：關(guān)于水平導(dǎo)航已然是老生常談之問(wèn)題，看了網(wǎng)上諸多方法，今天小小的總結(jié)對(duì)比了一下現(xiàn)有方法的優(yōu)缺點(diǎn)。問(wèn)題一個(gè)最簡(jiǎn)單的結(jié)構(gòu)如下，請(qǐng)實(shí)現(xiàn)水平導(dǎo)航。缺點(diǎn)，和方法一樣，會(huì)出現(xiàn)空白間隙，解決方案如上，因?yàn)槭切袃?nèi)元素，所以不能設(shè)置寬高，比較局限。 關(guān)于水平導(dǎo)航已然是老生常談之問(wèn)題，看了網(wǎng)上諸多方法，今天小小的總結(jié)對(duì)比了一下現(xiàn)有方法的優(yōu)缺點(diǎn)。 問(wèn)題：一個(gè)最簡(jiǎn)單的html結(jié)構(gòu)如下，請(qǐng)實(shí)現(xiàn)水平導(dǎo)航。 ...

    李義 評(píng)論0 收藏0

  • CSS 終極之戰(zhàn)：Grid VS Flexbox

    摘要：我們將使用檢查器來(lái)檢查列關(guān)鍵不同在于這種方式先定義了列即布局。這種方式迫使我們將分割成多少列。而使用則不會(huì)面臨這種限制。我相信將會(huì)是時(shí)代，它會(huì)有一個(gè)突破，并成為前端開(kāi)發(fā)者的必備技能。 簡(jiǎn)評(píng)：近些年 CSS Flexbox在前端開(kāi)發(fā)者中變得非常流行。其實(shí)并不奇怪，它能讓我們更容易創(chuàng)建出動(dòng)態(tài)布局，以及在容器中對(duì)其內(nèi)容。然而城里新來(lái)了個(gè)小伙叫 CSSGrid，它有許多彈性盒的能力，有時(shí)候比彈...

    lindroid 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Rocture

男|高級(jí)講師

TA的文章

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