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、微信运营的品牌整合营销服务让客户通过网络品牌建立与网络传播提高业绩。