css常用属性之display属性 _css

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元素进行隐藏

文章插图
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，
这样既保留了宽高的效果，又使元素显示在一行