CSS元素显示方式解析-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_37302495/article/details/72689871

、元素的四种显示方式

1、隐藏
2、块级元素

典型代表: div ,p, h,ul....
特点:
独自占据一行
可以设置有效宽高
当发生嵌套的时候,如果没有给子元素设置宽高,子元素的宽度和父元素一样宽

<style type="text/css">
div{
width: 300px;
height: 200px;
border: 1px red solid;
}
p{
background-color: gray;
}
</style>
</head>
<body>
<div>div元素<p>段落元素</p></div>
</body>

3、行内元素
代表: span, em,a,strong....
特点:

多个元素在一行内显示

无法设置有效宽高

宽度由容器里的内容决定
例如：
<style type="text/css">
span,a{
width: 300px;
height: 200px;
border: 1px red solid;
}
</style>
</head>
<body>
<span>span标签</span>
<a href="#">百度</a>
</body>

4、行内块元素
代表:input,img...

特点:

多个行内块在一行上显示

可以设置有效宽高

<style type="text/css">
input,img{
width: 300px;
height: 200px;
border: 1px red solid;
vertical-align:middle;
}
input{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<input type="button" value="保存">
<img src="hbsi.png">
</body>