码迷,mamicode.com
首页 > Web开发 > 详细

CSS盒模型

时间:2020-03-29 23:59:16      阅读:68      评论:0      收藏:0      [点我收藏+]

标签:位置   特点   外包   填充   左右   距离   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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!