当前位置：首页 > news >正文

第六讲_css盒子模式

news 2025/8/22 2:58: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>