仅供学习,转载请注明出处
使用HTML编写三个div,用来逐步分析拆解相关盒子模型的大小变化。
<!DOCTYPE html>
<html>
<head>
<title>盒子的真实尺寸</title>
<meta charset="utf-8">
<style type="text/css">
.box01{width:50px;height: 50px;background-color: gold;}
.box02{width:50px;height: 50px;background-color: gold;}
.box03{width:50px;height: 50px;background-color: gold;}
</style>
</head>
<body>
<div class="box01">1</div><br>
<div class="box02">2</div><br>
<div class="box03">3</div><br>
</body>
</html>
浏览器展示如下:
好了,从上图来看,已经绘画除了三个正方形了。下面继续看看增加一下边框border
看看。
border: 50px solid #000;
<!DOCTYPE html>
<html>
<head>
<title>盒子的真实尺寸</title>
<meta charset="utf-8">
<style type="text/css">
.box01{width:50px;height: 50px;background-color: gold;}
.box02{width:50px;height: 50px;background-color: gold;border: 50px solid #000;}
.box03{width:50px;height: 50px;background-color: gold;border: 50px solid #000;}
</style>
</head>
<body>
<div class="box01">1</div><br>
<div class="box02">2</div><br>
<div class="box03">3</div><br>
</body>
</html>
浏览器展示效果如下:
好了,此时已经2和3已经有了边框了。
下面来看看盒子模型的理解图:
下面继续可以给正方形3增加内边距padding,来看看效果。
padding: 50px
<!DOCTYPE html>
<html>
<head>
<title>盒子的真实尺寸</title>
<meta charset="utf-8">
<style type="text/css">
.box01{width:50px;height: 50px;background-color: gold;}
.box02{width:50px;height: 50px;background-color: gold;border: 50px solid #000;}
.box03{width:50px;height: 50px;background-color: gold;border: 50px solid #000;padding: 50px}
</style>
</head>
<body>
<div class="box01">1</div><br>
<div class="box02">2</div><br>
<div class="box03">3</div><br>
</body>
</html>
浏览器展示如下:
通过上面的页面得出结论:盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下:
通过盒子模型的原理,制作下面的盒子:
实现代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.box{
width:400px;
height: 54px;
background-color: gold;
border-top: 1px solid #f00;
border-bottom: 3px solid #666}
.box span{
font-size: 20px;
font-family: "Microsoft YaHei";
line-height: 54px;
padding-left: 150px;
}
</style>
</head>
<body>
<div class="box"><span>新闻列表</span></div><br>
</body>
</html>
浏览器展示如下: