元素显示模式

块级元素

属性:display:block

  • 显示特点:
  1. 独占一行(一行只能显示一个)
  2. 宽度默认是父元素的宽度,高度默认由内容撑开
  3. 可以设置宽高
  4. 元素之间可能存在缝隙
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: saddlebrown;
        }
        p{

            background-color: silver;
        }
    </style>
</head>
<body>
    <!-- 又拍云开始 -->
    <!-- <span style="height: 10px; height: 5px;">
        <a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="_blank" rel="nofollow">
            <img src="https://photo.z4k.cn/202109152210515.png"  style=" transform:scaleX(0.5) scaleY(0.5) ;"></a>
        </span>
            <!-- 又拍云结束 -->    -->
            <div>
                <p>15155</p>
            </div>

</span>
</body>
</html>
enter description here
属性效果使用频率
display:block转换成块级元素较多
display:inline-block转换成行内块元素较多
display:inline转换成行内元素较少
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
span{
    width: 100px;
    height: 30px;
    background-color: skyblue;
    display: block;
}
    </style>
</head>
<body>
<span></span>
<span></span>        
<span></span>
<span></span>
<span></span>
</span>
</body>
</html>
enter description here
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
span{
    width: 100px;
    height: 30px;
    background-color: skyblue;
    display: inline-block;
}
    </style>
</head>
<body>
<span></span>
<span></span>        
<span></span>
<span></span>
<span></span>
</span>
</body>
</html>
enter description here

嵌套方式注意点

  1. p标签中不要嵌套div、p、h等块级元素
  2. a标签不能签到a标签
enter description here
© 版权声明
THE END
喜欢就支持一下吧
点赞9赞赏 分享
评论 抢沙发

请登录后发表评论