一、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 |