css3 display的常用屬性
none: 元素隱藏，但依然存在。
例子
html部分
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
css部分
.box1{
width: 100px;
height: 50px;
background-color: #ffff00;
}
.box2{
width: 120px;
height: 70px;
background-color: cyan;
display: none;
}
.box3{
width: 150px;
height: 90px;
background-color: red;
}
inline: 使元素變成行內(nèi)元素，擁有行內(nèi)元素的特性，它會隨著文檔的文字流動， 不獨(dú)占一行，不能設(shè)置寬高，大小由內(nèi)容撐開
html部分
<div class="box1"> div </div>
<div class="box2"></div>
<div class="box3"></div>
css部分
.box1{
width: 100px;
height: 50px;
background-color: #ffff00;
display: inline;
}
.box2{
width: 120px;
height: 70px;
background-color: cyan;
display: none;
}
.box3{
width: 150px;
height: 90px;
background-color: red;
}
block: 使元素變成塊級元素，獨(dú)占一行，可以設(shè)置寬高，默認(rèn)填滿父級的寬度。
html部分
<span> spanspanspan </span>
css部分
span{
width: 100px;
height: 50px;
display: block;
background-color: green;
}
inline-block： 使元素變成行內(nèi)塊元素，可以設(shè)置寬高，就是不獨(dú)占一行的塊級元素。
例子
html部分
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
css部分
.box1{
width: 100px;
height: 50px;
background-color: #ffff00;
display: inline-block;
}
.box2{
width: 120px;
height: 70px;
background-color: cyan;
display: inline-block;
}
.box3{
width: 150px;
height: 90px;
background-color: red;
display: inline-block;
}
遠(yuǎn)近互聯(lián)前端小王整理發(fā)布，希望能對學(xué)習(xí)技術(shù)的你有所幫助
遠(yuǎn)近互聯(lián)專業(yè)提供網(wǎng)站建設(shè)、APP開發(fā)、網(wǎng)站優(yōu)化、外貿(mào)網(wǎng)站SEO、微信運(yùn)營的品牌整合營銷服務(wù)讓客戶通過網(wǎng)絡(luò)品牌建立與網(wǎng)絡(luò)傳播提高業(yè)績。
