本文是作者本人学习过程中笔记总结，如若文中有不正确，或需要补充的地方，欢迎在评论区中留言。
1. 清除默认样式
- 清除原因：大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响
- 大部分容器级标签都有默认的内外边距，需要用并集选择器或者通配符的方式统一清除掉
- <ul>和<ol>两种列表有默认的列表前缀，需要通过 list-style : none 来清除
- <a>标签的默认样式是带有颜色和下划线的，需要设置 color 和 text-decoration 来清除
- 特殊应用：可以给<body>标签设置整体文本样式，让后代标签去继承
HTML代码：
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 100px;
height: 100px;
border: 2px solid pink;
}
li {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
</style>
<div class="box">This is a div</div>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
<a href="http://www.baidu.com">点击跳转到百度</a>显示效果：
左边是默认的展示效果，右边是清楚了默认样式的展示效果
清除了所有标签的默认内外边距，列表项的列表前缀，以及超链接的默认颜色和下划线。
2. height应用
- 根据不同的需求，高度属性可以设置，也可以不设置
- 若设置了高度，盒子占有的高度位置就固定了，后面的同级元素会紧挨着进行加载
- 若不设置高度，则实际展示的高度会根据标签内部的元素内容的高度而自动撑开
以 div 为例进行对比：
左侧是设置了高度的，当文本内容过多时，就会溢出，从而遮盖住下方的文本内容；
右侧是没有设置高度的，标签的高度随着元素内容的增加而增加，不会溢出而遮盖下方的内容。
overflow 属性：
- 设置了盒子高度时，过多的内容会溢出，可以通过 overflow 属性来对溢出内容进行设置
属性值：
HTML代码：
<style>
div {
width: 100px;
height: 100px;
border: 2px solid pink;
display: inline-block;
margin: 5px;
}
.one {
overflow: visible;
}
.two {
overflow: hidden;
}
.three {
overflow: scroll;
}
.four {
overflow: auto;
}
</style>
<body>
<div class="one">溢出内容可见溢出内容可见溢出内容可见溢出内容可见溢出内容可见溢出内容可见溢出内容可见溢出内容可见溢出内容可见溢出内容可见</div>
<div class="two">溢出内容隐藏溢出内容隐藏溢出内容隐藏溢出内容隐藏溢出内容隐藏溢出内容隐藏溢出内容隐藏溢出内容隐藏溢出内容隐藏溢出内容隐藏</div>
<div class="three">滚动条滚动条滚动条滚动条滚动条滚动条滚动条滚动条滚动条滚动条滚动条滚动条滚动条滚动条滚动条滚动条滚动条滚动条滚动条滚动条</div>
<div class="four">自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应</div>
</body>显示效果：
注意：scroll的形式，水平方向和垂直方向都会出现滚动条，无论该方向上的内容有没有溢出。
3. 居中
3.1. 文本垂直居中
- 单行文本垂直居中：让文字行高 line-height 等于盒子的高度 height
- 多行文本垂直居中：让高度自适应，或者正好等于多行文字的高度，然后设置元素上下内边距一致
HTML代码：
<style>
div {
width: 100px;
border: 2px solid pink;
padding: 10px 5px;
}
</style>
<body>
<div>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</div>
</body>显示效果：
左侧是设置了盒子的高度，右侧是未设置高度，其显示的高度是由内容撑开的；
然后设置上下的内边距都为 10px，文字就会垂直居中显示了。
3.2. 元素垂直居中
- 与多行文字类似，让其父元素的高度自适应，然后设置父元素相同的上下内边距
HTML代码：
<style>
.container {
width: 300px;
border: 2px solid orange;
padding: 10px 5px;
}
.box {
width: 100px;
height: 100px;
border: 2px solid green;
}
</style>
<body>
<div class="container">
<div class="box">这是子元素</div>
</div>
</body>显示效果：
左侧时是设置了父元素高度的样子，子元素顶格显示；
右侧是没有设置父元素的高度，实际显示的高度是由子元素撑开的，然后给父元素设置了相同的上下内边距。
3.3. 元素水平居中
- 针对 <div> 这种独占一行的盒子，如果子盒子宽度小于父盒子宽度，可以设置子盒子的水平方向的margin值为auto
- 原因：auto 只在水平方向有作用，水平方向的margin设为auto时，边距会无限增大，直到撑满父元素中除了子元素宽度的其他剩余区域，若水平方向上左右都是auto，两边都要无限大，只能达到一个平衡，即两边一样宽，致使盒子居中显示。
HTML代码：
<style>
.container {
width: 300px;
border: 2px solid orange;
padding: 10px 0;
}
.box {
width: 100px;
height: 100px;
border: 2px solid green;
margin: 0 auto;
}
</style>
<body>
<div class="container">
<div class="box">这是子元素</div>
</div>
</body>显示效果：
左侧是没有设置子元素的margin值，右侧是设置了子元素水平方向的margin值为auto
4. 盒模型自动内减
- 若父子盒模型中，只有一个子元素，且子元素是 <div> 这种独占一行的
- 不设置这个子元素的 width 属性，其宽度会自动加载父元素的 width 属性值进行展示
- 这个时候，设置子元素水平方向上的 padding, border 和 margin，则子元素的宽度会自动缩减，以满足水平方向是刚好撑满父元素，而不至于溢出。
HTML代码：
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 200px;
border: 5px solid red;
}
.box {
height: 100px;
background-color: pink;
border: 10px dashed blue;
}
</style>
<body>
<div class="container">
<div class="box">这是子元素</div>
</div>
</body>显示效果：
左侧的这个是没有设置子元素的宽度，实际加载的效果是自动撑满父元素的宽度；
中间的是设置了子元素的宽度和父元素相同，展示效果和左侧这个一致，但是给子元素加上了border后，由于子元素的实际占位区域变大了，所以溢出了；
右侧的是没有设置子元素宽度，它会自动加载父元素的宽度，和左侧中的效果一致，这时加上border，会发现宽度还是刚好占满父元素的宽度，原因是子元素的width进行了自动缩减，所以不会出现中间那样的溢出状况。
5. margin塌陷现象
- 在垂直方向如果有两个元素的外边距相遇，浏览器加载的真正外边距不是两者的总和，而是边距值较大的那一个，边距值小的那一个会塌陷到边距值大的内部。
- 注意：在水平方向上，是没有外边距塌陷现象的
5.1. 同级元素之间
HTML代码：
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
}
.one {
background-color: pink;
margin-bottom: 40px;
}
.two {
background-color: skyblue;
margin-top: 50px;
}
</style>
<body>
<div class="one"></div>
<div class="two"></div>
</body>显示效果：
5.3. 父子元素之间
（1）情况一
- 父元素和子元素都设置了同方向的外边距，如margin-top；
- 两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生margin塌陷
HTML代码：
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
}
.one {
background-color: pink;
}
.two {
background-color: skyblue;
margin-top: 30px;
}
.two p {
width: 50px;
height: 50px;
background-color: orange;
margin-top: 50px;
}
</style>
<body>
<div class="one"></div>
<div class="two">
<p></p>
</div>
</body>显示效果：
（2）情况二
- 本身父元素与上一个元素的间距为0
- 子元素如果设置了垂直方向的margin-top，会带着父元素一起往下移动
HTML代码：
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
}
.one {
background-color: pink;
}
.two {
background-color: skyblue;
}
.two p {
width: 50px;
height: 50px;
background-color: orange;
margin-top: 50px;
}
</style>
<body>
<div class="one"></div>
<div class="two">
<p></p>
</div>
</body>显示效果：
5.3. 解决方案
（1）同级元素
- 如果两个元素垂直方向有间距，只需要给其中一个元素设置外边距即可，不要拆分到两个上面
- 例如：上面展示的，上方div有一个40px的 margin-bottom，下方的div有一个50px的 margin-top
- 其实只需要给上方div设置 margin-bottom: 90px，或者给下方div设置 margin-top: 90px 即可
HTML代码：
.two {
background-color: skyblue;
margin-top: 90px;
}显示效果：
（2）父子元素
- 让两个边距不要相遇，可以使用父元素的border或者padding将边距分隔开
- 最常用的方法，父子盒模型之间的距离，不要使用子元素的margin来设置，改为父元素的padding来设置
- 例如：上面展示的，父元素有30px的margin-top，子元素有50px的margin-top
- 其实，可以给父元素设置 margin-top: 30px 以及 padding-top: 50px;
- 由于设置了padding，父元素会变大，想要保持大小不变，可以将父元素的高度减小50px
HTML代码：
.two {
background-color: skyblue;
height: 50px;
margin-top: 30px;
padding-top: 50px;
}
显示效果：
422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
