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: 使元素變成行內元素，擁有行內元素的特性，它會隨著文檔的文字流動， 不獨占一行，不能設置寬高，大小由內容撐開
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: 使元素變成塊級元素，獨占一行，可以設置寬高，默認填滿父級的寬度。
html部分
<span> spanspanspan </span>
css部分
span{
width: 100px;
height: 50px;
display: block;
background-color: green;
}
inline-block： 使元素變成行內塊元素，可以設置寬高，就是不獨占一行的塊級元素。
例子
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;
}
遠近互聯前端小王整理發布，希望能對學習技術的你有所幫助
遠近互聯專業提供網站建設、APP開發、網站優化、外貿網站SEO、微信運營的品牌整合營銷服務讓客戶通過網絡品牌建立與網絡傳播提高業績。
