CSS盒子模型
2017-04-16 21:06
246 查看
引言
假设要学习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。
注意：为了直观理解盒子模型，能够在上述DEMO中，逐个夸大改动某个属性来加深了解。比如padding-bottom:3000等，仅仅有这样才干更直观的理解。
总结
本篇博客主要带大家熟悉了下盒子模型，学会了它才可以了解网页中每一个元素的位置结构，才干才制作网页的时候做到排版整齐，达到美观的效果。说简单点。我们就是在学习word的排版功能。
下篇博客带大家熟悉下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中的选择器。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 