這篇文章主要介紹了css和html布局之display屬性有什么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
1.HTML元素分類
HTML元素大題可分為內(nèi)聯(lián)(inline)元素和塊(block)元素。
內(nèi)聯(lián)元素(inline)
①元素顯示方式："文本方式"，1個(gè)挨著1個(gè)，不獨(dú)自占有1行；
②內(nèi)嵌的元素也必須是內(nèi)聯(lián)元素：如,不能在里面嵌入
等塊級(jí)元素；③包含的標(biāo)簽有：、、
塊元素(block)
①元素顯示方式：每個(gè)元素獨(dú)自占有1行，相當(dāng)于前后都帶有換行符；
②內(nèi)嵌的元素可以是內(nèi)聯(lián)或塊級(jí)元素；
③包含的元素有：
2. HTML 元素布局展示
默認(rèn)展示(未添加width和height屬性)
①HTML元素在瀏覽器展示的方式是：從上到下，從左到右。
②內(nèi)聯(lián)元素，是根據(jù)瀏覽器的寬度及自身的width寬度來(lái)填充。若當(dāng)前行剩余空白區(qū)域不夠，就會(huì)換至下一行。
③塊級(jí)元素，根據(jù)內(nèi)聯(lián)元素的展示方式展示大概區(qū)域；當(dāng)瀏覽器的寬度減少時(shí)，會(huì)自動(dòng)擴(kuò)充塊級(jí)元素的height屬性的值，以容納內(nèi)嵌元素的展示。
展示頁(yè)面
增加了width屬性的展示
塊級(jí)元素(div)增加了width屬性
結(jié)論
①當(dāng)塊級(jí)元素沒(méi)設(shè)置width屬性時(shí)，瀏覽器寬度的變更，會(huì)壓縮塊元素內(nèi)嵌元素的排版。
②設(shè)置塊級(jí)元素的width屬性時(shí)，瀏覽器的width屬性值變更，不會(huì)影響到塊級(jí)元素里的內(nèi)嵌元素的布局，他們(內(nèi)嵌元素)受父級(jí)塊級(jí)元素的影響。
適用范圍：導(dǎo)航條(導(dǎo)航條里有多個(gè)a標(biāo)簽，可放在一個(gè)div里，并給div附加width屬性；以免瀏覽器縮小，造成導(dǎo)航排版亂掉)；
CSS display屬性
主要的值
1) none ：此元素不被顯示；
2) block ：此元素按塊級(jí)元素顯示：前后帶換行符，自己占一行。內(nèi)聯(lián)元素 → 塊元素
3) inline ：此元素按內(nèi)聯(lián)元素顯示：1個(gè)挨著1個(gè)。塊元素 → 內(nèi)聯(lián)元素
display:block 演示
input3 設(shè)為了display:block
display:inline
div 設(shè)為了display:inline
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css和html布局之display屬性有什么用”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
重慶分公司
重慶分公司
