新手來簡單學習CSS的display屬性

來源:互聯網
上載者:User
css

  操作HTML元素的訣竅在於明白它們工作的方法在於沒有特定的形式。一些由標籤組成的大部分頁面可以設定任何樣式。瀏覽器預設的樣式裡的大部分html元素由字型樣式、margin,padding組成,本質上是顯示類型。

  display屬性基本上分為inline,block,和none。

  inline就像它的本意——顯示為inline的元素為行。strong,anchor錨和em強調元素預設是行。
  block元素前後換行。標題和段落元素是塊元素。

  none,意思不顯示元素,在可用性上可以實現漂亮的效果,交替樣式或hover效果的進階運用。

  設定表現可以更好運用在網頁製作上。

h1 {
    display: inline;
    font-size: 2em;
}
#header p {
    display: inline;
    font-size: 0.9em;
    padding-left: 2em;
}

  設定標題h1為行元素,可以和後面的元素在同一行。

#navigation, #seeAlso, #comments, #standards {
    display: none;
}

  上面的代碼可以使用在列印樣式裡,比如在導航使用,可以在列印時不顯示導航這些無關緊要的東西。

  display:none和visibility:hidden;的不同在於display:none完全取消元素的顯示,visibility:hidden保持元素位置但視覺上的內容不可見。例如,如果3的第二段設定為display:none,第一段將僅跟在第三段,如果設定為visibility:hidden,段落間就會空出。

  表格

  明白表格相關的表現屬性值最好的方法想象html表格。table是最初的表現,你可以使用table-row類比table-cell類比td。

  display屬性更進一步,可以通過使用table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption。現在可以直接使用columns構建表格,比在html中使用行構建快速。

  最後,inline-table設定表格前後不換行。

  使用CSS表格會嚴重損害可用性。HTML應該用來傳遞語意,所以如果你有表格式資料,那可以使用HTML表格。使用CSS表格僅僅會產生糟糕的資料如果沒有CSS資料將不可讀。

  其他表現形式

  list-item清單項目,就像期待HTML裡的li元素。它們需要嵌套在元素裡面顯示。

  run-in元素的表現形式由它的父元素決定。IE和Mozilla都不支援。

  compat根據上下阿文決定表現形式,同樣IE和Mozilla都不支援。

  maker僅僅使用在:before和:after虛擬元素,設定content屬性的表現。content屬性預設表現就是maker,所以它只有在覆蓋原來屬性時才有用。

  content屬性,它的預設就是maker,所以只有在覆蓋原來屬性時使用。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。