<返回更多

css常用属性之display属性

2022-05-06    秋霜染林醉
加入收藏

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

 

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

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

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

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

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

 

css常用属性之display属性

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

块级元素

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

行内元素

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

行内块级元素

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

1、

#sp2{display: none;}

将id为sp2的span元素进行隐藏

css常用属性之display属性

id为sp2的文本 天门中断楚江开 被隐藏了

2、

#sp2{display: block;}

将id为sp2的span元素显示,并变成了块级元素,前后自动换行

css常用属性之display属性

id为sp2的元素显示,且变成块级元素,前后自动换行

3、

#sp2{

display: block;

width: 120px;

height: 45px;

background: rgb(101, 79, 223);}

将id为sp2的span元素变成块级元素后,并进行宽高的设置

css常用属性之display属性

id为sp2的元素变成了块级元素后,可以进行宽高的设置

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

<div id="d1">div1</div>

<div id="d2">div2</div>

<div id="d3">div3</div>

css常用属性之display属性

div块级元素,未做任何样式设置的

1、为块级元素div添加背景色:

#d1{background: rgb(150, 61, 128);}

#d2{background: rgb(55, 194, 194);}

#d3{background: rgba(49, 9, 112, 0.356);}

css常用属性之display属性

为了演示,分别给3个div元素加入了背景颜色

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

div{display: inline;}

css常用属性之display属性

利用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,

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

css常用属性之display属性

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

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>