css常用属性之display属性

css的display属性的作用的生成元素框的类型

 

<span id="sp1">望天门山</span>

<span id="sp2">天门中断楚江开</span>

<span id="sp3">碧水东流至此回</span>

<span>两岸青山相对出</span>

<span>孤帆一片日边来</span>

 

未做任何css样式设置的span文本

块级元素

可以设置元素的宽高和边距，元素会自动换行

行内元素

不可以设置元素的宽高和边距，元素不会自动换行

行内块级元素

可以设置元素的宽高和边距，元素不会自动换行

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元素设置成了行内元素

div{display: inline;}

利用display属性，将所有div元素设置成了行内元素

--------------------------------------------------------------------------------

<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，

这样既保留了宽高的效果，又使元素显示在一行

既保留了宽高的效果，又使元素显示在一行