【面试题解】CSS盒子模型与margin负值
盒子模型，顾名思义，可以装东西的称为盒子，比如 div，span，a 等等。像 img，input 这种不能装东西的就不是盒子。
盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分，内容又分为高(height)、宽(width)。
盒子模型类型
IE盒模型（border-box）
IE 盒模型：属性 width，height 包含 content、border 和 padding，指的是 content + padding + border 。
W3C标准盒模型（content-box）
W3C 标准盒模型：属性 width ，height 只包含内容 content，不包含 border 和 padding 。
切换盒模型
如果想要切换盒模型也很简单，这里需要修改 css3 的 box-sizing 属性。
//W3C盒子模型 box-sizing: content-box //IE盒子模型 box-sizing: border-box
margin负值问题
-
margin-top 元素自身会向上移动，同时会影响下方的元素会向上移动； margin-botom 元素自身不会位移，但是会减少自身供css读取的高度，从而影响下方的元素会向上移动。 margin-left 元素自身会向左移动，同时会影响其它元素； margin-right 元素自身不会位移，但是会减少自身供css读取的宽度，从而影响右侧的元素会向左移动；
我们先初始化几个盒子，然后分别给它们设置一下不同的 margin 负值，看看和上面的结论一不一致。
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 400px;
box-sizing: border-box;
height: 400px;
background: blue;
}
.green {
width: 200px;
height: 200px;
background: green;
}
.yellow {
width: 200px;
height: 200px;
background: yellow;
margin-bottom: -20px;
}
</style>
</head>
<body>
<div class="container">
<div class="green"></div>
<div class="yellow"></div>
</div>
</body>
margin-top
我们给绿色的盒子设置一个 margin-top。
.green {
background: red;
margin-top: -20px;
}
结果如下，可以看到绿色的盒子自身向上移动了，下方的元素会随着它一起发生位移。
margin-bottom
我们给绿色的盒子设置一个 margin-bottom。
.green {
background: red;
margin-bottom: -20px;
}
结果如下，可以看到绿色的盒子自身并没有发生位移，但是高度变短了，同时下方黄色的盒子向上发生了移动。
margin-left
首先我们给元素一个浮动，让其横向排列，然后我们给绿色的盒子设置一个 margin-left。
.container div{
float:left
}
.green {
background: red;
margin-left: -20px;
}
结果如下，可以看到绿色的盒子自身向左移动了，右侧黄色的盒子会随着它一起发生位移。
margin-right
我们给绿色的盒子设置一个 margin-right。
.green {
background: red;
margin-right: -20px;
}
结果如下，可以看到绿色的盒子自身没有发生位移，但是宽度减少了，同时右侧黄色的盒子向左移动了。
不使用浮动的两列布局
掌握了 margin ，即可以不使用浮动实现两列布局了。
<style>
.container {
width: 400px;
padding: 10px
}
.left {
width: 100px;
height: 400px;
background-color: blue;
}
.right {
width: 300px;
height: 400px;
margin: -400px 0 0 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
结果如下。
上一篇：
Java基础知识总结（2021版）