普通流盒子模型

盒子的标签是 <div></div>
它有一些属性：content（内容区） border(边框) margin（外边距） padding（内边距）

border是盒子的边框属性，一般这样设置
border: 1px solid red; 复合型样式 边框三要素 宽度 样式 颜色（默认黑色） (使用较多)

margin：表示外边距
margin: 20px; 一个值的时候代表上下左右四个方向
margin: 20px 30px; 两个值的时候 1上下 2左右
margin: 20px 30px 40px; 三个值的时候 1上 2左右 3下
margin: 20px 30px 40px 10px; 四个值的时候 上右下左 从上开始顺时针方向

padding同上

块级元素

块级元素独占一行 默认宽度为父级的100%，高度由内容决定，可设置margin padding border
div盒子模型是一个块级元素 其他的块级元素还有ul ol h1-h6
给块级元素或行内块元素设置 text-align:center; 可以使元素内部的文字居中
给块级元素设置 水平方向的 margin: 0 auto; 可以实现水平居中

行内元素

设置宽高无效，margin上下方向无效，padding/border上下方向不影响布局
常见行内元素：
a img i span

块级： display:block;
行内： display:inline;
行内块元素：display:inline-block;

list-style: none;清除列表标签的默认样式

元素之中存在的关系 父子关系 兄弟关系 后代关系
在普通流布局中存在几个经典问题
1、父子元素上外边距重叠问题
解决方案：
① 给父元素设置上方向的border或者padding
② 给父元素设置padding替代子元素的margin
③ 给父元素设置display:inline-block; (给父元素开启了BFC模式)
④ 给父元素设置overflow:hidden; 超出隐藏 也是开启BFC模式的方式之一
2、兄弟元素之间上下外边距重叠问题，会以数值大的为准
解决方案 只给一个设置就好了