掌握CSS元素显示模式，轻松实现页面布局控制

发表时间: 2024-06-28 11:13

一、块元素显示规律

切记：P标签里不能有DIV标签

二、行内元素显示规律

三、行内块元素显示规律

小总结：

四、元素显示模式转换

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        a {            width: 200px;            height: 30px;            background-color: #1313e5;            display: block;            text-align: center;            text-decoration: none;        }        div {            width: 300px;            height: 100px;            background-color: #95da14;            display: inline;        }        span {            width: 100px;            height: 100px;            background-color: #c30b0b;            display: inline-block;        }    </style></head><body>    <a href="#">金星姐姐</a>    <a href="#">金星叔叔</a>    <div>和是</div>    <div>你是</div>    <span>行内元素转换为行内块元素</span>    <span>行内元素转换为行内块元素</span></body></html>

掌握CSS元素显示模式，轻松实现页面布局控制

热门阅读

推荐阅读