首页 > 代码库 > CSS盒子模型

CSS盒子模型

   引言

如果要学习CSS,恐怕盒子模型是必不可少的一部分吧!究竟什么是盒子模型呢?小编来带大家熟悉一下。

  为什么叫盒子模型?

在我们网页中会看到各种各样的图片、文字、音频、视频等,这些就是网页的组成元素。我们会经常看到各种各样漂亮的页面,这是如何做到的呢?通过调整网页中元素的位置来美观自己的排版。我们把网页中的元素看成是一个个的盒子,它们占据着一定空间,通过调整盒子的边框和距离等,来调整盒子的位置。

                                 一句话:就是word中的文字、图片等内容的排版。


   盒子模型的组成

content(内容)、border(边框)、padding(间隙)和margin(间隔)



注意:盒子模型也分为W3C和IE盒子模型两种。

border

   元素的外围,主要属性有color、width、style等样式

padding

   用于控制content与border之间的距离

margin

   元素与元素之间的距离


小学计算题

一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为 50px,如果用标准 W3C 盒子模型解释,那么这个盒子需要占据的位置为:宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px,盒子的实际大小为:宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px;如果用IE 盒子模型,那么这个盒子需要占据的位置为:宽 20*2+200=240px、高 20*2+50=70px,盒子的实际大小为:宽 200px、高 50px。

 这就是W3C和IE盒子模型的区别所在,也就是计算宽度和高度的方式不一样而已


牛刀小试

   写了这么多,大家可能只知道有这么多东西,为了能够从视觉上来加深下印象,我们来敲一个小DEMO。

<html>
<head>
<title>border-style</title>              <!--标题-->
<style type="text/css">
<!--
div{
	border-width:6px;          <!--设置边框宽度-->
	border-color:#000000;	<!--设置边框颜色-->
	background-color:#ffffcc;	<!--设置背景颜色-->
	
}

-->
</style>
<body>
<!--设置文字内容到边框距离为30px-->
<div style="border-style:dashed;padding-bottom:3000px;">the border of dashed</div>
<!--设置两个元素之间的距离为60px-->
<div style="border-style:dotted;margin-bottom:60px;">the border of dashed</div>
<div style="border-style:double;">the border of dashed</div>

</div>

</body>

</head>
</html>

   

注意:为了直观理解盒子模型,可以在上述DEMO中,逐个夸大修改某个属性来加深了解,例如padding-bottom:3000等,只有这样才能更直观的理解。


总结

   本篇博客主要带大家熟悉了下盒子模型,学会了它才能够了解网页中每个元素的位置结构,才能才制作网页的时候做到排版整齐,达到美观的效果。说简单点,我们就是在学习word的排版功能。下篇博客带大家熟悉下CSS中的选择器。