CSS display屬性學習

時間 2019-11-19

標籤 css display 屬性學習欄目 CSS 简体版

原文原文鏈接

---恢復內容開始---css

http://www.w3school.com.cn/cssref/pr_class_display.asphtml

全部主流瀏覽器都支持 display 屬性，如IE，Firefox，Chrome，Safari，Opera；canvas

若是規定了 !DOCTYPE，則 Internet Explorer 8 （以及更高版本）支持屬性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。瀏覽器

display 屬性規定元素應該生成的框的類型。ide

css語法 display:value;spa

js語法 Object.style.display=value；ssr

可能的值code

部分屬性詳解：orm

1. blockhtm

特色：1）獨佔一行；

2）元素的高度，寬度，行高以及頂和底邊距都可設置；

3）不設置寬度時，寬度撐滿一行；

塊級元素有：<div> , <p> , <h1> .. <h6> , <ol> , <ul> , <dl> , <table> , <address> , <blockquote> , <form> , <article> , <header> , <footer> , <nav> , <section> , <html> , <body> 等；

不支持樣式：vertical-align；

2. inline

特色：1）和其餘元素在一行；

2）內容撐開寬度，即元素的寬度就是它包含的文字或圖片的寬度，不可改變；

3）寬高不可設置；

4）代碼換行被解析成空格；

內聯元素有：<a> , <span> , <br> , <i> , <em> , <strong> , <label> , <q> , <var> , <cite> , <code> , <area> , <del> , <label> , <map> , <mark> , <output> , <pre> 等；

不支持樣式：background-position ；clear ；clip ；height | max-height | min-height ；width | max-width | min-width ；overflow ；text-align ；text-indent ；text-overflow；

3. inline-block

特色：1）不設置寬高時，內容撐開高度；

2）非獨佔一行；

3）可設置寬高；

4）代碼換行被解析成空格；

標籤：<audio> ，<button>，<canvas>，<embed>，<iframe>，<img>，<input>，<keygen>，<meter>，<object>，<progress>，<select>，<textarea>，<video>

不支持樣式：clear ;

4. none

特色：隱藏元素並脫離文檔流；

標籤：<base>，<link>，<meta>，<title>，<datalist>，<dialog>，<param>，<script>，<source>，<style>

5. list-item

特色：1）不設寬度時，寬度撐滿一行；