清除默认样式
- 大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响，为了避免默认样式对整体布局效果造成影响，一定要清楚默认样式
- 盒模型属性中内外边距：大部分容器标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除
- ul和ol俩种列表有默认的列表前缀：清楚list-style属性
- a标签的默认样式，顺带设置页面中常用的a的公共样式：设置color和text-decoration
- 清楚默认加粗效果：font-weight属性
- 还可以给body标签设置整体文字样式，让大部分后代标签全部去继承
height应用
- 根据不同的需求，高度属性可以设置也可以不设置
- 如果设置高度：盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载；
设计图中盒子高度占位是固定的，后面同级元素在高度下面加载，自身盒子内部内容过多会溢出盒子区域。
overflow属性
设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果。可以通过一个溢出的属性overflow，进行溢出部分内容的显示效果设置。
- 如果不设置高度：会根据标签内部内容高度自动撑开。
必须不设置高度：要求盒子高度必须自适应内部内容的高度，或者设置height的属性值是自动的。
居中
文本水平居中
水平居中：text-align属性
不论单行或者多行都可以设置
文本垂直居中
单行文本垂直居中：让文字行高line-height等于盒子高度height
多行文本垂直居中：让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同
元素垂直居中
一个元素内部嵌套的子元素，在父元素中居中
垂直居中：多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距。
元素水平居中
如果子盒子宽度低于父盒子宽度，可以设置子盒子的margin值，水平方向的值都设置为auto。
- 原因：auto只在水平方向有作用，水平方向的margin如果设置为auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度自外剩余的区域，如果俩个水平方向都是auto，两边都要无线大，只能达到一个平衡，两边距离相同，导致盒子居中。
父子盒模型
一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度一定足够（不考虑溢出情况），需要遵循一个设置尺寸的规律：所有子元素的宽度加在一起不能大于父元素的宽度width。
父元素的width≥所有子元素width+padding+border+margin
如果不满足条件：要么多余的子元素掉下来不能排成一行，要么溢出父元素
margin塌陷现象
margin塌陷现象：在垂直方向如果有俩个元素的外边距有相遇的，浏览器中加载的真正的外边距不是俩个间距的加和，而是两个边距中值最大的。边距值小的塌陷到了边距值大的值内部。
同级元素塌陷
上面的元素有下边距，下面的元素有上边距，俩个边距相遇，真正的盒子间距离是较大的那个值
父子元素塌陷
父子元素之间也会出现margin塌陷，父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他的内容进行隔离，导致俩个属性相遇，发生margin塌陷
解决方法
- 同级元素：如果俩个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。
- 父子元素：让俩个边距不要相遇，中间可以使用父元素border或padding将间距分隔开（不建议）。
- 为盒子附加bfc属性。
标准文档流
- 标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式，前面内容发生了变化，后面的内容位置也会随着发生变化
- HTML就是一种标准文档流的文件
- HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级
微观现象
- 空白折叠现象
- 文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果
- 自动换行，元素内一行内容写满元素的width时会自动进行换行
显示模式display
标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，后期可以通过display属性更改一个标签的显示模式
属性值：元素根据属性值不同，可以加载对应元素等级的显示模式的特点
