5.1盒模型的定义
盒模型是在CSS中用来描述和控制一个元素在页面中所占空间的一种模型。在盒模型中,每个元素被看作一个矩形的盒子,其大小由四个边界确定:上边界(top)、下边界(bottom)、左边界(left)和右边界(right)。这些边界围成一个矩形,决定了元素的尺寸和位置。
盒模型由以下几个部分组成:
-
内容框(Content box):元素的实际内容区域,包括文本、图像等。
-
填充框(Padding box):内容框的内部区域,可以在内容框和边界框之间设置填充。
-
边界框(Border box):填充框的外部边界,用于绘制元素的边框。
-
外边距框(Margin box):边界框的外部区域,用于控制元素与其他元素之间的间距。
盒模型的大小由元素的宽度(width)和高度(height)属性来确定。通过设置元素的边距(margin)、填充(padding)和边框(border)属性,可以调整元素的盒模型。这些属性可以使用绝对值(像素)或相对值(百分比)来设置,从而实现对元素在页面中的尺寸和位置的精确控制。
5.2 CSS元素的高度和宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0%;
padding: 0%;
}
div{
/*5.2 CSS元素的高度和宽度 */
/* 5.2.1 盒模型的宽度 */
width: 40px;
/* 5.1.2 盒模型的高度*/
height:30px;
/* 5.3 边距设置和边框设置 */
border:10px #00ff00 solid;
/* 5.3.1 外边距设置 */
}
</style>
</head>
<body>
</body>
</html>
5.2.1 盒模型的宽度
合模型的宽度=左外边框距+左边框+做内边距+内容宽度+有内边距+右边框+右外边框距
5.2.2 盒模型的高度
盒模型的高度=上外边距+上边框+上内边框+内容高度+下内边距+下边框+下外边距
5.3 边距设置和边框设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0%;
padding: 0%;
}
div{
/*5.2 CSS元素的高度和宽度 */
/* 5.2.1 盒模型的宽度 */
width: 40px;
/* 5.1.2 盒模型的高度*/
height:30px;
/* 5.3 边距设置和边框设置 */
border:10px #00ff00 solid;
/* 5.3.1 外边距设置 */
margin: 20px;
}
img{
width: 40px;
height: 30px;
}
</style>
</head>
<body>
<div><img src="img/y.jpg"/></div>
<div><img src="img/y.jpg"/></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0%;
padding: 0%;
}
div{
/*5.2 CSS元素的高度和宽度 */
/* 5.2.1 盒模型的宽度 */
width: 40px;
/* 5.1.2 盒模型的高度*/
height:30px;
/* 5.3 边距设置和边框设置 */
border:10px #00ff00 solid;
/* 5.3.1 外边距设置 */
margin: 20px;
/* 5.3.3 内边距设置 */
padding: 20px;
}
img{
width: 40px;
height: 30px;
}
</style>
</head>
<body>
<div><img src="img/y.jpg"/></div>
<div><img src="img/y.jpg"/></div>
</body>
</html>
5.3.1 外边距设置
5.3.1.1 上外边距
margin-top:length|percent|auto
参数:length包括长度值和长度单位,包括绝对单位和相对单位。percent 是基于父对等的高度。auto值为自动提取边距值,是默认值。
说明:设置对象上外边距,外边距始终透明。内联元素要使用该属性,必须先设定元的height属性或width属性,或者设定position 属性为absolute。
5.3.1.2 右外边距
语法:
margin-right:length | percent | auto
参数:同margin-top
说明:同margin-top
5.3.1.3 下外边距
语法:
margin-bottom:length | percent |auto
参数:同margin-top
说明:同margin-top
5.3.1.4 左外边距
语法:
margin-left:length | percent | auto
参数:同margin-top。
说明:同margin-topo
5.3.1.5 外边距
语法:
margin:length | percent | auto
参数:length 包括长度值和长度单位,包括绝对单位和相对单位。percent 是基于父对象的高度,左右外边距允许使用负数。auto值为自动提取边距值,是默认值。
说明:设置对象四边的外边距,包括margin-top(上外边距)、margin-right(右外边距)、margin-bottom下外边距)、margin一left(左外边距),外边距始终是透明的。
如果只提供1个参数,将应用于全部的外边距。
如果提供2个参数,第1个参数应用于上、下外边距,第2个参数应用于左、右外边距。
如果提供3个参数,第1个参数应用于上外边距,第2个参数应用于左、右外边距,第3个参数应用于下外边距。
5.3.2 外边距的合并
5.3.2.1 行级元素外边距合并
行级元素的盒子相遇,盒子和盒子之间的距离等于两个盒子外边距的总和。
5.3.2.2 块级元素外边距合并
块级元素的盒子相遇,盒子和盒子之间的距离等于两个盒子中外边距的较大者
5.3.3 内边距设置
元素的内边距用来控制边框和内容区之间的空白距离,并非实体,用padding 属性麦示,类似于HTML中表格单元格的填充属性。内边距(padding)和外边距(margin)很格似,都是透明不可见的,只是内边距和外边距之问还有边框。从语法和用法上来说,内边要的属性与外边距的属性也是类似的,既可以使用复合属性,也可以使用单边属性,paddig属性接受length值或percent值,区别于外边距,内边距不可使用负值。
5.3.4 边框设置
元素外边距内就是元素的边框(border),它是围绕内边距和元素内容的一条或多条在内边距和外边距之间。边框的四条边分别用border-top、border-right、border-bom border-left 表示,它们的属性与内外边距的属性也是类似的,既可以使用复合属性,也可使用单边属性。
边框作为盒模型的某个组成部分,边框的CSS样式设置将直接影响到盒子的尺寸和观。而通过使用border 属性,可以创建出更佳的边框效果,还可以应用于任何元素。bme属性设置通常有3种:样式(border-style)、宽度(border-width)和颜色(border-colror)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0%;
padding: 0%;
}
div{
/*5.2 CSS元素的高度和宽度 */
/* 5.2.1 盒模型的宽度 */
width: 40px;
/* 5.1.2 盒模型的高度*/
height:30px;
/* 5.3 边距设置和边框设置 */
border:10px #00ff00 solid;
/* 5.3.1 外边距设置 */
margin: 20px;
/* 5.3.3 内边距设置 */
padding: 20px;
/* 5.3.1 外边距设置 */
margin: 10px;
padding: 10px;
/* 5.3.4 边框设置 */
border-top: 10px #00ff00 solid;
border-right: 10px #ff00ff solid;
border-left: 10px #0000ff solid;
border-bottom: 10px #000000 solid;
}
img{
width: 40px;
height: 30px;
}
</style>
</head>
<body>
<div><img src="img/y.jpg"/></div>
<div><img src="img/y.jpg"/></div>
</body>
</html>
5.3.4.1上边框
语法:
border-top:border-style | border-width | border-color
参数:该属性是复合属性。需要通过参数设置来实现。
5.3.4.2右边框
语法:
border-right:border-style | border-width | border-color
参数:该属性是复合属性。需要通过参数设置来实现
5.3.4.3下边框
语法:
border-bottom:border-style | border-width | border-color
参数:该属性是复合属性。需要通过参数设置来实现。
5.3.4.4 左边框
语法:
border-left:border-style | border-width | border-color
参数:该属性是复合属性。需要通过参数设置来实现。
5.3.4.5 边框样式
在CSS中,样式是边框最重要的一个设置,因为如果没有样式,在Web页面中边框就
不会显示。
border-style 是一个复合属性,可以同时取1~4个值,取值方法与外边距相似。边框属
性有12个值可选,包括默认(initial)和无边框(none)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0%;
padding: 0%;
}
div{
/*5.2 CSS元素的高度和宽度 */
/* 5.2.1 盒模型的宽度 */
width: 40px;
/* 5.1.2 盒模型的高度*/
height:30px;
/* 5.3 边距设置和边框设置 */
border:10px #00ff00 solid;
/* 5.3.1 外边距设置 */
margin: 20px;
/* 5.3.3 内边距设置 */
padding: 20px;
/* 5.3.1 外边距设置 */
margin: 10px;
padding: 10px;
/* 5.3.4 边框设置 */
border-top: 10px #00ff00 solid;
border-right: 10px #ff00ff dashed;
border-left: 10px #0000ff dotted;
border-bottom: 10px #000000 double;
}
img{
width: 40px;
height: 30px;
}
</style>
</head>
<body>
<div><img src="img/y.jpg"/></div>
<div><img src="img/y.jpg"/></div>
</body>
</html>
5.3.4.6 边框宽度
在CSS中,宽度是通过border-width 属性来设置边框粗细的。
与border-style 属性相同,border-width 也是一个复合属性。设置边框宽度时,可以直接前人lengh 确定长度值,如5px或2cm,但不可以为负值;或者选择系统预设属性值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0%;
padding: 0%;
}
div{
/*5.2 CSS元素的高度和宽度 */
/* 5.2.1 盒模型的宽度 */
width: 40px;
/* 5.1.2 盒模型的高度*/
height:30px;
/* 5.3 边距设置和边框设置 */
border:10px #00ff00 solid;
/* 5.3.1 外边距设置 */
margin: 20px;
/* 5.3.3 内边距设置 */
padding: 20px;
/* 5.3.1 外边距设置 */
margin: 10px;
padding: 10px;
/* 5.3.4 边框设置 */
border-top: 10px #00ff00 solid;
border-right: thick #ff00ff dashed;
border-left: medium #0000ff dotted;
border-bottom: thin #000000 double;
/* 5.3.4.5 边框样式 */
/* 新增边框属性 */
}
img{
width: 40px;
height: 30px;
}
</style>
</head>
<body>
<div><img src="img/y.jpg"/></div>
<div><img src="img/y.jpg"/></div>
</body>
</html>
5.3.4.7 边框颜色
在CSS中,边框颜色是通过border-color 属性来设置的,该属性可以使用色值,包括用颜色命名的值、十六进制参数或RGB值。但是如果对象的boder。none 或者border-width设置为0,本属性将失去作用。
5.3.5 新增边框属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0%;
padding: 0%;
}
div{
/*5.2 CSS元素的高度和宽度 */
/* 5.2.1 盒模型的宽度 */
width: 40px;
/* 5.1.2 盒模型的高度*/
height:30px;
/* 5.3 边距设置和边框设置 */
border:10px #00ff00 solid;
/* 5.3.1 外边距设置 */
margin: 20px;
/* 5.3.3 内边距设置 */
padding: 20px;
/* 5.3.1 外边距设置 */
margin: 10px;
padding: 10px;
/* 5.3.4 边框设置 */
border-top: 10px #00ff00 solid;
border-right: thick #ff00ff dashed;
border-left: medium #0000ff dotted;
border-bottom: thin #000000 double;
/* 5.3.4.5 边框样式 */
/* 新增边框属性 */
/* 圆角边框 */
border-radius: 25px;
/* 阴影边框 左偏移量 下偏移量 模糊距离 颜色*/
box-shadow: -15px 20px 50px #ff00ff;
/* 图片绘制边框 */
}
img{
width: 40px;
height: 30px;
}
</style>
</head>
<body>
<div><img src="img/y.jpg"/></div>
<div><img src="img/y.jpg"/></div>
</body>
</html>
5.3.5.1圆角边框
boeder-radius:设置边框四个角有弧度成为圆角。
5.3.5.2阴影边框
box-shadow:向四个边框添加一到多个阴影。
5.3.5.3图片绘制边框
border-image:设置所有边框用图片显示,需要嵌入相关图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
margin: 100px;
border: 50px solid blue;
border-image: url(img/url.jpg)5 10 round;
}
</style>
</head>
<body>
<div>利用border-image属性设置图片边框铺满效果。上下向内偏移5像素,左右向内偏移10像素</div>
</body>
</html>
5.4 CSS元素的定位
定位(position)的思想是,它允许你定义元素框相对于其正常位置应该出现的位置
或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
position属性值有4个。
语法:
position: static | relative | absolute | fixed
参数:static 是默认值,默认没有定位,或者用于取消特殊定位的继承,恢复默认,又称静态定位。relatives是相对定位,生成相对定位的元素,相对于其正常位置进行定位。#solute 是绝对定位,相对于父元素或者浏览器窗口进行定位,需要top、right、bottom 和陆属性辅助完成。fixed 是固定定位,相对于浏览器窗口进行定位,需要 top、right、botom和left 属性辅助完成。
5.4.1 static 定位
static 是HTML元素的默认值,不受top、right、bottom和left属性影响,元素出现在正
常的文档流中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
<style type="text/css">
.father{
border: 2px solid red;
width:300px;
height: 250px;
}
.son1{
border: 2px double red;
background-color: yellow;
width: 200px;
height: 80px;
}
.son2{
border: 2px double red;
width: 200px;
height: 25px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">父盒子,无定位
<div class="son1">子盒子1,无定位的盒子
<h2>静态定位的盒子</h2>
</div>
<div class="son2">子盒子2,无定位的盒子
</div>
</div>
</body>
</html>
5.4.2 relative定位
relative 不脱离文档流的布局,需要参照父元素的四条边(不是浏览器),设置自身岗top、right、bottom和 left 属性的参数,从盒子中独立出来浮在上面。相对定位只改变自身的位置,在文档流原先的位置留出空白区域。定位的起始位置为此元素原先在文档流的位置。
<head>
<meta charset="utf-8">
<title>示例</title>
<style type="text/css">
.father{
border: 2px solid red;
width:300px;
height: 250px;
}
.son1{
border: 2px double red;
background-color: yellow;
width: 200px;
height: 80px;
/* 5.4.2 relative定位 */
position: relative;
top: 10px;
left: 30px;
}
.son2{
border: 2px double red;
width: 200px;
height: 25px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">父盒子,无定位
<div class="son1">子盒子1,无定位的盒子
<h2>静态定位的盒子</h2>
</div>
<div class="son2">子盒子2,无定位的盒子
</div>
</div>
</body>
</html>
5.4.3 absolute定位
absolute 脱离原来文档流的布局,浮在其他盒子上面,独立出来。子盒子原来位置的空间由后面的盒子填充。绝对定位的起始位置为最近已定位的父盒子,如果父盒子没有定位,那么子盒子的起始位置为浏览器,并随着滚动条的移动而改变位置。
5.4.3.1 相对浏览器绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
<style type="text/css">
.father{
border: 2px solid red;
width:300px;
height: 250px;
}
.son1{
border: 2px double red;
background-color: yellow;
width: 200px;
height: 80px;
/* 5.4.2 relative定位 */
position: relative;
top: 10px;
left: 30px;
/* 5.4.3 absolute定位 */
/* 相对浏览器绝对定位*/
position: absolute;
top: 10px;
left: 30px;
/* 相对父盒子绝对定位 */
}
.son2{
border: 2px double red;
width: 200px;
height: 25px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">父盒子,无定位
<div class="son1">子盒子1,无定位的盒子
<h2>静态定位的盒子</h2>
</div>
<div class="son2">子盒子2,无定位的盒子</div>
</div>
</body>
</html>
5.4.3.2 相对父盒子绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
<style type="text/css">
.father{
border: 2px solid red;
width:300px;
height: 250px;
position: relative;
}
.son1{
border: 2px double red;
background-color: yellow;
width: 200px;
height: 80px;
/* 5.4.2 relative定位 */
position: relative;
top: 10px;
left: 30px;
/* 5.4.3 absolute定位 */
/*相对浏览器绝对定位
position: absolute;
top: 10px;
left: 30px; */
/* 相对父盒子绝对定位 */
position: absolute;
top: 10px;
left: 30px;
}
.son2{
border: 2px double red;
width: 200px;
height: 25px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">父盒子,无定位
<div class="son1">子盒子1,无定位的盒子
<h2>静态定位的盒子</h2>
</div>
<div class="son2">子盒子2,无定位的盒子</div>
</div>
</body>
</html>
5.4.4 fixed定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
<style type="text/css">
.father{
border: 2px solid red;
width:300px;
height: 250px;
/* position: relative; */
}
.son1{
border: 2px double red;
background-color: yellow;
width: 200px;
height: 80px;
/* 5.4.2 relative定位 */
/* position: relative;
top: 10px;
left: 30px; */
/* 5.4.3 absolute定位 */
/*相对浏览器绝对定位
position: absolute;
top: 10px;
left: 30px; */
/* 相对父盒子绝对定位 */
/* position: absolute;
top: 10px;
left: 30px; */
/* 5.4.4 fixed定位 */
position: fixed;
bottom: 10px;
right: 30px;
}
.son2{
border: 2px double red;
width: 200px;
height: 25px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">父盒子,无定位
<div class="son1">子盒子1,无定位的盒子
<h2>静态定位的盒子</h2>
</div>
<div class="son2">子盒子2,无定位的盒子</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
5.5 CSS元素的浮动
5.5.1 盒子的浮动添加
任何元素都可以浮动,浮动元素会变成一个块状元素,元素的水平浮动就是通过其fat属性的设置,使元素向其父元素的左侧或右侧靠拢,间接设置一个元素的文本环绕方式,从而改变原来的竖直排列方式。此时元素的宽度不再延伸,大小将由其内容的宽度而定。
语法:
float: left | right | none
参数:left 元素浮动到左边,即向左侧靠拢,则右边可以有文字环绕;right元素浮动到
右边,即向右侧靠拢,左边可以有文字环绕;默认值 none就是标准流通常的显示状态
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动示例</title>
<style type="text/css">
.father{
background-color: #ffccff;
border: 2px solid red;
padding: 5px;
}
.father div{
width: 100px;
height: 20px;
padding: 10px;
margin: 10px;
border: 2px dashed blue;
background-color: #ccffff;
}
.father p{
border: 2px dotted green;
background-color: #ffff99;
}
</style>
</head>
<body>
<div class="father">
<h2>父盒子</h2>
<div style="float: right;">右浮动盒子1</div>
<div >标准流盒子2</div>
<div >标准流盒子3</div>
<p>css中,有一个foat 属性,默认为none,也就是标准流通常的情况。
若果将 lat 属性的值设置为left 或 right,元素就会向其父级元素的
左侧或右侧靠近,同时默认的情况下,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度确定。</p >
</div>
</body>
</html>
5.5.2 盒子的浮动清除
元素浮动后,下面的元素内容会自动上移,结果就会受到上面浮动元素的影响,如果想
要清除这种影响,需要使用clear属性完成。
由于浮动元素可以清除,是相对定位属性的优势,因而浮动属性成为控制分栏布局的最
好工具。
语法:
clear: left | right | both | none
参数:left 清除左边浮动元素,即不允许左边有浮动对象;right清除右边浮动元素,即允许右边有浮动对象;Both同时清除左右两边的浮动元素,即不允许左右两边有浮动对默认值none。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除示例</title>
<style type="text/css">
.father{
width: 500px;
background-color: #ffccff;
border: 2px solid red;
padding: 5px;
}
.father div{
width: 100px;
height: 20px;
padding: 10px;
margin: 10px;
border: 2px dashed blue;
background-color: #ccffff;
}
.father p{
border: 2px dotted green;
background-color: #ffff99;
clear: both;
}
</style>
</head>
<body>
<div class="father">
<h2>父盒子</h2>
<div style="float:right;">右浮动盒子1</div>
<div style="float:right;">右浮动盒子2</div>
<div style="float:right;">右浮动盒子3</div>
<p>css中,有一个float 属性,默认为none,也就是标准流通常的情况。
若果将float属性的置为left或right,元素就会向其父级元素的左侧或右侧靠近,
同时默认的情况下,盒子的宽度不再伸展,根据盒子里面的内容的宽度确定。</p >
</div>
</body>
</html>
5.6 综合案例——昵心美食空间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>昵心美食空间</title>
<style type="text/css">
*{
background-color:#FFFF99;width:700px;
}
a{
color: red;
}
.all{
width: 700px;
height:650px;
margin:10px auto:
padding:5px;
background-image :url(img/bg1.JPG);
}
.banner{
width:700px;
height:70px;
}
.menu{
width:690px;
height:40px;
padding:5px;
}
.main{
width:700px;
height:450px;
margin:5px 0px;
position: relative;
}
.left,.right{
width:150px;
height:440px;
border:1px solid #999;
float:left;
}
.middle{
width:384px;
height:450px;
margin:0px 5px;
float:left;
font-size:20px;
font-family:"楷体";
font-weight:700;
color:#0000FF;
}
.one{
width:380px;
height: 155px;
border: 1px solid #999;
}
.two{
width:255px;
height:100px;
border:5px double red;
margin-top:20px;
margin-bottom:20px;
border-radius:25px;
}
.three{
width:380px;
height:135px;
border: 1px solid #999;
}
.bottom{
width:700px;
height:70px;
}
</style>
</head>
<body>
<div class=" all">
<div class=" banner">
<img src="img/banner.jpg" width="700px" height="70px" />
</div>
<div class="menu">
<img src="img/menu.jpg" width="690px"height="40px" />
</div>
<div class=" main">
<div class="left">
<marquee direction="up">
<img src="img/mm_1.jpg" width="150px" height="140px" />
<img src="img/mm_2.jpg" width="150px" height="140px"/>
<img src="img/mm_3.jpg" width="150px" height="140px"/>
</marquee>
</div>
<div class="middle">
<div class="one">
<img src="img/font.jpg" width="25px"height="25px"/>为您推荐
<br><br>
<img src="img/x_1.jpg" width="80px" height="40px"/>
<img src="img/x_2.jpg" width="80px" height="40px" />
<img src="img/x_3.jpg" width="80px" height="40px" />
<img src="img/x_4.jpg" width="80px" height="40px" />
<img src="img/x_5.jpg" width="80px" height="40px"/>
<img src="img/x_6.jpg" width="80px" height="40px" />
</div>
<center>
<div class="two">
<hl>昵心美食空间</h1>
</div>
</center>
<div class="three">
<img src="img/font.jpg" width="25px" height="25px"/>团购信息
<br>
<a herf="#">1.火锅团购</a><br>
<a herf="#">2.烧烤团购</a><br>
<a herf="#">3.自助餐团购</a><br>
<a herf="#">4.新春特惠</a>
</div>
</div>
<div class="right">
<marquee direction="up">
<img src="img/good_1.jpg" width=" 150px" height="140px" />
<img src="img/good_2.jpg" width="148px" height="140px" />
<img src="img/good_3.jpg" width="148px"height="140px"/>
</marquee>
</div>
</div>
<div class=" bottom">
<hr color="#0000FF">
<center style="font-family:'楷体'";>版权所有©昵心美食空间<br/>
地址:江门市大学路XXX号邮编:500000电话:0750-9999999</center>
</div>
</div>
</body>
</html>
标签:5.3,盒子,margin,模型,边框,width,第五章,border,CSS
From: https://blog.csdn.net/2302_82150329/article/details/142745231