css的display屬性的作用的生成元素框的類型
<span id="sp1">望天門山</span>
<span id="sp2">天門中斷楚江開</span>
<span id="sp3">碧水東流至此回</span>
<span>兩岸青山相對出</span>
<span>孤帆一片日邊來</span>
未做任何css樣式設置的span文本
塊級元素
可以設置元素的寬高和邊距，元素會自動換行
行內(nèi)元素
不可以設置元素的寬高和邊距，元素不會自動換行
行內(nèi)塊級元素
可以設置元素的寬高和邊距，元素不會自動換行
1、
#sp2{display: none;}
將id為sp2的span元素進行隱藏
id為sp2的文本 天門中斷楚江開 被隱藏了
2、
#sp2{display: block;}
將id為sp2的span元素顯示，并變成了塊級元素，前后自動換行
id為sp2的元素顯示，且變成塊級元素，前后自動換行
3、
#sp2{
display: block;
width: 120px;
height: 45px;
background: rgb(101, 79, 223);}
將id為sp2的span元素變成塊級元素后，并進行寬高的設置
id為sp2的元素變成了塊級元素后，可以進行寬高的設置
----------------------------------------------------------------------------------------
<div id="d1">div1</div>
<div id="d2">div2</div>
<div id="d3">div3</div>
div塊級元素，未做任何樣式設置的
1、為塊級元素div添加背景色：
#d1{background: rgb(150, 61, 128);}
#d2{background: rgb(55, 194, 194);}
#d3{background: rgba(49, 9, 112, 0.356);}
為了演示，分別給3個div元素加入了背景顏色
2、利用display屬性，將所有div元素設置成了行內(nèi)元素
div{display: inline;}
利用display屬性，將所有div元素設置成了行內(nèi)元素
--------------------------------------------------------------------------------
<p>文本1</p>
<p>文本2</p>
1、為p元素添加背景色和設置寬高
p{background: rgb(255, 39, 147);
width: 200px;
height: 200px;
display: inline-block;}
p元素屬于塊級元素，會自動換行，利用display: inline-block，
這樣既保留了寬高的效果，又使元素顯示在一行
既保留了寬高的效果，又使元素顯示在一行
