1. 长度单位
- px：像素
- em：相对于当前元素或父元素的 font-size 的倍数
<style>
.parent {
height: 500px;
width: 500px;
background-color: red;
}
.child {
/* font-size=100px，1em = 100px */
font-size: 100px;
height: 1em;
width: 1em;
background-color: blueviolet;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
- rem：相对于根元素的 font-size 的倍数
<style>
.parent {
height: 500px;
width: 500px;
background-color: red;
}
.child {
/* 根元素的默认font-size = 16px，所以默认1rem = 16px */
height: 1rem;
width: 1rem;
background-color: blueviolet;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
- %：相对父元素计算百分比
<style>
.parent {
height: 500px;
width: 500px;
background-color: red;
}
.child {
height: 50%;
width: 50%;
background-color: blueviolet;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
- vw：视口宽度的百分比（例如：10vw，视口宽度的 10%）
<style>
.parent {
height: 50vw;
width: 50vw;
background-color: red;
}
</style>
<div class="parent">
</div>
在浏览器中运行上述代码，调整浏览器的宽度，div的宽和高始终保持是浏览器宽度的一半
- vh：视口高度的百分比（例如：10vh，视口高度的 10%）
<style>
.parent {
height: 50vh;
width: 50vh;
background-color: red;
}
</style>
<div class="parent">
</div>
在浏览器中运行上述代码，调整浏览器的高度，div的宽和高始终保持是浏览器高度的一半
2. 盒子模型的组成
盒子模型由4部分组成：
- margin区：盒子与盒子间的距离。
- border区：盒子的边框。
- padding区：盒子边框与内容之间的距离。
- content区：盒子的内容。
2.1 盒子模型内容
盒子模型内容的宽、高通过width 、height 设置。
<style>
.container {
/* 设置内容区的高 */
height: 50px;
/* 设置内容区的宽*/
width: 50px;
background-color: red;
}
</style>
<div class="container"></div>
2.2 盒子模型内边距
- 盒子模型内边距分为
padding-top、padding-right、padding-bottom、padding-right - 复合属性
padding设置，例如：padding: 100px，等价于上、右、下、左内边距都为100px - 复合属性
padding设置，例如：padding: 100px 50px，等价于上、下内边距为100px，左、右内边距为50px - 复合属性
padding设置，例如：padding: 10px 20px 30px 40px，等价于上内边距为10px，右内边距为20px，下内边距为30px，左内边距为40px
<style>
div {
background-color: red;
}
span {
padding-top: 100px;
padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;
}
</style>
<div>
<span>hello world<span>
</div>
ps：行内元素的左右内边距没问题， 上下内边距无效
2.3 盒子模型边框
- 盒子模型边框通过复合属性
border设置 - 盒子模型边框也可以通过
border-top、border-right、border-bottom、border-left，分别设置。
<style>
.container {
height: 100px;
width: 100px;
background-color: red;
/* 边框宽5px，边框颜色黑色，边框线条实线 */
border: 5px black solid;
}
</style>
<div class="container"></div>
2.4 盒子模型外边距
- 盒子模型外边距分为
margin-top、margin-right、margin-bottom、margin-left，分别设置。 - 复合属性
margin，使用方式类似`padding。
<style>
.parent {
height: 200px;
width: 200px;
background-color: red;
}
.child {
height: 100px;
width: 100px;
background-color: blue;
margin: 10px;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
运行上面代码，你会发现子元素的上margin作用到了父元素的上margin，这个称为margin塌陷。
margin塌陷：第一个子元素的上margin 和最后一个子元素的下margin，会作用在父元素上margin，下margin。
margin塌陷问题的解决方案：
- 解决一：给父元素设置不为 0 的 padding
- 解决二：给父元素设置不为 0 的 border
- 解决三：给父元素设置 css 样式 overflow: hidden
ps：行内元素的左右外边距没问题，上下外边距设置无效
