CSS盒模型简介

在html文档中的每一个盒子都可以看成由内到外的四个部分组成，即内容区（content）、内填充(padding)、边框(border)和外边距(margin)。见图片

css盒模型是网页布局的基石！盒模型，从里到外包括：

内容区 ——》鸡蛋
内填充——》泡沫
盒子边框——》快递盒子
外边距——》盒子外部的距离

        

蓝色的部分：content内容区就是就是盒模型的内容部分，通常显示文本和图像。

 

绿色的部分：padding是内容区和边框之间的空间，在盒子内部。它的作用是为了调整子元素在父元素里面的位置，并且会将盒子撑大。

                      给单一方向设置padding值用padding-right、padding-left、padding-top、padding-bottom这四种属性。

                      eg：padding-right:10px;     padding-left:20px; padding-top:20px; padding-top:20px;

                      单独padding属性的设置方法：

                                                                    padding:1个值 四周

                                                                    padding:2个值 上下 左右

                                                                    padding:3个值 上 左右 下
                                                                    padding:4个值 上 右下 左

                       eg：padding: 10px 10px 20px 15px;

                       注意：如果想让盒子保持原有大小，需要在宽高的基础上减掉padding值，如果一个盒子没有设置固定的宽和高，添加padding是不用减的。

                                  padding不能设置负值，padding不会对背景图造成影响。

 

黄色的部分：border（边框）是环绕内容区和内填充的边界。

                      边框的属性及属性值：

                                                       border-width: 10px;(设置变宽的宽度为10px)
                                                       border-style: solid;（设置变框为实线）【属性值:dashed虚线、dotted点状线、double 双线、none没有】
                                                       border-color: red;（设置边框的颜色）

                                                       以上简写：border:  10px solid red; 

                                                       如何给单一方向加边框
                                                                                           border-left:10px solid red;
                                                                                           border-right:10px solid red;
                                                                                           border-top:10px solid red;
                                                                                           border-bottom:10px solid red;

                                                        注意：border-width\border-style\border-color这三个属性每个最多能接受4个属性值

                                                                     1个属性值： 四周
                                                                     2个属性值： 上下 左右
                                                                     3个属性值： 上 左右 下
                                                                     4个属性值： 上右下左

橙色的部分：margin是长在元素之外的，位于盒子的最外围，是添加在边框外周围的空间。常用于控制同级元素之间的位置关系，使盒子之间不会紧凑地连接在一起。

                      给单一方向添加margin值  margin-left/right/bottom/top:;

                      eg：margin-right:10px;     margin-left:20px; margin-top:20px; margin-top:20px;

                     单独margin属性的设置方法：

                                                                 margin:1个值 四周
                                                                 margin:2个值 上下 左右
                                                                 margin:3个值 上 左右 下
                                                                 margin:4个值 上右下左

                     注意：margin不会对盒子本身的宽高造成影响；margin可以设置负值；margin:0 auto;  可以让当前元素在父元素里面左右居中。

                                margin常出现的BUG:
                                a：当父元素和第一个子元素都没有设置浮动的情况下，如果给第一个子元素添加margin-top 会错误的把margin-top加在父元素上面。
                                b: 上下相邻两个元素之间的margin值，不会叠加，按照最大值去设置。

 

 

 

 

by逆战班

以上就是我总结的css盒模型简介，如果对你有帮助麻烦点赞哦  ~~~笔芯♥