盒子模型

布局标签 div&span

DIV

一行只显示一个，

宽度默认是父元素的宽度, 高度默认由内容撑开,

可以设置宽高

设置div的CSS样式

<style>
    div{
        width: 200px;
        height: 200px;
        box-sizing: border-box; /* 指定width height 为盒子的宽高 */
        background-color: aquamarine; 
        padding: 20px 20px 20px 20px; /* 内边距, 上右下左*/
        border: 10px solid red;     /* 边框, 宽度 线条类型 颜色*/
        /* 盒子不包括外边距margin */
        margin: 30px; /* 外边距, 上右下左*/  /* 如果上右下左边距是一样的,可以简写 */
    }
</style>

设置居中的CSS样式

<style>
    /* 居中 */
    #center{
    width: 65%;
    height: 65%;
    /* 设置外边距,使居中对齐 */
    /* 上右下左  */
    /* margin: 0% 17.5% 0% 17.5%; */
    /* 简化写法 */
    margin: 0 auto;
</style>

div

<!-- div标签 -->
<div id="center">
    CONTENT
</div>

Span

一行可以显示多个

宽度和高度默认由内容撑开

不可以设置宽高

F12查看