css基础教程属性篇之盒子模型
作者:Jorux 来源:jorux.com 发布时间:2008-07-29 12:05:00
本文作为属性篇的最后一篇文章, 将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键.
阅读上一篇:css基础教程属性篇之二
注: 为什么不翻译margin和padding? 原因一, 在汉语中并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于在编写css代码时, 必须使用margin和padding, 如果我们总用汉语词语代替其来解释的话, 到了实际应用时容易混淆margin和padding的概念.
如果有一点Html基础的话, 就应该了解一些基本元素(Element), 如p, h1~h6, br, div, li, ul, img等. 如果将这些元素细分, 又可以分别归为顶级(top-level)元素,块级(block-level)元素和内联(inline)元素.
Block-level element: 指能够独立存在, 一般的块级元素之间以换行(如一个段落结束后另起一行)分隔. 常用的块级元素包括: p, h1~h6, div, ul等;
Inline element: 指依附其他块级元素存在, 紧接于被联元素之间显示, 而不换行. 常用的内联元素包括: img, span, li, br等;
Top-level element: 包括html, body, frameset, 表现如Block-level element, 属于高级块级元素.
块级元素是构成一个html的主要和关键元素, 而任意一个块级元素均可以用Box model来解释说明.
Box Model: 任意一个块级元素均由content(内容), padding, background(包括背景颜色和图片), border(边框), margin五个部分组成. 立体图如下(Fig. 1):
该立体图引自: http://www.hicksdesign.co.uk/ (Under the Creative Commons License)
平面图如下(Fig. 2):
根据以上两图, 相信大家对于Box model会有个直观的认识.
猜你喜欢
- 今天我们看看所有的类!由于工作的上的事有点忙!点图!以后讲解这是我编译好了的类的结构图,我们可以用很多软件可以从原板的DLL看到这些内容!当
- 我已安装了WINDOWS NT OPTON PACK 中的SMTP Service,请问如何使用它的发送邮件功能?在安装了SMTP Serv
- SQL Server数据库查询优化的常用方法总结:本文中,abigale代表查询字符串,ada代表数据表名,alice代表字段名。技巧一:问
- 下面的asp函数实现了对站点的所有缓存Application的清理,释放!Sub RemoveAllCache() D
- 呵呵,我之前也写过一个类似的模板替换功能.>> 已实现:>、<、>=、<=、=、==等简单的运算>
- 在本节描述的示例代码,提供真实的例子来示范在 FileSystemObject 对象模式中可用的许多功能。该代码显示了如何一起使用对象模式的
- 与部门同事做了个小小的交流,话题杂而浅,在此做一个小纪录。1、什么是设计工业设计、环境设计、建筑设计、平面设计、网页设计、服装设计、信息设计
- V5.0之后,我们总结了一些得失。首先要说的是改版的动力。产品设计或产品升级的驱动力只有两个:用户需求和网站目标。之前的我们的多次改版,其驱
- 字体的处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息的,而最经典最直接的信息传递方式就是
- Oracle客户端精简后的文件,可以实现数据库的通信,直接和软件打包: 第一步:拷贝文件:主要是四个目录:bin,nls,oracore,N
- 好久没有更新博客了,今天看到论坛上有位朋友问起全屏布局,有点像vc的界面。来了兴趣,就写了一个。运用IE6的怪异模式,通过绝对定位来实现的。
- 现在我们常见到有些网站常有这样个功能:有个按钮(如工作职位或省份或地区的选择等等)你一点就跳出一个图层(对话框)让你选择之类的。关闭它就点右
- 使用ASP生成图片彩色校验码49行代码,三个文件 Asp文件:Co
- 很神奇的一个晚上,居然在以前老同事的群里跟同事讨论起CSS的东西来了,不过很意外的还是有收获。在IE中常常会碰到如果将容器定位后,出现容器内
- 代码如下: Function NumberSplit(num) Dim i,length length=Len(num) For i=1 T
- 对于比较长的数字组成的字符串,我们一般会用逗号(,)隔开来格式化数字,从右往左每三个数字用一个逗号分组隔开。为什么要用逗号隔开数字呢?因为当
- RegExp就是建立正则的对像。如:Set regEx = New RegExp regE
- 其中 offset and fetch 最重要的新特性是 用来 分页,既然要分析 分页,就肯定要和之前的分页方式来比较了,特别是 Row_N
- 购物车是电子商务网站中不可缺少的组成部分,但目前大多数购物车只能作为一个顾客选中商品的展示,客户端无法将购物车里的内容提取出来满足自己事务处
- 印刷和网络是不一样的。传统的布局排版并不适于网络,因为传统的印刷布局,几乎只想要什么样的平面效果都能很好的达到,但在网络上设计就很困难,尽管