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