大家好，我是IT修真院郑州分院第14期的学员刘超，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网css任务1，深度思考中的知识点——如何理解盒模型以及margin，border，padding，content。

盒子模型是css布局使用中的一种思维方式，他由四个元素组成。

margin是指盒子模型中，边距以外的区域，外边距是透明的。

padding指的是盒子模型中，围绕在边框内侧，内容以外的区域，内边距是透明色的，但是可以设置背景颜色。

content指的是盒子模型中的内容，用来显示图像与文本，通常在内容区域设置宽高，width，height。

border，就是盒子模型的边框，也是盒子的本身。

一个盒子模型是有宽高的，我们如何去计算盒子模型总元素的宽高呢？

盒子模型的总宽度就是，margin（左右）+border（边框左右）+padding（左右）+content（左右）=总宽度。

                                    margin（上下）+border（边框上下）+padding（上下）+content（上下）=总宽度。

在盒子模型中，我们常常遇到的问题

1，什么是margin重叠

margin重叠现象只会出现在盒子模型垂直布局的时候，两个毗邻的盒子模型，都设置了外边距距离过近时。两个盒子模型之间的外边距合二为一，就叫margin折叠。

2，如何计算被margin折叠的区域？

2个盒子模型的折叠区域，如果都是正值的情况下我们选最大的那个。

2个盒子模型的折叠区域，如果是一正一负的情况下，加减之后就是折叠区域的大小。

2个盒子模型的折叠区域，如果是两个负值，我们还是选择最大的那个。

2.如何消除margin重叠的问题

在外层设置padding属性，这样就不会重叠了。

给它设置成透明的边框。

绝对定位脱离文档流。

设置边框样式

<div> class="row"></div>（一个普通的盒子）

border-bottom:1px solid #000（设置一个宽度为1像素的黑色下边框）

border-top:3px dashed #000(设置为一个宽慰为3像素的虚线上边框)

border-right:1px solid #000(设置一个宽度为1像素的黑色实线边框)

6.扩展思考

css 我们可以用边框设置其他特殊的形状吗？

我们可以用边框属性与圆角属性给制作一个圆形。

width: 50px;

height: 50px;（设置宽高）

border-radius: 50%;（圆角属性设置圆形）

background-color: red;

margin-left: 50px;

代码如下。

讨论问题

任务1的九宫格还有几种做法？

1，flax布局

2，浮动

3，绝对定位

什么是文档流？

文档流就是指，我们打开一个网页，网页布局的内容就属于文档流。

html里面的块级元素与行内元素组成。

它们以自己的方式去排列布局，div4本应该正常排列的，我们设置了属性打破了正常的排列顺序，并不占据空间了，就叫脱离文档流。

div1            div4

div2

div3

垂直居中几种方式实现？

flax布局中的  align-items: center;

行高 line-height: 400%;

 display: inline-block;设置成行内块状元素