CSS盒子模型

南方以南_

已于 2022-11-04 16:31:48 修改

阅读量96

点赞数

分类专栏：前端文章标签： css css3 html

于 2022-10-30 14:05:51 首次发布

本文链接：https://blog.csdn.net/weixin_43366437/article/details/127595628

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

盒子模型

1盒模型=盒子模型=框模型
css将页面所有元素都设置为一个矩形盒子
将元素设置为矩形后，对页面的布局变成了将不同盒子摆到对应位置。
2盒子模型的组成
盒子内部：
内容区content
内边距padding
边框border,盒子边缘（属于盒子内部）
外边距（盒子外部）margin
3边框参数：
border-width:10px;
border-color:red;
border-style:solid；//solid实线，dotted点状虚线，dashed虚线，double双线，none

<!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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* 内容区 大小，颜色 */

            /* 边框参数：边框宽度border-width,边框颜色border-color,边框样式：border-style */

            border-width: 10px;
            border-color: blueviolet;
            border-style: solid;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box3{
            border: 10px red solid;
            border-right: none;
        }
        .box2{
            border-top:10px yellow double;
            border-right: 20px blue dashed;
            border-left: 20px red solid;
            border-bottom: 30px green dashed;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: aquamarine;


            border-width: 10px 20px 30px 40px;
            border-color: blue;
            border-style: none;
            

        }
    </style>
</head>
<body>
    <div class="box1">this is div</div>
    <div class="box2">this is div</div>
    <div class="box3">this is div</div>
</body>
</html>

4内边距padding
内容区和边框之间的距离是内边距
总共有四个方向的内边距
padding-top
padding-right
padding-bottom
padding-left

5外边距margin
外边距影响盒子位置
四个方向外边距：margin-top,margin-right,margin-bottom,margin-left
margin-top:上边距设置一个正值则，元素会向下移动。
margin-right:默认情况设置政治不会产生影响
margin-bottom:下边距，设置正值，下面的元素会向下移动
margin-left:左边距，设置一个正值元素向右移动、