<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link type="text/css" href="css/tb.css" rel="stylesheet">
<style>
.outer-box{
width: 60%;
border: 10px solid #5374d7;
margin: 0 auto;
padding: 1.18em;
box-sizing: border-box;
}
.card{
width: 15%;
height: 130px;
border: 5px solid #1a579e;
background:#1a579e ;
float: left;
box-sizing: border-box;
margin: 1.18em;
}
.card2{
width: 15%;
height: 130px;
border: 5px solid #1a579e;
background:#1a579e ;
float: right;
box-sizing: border-box;
margin: 1.18em;
}
.empty{
clear: left;
}
</style>
<!--
0.默认块级元素:<div> <p> <table> <span style="display:block">
1.margin: 容器之间的距离
2.padding: 内容与边框之间的距离
3.box-sizing:border-box / content-box
-border-box:height/width = border + padding + content
-content-box:height/width = content
4.两个div在同一个地方的margin会重叠,大的覆盖小的
5.两个div在同一个地方的margin和padding不会重叠
-->
<!--
(1)float:left|right 使div脱离标准流,浮动在某一个方向
(2)clear: left|right|both 取消div在某一方向的浮动
(3)注意:取消浮动使div变成inline-block(没有脱离标准流,但不换行)
(4)浮动的div之间的margin不会重叠
任务:使用box-sizing将整个屏幕分成三部分,标题栏,显示区,任务栏
模拟输液监护显示屏效果
-->
</head>
<body>
<div class="outer-box">
<div class="card">
<img width="100%" height="100%" src="images/111.jpg">
</div>
<div class="card2">
<img width="100%" height="100%" src="images/111.jpg">
</div>
0.默认块级元素:<div> <p> <table> <span style="display:block">
1.margin: 容器之间的距离
2.padding: 内容与边框之间的距离
3.box-sizing:border-box / content-box
-border-box:height/width = border + padding + content
-content-box:height/width = content
4.两个div在同一个地方的margin会重叠,大的覆盖小的
5.两个div在同一个地方的margin和padding不会重叠
(1)float:left|right 使div脱离标准流,浮动在某一个方向
(2)clear: left|right|both 取消div在某一方向的浮动
(3)注意:取消浮动使div变成inline-block(没有脱离标准流,但不换行)
(4)浮动的div之间的margin不会重叠
任务:使用box-sizing将整个屏幕分成三部分,标题栏,显示区,任务栏
模拟输液监护显示屏效果
<div class="empty"></div>
</div>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link type="text/css" href="css/tb.css" rel="stylesheet">
<style>
.outer-box{
width: 60%;
border: 10px solid #5374d7;
margin: 0 auto;
padding: 1.18em;
box-sizing: border-box;
}
.card{
width: 15%;
height: 130px;
border: 5px solid #1a579e;
background:#1a579e ;
float: left;
box-sizing: border-box;
margin: 1.18em;
}
.card2{
width: 15%;
height: 130px;
border: 5px solid #1a579e;
background:#1a579e ;
float: right;
box-sizing: border-box;
margin: 1.18em;
}
.empty{
clear: left;
}
</style>
<!--
0.默认块级元素:<div> <p> <table> <span style="display:block">
1.margin: 容器之间的距离
2.padding: 内容与边框之间的距离
3.box-sizing:border-box / content-box
-border-box:height/width = border + padding + content
-content-box:height/width = content
4.两个div在同一个地方的margin会重叠,大的覆盖小的
5.两个div在同一个地方的margin和padding不会重叠
-->
<!--
(1)float:left|right 使div脱离标准流,浮动在某一个方向
(2)clear: left|right|both 取消div在某一方向的浮动
(3)注意:取消浮动使div变成inline-block(没有脱离标准流,但不换行)
(4)浮动的div之间的margin不会重叠
任务:使用box-sizing将整个屏幕分成三部分,标题栏,显示区,任务栏
模拟输液监护显示屏效果
-->
</head>
<body>
<div class="outer-box">
<div class="card">
<img width="100%" height="100%" src="images/111.jpg">
</div>
<div class="card2">
<img width="100%" height="100%" src="images/111.jpg">
</div>
0.默认块级元素:<div> <p> <table> <span style="display:block">
1.margin: 容器之间的距离
2.padding: 内容与边框之间的距离
3.box-sizing:border-box / content-box
-border-box:height/width = border + padding + content
-content-box:height/width = content
4.两个div在同一个地方的margin会重叠,大的覆盖小的
5.两个div在同一个地方的margin和padding不会重叠
(1)float:left|right 使div脱离标准流,浮动在某一个方向
(2)clear: left|right|both 取消div在某一方向的浮动
(3)注意:取消浮动使div变成inline-block(没有脱离标准流,但不换行)
(4)浮动的div之间的margin不会重叠
任务:使用box-sizing将整个屏幕分成三部分,标题栏,显示区,任务栏
模拟输液监护显示屏效果
<div class="empty"></div>
</div>
</body>
</html>