Html任何一个元素(element)都可以当成一个盒子(box)来看待,可以结合现实中的盒子来理解下文,下文其中一些单词应该是通俗易懂的需要记录的单词。

基本情况

每一个盒子都有一个内容区域(content area),例如盒子里的一堆文字或者一张图片的边界,其周围是具有一定宽度的padding area,border area,和margin area,还有cotent area(类似于下图中线条的中间跑道部分)。

每个area都是具有一定宽度或高度的,譬如在上下方的就是占用高度,在两侧的就是占用宽度。其边缘我们称之为edge(类似于下图中的线条部分,其实是没有占空间的,类似于area的最外层意思)。content area的边缘称之为content edge 或者 inner edge,padding area的边缘称之为padding edge,Border area的边缘称之为border edge,Margin area的边缘称之为margin edge or outer edge。

每个盒子标配margin-中文称之为外边距或外补白,padding内边距内补白,border边框三道,最里头才是我们的内容区域啦,比较形象的说明可见下图:

 

Image illustrating the relationship between content, padding, borders, and margins.

盒子的margin,padding,border可以分成四个方向,上,下,左,右,如上图,LM代表Left Margin,LB代表Left Border,LP代表Left Padding.

以上就是一个盒子模型的基本常识,也是页面CSS布局的基本单元,Margin,Padding,Border默认不占空间,其值由用户设定,比较简单,最重要的莫过于Content Area内容区域宽高的计算,Content Area的高度Content Area Height称之Content Height,响应宽度称之Content Wdith,不仅关乎自己占多大地盘,也关乎子孙后代是否有足够的地盘去发挥展示,影响其最终结果的主要有以下几因素:

自身Width 和 Height属性,我们所说的一般的Width和Height就是Content Width,Content Height,注意一点的是即使用户Css没指定其值,它也有自己的初始值auto,这是最基本的一点。

是否包含子元素内容,如文本或者还是一个box(不管是inline还是block),也就是子元素的可能宽高计算会影响到父元素;

自身display属性值类型,譬如table类型,如果inline类型的计算规则跟block的也不一样;

等等,关于这块的计算不在本文的范围内,这块也比较复杂,后期会进行专门讲解,名字暂定,any box之其宽高计算。

另外需要注意一点的是,Background的设置只会影响到Border area,Padding Area,Content Area,至于Margin Area的背景总是透明的。

举个栗子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Examples of margins, padding, and borders</TITLE>
    <STYLE type="text/css">
      UL { 
        background: yellow; 
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
      }
      LI { 
        color: white;                
        background: blue;            
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; 
        list-style: none            
      }
      LI.withborder {
        border-style: dashed;
        border-width: medium;      
        border-color: lime;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>我没有border
      <LI class="withborder">S我有border
    </UL>
  </BODY>
</HTML>
View Code

Chrome下会是这个样子:

解读这个结果:

  1. 每一个li box(Html学科称element/node,css学科称box)的content area
  2. 第一个li box的margin-bottom和第二个的margin-top的margin发生了margin合并现象,只有在同一个BFC环境下而且是上下margin才会发生margin合并。
  3. 可以看到margin的背景色是透明的,如果其在另一个content area下且此area有背景色的话,那看到的它就是这个颜色。
  4.  实际一个盒子的宽高,不仅仅只是Content Height,还包括其它,Box Height=Content Height+Top Padding Height+Top Margin Height+Top Border Height,宽度同理。譬如一条Css{width:100px;margin:1px;border:1px,padding:1px;},box其实际占用的宽度是103px而不是100.这是一个容易引起误解的地方,这点一定需要注意。

CSS如何使用

  Margin

body { margin: 2em }         /* all margins set to 2em */
body { margin: 1em 2em }     /* top & bottom = 1em, right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
View Code

  说明:一个是简写代表的含义还有就是CSS具有优先级,最终上面的与下面效果等效:

body {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;        /* copied from opposite side (right) */
}
View Code

  需要注意的一点是,同width,height属性一样,margin-top和margin-bottom不能应用于span类非可替换行内块级别的box上,即应用不起作用,

  其它属性如margin-right,padding,border不受限制。

  Padding

    简写顺序与margin同,其它没啥可说的

  Border

    没啥可说的

神奇的Margin合并效果

 

Margin或Padding,如何选择?


如果有border插一脚,包含Border的话,其实还是很好选择的,不同的选择,渲染出来的模样也会不一样。

Margin可以负值,可以实现类似于position定位的功能,能带着内容一起去旅游,Padding只能是不小于0。

Margin没背景,而Padding有,受盒子的Background属性影响。

Margin会发生合并现象,Padding不会。

这俩有时候的确能达到一样的效果,有一条原则是如果是涉及到跟其它box打架争地盘,还得靠Margin,如果想让自己的孩子过得好,显得不那么挤得慌,那就用Padding。

 

posted @ 2014-07-27 13:54 mr.cui 阅读(1122) 评论(0) 推荐(0) Edit
现代的浏览器一般都采用怪异(或称兼容)与标准两种模式来解析CSS,模式使用不当会引起一大堆显示类问题(至于脚本js没研究过,也许会吧),以前跑的好好的界面,换个浏览器或者IE版本就乱了,可能就是这类原因导致的。接下来我们将简要讨论一下存在这两种模式的原因以及这两种模式之间的差异,顺便说说IE的兼容性视图是咋回事。产生背景 浏览器刚诞生的时候(1990s前,Netscape4与ie4年代),它们的标准与W3C或者其它型号的浏览器不兼容或者是多或少的不兼容(那个时候估计w3c的标准也不成熟)。每种浏览器都开发出了许多自己特有的属性或标准。以前的WEB开发人员为了能让他们开发的网站被各种各样的... Read More
posted @ 2013-07-08 20:46 mr.cui 阅读(2506) 评论(0) 推荐(3) Edit
以前看过张孝祥老师的javascript视频,其中最大的感触就是张老师是在用心去教大家。刚才百度一下的时候无意中搜到了他的博客,看到了他博客上下面的一段话,很有感触,想与君等共勉之,思来想去,觉得放到这里最合适了。 目标越来越近,年龄越来越大,身体越来越差,接近目标的速度比不上年龄和身体衰老的速度! Read More
posted @ 2013-04-07 21:10 mr.cui 阅读(277) 评论(2) 推荐(0) Edit
软件研发职责种类 具体工作任务研发流程规范与职责 产品经理 需求分析师交互设计师界面设计师企业架构师数据架构师前后端开发工程师数据分析师测试工程师项目经理质量跟踪配置管理员 可以客观的评价一下个人能力,自己熟悉哪些职责内的工作 可以明确程序员个人发展方向,有针对性的进行靠拢 可以规范一下个人工作内容,明确一下个人的职责 可以有针对性的提高个人能力,确定学什么的问题 仅供个人参考与分享,图片来源于火龙果软件公司。 Read More
posted @ 2013-04-06 21:59 mr.cui 阅读(541) 评论(0) 推荐(1) Edit
概述 对于一直从事B/S架构(B/S也是一种C/S架构,只不过C/S自己写显示而B/S有相对统一的显示引擎实现而已)WEB领域的开发人员来说,浏览器Browser再熟悉不过了。不管你是JAVA流还是微软流抑或PHP流,WEB开发新流派。不论你的服务器端采用哪种业务架构,ORACLE数据库还是MSSQL,站在用户的角度思考,这个才是他们直接能接触到的,前端的用户体验给了用户直观的印象,投其所好,我们也总少不了要跟它打交道,很多问题的根源皆来源于此,了解一下其内部执行原理,也许对我们的开发工作会事半功倍,从一位纯粹的开发人员到一位技术领域的专家,也许就在于这些细节中。 本文讨论仅限HTML/... Read More
posted @ 2013-04-05 10:28 mr.cui 阅读(13841) 评论(40) 推荐(35) Edit
上一章简要说明了一下浏览器机制的相关知识,从基础架构上我们也可以看到浏览器的重头戏其实在于渲染引擎(又称排版引擎),很多页面兼容性问题的根源可以说也皆来源于此。360浏览器HTML5跑分再高(http://html5test.com/),UI与交互再怎么不一样,内核还是一样的。好了,那我们深入到渲染引擎内部仔细看一下吧。 渲染引擎(the rendering engine)简述 渲染引擎的职责,正如字面上的意思就是负责从服务器端返回的HTML,XML,或者IMAGES等资源的渲染工作并显示给最终用户。通过浏览器插件(plug-in or browser extension)技术,它也能... Read More
posted @ 2013-03-30 17:48 mr.cui 阅读(2426) 评论(6) 推荐(7) Edit
偶然在programmers.stackexchange.com上看到了这个有趣的问题,有人问:既然普遍认为编程是比较难的工作,为什么业务分析人员和项目经理们会拿比程序员更多的薪水?虽然大多数的时候程序员都被发现是最晚离开公司的人,可那些家伙的工作却能拿更多的报酬,为什么会这样? 回答的人很多,但似乎只有一个是比较合情合理的,它是从经济学原理的角度分析的这个问题。人们所能获得的报酬往往会低于老板们的“最高标准”,而高于人们自己的“最低要求”。在这个范围内,你的实际收入依赖于你相对于你的老板的讨价还价的能力。假设你给公司提供的服务价值每天1000美元。如果你用枪指着他,他会给你这个价格,因... Read More
posted @ 2013-03-03 17:47 mr.cui 阅读(7237) 评论(31) 推荐(14) Edit
已经在车站了,看着周围熙熙攘攘的人群,拎着大包小包走来走去,左顾右盼,仿佛大家回家的心情都很急切,不知道这一年大家都有哪些所得所失? 这一年话说也过得好快,我也写写自己的一已之谈,权当给自己以后提个醒。 今年的事儿也真多,可以用一个“累”字概括,正常工作日可以说是天天在加班,周六几乎也要加班,有时候 Read More
posted @ 2013-02-07 10:31 mr.cui 阅读(2024) 评论(6) 推荐(3) Edit
Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1 using System; 2 using System.Web; 3 using System.Web.SessionState; 4 using System.Web.UI; 5 namespace GentleSoft.MyOffice 6 { 7 ///<summary> 8 /// 页面状态持久化。可保存和恢复页面的ViewState和表单内容 9 ///<.. Read More
posted @ 2010-10-20 14:47 mr.cui 阅读(370) 评论(0) 推荐(0) Edit
点击右上角即可分享
微信分享提示