盒子模型

1、引入

盒子模型是CSS中一个重要的概念，早在CSS的诞生之处便有这一个概念了，对于网页中的大部分对象，实际呈现就是一个盒子形状对象，即是一个块对象，每一个盒子都存在着四个东西，即:边框(border)、边界(margin)、填充(padding)、内容(content)。这四个内容我们在之前的学习中是介绍过的。那么在学习的过程中我们还举例了现实生活中的快递盒子便于大家的理解。

2、盒子模型示意图

3、盒子的大小确定

我们在html页面上写一个标签元素，发现这一个这一个标签自己会有本身的大小，那么如果说想要控制这一个盒子的大小，应该如何设置呢？这一个时候，我们可以给这一个盒子指定两个属性，分别是:width和height。其语法如下:

内容盒子选择器{

    width:设置宽度值，一般使用px为单位。
   height:设置高度值，一般使用px为单位。
}

那么除了这一个盒子本身的大小之外，整个盒子的大小应该还包括其他的两个内容，分别为边界(border)的大小和填充(padding)的大小。

盒子大小确定的代码示例和效果

<style type="text/css">
   body {
        font-size: 25px;
		font-family: "宋体";
		color: #FF0000;
   }

   .box1 {
	   border: 1px solid black;
   }

   .box2 {
	   width: 200px;
	   height: 200px;
	   border: 1px solid green;
   }

   .box3 {
	   width: 200px;
	   height: 200px;
	   border: 50px solid green;
   }
			
   .box4 {
	   width: 299px;
	   height: 299px;
	   border: 1px solid green;
   }
			
   .box5 {
	   width: 150px;
	   height: 150px;
	   border: 1px solid red;
	   padding: 10px;
   }
			
   .box6 {
	   width: 171px;
	   height: 171px;
	   border: 1px solid red;
   }
</style>

<body>
   <div class="box1">
	  这是原始盒子大小
   </div>
   <br>
   <div class="box2">
	  指定宽度和高度为200px
   </div>
   <br>
   <div class="box3">
	  指定宽度和高度为200px
	  <br>
	  设置边框的大小为5px
    </div>
    <br>
	<div class="box4">
	   指定宽度和高度为299px
    </div>
	<br>
	<div class="box5">
	   宽/高为150px
	   边界1px,填充10px
	</div>
	<br>
    <div class="box6">
	   指定宽度和高度为171px
	</div>
</body>

4.盒子之间的位置摆放

我们知道每一个标签元素放在在页面上都是一个盒子，我们发现一个问题，就是盒子直之间的摆放默认的情况下是从上到下的摆放，那么并不是所有的盒子都是按照这一个来就行的摆放。有时候还会存在着左右的摆放，那么这一个时候我们先说一个后面学习的知识点:浮动(float)。

盒子摆放位置关系代码和效果图(左右位置关系)

<style type="text/css">
   body {
        font-size: 25px;
		font-family: "宋体";
		color: #ffffff;
   }

   .box1 {
	   background-color: #008000;
   }

   .box2 {
	   margin-left: 20px;
	   background-color: #ff0000;
   }

   div {
	   float: left;
	   width: 200px;
	   height: 200px;
	   border: 1px solid black;
   }
</style>

<body>
   <div class="box1">
	  盒子1
   </div>

   <div class="box2">
	   盒子2
   </div>
</body>

更多推荐

前端开发_HTML5_盒子模型