盒模型简单学习

盒模型

---

盒模型的组成：border content padding margin

border: border-width border-style border-color

border-collapse: collapse; 表示相邻边框合并在一起

border会影响盒子的实际大小

padding:内边距

padding会影响盒子的实际大小

如果盒子本身没有指定height、width的值，就不会撑开盒子

margin:外边距

外边距可以让块级盒子水平居中，但是需要满足:1.盒子必须有宽度2.盒子左右的外边距都设置为auto

此方法对行内元素及行内块元素无效

外边距合并

1.相邻块级元素垂直外边距的合并

<style>

.first, .second {

width: 200px;

height: 200px;

background-color: pink;

}

.first {

margin-bottom: 100px;

}

.second {

margin-top: 200px;

}

</style>

<div class="first">第一个</div>

<div class="second">第二个</div>

会发生外边距的合并，这种情况两个盒子之间的距离就是200px，取两个之间的较大值

2.嵌套块元素垂直外边距的塌陷

<style> .father { width: 400px; height: 400px; background-color: purple; margin-top: 50px; } .son { margin-top: 100px; width: 200px; height: 200px; background-color: pink; } </style>

<div class="father">

<div class="son"></div>

</div>

有嵌套关系的块元素，父元素上有外边距，同时子元素也有外边距，此时父元素会塌陷较大的外边距值，即塌陷100px

解决方案：为父元素定义上边框 、 为父元素定义上内边距、 为父元素添加overflow:hidden

清除内外边距

* {

margin: 0;

padding: 0;

}