css盒子模型

最新推荐文章于 2024-08-25 18:26:48 发布

Natsukiiiii

最新推荐文章于 2024-08-25 18:26:48 发布

阅读量58

点赞数

分类专栏： HTML/CSS 文章标签： html css

本文链接：https://blog.csdn.net/fakerking/article/details/125795123

版权

HTML/CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.盒子模型简介

盒子模型是网页的一种布局，掌握盒子模型的基本特征与规律，我们对于HTML元素和控制网页元素的以实现布局效果有很大的帮助。

2.盒子的组成

一个盒子是由margin（外边距）、border（边框）、padding（内边距）、content（内容）四部分组成。其中margin、border、padding是CSS的属性，我们可以通过其来控制盒子，而content是HTML元素的内容。

3.盒子的大小

通常情况下，width和height属性是用来设置内容区content的宽高，盒子正确的宽高是由以下算式来决定的。

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

其次，盒子分为两种，我们通过box-sizing属性来设置盒子的类型：

box-sizing：content-box：标准盒子

box-sizing: border-box：IE盒子

4.盒子模型相关属性

4.1边框属性

设置内容	样式属性	常用属性值
边框样式	border-style:上边 [右边下边左边];	none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
边框宽度	border-width:上边 [右边下边左边];	像素值
边框颜色	border-color:上边 [右边下边左边];	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
综合设置边框	border:四边宽度四边样式四边颜色
圆角边框	border-radius:水平半径参数/垂直半径参数;	像素值或百分比
图片边框	border-images:图片路径裁切方式/边框宽度/边框扩展距离重复方式;

4.2内边距和外边距属性

内边距属性	外边距属性
padding-top:上边距;	margin-top:上外边距;
padding-right:右边距;	margin-right:右外边距;
padding-bottom:下边距;	margin-bottom:下外边距;
padding-left:左边距;	margin-left:左外边距;
padding：四边内边距;	margin:四边外边距;

5.盒模型演示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>盒子模型</title>
<style>
div {
    background-color: cyan;
    width: 300px;
    border: 25px solid red;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>

<h2>盒子模型：</h2>

<p>盒模型是一个封装了周围HTML元素的盒子，其中包括：边距，边框，填充，和实际内容。</p>

<div></div>

</body>
</html>

效果图：