盒子模型

最新推荐文章于 2020-06-27 16:53:11 发布

吴莉

最新推荐文章于 2020-06-27 16:53:11 发布

阅读量170

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/kgcwuli/article/details/102745836

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一.什么是盒子模型
我们在刚开始接触CSS的时候总是被margin和padding闹的晕头转向，什么时候设置margin，什么时候设置padding，不是太清楚，设置了以后在界面上看到的效果也差不多呀。

如何理解margin与padding呀，我们首先可以想象一下我们手里拿了一个钻戒要向女朋友求婚，一般求婚的时候钻戒都是在盒子里放着呢，我们要有盒子的概念，钻戒一般都放在盒子的中央，没有哪家的钻戒是把盒子占的满满的，我们的钻戒就放在盒子的中央，占了很小的一块面积，其它的地方都是有填充物的，我们可以把这个填充物简单的理解为padding也就是钻戒距离盒子内边缘的距离，这时候我们想把钻戒放在桌子上，放在桌子的什么位置呢，左上角，右上角，还是中间，我们姑且把他放在中间把，那么我们这个钻戒盒子距离桌子边缘的距离就是margin，那么很简单我们那个钻戒的盒子就是我们所说的border。

在这里插入图片描述
margin属性可以为给定元素设置所有四个（上下左右）方向的外边距属性。四个外边距属性设置分别是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外边距允许为负数。

1、指定一个值时该值指定四个边到父内边距的距离

margin: 100px;

2、指定两个值时第一个值指定上下第二个指定左右

margin: 100px 20px;

3、指定三个值时第一个指定上边、第二个指定左右两边、第三个指定下边
margin: 100px 20px 10px;

4、指定四个值时分别为上右下左（顺时针顺序）

margin: 100px 20px 10px 50px;

padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。四个外边距属性设置分别是： padding-top， padding-right， padding-bottom 和 padding-left

1、指定一个值时该值指定内容到四个边的内边距

padding: 50px;

2、指定两个值时第一个值指定内容到上下两边的内边距第二个指定内容到左右两边的内边距

padding: 50px 20px;

3、指定三个值时第一个指定内容到上边的内边距.第二个指定内容到左右两边第三个指定内容到下边的距离

padding: 50px 20px 10px;

4、指定四个值时分别为上右下左（顺时针顺序）

padding: 50px 20px 10px 5px;

二.margin坍塌和合并
先举个例子

<style>
        body{
            background-color:#000;
        }
     .wrapper{
         width:200px;
         height:200px;
         background-color:red;
         margin-top:100px;
     }
     .box{
        width:50px;
         height:50px;
         background-color:#eee;
         opacity:0.8;
     }
    </style>
</head>
<body >
        <div class="wrapper">
            <div class="box"></div>
        </div>
</body>

在这里插入图片描述
现在给里面的小方块设置margin-top:100px;发现两个方块位置没动;

而当给里面的小方块设置margin-top:150px;小方块带着大方块往下移动了50px

原理:父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margi会取其中最大的值.

正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位.

但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样.
margin塌陷解决方法

1.给父级设置边框或内边距(不建议使用)

 .wrapper{
         width:200px;
         height:200px;
         background-color:red;
         margin-top:100px;
         border-top:1px solid black;
     }

2.触发bfc(块级格式上下文),改变父级的渲染规则

方法:

改变父级的渲染规则有以下四种方法,给父级盒子添加

(1)position:absolute/fixed

(2)display:inline-block;

(3)float:left/right

(4)overflow:hidden

这四种方法都能触发bfc,但是使用的时候都会带来不同的麻烦,具体使用中还需根据具体情况选择没有影响的来解决margin塌陷

三.margin合并

原理:两个兄弟结构的元素在垂直方向上的margin是合并的

html

  <div class="box1"></div>
  <div class="box2"></div>

css

*{
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #000;
    }
    .box1 {
        height: 30px;
        margin-bottom: 100px;
        background-color: red;
    }
    .box2 {
        height: 30px;
        margin-top: 100px;
        background-color: aqua;
    }

在这里插入图片描述

margin合并问题也可以用bfc解决,

1.给box2加上一层父级元素并加上overflow:hidden;

  <div class="box1"></div>
   <div class="wrapper">
        <div class="box2"></div>
  </div>
.wrapper{
            overflow:hidden;
        }

2.给两个都加一层父级再加bfc

   <div class="wrapper">
        <div class="box1"></div>
    </div>
    <div class="wrapper">
        <div class="box2"></div>
    </div>

但是这两种方法都改变了HTML结构,在开发中是不能采用的

所以在实际应用时,在margin合并这个问题上,我们一般不用bfc,而是通过只设置上面的元素的margin-bottom来解决距离的问题

四.box-sizing的使用
1.content-box与border-box区别
两者的盒子的宽度是否包含表框和内边距
当设置width:70px
box-sinzing:content-box时
在这里插入图片描述

吴莉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒子模型

一.什么是盒子模型我们在刚开始接触CSS的时候总是被margin和padding闹的晕头转向，什么时候设置margin，什么时候设置padding，不是太清楚，设置了以后在界面上看到的效果也差不多呀。如何理解margin与padding呀，我们首先可以想象一下我们手里拿了一个钻戒要向女朋友求婚，一般求婚的时候钻戒都是在盒子里放着呢，我们要有盒子的概念，钻戒一般都放在盒子的中央，没有哪家的钻戒是...
复制链接

扫一扫

专栏目录