盒子模型（自己的学习分享）

盒子模型（自己的学习分享）

一、盒子模型

        一个页面上所有元素（标签）都存在自己的一个盒子模型。

        盒子模型由4个部分组成：

                content：内容主体

                padding：内容主体到边框的距离——内边距

                border：盒子的边框

                margin：外边框到其他标签的距离——外边距

二、边框border

        1.修改顺序：

                针对一个方向修改：border-top/right/bottom/left: ;

                border：；

                只有一个值是同时修改四个方位

                两个值是修改上下和左右的值

                三个值是修改上、下和左右的值

                四个值是修改上、右、下、左的值（顺时针）

        2.边框宽度：

                thin——>细

                medium——>中等

                thick——>粗

                当然，也可以用像素值更精确地修改宽度

        3.样式：

                none——>无样式（值清空）

                hidden——>看不到（值清空）

                dotted——>正方形小点

                dashed——>长方形小点

                solid——>实线

                double——>空心线

        4.简写语法：

                border: 颜色 样式 边框宽度

三、外边距margin

        margin设置属性和值地逻辑与border的相同。

        当设置左右位置时，写入auto会自动居中对齐，若想自动居中，则需要满足：块元素；固定宽度。

四、内边距padding

        padding设置属性和值的逻辑也与border相同

五、计算一个标签具体占页面的位置

        如图所示：中间147×30是内容的位置，

        而所占宽度就为：

                左外边距+左边框宽度+左内边距+内容宽度+右外边距+右边框宽度+右内边距

        所占高度为：

                上外边距+上边框宽度+上内边距+内容高度+下外边距+下边框宽度+下内边距

六、盒子尺寸box-sizing

        inherit：继承父标签对应值。

        如果box-sizing：content-box；，内容宽度为设定的width的值；如果box-sizing：border-box；内容宽度就为width的值减去内边距和边框的值。

七、弧度

        语法：border-radius: px px px px;

        弧度写一个值，是同时修改四个角度

        弧度写四个值，是修改↖、↗、↘、↙，按照顺时针顺序，从左上角开始

        想要做一个圆形，需要保证宽高相同

        半圆则根据情况来定，宽为高的一半或者高为宽的一半。

八、盒子阴影

        语法：box-shadow:inset x-offset y-offset blur-raduis color;

        第一个参数为阴影的类型

        第二个参数为阴影的x轴扩展距离

        第三个参数为阴影的y轴扩展距离

        第四个参数为阴影的模糊距离

        第五个参数为阴影的颜色