盒子模型

最新推荐文章于 2024-08-03 09:43:52 发布

yangwensheng1122

最新推荐文章于 2024-08-03 09:43:52 发布

阅读量288

点赞数

本文链接：https://blog.csdn.net/yangwensheng1122/article/details/75168776

版权

盒子模型

margin：外边距

margin-top 、margin-right、margin-bottom 、margin-left

使用方式

（1）margin：30px；表示上下左右外边距都为30px；

（2）margin-left：30px；单独设置上下左右外边距

（3）margin- ：10px 20px30px 40px；分别设置上下左右四个边距为10px 20px 30px 40px

padding：内边距

也有上下左右边距，和margin类似。

Border：边框

Border-width：边框宽度；

Border-style：边框线条类型

Border-color：边框额颜色

Word中设置边框的操作

也可以使用更优化的书写方式

Border：10px dashed blue

Outline：轮廓线，用法同border

定位

定位方式有：static静态的、fixed固定的、relative相对的、absolute绝对的。

Static静态定位（默认）

无定位，元素正常出现了流中，不受left、right、top、bottom属性影响。

#div1{
            width: 200px;
            height: 200px;
            background-color: red;
            /*left:500px;
            position: fixed;*/
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

    </style>
</head>
<body>
        <div id="div1"></div>
      <div id="div2"></div>

     #div1{
            width: 200px;
            height: 200px;
            background-color: red;
            left:30px;
            top: 20px;
            position: fixed;
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

    </style>
</head>
<body>
        <div id="div1"></div>
      <div id="div2"></div>