第六讲_css盒子模式

news2024/11/19 15:38:38

css盒子模型

1. 长度单位
2. 盒子模型的组成
- 2.1 盒子模型内容
- 2.2 盒子模型内边距
- 2.3 盒子模型边框
- 2.4 盒子模型外边距

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>