06-盒子模型的哪些东西

盒子里的那些东西

宽度、高度、内边距、外边距、以及边框圆角、边框阴影

1、盒模型

网页中排版布局的矩形块 ，内容，外边距，内边距，边框
内容：width/height
外边距：margin
内边距：padding
边框：border

​

2、盒模型计算规则

1. 在 CSS 中，width 和 height 指的是内容区域的宽度和高度
2. 增加内边距、边框和外边距不会影响内容区域的尺寸
3. 但会增加元素框的总尺寸

盒模型实际占页面的宽度
    left-margin + right-margin + left-padding + right-padding + left-border + right-border +width
    左右外边距 +  左右内边距 + 左右边框 + width
盒模型实际占页面的高度
    top-margin + bottom-margin + top-padding + bottom-padding + top-border + bottom-border +height
    上下外边距 + 上下内边距 + 上下边框 + height

3、盒模型应用

更改标签大小，标签和标签的距离，内容和标签的距离，内容在页面水平方向居中，可以给标签添加边框
合理布局，一框划分内外边;两盒之间margin;父子元素之间用padding ;所占空间四值全 

4、内容

宽度
    width
    min-width---最小宽度>=
    max-width---最大宽度<=
        px
        %
        auto
高度  
    height
    min-height--最小高度
    max-height--最大高度
        px
        %
        auto

5、边框

5.1基本属性

    border-width---边框宽度
    border-color---边框颜色
    border-style---边框的线型
        solid---实线
        dashed--虚线
        dotted---点线
        none---无

5.2 注意事项

    边框线型不可省略
    边框宽度默认为3px
    边框颜色默认为文字颜色

5.3 复合属性

    border：width color style;
    例如：
        border：1px solid red;

5.4 改变某一方向边框

    border-方向词：width color style；
        left---左
        right---右
        top---上
        bottom---下
    例如：
        border-bottom:1px solid red;

5.5 取消边框

        边框线型为none
            border:none；
        边框宽度为0
            border：0；

5.6 边框圆角

	如果圆角为圆形
        border-radius：50%

5.6.1 复合属性

    属性							值													
    border-radius：值1;			 值:四周											
    border-radius：值1 值2;		 值1：左上右下，值2:右上左下						
    border-radius：值1 值2 值3;	    值1：左上，值2: 右上左下，值3:右下				
    border-radius: 值1 值2 值3 值4; 顺时针方向:值1:左上,值2:右上，值3:右下，值4:左下	

5.6.1 精细操作—必须先上下，后左右

            属性	                    	    值
               
            border-top-left-radius	    	左上角
            border-top-right-radius			右上角
            border-bottom-left-radius		左下角
            border-bottom-right-radius		右下角
    

5.7 边框阴影

    box-shadow:水平 垂直 模糊程度 阴影大小 颜色 位置;
        h-shadow	必需的。水平阴影的位置。允许负值
        v-shadow	必需的。垂直阴影的位置。允许负值
        blur	    可选。模糊距离
        spread	    可选。阴影的大小
        color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
        inset	可选。从外层的阴影（开始时）改变阴影内侧阴影
    水平垂直不可省，顺序不可调换。数值越小，阴影越精致 

5.8 三角形

    width: 0;
    height: 0;
    /* border: 100px solid transparent; */
    border-left: 100px solid red;
    border-right: 60px solid orange;
    border-top: 160px solid paleturquoise;
    border-bottom: 120px solid orange;

6、内边距

padding：内容到边框之间的距离
响应顺时针方向：上右下左

6.1复合属性：

  	padding:值1 ;                  四周值相同
    padding:值1 值2;               值1：上下，值2：左右
    padding:值1 值2 值3;           值1：上，值2：左右,值3：下
    padding:值1 值2 值3 值4：值1上，值2右，值3：下,值4左；

6.2某一个方向

  padding-方向词：值;
        top-----上
        right---右
        bottom--下
        left----左

7、外边距

margin：元素与元素之间的居
        auto---自适应
        正整数---元素与元素拉开距离
        负整数---元素与元素拉近距
响应顺时针方向：上右下左

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-04Je2nkd-1670486233087)(03.png)]

7.1复合属性：

    margin:值1 ;                  四周值相同
    margin:值1 值2;               值1：上下，值2：左右
    margin:值1 值2 值3;           值1：上，值2：左右,值3：下
    margin:值1 值2 值3 值4：值1上，值2右，值3：下,值4左；

7.2 某一个方向

    margin-方向词：值;
        top-----上
        right---右
        bottom--下
        left----左

7.3 元素居中显示

    1. margin:0 auto;
    2. margin:auto;
    3.
        margin-left:auto;
        margin-right:auto;

7.4 外边距垂直合并

  	垂直方向，两个相邻盒子都设置外边距，外边距会发生合并
	合并后外边距高度=两个发生合并外边距的高度中最大值
	总结一句话：两值相等，取平均；两值不等，取最大。

to;
2. margin:auto;
3.
margin-left:auto;
margin-right:auto;

### 7.4 外边距垂直合并
      	垂直方向，两个相邻盒子都设置外边距，外边距会发生合并
    	合并后外边距高度=两个发生合并外边距的高度中最大值
    	总结一句话：两值相等，取平均；两值不等，取最大。

![在这里插入图片描述](https://img-blog.csdnimg.cn/be6832ba3380494ca5026b303d8a580e.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/432b40e4282e481a9383c128a05ebff3.png#pic_center)