5.13日音讯,玩转div中盒子模型其实很简单

　　5.13日音讯,玩转p中盒子模型其实很简单。说起盒子模型，相信大家都不陌生，这在网站制作中经常遇到，但我们在网页制作中却会经常遇到一些小的问题，网页变形了、错位了、没有按我们的意图来摆放了，等等，这就是我们对字还有一些知识或功能没有知识清楚，现在我们就来仔细认识下，帮助大家共同学习。

　　说白了，CSS盒子也是装东西的，比如我们要将文字内容、图片布局网页中，那就需要像盒子一样装着。这个时候我们对其对象设置css高度(cssheight)、css宽度(csswidth)、css边框(cssborder)、css边距(cssmargin)、填充（csspadding）,即可实现像盒子一样的长方形、正方形平面盒子。

　　通常我们这样：

　　一组

、等类似这种语法标签组叫1个盒子。因为我们对其设置了高度(height)、宽度(width)、边框(border)、边距(margin)、填充（padding）等属性后即可呈现出盒子一样的长方形或正方形。所以我们CSS盒子模型因此而得来。

　　日常使用CSS盒子：

　　我们说将什么内容放入一个盒子里，我们就要想到是放入

里，脑海里就要这个概念。

　　假如我们说设置一个宽度为100px盒子，我们就要知道如下一个概念：

　　Css样式代码：

　　.yangshi{width:100px;}

　　对应html代码：

　　内容

　　这个时候我们可以将内容

看作为一个盒子。

　　1、盒子模型的height和width属性，指的是content区的高和宽，而不是整个盒子的。2、p为块级元素，span为行级元素。3、行内元素之间的水平距离为左元素的右margin和右元素的左margin之和。4、块元素之间的竖直距离为上元素的下margin和下元素的上margin的最大值。5、设置了float属性的块级元素脱离标准流，其下方的块级元素会占领其原来的位置，只是下方块级元素中的文字会被该块挤开，形成一个文字环绕该块效果。如果想清除浮动的影响，设置clear属性，该属性有3个值：left、both、right。6、如果一个父类盒子中所有子类盒子均设置为浮动（float），该父盒子的高度几乎为零，如果想让父盒子的告诉何内部子盒子的高度自适应，在父盒子内部的下方添加一个p，设置其CSS属性为{clear:both;margin:0;padding:0}7、盒子的定位，position属性的取值有四个。static:盒子按标准流进行布局。relative:相对定位，盒子相对原来标准位置偏移指定距离，相对盒子仍在标准流中，其后的盒子仍以标准方式对待它。

　　怎么样才算是选择了“标准W3C盒子模型”呢？很简单，就是在网页制作的顶部加上DOCTYPE声明。如果不加DOCTYPE声明，那么各个浏览器会根据自己的行为去理解网页，即IE浏览器会采用IE盒子模型去解释你的盒子，而FF会采用标准W3C盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，如果加上了DOCTYPE声明，那么所有浏览器都会采用标准W3C盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

　　其实说起来简单，但做起来就没有这么容易了，只有我们把它们这间的各种关系搞清楚了，我们才会达到自己想要的效果，怎么样才能搞明白呢，就要我们不矢余力地多多练习，在练习中发现要点，在实践中才能创造一个良好合理的网页效果。