盒子模型*_盒子模型元素内容与边框之间的距离被称为

作者：知新_RL | 2024-05-27 09:21:50

踩

盒子模型元素内容与边框之间的距离被称为

盒子模型有元素的内容、边框(border)、内边距(padding)、外边距(margin)组成
盒子里面的图片和文字等元素是内容区域
盒子的厚度是盒子的边框
盒子内容与边框的距离称为内边距(类似table表格中cellpadding)
盒子与盒子之间的距离称为外边距(类似table表格中cellspacing)

边框属性 (综合定义)	常用属性值
border-style	none：无(默认值)、solid：单实线、dashed：虚线、dotted：点线、double：双实线
border-width	~px
border-color	颜色单词、#十六进制、RGB(r,g,b)
border:	三个属性无顺序，中间空格隔开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style type="text/css">
            div{
                /* 综合设置盒子的边框*/
                border:5px solid red;
                /* 设置盒子的宽高 */
                height:400px;
                width:400px;
                /* 文字的行高=盒子的高度：垂直居中 */
                line-height:400px;
                /* 文字水平居中 */
                text-align:center;                
            }
        </style>
	</head>
	<body>
        <div >
            你好呀！
        </div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这里插入图片描述
内边距：padding

属性值个数	代表意义
1	上下左右内边距相同
2	第一个数表示上和下，第二个数表示左和右
3	第一个数表示上，第二个数表示左右，第三个数表示下
4	按逆时针，分别是上右下左

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style type="text/css">
            div{
                /* 设置盒子的边框*/
                border:5px solid red;
                /* 设置盒子的宽高 */
                height:400px;
                width:400px;
                /* 文字的行高=盒子的高度：垂直居中 */
                line-height:400px;
                /* 文字水平居中 */
                text-align:center;
                /* 设置内边距 */
                padding-left:50px;
                padding-right:70px;
                padding-top:60px;
                padding-bottom:100px;
            }
            
        </style>
	</head>
	<body>
        <div >
            你好呀！
        </div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

在这里插入图片描述

可以看出盒子被撑大，所以我们之前设置的宽和高并不是盒子的总高度和总宽度
在这里插入图片描述
内盒实际大小计算(元素实际大小)
宽度：内容的宽度+内边距+边框宽度
高度：内容的高度+内边距+边框高度

由此可知，要想盒子大小不变，在设有内边距和边框的前提下，可以减小内容的宽度和高度设置的内容的高度!=盒子的高度

外边距(margin)—盒子与盒子之间的距离

块元素居中
margin: auto
margin:0 auto
margin-left:auto;margin-right:auto;

背景属性

背景属性	样式属性	常用属性值
设置背景颜色	background-color	transparent(透明的)默认值
背景透明	background	ragb(0,0,0,0.n)0.n表示自然数，自然数越小，透明度越高。背景透明是指盒子背景半透明，盒子里面的内容不受影响
设置背景图像	background-image:url(路径)路径不加引号
背景图像平铺	background-repeat	repeat(沿水平和竖直两个方向平铺) no-repeat不平铺 repeat-x 沿x轴平铺 repeat-y 沿y轴平铺 (平铺:重复)
背景图像位置	background-position
背景图像固定	background-attachment	scroll(图像虽页面一起滚动，默认情况)fixed(图像固定不动)
综合设置	background	背景色 url(路径) 平铺定位固定(可乱序)

注意：背景图像位置的设置
position后面是x坐标和y坐标。可以使用方位名词或精准单位
如果指定两个值，两个值都是方位名词，则两个值前后顺序无关，比如：left top和top left效果一致
如果只指定了一个方位名词，另一个默认值center
如果position后面是精确坐标，那么第一个是x，第二个是y
如果只指定一个数值，那么该数值一定是x坐标，另一个为默认值center
如果指定的两个值是精确单位和方位名词混合使用，则第一个为x坐标，第二个为y坐标
实际上，使用最多的为居中对齐，background-position：50% 50%

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/630934