当前位置：首页 > article >正文

css的显示模式

article 2025/3/18 19:30:25

CSS的显示模式：

html中一共有三种显示模式
1. 块级元素：独占一行，~~默认宽度为父元素的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>