盒子模型（重要！！）

2023-01-16 本文已影响0人 Tn299

个人认为这是css中最重要的知识，必须巩固巩固再巩固！！

总定义

image.png
图像：

image.png

内容区

image.png

对元素设置的width和height都是对盒子内容的大小设置

边框

image.png

边框+内容的大小=整个盒子的大小

image.png

border-color(边框颜色)属性设置

image.png

border-width（边框的粗细）常用属性值

(1) .thin:细
(2) .medium：默认值
(3) .thick：精
(4) .像素值

border-style（边框类型）的常用属性值

(1) .none
(2) .hidden
(3) .dotted
(4) .dashed
(5) .solid
(6) .double

border简写（常用）

同时设置边框的颜色、粗细和样式
注意：这三个属性没有先后顺序，建议的顺序：粗细、颜色和样式

例：border：#000 10px solid；

以下四个属性也可以简写

image.png

例：只单独去掉右边的边框

image.png

内边距（padding）

表示边框和内容之间的距离

 <title>111</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px red solid;
            padding-top: 50px;
        }
        .inner{
            width: 100%;
            height: 100%;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="inner"></div>
    </div>
</body>

效果图如下：

image.png

1.inner的效果为将父元素box1的内容区充满，颜色为蓝色，粉色区域为内边距，也就是边框和内容区之间的区域。

2.一个盒子的可见大小=内容区+内边距+边框！！！

3.padding同时指定四个方向的内边距规则和border属性一样。

外边距（margin）

image.png

margin的左边和上边是移动自身，右边和下边是使自己和别的对象保持距离。margin的赋值规则和border一样。

水平方向的布局

image.png

意思就是说子元素的长宽是由外边距、边框、内边距、内容组合起来的，加起来必须等于父元素的长宽。如果等式不成立就是过度约束，等式会自动调整。如果其他的值都是默认的情况下，就自动调节外边距，右边或者下面（我国的书写习惯是自左向右）
一般来说，过度约束都会去调节margin-right，所以平时也不用过多调节margin-right，因为浏览器会自动调节。如果相加的数值大于父元素，那么margin-right为负值。