CSS盒子模型简解
作者：互联网
这篇博客适合Java后端开发人员对CSS盒子模型有个简单的了解，不建议前端开发方向的程序员阅读。
文章目录
1、入门
所有HTML元素都可以看作成一个盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其他元素和周围元素边框之间的空间放置元素。
下面的图片说明类盒子模型（Box Model）：
说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
入门实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 100px;
margin: 25px;
border: 25px solid green;
padding: 25px;
background: #aed598;
}
</style>
</head>
<body>
<div>
我爱Java
</div>
</body>
</html>
2、盒子模型-边框
边框的宽度 border-width 可以用来指定四个方向的边框的宽度。值的情况有以下几种：
- 四个值：上、右、下、左
- 三个值：上、左右、下
- 两个值：上下、左右
- 一个值：上下左右
除了border-width还有一组 border-xxx-width,xxx可以是 top right bottem left，用来单独指定某一个边的宽度。
边框的颜色 border-color 用来指定边框的颜色，同样可以分别指定四个边的边框
边框的样式 border-style 用来指定边框的样式：
- solid表示实线
- dotted 点状虚线
- dashed 虚线
- double 双线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 200px;
height: 200px;
background: greenyellow;
border-width: 10px 10px 10px 10px;
border-color: orange red yellow green;
border-style: solid;
}
</style>
</head>
<body>
<div class="box1">
我爱Java
</div>
</body>
</html>
3、盒子模型-内边距
内边距（padding）：内容区和边框之间的距离。一共有四个方向的内边距：
- padding-top
- padding-right
- padding-bottem
- padding-left
内边距的设置会影响到盒子的大小
背景颜色会延伸到内边距上
一个盒子的可见框的大小，由内容区 内边距 和 边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 200px;
height: 200px;
background: greenyellow;
border: 10px orange solid;
padding-top: 100px;
}
</style>
</head>
<body>
<div class="box1">
我爱Java
</div>
</body>
</html>
4、盒子模型-外边距
外边距不会影响盒子可见框的大小，但是会影响盒子的位置。
盒子一共有四个方向的外边距：
- margin-top：上外边距，设置一个正值，元素会向下移动；
- margin-right：默认情况下设置margin-right不会产生任何效果；
- margin-bottom：下外边距，设置一个正值，其下边的元素会向下移动；
- margin-left：左外边距，设置一个正值，元素会向右移动
margin也可以设置负值，如果是负值则元素会向相反的方向移动。
元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距则会移动其他元素。
标签：简解,盒子,margin,边框,width,内边,border,CSS 来源： https://blog.csdn.net/CYW2014_HUST/article/details/119485571