持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情
盒模型常见应用
-
清除默认样式：大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免样式对整体布局效果造成影响，一定要清除默认样式
-
例如：盒模型属性中内外边距：大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除（但是通配符效率会比较低，一般不使用）
-
<ul>和<ol>两种列表有默认的列表前缀（就是前面的•）：清除list-style属性 -
<a>标签的默认样式，顺带设置页面中常用的a的公共样式：设置color和text-decoration -
清除默认加粗效果（例如h系列标签）：font-weight: normal;
-
还可以给
<body>标签设置整体文字样式，让大部分后代标签全部去继承
-
-
height应用：如果设置了高度，盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载；如果不设置高度，会根据标签内部内容高度自动撑开
- 以div标签为例，必须设置高度的情况：设计图中盒子高度占位是固定的，后面同级元素在高度下面加载。自身盒子内部内容过多会溢出盒子区域，如:
- 解决这个问题有个专门的属性：overflow属性（设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果）
- 以div标签为例，必须设置高度的情况：设计图中盒子高度占位是固定的，后面同级元素在高度下面加载。自身盒子内部内容过多会溢出盒子区域，如:
-
居中：
-
文本水平居中（单行或多行都可）：text-algin属性
-
文本垂直居中（单行文本）：让文字行高line-height等于盒子高度height（因为文字会在自己的行高里面垂直居中）
-
文本垂直居中（多行文本）：让元素（放文本的元素）高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同
-
-
元素垂直居中：
-
一个元素内部嵌套的子元素在父元素中垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距
-
一个元素内部嵌套的子元素在父元素中水平居中：针对类似div标签样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置子盒子的margin值，水平方向的值都设置为auto。原因：auto只在水平方向有作用，水平方向的margin如果设置为auto，边距会自动无线增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中
-
