css的显示模式
目录
css的显示模式
CSS的显示模式：
**html中一共有三种显示模式
- 块级元素：独占一行，**
默认宽度为父元素的100%**, 可以设置宽高
例如
div,p,ul,ol,li,h1-h6
2、行内元素：不独占一行，**
默认宽度为内容的宽度
**，
不能设置宽高
例如
span,a,strong,em,i
3、行内块元素：不独占一行， 可以设置宽高
例如
img,input,textarea,select,button**
设置CSS样式中的display可以改变当前的HTML标签的显示模式
/* display：设置显示模式 */
/* display: none; 相当于隐藏 */
/* display: block; 相当于设置块级元素 */
/* display: inline; 相当于设置行内元素 */
/* display: inline-block; 相当于设置行内块元素 */
样例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示模式</title>
<!-- 显示模式
html中一共有三种显示模式
1. 块级元素：独占一行，默认宽度为父元素的100%,可以设置宽高
例如div,p,ul,ol,li,h1-h6
2、行内元素：不独占一行，默认宽度为内容的宽度，不能设置宽高
例如span,a,strong,em,i
3、行内块元素：不独占一行，可以设置宽高
例如img,input,textarea,select,button
-->
<style>
div{
background-color: red;
width: 100px;
height: 100px;
/* display：设置显示模式 */
/* display: none; 相当于隐藏 */
/* display: block; 相当于设置块级元素 */
/* display: inline; 相当于设置行内元素 */
/* display: inline-block; 相当于设置行内块元素 */
}
span{
background-color: blue;
}
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- 1.块级元素 -->
div前
<div>div</div>
div后
<br><br>
<!-- 2.行内元素 -->
span前
<span>span</span>
span后
<br><br>
<!-- 3.行内块元素 -->
img前
<img src="../img/1.jpg" alt="">
img后
</body>
</html>