学习CSS的盒子模型。
一些背景知识
CSS长度单位
px：像素；em：相对元素font-size的倍数；rem：相对根(即html)字体大小；%：相对父元素来进行计算。
注：CSS中设置长度必须加单位，否则样式无效 。
元素的显示模式
1.块元素
特点
1.在页面中独占一行
2.默认宽度：撑满父元素。默认高度：由内容撑开
3.可以通过CSS设置宽高
常见块元素：
2.行内元素
1.在页面中不占满一行
2.默认宽度：由内容撑开。默认高度：由内容撑开
3.无法通过CSS设置宽高
常见行内元素：
3.行内块元素
1.在页面中不占满一行
2.默认宽度：由内容撑开。默认高度：由内容撑开
3.可以通过CSS设置宽高
常见行内元素：
4.修改元素的显示模式
/* 元素作为块级元素出现 */
display:block;
/* 元素作为行内元素出现 */
display: inline;
/* 元素作为行内块元素出现 */
display: inline-block;
/* 元素会被隐藏 */
display: none;盒子模型
盒子模型的组成部分
CSS会把所有的HTML元素看成一个盒子。
margin外边框：盒子与外界的距离。（若盒子给了具体宽度不会影响盒子大小但会影响盒子位置）
border边框：盒子的边框。
padding内边距：紧贴内容的补白区域。
content内容：元素中的文本或后代元素都是他的内容。
盒子大小=content+两边padding+两边border
关于默认宽度：
所谓默认宽度，就是不设置width属性时元素所呈现的宽度。
总宽度=父的content-自身的左右margin
内容区的宽度=父的content-自身的左右margin-自身左右border-自身左右padding
写完后可以在开发者工具中检查效果。
例如编写了下面的代码：
<body>
<div>hh</div>
</body> <style>
div{
background-color: gray;
width: 300px;
height: 300px;
padding: 100px;
}
</style>鼠标右键——检查，既可看到盒子的数据
注意：要查看div盒子的数据，一定要点击div后，显示才是div盒子的数据。
由图可以看出，div盒子的content区是300*300，padding是100。
盒子的内容区content
设置内容区的高度和宽度。
/* 设置内容区域的宽度 */
/* 可以设置一个精准值 */
width: 300px;
/* 也可以设置一个范围值 */
min-width: 100px;
max-width: 500px;
/* 设置内容区域的高度 */
height: 300px;
min-height: 100px;
max-height: 500px;盒子的内边距padding
/* padding单独设置 则四个方向上都是这个100px */
padding: 100px;
/* padding复合去设置 每个方向上可以设置不同的值 */
padding-top: 50px;
padding-right: 20px;
padding-bottom: 100px;
padding-left: 70px;注意：
padding值不能为负数。
行内元素设置padding时，左右padding有效果，但上下padding可能会有问题。
块级元素、行内块元素，四个方向的padding都可以有效果。
盒子的边框border
/* 设置样式 可以合起来一起写也可以分开写 */
/* border-style: solid; */
border-left-style: solid;
border-right-style: solid;
border-top-style: solid;
border-bottom-style: solid;
/* 设置宽度 可以合起来一起写也可以分开写 */
/* border-width: 10px; */
border-left-width: 10px;
border-right-width: 10px;
border-top-width: 10px;
border-bottom-width: 10px;
/* 设置颜色 可以合起来一起写也可以分开写 */
/* border-color: aqua; */
border-left-color: aqua;
border-right-color: aqua;
border-top-color: aqua;
border-bottom-color: aqua;
/* 设置边框圆角 */
border-radius: 10px;
盒子的外边距margin
概念
写法和之前的一样。可以单独写margin，也可以对其上下左右分别设置不同的margin。
注意：
1.子元素的margin是参考父元素的content计算的。
2.上margin、左margin会影响自身的位置；下margin、右margin会影响兄弟元素的位置。
3.对应行内元素，左右的margin是可以完美设置的，上下的margin设置后是无效的。
4.margin的值可以设置为auto，对一个块级元素左右margin设置auto可以实现该元素在其父元素内水平居中。
5.margin可以为负值。
margin塌陷问题
第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin也会作用在父元素上。
解决问题：
方法1：给父元素设置不为0的padding
方法2：给父元素设置不为0的border
方法3：给父元素设置CSS样式overflow:hidden（推荐）
margin合并问题
上面元素的下外边距和下面元素的上外边距会合并，两个元素的边距取两个边距的最大值而不是相加。（左右元素的外边距不会合并）
解决问题：无需解决，布局时只要设置一个外边距就可以了。
处理内容溢出
使用overflow:hidden使得溢出的内容隐藏。
隐藏元素的方式
方式一：visibility:hidden（元素看不见了但是还会占有原来的位置）
方式二：display:none(元素看不见了且不占任何位置，没有大小宽高）
元素默认样式
元素一般都有些默认样式，例如<a>、<h1>~<h6>、<p>、<ul>、ol、<body>
（body有一个8px的margin。很重要）
元素的默认样式优先级>继承的样式。所以如果要重置默认样式，选择器一定要直接选择到该元素
布局小技巧
需要实现子元素在父元素居中效果。
1.若子元素是块元素。
/* 使得子div水平居中父div */
margin-left: auto;（父元素）
margin-right: auto;（父元素）
/* 使得子div垂直居中父div */
margin-top: 150px;（子元素设置，值为父content-子元素盒子总高）
/* 解决margin塌陷问题 */
overflow: hidden;(父元素中）
<style>
.outer{
width: 400px;
height: 400px;
background-color: gray;
/* 解决margin塌陷问题 */
overflow: hidden;
}
.inner{
width: 200px;
height: 100px;
background-color: orange;
/* 使得子div水平居中父div */
margin-left: auto;
margin-right: auto;
/* 使得子div垂直居中父div */
margin-top: 150px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">inner</div>
</div>
</body>2.若子元素是行内元素或行内块元素，则将其看成文本去调整居中。
/* 行内元素可以看成文本来去调整其位置 */
/* 使得子span水平居中父div */
text-align: center;（父元素）
/* 使得子span竖直居中父div */
line-height: 400px;（父元素的line-height=height）
vertical-align: middle;（每个子元素）
<style>
.outer{
width: 400px;
height: 400px;
background-color: gray;
/* 行内元素可以看成文本来去调整其位置 */
text-align: center;
line-height: 400px;
}
.inner{
background-color: yellow;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="outer">
<span class="inner">出来玩啊</span>
</div>
</body>ps：若想要绝对居中，则设置父元素font-size:0;
原因：因为字体设置的原因，若在父元素中显示font-size，会偏向下不能居中，所以设置父元素font-size:0;要显示出其文字，再在文字的标签中设置新的font-size值。
元素空白问题
行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
解决方法：给父元素设置font-size:0;再给需要显示文字的元素，单独设置字体大小。
行内块的幽灵空白问题
因为行内块元素与文本的基线对齐，而文本的基线与文本最低端之间有一定距离，所以会出现一条缝隙。
解决方法：
