第六讲_css盒子模式

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：行内元素的左右外边距没问题，上下外边距设置无效