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会有个直观的认识.
0
投稿猜你喜欢
What? 什么是面包屑面包屑是作为辅助和补充的导航方式（secondary navigation scheme），它能让用户知道在网站或应- 最近有点审美疲劳，以往看起来觉得漂亮的界面现在觉得很一般，以前觉得看来还行的界面现在觉得很丑了。想来是时候休息一下了。唯美觉得上次做的OA登
- 客户端HTTP请求URL只是标识资源的位置，而HTTP是用来提交和获取资源。客户端发送一个HTTP请求到服务器的请求消息，包括以下格式：请求
- 一、前言提到 limit 优化，大多数 MySQL DBA 都不会陌生，能想到各种应对策略，比如延迟关联，书签式查询等等，之前我也写过一篇优
- 有别于JS跨域、IFRAME跨域等的常用处理办法，还可以利用P3P来实现跨域。P3P是什么P3P（Platform for Privacy
- 平时学生交上机作业的时候经常有人相互复制，直接改文件名了事，为了能够简单的检测这种作弊行为，想到了检测文件的MD5值，虽然对于抄袭来说作用不
- 我来教你 js文件怎么通过python访问数据库，希望能够为你带来帮助。1、如果是要提交表单内容给 服务器的 python 处理，那么只需要
- 发现一个非常强的CSS在线排版：CSS Text Wrapper只要你拖拽线条，你就可以得到你想要的文字版式CSS代码。可以让想让文本块呈现
- Python 3最重要的新特性大概要算是对文本和二进制数据作了更为清晰的区分。文本总是Unicode，由str类型表示，二进制数据则由byt
- 一、io包中接口的好处和优势1.1拷贝数据的函数io.Copy(dst Writer, src Reader)io.CopyBuffer(d
- 直接执行这两个命令即可：sudo update-alternatives --install /usr/bin/python python
- DataFrame 是一个表格型的数据结构，它含有一组有序的列，每列可以是不同的值类型（数值、字符串、布尔型值）。DataFrame 既有行
- 元数据简介元数据 (metadata) 最常见的定义为“有关数据的结构数据”，或者再简单一点就是“关于数据的信息”，日常生活中的图例、图书馆
- 春节来到，红包们大概率在微信各大群中肆虐，大家是否都一样不抢到红包们心里就感觉错过了一个亿，可总会被这事那事耽误而遗憾错过，下面用 Pyth
- 用过QQ的人应该都知道软键盘，他可以增强我们密码的安全性，以保证我们的密码资料不被非法监听。现在软键盘也用在了很多的网站上，像早期银行的在线
- 我就废话不多说了，直接上代码吧！from os import listdirimport osfrom time import timeim
- 目录json支持的格式：代码操作1.json转化为python2. python序列化为json总结json转化为python表示反序列化p
- 背景介绍Pandas的DataFrame和Series在Matplotlib基础上封装了一个简易的绘图函数，使得数据处理过程中方便可视化查看
- 我们可以通过 asyncio.wait() 函数等待异步任务完成。可以等待不同的条件，例如所有任务完成、第一个任务完成以及第一个任务因异常而
- 前言由于项目中需要带字的toggle滑动组件，而ionic提供的是这样的：实际项目中需要这样子的:在网上找了下其他的实现，感觉没得类似的，也
