目录
#在CSS中盒模型就是把页面中的每个元素看作一个矩形盒子，“盒子结构包括厚度、边距（边缘与盒外其他物体的距离）、填充（填充厚度）等元素引申到CSS中，就是border、
margin和padding元素。”#
一、盒模型的属性
1.盒子模型的组成部分
①内容前言（Content）
- 盒子模型的内容包含了宽度（ width）和高度（height）等属性来定义。
- 盒子模型相当于一个相框，相片就是盒子的内容（content），相框之间的距离就是内边距(padding)，相框的宽度就是边框(border)；w就是外边距(margin)。
②像素宽高的运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型的属性</title>
<style>
#img1{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<img src="../图片/orange.jpg" id="img1">
</body>
</html>二、内边距（padding）
| 属性 | 说明 |
| padding-top | 上内边距 （padding-top：20px） |
| padding-right | 右内边距（padding-right：20px） |
| padding-bottom | 下内边距（padding-bottom：20px） |
| padding-left | 左内边距（padding-left：20px） |
1、前言
- 内边距作用于控制内容与编剧之间的距离。
- padding属性用于定义元素内容与元素边框之间的空白区域。（内边距属性不允许负值）
2、内边框属性的运用：
padding：（）px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型的属性</title>
<style>
#img1{
width: 200px;
height: 200px;
/* 设置盒子内边距的大小 */
padding: 20px ;
}
</style>
</head>
<body>
<img src="../图片/orange.jpg" id="img1">
</body>
</html>三、边框（border）
| 属性 | 说明 |
| border-width | 设置边框宽度 |
| border-top | 给顶部边框设置范围 |
| border-right | 给右边边框设置范围 |
| border-bottom | 给底部边框设置范围 |
| border-left | 给左边边框设置范围 |
| border-color | 设置边框颜色 |
| border-style | 设置边框样式 |
| border-radius | 设置边框的圆角效果 |
1、前言
- 边框的外围即为元素的最外围，围绕元素内容和内边距的一条或多条线。
- 边框的复合写法：border: 50px double aqua;该属性是复合属性，可以将多个单属性合并一起写。
- 边框圆角效果的复合写法：单独控制边框四个角的弧度（顺时针：左上角、右上角、右下角、左下角）
2、内边距的运用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型的属性</title>
<style>
#img1{
width: 200px;
height: 200px;
/* 设置盒子内边距的大小 */
padding: 20px ;
/* border-width:10px ;
border-color:red ;
border-style:dashed ; */
/* 设置盒子的边框的厚度、颜色、样式（线型）*/
border: 3px red dashed;
/* 设置圆盒子边框四个角的弧度 */
/* border-radius: 10px; */
/* 想单独控制边框四个角的弧度，直接写就行（顺时针：左上角、右上角、右下角、
左下角） */
border-radius: 0px 0px 30px 0px ;
}
</style>
</head>
<body>
<img src="../图片/orange.jpg" id="img1">
</body>
</html>代码运行后如下：
四、外边距（margin）
| 属性 | 说明 |
| margin | 设置外边距 |
| margin-top | 设置上外边距 |
| margin-right | 设置右外边距 |
| margin-bottom | 设置下外边距 |
| margin-left | 设置做外边距 |
1、前言
- 外边距及相框之间的距离，指元素与元素之间的距离。
2、外边距的运用：
外边距：margin:( 数值) px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型的属性</title>
<style>
#img1{
width: 200px;
height: 200px;
/* 设置盒子内边距的大小 */
padding: 20px ;
/* border-width:10px ;
border-color:red ;
border-style:dashed ; */
/* 设置盒子的边框的厚度、颜色、样式（线型）*/
border: 3px red dashed;
/* 设置盒子外边距的大小 ,默认8px外边距，若要设置25外边距，应减去8*/
margin: 22px ;
margin-bottom: 50px;
margin-left: 17px;
}
</style>
</head>
<body>
<img src="../图片/orange.jpg" id="img1">
</body>
</html>代码运行后如下：
五、设置行内元素变成块元素
| 属性 | 说明 |
| display | 设置元素的内部和外部的显示类型 |
1、前言
- display: block
- 通过设置让行内元素变成块元素，进而可以自由设置宽高
2、元素的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型的属性</title>
<style>
#ins1{
width: 300px;
height: 20px;
background-color: gray;
/* 让行内元素变成块元素，进而可以自由设置宽高 */
display: block;
margin: 55px;
/* margin-bottom: 50px;
margin-left: 17px; */
}
</style>
</head>
<body>
<ins id="ins1">我是下划线文本：行内元素</ins>
</body>
</html>代码运行后如下：
扫一扫
1925
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
