HTML + CSS 连载 | 14 - CSS 盒子模型及内边距一、CSS 盒子模型 HTML 中的每一个元素都可以看
站长
· 阅读数 14
一、CSS 盒子模型
HTML 中的每一个元素都可以看做是一个盒子，这个盒子具备以下四个属性：
- 内容（content）：元素的内容 width/height
- 内边距（padding）：内容和元素之间的间距
- 边框（border）：元素自己的边框
- 外边框（margin）：元素和其他元素之间的间距
因为每个盒子有四个边，所有 margin、padding、border 都包括 top、right、bottom、left 四个边。
在浏览器的开发者工具中也会显示元素的盒子模型：
二、盒子模型的内容-宽度和高度
HTML 元素中设置内容是通过宽度和高度设置的，对于行内非替换元素来说，设置宽度和高度是无效的，HTML 元素宽度的默认值或者初始值是 auto，即宽度是由浏览器来决定的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
background-color: #f00;
/*auto 表示宽度交给浏览器来决定*/
width: auto;
}
</style>
</head>
<body>
<div class="box">我是box</div>
</body>
</html>
在浏览器中的显示效果如下：
除了宽高之外，我们还可以设置如下属性：
- min-width：最小宽度，无论内容多少，宽度都大于或者等于 min-width
- max-width：最小宽度，无论内容多少，宽度都小于或者等于 max-width
min-width 和 max-width 属性的优先级要高于 width。
下面这两个属性不常用：
- min-height：最小宽度，无论内容多少，宽度都大于或者等于 min-height
- max-height：最小宽度，无论内容多少，宽度都小于或者等于 max-height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.home {
height: 2000px;
background-color: #f00;
/*最大的宽度 750px*/
max-width: 750px;
/*最小的宽度 600px*/
min-width: 600px;
/*块级元素居中设置*/
margin: 0 auto;
}
</style>
</head>
<body>
<div class="home"></div>
</body>
</html>
在浏览器中打开该 HTML 页面，效果如下：
三、盒子模型的内边距-padding
padding 属性用于设置盒子的内边距，通常用于设置变边框和内容之间的间距；padding包括四个方向，所以有如下四个取值：
padding-top：上内边距padding-right：右内边距padding-bottom：下内边距padding-left：左内边距
padding 也可以单独作为一个缩写属性，表示四个方向的内边距值，缩写属性从零点钟方向开始，顺时针转动，分别表示上右下左。
padding 并非必须是四个值，也可以有其他值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
/*给盒子设置一个红色的边框， padding就是内容到边框之间的间距*/
border: 1px solid rebeccapurple;
/*设置为 inline-block类型，既可以设置高度宽度又独占一行*/
/**/
display: inline-block;
/*设置边距*/
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
/*缩写属性*/
/* padding: 10px 20px 30px 40px; */
}
</style>
</head>
<body>
<div class="box">我是box</div>
</body>
</html>
在浏览器中打开 HTML 页面，效果如下：
可以从浏览器的盒子模型中看到设置的上下左右内边距的值。
padding 属性的其他值的情况：
padding值的个数 | padding 的例子 | 代表的含义 |
|---|---|---|
| 4 | padding: 10px 20px 30px 40px | top: 10px; right: 20px; bottom: 30px; left: 40px; |
| 3 | padding: 10px 20px 30px | 缺少 left，left 使用 right 的值 |
| 2 | padding: 10px 20px | 缺少 left，使用 right 的值，缺少 bottom，使用 top 的值 |
| 1 | padding: 10px | top/right/bottom/left 都是用 10px |
转载自:https://juejin.cn/post/7294442519966122018