标准盒模型 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第4天

一、标准盒模型是什么

盒模型：HTML中所有元素都可以看成为一个盒子，称为盒模型

标准盒模型是由:内容(content),内边距(padding),边框(border),外边距(margin)组成。

二、标准盒模型的组成

1）组成部分

content+padding+border+margin

内容区域 内边距 边框 外边距

玻璃杯 泡沫 快递盒 两个快递盒之间的距离

可以看到如下图片。

2）content 内容区域

width：； 元素的宽度
height：； 元素的高度
min-width：；最小宽度
max-width：；最大宽度
min-height：；最小高度
max-height：；最大高度

块级元素默认宽度为100%，行内元素默认宽度由内容撑开 块级元素和行内元素的高度默认都由内容撑开

块级元素可以设置宽高，行内元素设置宽高不生效

%:相对于父元素

3）border 边框

border-style:solid（实线）｜dashed（虚线）｜dotted（点线）｜double（双实线）｜none（不显示）;  必须属性  边框的样式
默认为3px  黑色
border-color：；   边框的颜色
border-width:;    边框的宽度

简写： border： width style color ； 设置四周边框

 border-top:width style color;
     border-top-width:;
     border-top-style:;
     border-top-color:;
 border-bottom:width style color;
     border-bottom-width:;
     border-bottom-style:;
     border-bottom-color:;
 border-left:width style color;
     border-left-width:;
     border-left-style:;
     border-left-color:;
 border-right:width style color;
     border-right-width:;
     border-right-style:;
     border-right-color:;

4）padding 内边距 不能取负值和auto

    设置内容距边距的距离
    padding：value；四周
    padding：value value； 上下  左右
    padding：value value  value； 上 左右  下
    padding：value value  value value； 上 右  下  左

    padding-top:;
    padding-right:;
    padding-bottom:;
    padding-left:;

    ⚠️ padding会撑大容器

5)margin 外边距 可以取正负和auto 设置元素之间的距离 外边距是透明的

     margin：value；四周
     margin：value value； 上下  左右
     margin：value value  value； 上 左右  下
     margin：value value  value value； 上 右  下  左

     margin-top:;
     margin-right:;
     margin-bottom:;
     margin-left:;

三、标准盒的应用

应用： 1⃣️块级元素水平居中 margin: 0 auto; 原理：（2父元素的宽度-子元素的宽度）/2

⚠️ 有背景颜色 用padding ⚠️没有背景颜色用margin