CSS盒模型

标签：位置   特点   外包   填充   左右   距离   top   基础   出现   

css盒模型：
                   是网页布局的基石 盒模型，从里到外包括：
                                                                                        ①、内容区————鸡蛋
                                                                                        ②、内填充(补白)——泡沫
                                                                                        ③、盒子边框(可选)——快递盒子
                                                                                        ④、外边距——————盒子外部的距离
1、padding：
                    padding的用法：
                                              ①、padding是长在内容和盒子之间的，在盒子内部
                                              ②、padding是为了调整 子元素 在 父元素里面位置关系
                                              ③、padding的特点：padding值会把盒子撑大
                                              ④、如果想让盒子保持原有大小，需要在宽高的基础上减掉padding值
                                              ⑤、给单一方向设置padding值：
                                                                                                 padding-left/right/top/bottom:;
                                              ⑥、padding 设置方法：
                                                                                    padding为1个值 四周
                                                                                    padding为2个值 上下 左右
                                                                                    padding为3个值 上 左右 下
                                                                                    padding为4个值 上右下左
                                              ⑦、padding不能设置负值
                                              ⑧、padding不会对背景图造成影响
                                              ⑨、如果一个盒子没有设置固定的宽和高，添加padding是不用减的
2、margin：
                   margin的用法：
                                           ①、margin长在元素之外的
                                           ②、margin控制的是 同级元素 之间的位置关系
                                           ③、margin不会对盒子本身的宽高造成影响
                                           ④、给单一方向添加margin值：
                                                                                            margin-left/right/bottom/top:;

                                           ⑤、margin的设置方法：
                                                                                  margin:1个值 四周
                                                                                  margin:2个值 上下 左右
                                                                                  margin:3个值 上 左右 下
                                                                                  margin:4个值 上右下左
                                           ⑥、margin可以设置负值
                                           ⑦、margin常出现的BUG:
                                                                                     ①、当父元素和第一个子元素都没有设置浮动的情况下，如果给第一个子元素添加margin-top 会错误的把margin-top加在父元素上面
                                                                                     ②、上下相邻两个元素之间的margin值，不会叠加，按照最大值去设置
                                           ⑧、margin:0 auto; 让当前元素在父元素里面左右居中

padding是子元素与父元素之间，margin是子元素与子元素之间，当然也可以子元素和父元素之间用，这个要看情况。

CSS盒模型

标签：位置   特点   外包   填充   左右   距离   top   基础   出现   

原文地址：https://www.cnblogs.com/xiaoxuehtml/p/12595896.html