最新更新 sitemap 设计搜素
网页设计
国外网站 韩国网站 个人主页 手提袋设计 CSS 网页特效 平面设计 网站设计 Flash CMS技巧 服装网站 php教程 photoshop 画册 服务器选用 数据库 Office
网上家居 虚拟主机 域名注册 云主机 网页设计 客服QQ:8208442

CSS初级指南--边界和补白

日期:09-02    来源:HTMLDog|    作者:HTMLDog

边界margin和补白padding(依据国内出版社的翻译惯例,margin被翻译成边界,padding被翻译成补白,译者依照习惯翻译。但译者认为,margin翻译成外边距,padding翻译成内边距更为直白和形象。你可以依据自己的习惯来适应这两种不同的译法。——译者注)是隔开元素最常用的两个属性。边界是元素外边的距离,而补白则是元素内部的距离。

h2改进代码如下:

h2 { font-size: 1.5em; background-color: #ccc; margin: 1em; 
padding: 3em; }

你可以看到二级标题外围有一个字符的宽度,还很臃肿,因为在二级标题内部有3个字符宽度的补白。

元素的四边可以设置不同的值。margin-topmargin-rightmargin-bottommargin-leftpadding-toppadding-rightpadding-bottompadding-left是无需解释的属性(看看英文字面意思啦)。

盒状模型

边界、补白和边框(见下一页)是人尽皆知的盒状模型的组成所有部分。盒状模型是这样工作的:中间是元素盒子(在脑海中想像一下情形),从里到外依次包围着补白盒子、边框盒子和边界盒子。很显然地,如下所示:

Margin box(边界盒)
Border box(边框盒)
Padding box(补白盒)
Element box(元素盒)

没有必要全部使用上述三个外围的“盒子”,但如果你能记住盒状模型,你可以把它们应用到页面的每一个元素。