HTML之基本布局div|span

HTML基本布局使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>布局</title>
</head>
<body style="background-color: rgb(29, 115, 115);">
    <!--
        css 设置样式
            通过元素的style属性进行设置
            style="样式名:样式值;样式名:样式值;... ..."

       块元素 自己独占一行 块元素的CSS样式的宽 高等等 往往都是生效的
        div:将页面分割成一块一块的，与table相比的话，灵活很多，可以任意设置块

       行内元素 不会自己独占一行的元素 行内的CSS样式的宽 高等等 很多就是不生效的
        span：
    -->
    <div style="border: 1px solid red;height: 200px;width: 300px;margin: 10px auto;"><!--margin 上下外边距0（像素级边界） 左右外边距自动（即居中）-->
        123
    </div>
    <div style="border: 1px solid red;height: 200px;width: 300px;margin: 10px auto;"><!--margin 上下外边距0 左右外边距自动（即居中）-->
        123
    </div>
    <div style="border: 1px solid red;height: 200px;width: 300px;margin: 10px auto;"><!--margin 上下外边距0 左右外边距自动（即居中）-->
        123
    </div>
    <span style="border: 1px solid rgb(217, 29, 12); width: 400px; height: 200px;"><!--设置宽高不生效，常用于 结合CSS设置CSS效果的范围-->
        <span style="font-size: 30px; color: black;font-weight: bold;">3</span>21
    </span>
</body>
</html>