CSS-【分享】说说标准
文章平均质量分 82
pengju_guo
这个作者很懒,什么都没留下…
展开
-
【分享】说说标准——关于样式的特殊性
本文简单的介绍下何为选择器的特殊性,它是起什么作用的,以及特殊性怎么计算方面的知识。 所谓的特殊性是指,作用于同一元素的同一特性 (property)的不同选择器的多个值,哪个会起作用,特殊性值最高的会起作用。比如,如下代码中,多个样式中的 'background-color' 同时作用于同一个 DIV 元素,那么最后,到底 DIV 应该会是什么颜色呢? HTML code转载 2011-11-15 10:21:39 · 473 阅读 · 0 评论 -
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之十三:分层的显示(Layered presentation)
前面已经将 CSS 中比较核心的布局基础讲解完毕了。其中说到的主要有 3 种布局方式,一种是常规流中的定位,一种是浮动,最后的是绝对定位。不熟悉的童鞋可以翻看以前关于常规流,浮动,绝对定位的帖子。这 3 种定位方式,可以让你把元素放到任何需要的地方(- -# 当然,不包含浏览器可见窗口之外)。 为了说明方便,我们把浏览器的可视窗口看作二维的坐标系,以左上角为原点。假设两个元素分别形成了 10转载 2011-11-15 19:03:44 · 587 阅读 · 0 评论 -
【分享】说说标准——CSS的错误解析规则
我说我的眼里只有你 —— 景岗山 用这句歌词来形容CSS的错误解析规则,我觉得再合适不过。CSS的错误解析规则的眼里只有CSS标准,对其他的错误语法,大都采取直接忽略的态度,太**忠心了(此处省略三字)。 CSS跟我们所认识的其他语言,例如 JavaScript,一样,也有自己的语法,它适用于任何版本的CSS,描述了CSS的核心句法(syntax)、关键字、厂商扩展、可用字符集、规则集转载 2011-11-14 17:43:13 · 586 阅读 · 0 评论 -
【分享】说说标准——层叠顺序(Cascading order),看看到底哪个样式在起作用?
Web标准化运动的口号——分离、分离、分离。 在2003年的 SXSW 会议(译注:一个关于电影、音乐和交互的会议)中,Steve Champeon和Nick Finck做了一个名为 “面向未来的全方位Web设计” 的演讲。这样,他们揭示了这种Web开发新方法的蓝图。Steve还给它取了个名称:渐进增强(Progressive Enhancement)。 从内容花生开始,将转载 2011-11-15 13:55:29 · 621 阅读 · 0 评论 -
说说标准——CSS核心可视化格式模型(visual formatting model)之九:浮动(Float)定位细则二
本帖接 【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之八:float 特性以及浮动(Float)定位细则一 6. 浮动框的顶边不可以高于源文档中先前元素产生的块框或浮动框的顶 例子最直接了: HTML code style type="text/css"> div { width: 100px;转载 2011-11-15 18:15:09 · 476 阅读 · 0 评论 -
说说标准——CSS核心可视化格式模型(visual formatting model)之十:控制紧接浮动的排列-clear 特性
向前两个帖子,都是讲的伟大的浮动:它带给我们一个不属于常规流的世界,它不能超出它的包含块,它的位置跟在它之前的元素生成的框有关系(详见前面的浮动规则)…… 那么,它对处于它后面的元素有什么关系呢?对于块框,会认为它不存在,行框会绕着它排列!有没有方法使块框也可以在它后面排列,而不再当它不存在呢?答案是肯定的。W3C总是透着一种非常人性化的味道。clear 特性就是做的这件事。我感觉,clear转载 2011-11-15 18:17:45 · 470 阅读 · 0 评论 -
【分享】说说标准——CSS标准中的值
人对于一件事,不知道的时候感觉它很神秘,于是便很想知道这个到底是怎么回事,但是知道了之后呢,感觉也不过如此,人就是这样…… 呃……说正事儿,CSS中的样式设置,最终离不开两样东西:特性和特性的值。 特性是诸如 ”height”、“width”、“color”等可设置的名称,特性的值,顾名思义,就是特性的值,有大小,长短,颜色,路径等…… 这些值,在CSS特性的描述中,都有自己的表示方式。比如转载 2011-11-14 20:26:10 · 656 阅读 · 0 评论 -
【分享】说说标准——你真的了解盒子模型(box model)吗?
首先,想像一下,页面的构成元素都有什么?恩~~,SPAN DIV TABLE INPUT IMG 等等等等。 这些元素在页面上都是怎么放置的呢?像 SPAN IMG INPUT 这样的元素是行内元素,放置的时候可以在一行,而DIV会独占一行放置…… 但是不管它们这些元素怎么放置,有一点是肯定的,那就是,每个元素的形状都是矩形的,严格的说,元素形成了一个矩形的区域,这个区域,被称作box,也就是转载 2011-11-15 14:34:16 · 764 阅读 · 0 评论 -
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之五:常规流中的inline formatting context
在【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之四:常规流中的Block formatting context中,已经分享了块格式化上下文,现在继续分享关于常规流中的inline formatting contexts。 行内格式化上下文(inline formatting contexts) 什么是行框 相对于块格式化上下文,在转载 2011-11-07 21:26:38 · 850 阅读 · 0 评论 -
说说标准——CSS核心可视化格式模型(visual formatting model)之八:float 特性以及浮动(Float)定位细则一
浮动特性非常有用,3大布局核心之一。虽然如此,它涉及内容过多,浏览器兼容性问题也很多。它的定位不仅涉及 包含块,还涉及到了行框,块框,还有行内框等内容;并且,各浏览器对其的支持还有不少兼容性问题。因此,它既是美梦又是噩梦。 那么,浮动产生的困惑缘何而生,又由何而灭呢?一切都由W3C标准来定夺吧…… float 特性 'float' 适用于哪些元素 可设置给任意元素,但只适用于转载 2011-11-15 18:10:19 · 734 阅读 · 0 评论 -
【分享】说说标准--CSS核心可视化格式模型(visual formatting model)之六:常规流中的相对定位
前两个”说说标准“系列的帖子已经将常规流中的BFC和IFC都说过了。今天跟大家分享最后常规流中的最后一个要点:常规流中的相对定位。 绝对定位元素在常规流中的占位是未偏移前的位置 一旦一个框按照常规流或者是浮动得到定位,它还可以相对该位置而偏移。这就是相对定位。按照这种方式偏移一个框(B1)不会对后续的框(B2)有影响: ● B2在定位时,就好象B1没有发生偏移一样。 ● B1偏移后,B转载 2011-11-15 17:55:44 · 484 阅读 · 0 评论 -
【分享】说说标准 —— 揭开外边距折叠(Collapsing margins)的面纱
生活本不是华袍,更禁不住揭开来看。 ——美丽的xixi 生活之美,在于真实和朦胧之间。本没有想象中美丽,却又有许多人非要揭示它的艰辛。 虽说,生活上的事,不须太过清楚,要深得“难得糊涂”其中三味,但工作上的事,确实越清楚越好,仔细想想,原来是因为工作比生活简单的多的多。 今天,我正要当众揭开外边距折叠的面纱。哇咔咔咔咔!!! 外边距折叠,是属于盒模型部分的一个重要概念,之所以要把它拿出转载 2011-11-15 15:40:08 · 939 阅读 · 0 评论 -
【分享】说说标准——CSS中非常重要的可视化格式模型(visual formatting model)简介
从今天开始,我会跟大家分享CSS非常重要的可视化格式模型,那这个概念到底有多重要呢?盒子模型是CSS中所有元素产生的box的自身构成,而可视化格式模型则是把这些box,按照规则摆放到页面上,也就是通常所说的布局。换句话说,可视化格式模型是整个页面的模型,这个模型规定了怎么在页面里摆放box,box相互作用等等。属于CSS的最为核心的概念之一。 可视化格式模型的概念非常多,我会分多次说明,我也会在转载 2011-11-06 23:12:22 · 848 阅读 · 0 评论 -
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之一:包含块(containing block)
上个帖子中对可视化格式模型做了一个概述,并简单的介绍了一下包含块的概念,在这里:【分享】说说标准 --CSS中非常重要的可视化格式模型(visual formatting model)简介 。 这个帖子会就包含块的细节给出详细的讲解。 上回贴说到,一个元素box的定位和尺寸,有时候会跟某一矩形框有关,这个矩形框,就被称作元素的包含块。而元素会为它的子孙元素创建包含块,那么,是不是说转载 2011-11-06 23:21:14 · 793 阅读 · 0 评论 -
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之二:控制框(Controlling Box)的形成
关于可视化模型的包含块,已经在“说说标准”系列中跟大家分享过了。 这次,跟大家分享另一个比较重要的概念,这个概念也许大家会很熟悉,因为经常挂在嘴边,这就是,块元素和块框,行内元素和行框,以及 display 特性等。 我们经常用到块元素、行内元素的概念,那么,到底什么是块元素,什么是行内元素,它们有什么特点,怎么形成的,有什么作用呢?什么是块框,什么又是行内框呢? 下面,请大家跟转载 2011-11-07 03:40:53 · 687 阅读 · 0 评论 -
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之三:定位体系概述
在 说说标准——CSS中非常重要的可视化格式模型(visual formatting model)简介 中,曾经提到了:在可视化格式模型中,每一个元素都会根据盒子模型产生0个或多个box,而这些box的布局会受四大因素的影响,其中之一,就是定位体系,个人感觉,这是对布局影响最大的因素。 CSS2.1中,一个框(box,就是元素形成的方块等)可以根据三种定位体系布局。CSS2.1中的定位体转载 2011-11-07 18:04:04 · 677 阅读 · 0 评论 -
【分享】说说标准--CSS核心可视化格式模型(visual formatting model)之七:浮动(Float)概述
浮动是可视化格式模型中非常重要的一节。浮动跟stack level也有一定的关系。可视化模型是一个3维的模型,并不是二维的。元素在页面上的排列,从我们的角度看是二维的,元素的位置可以用x,y轴坐标来表示。但是,元素和元素之间的位置如果有所重叠,谁显示在前面,就涉及到另一个轴:z轴。我们经常使用的 z-index 就是如此得来的。浮动框在整个模型中,z轴坐标比常规流中的值要高,所以会飘在它上面。也可转载 2011-11-15 18:01:03 · 634 阅读 · 0 评论 -
说说标准——CSS核心可视化格式模型(visual formatting model)之十一:绝对定位
在前面的帖子中,我们已经讲了可视化模型中布局的两大方面:1. 常规流 2. 浮动,布局3大部分只剩下了绝对定位。前面的帖子中也零星的提到过关于绝对定位的某些特性,但都不够细致系统。 绝对定位(Absolute positioning) 相对包含块偏移定位 在绝对定位模型中,一个框明确地基于它的包含块偏移。不是父元素,这点需注意。 要是人家问你,绝对定位相对于谁定位啊?你很快乐的说:转载 2011-11-15 18:25:07 · 558 阅读 · 0 评论 -
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之四:常规流中的Block formatting context
在上次分享的【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之三:定位体系概述中,大致介绍了可视化模型中的定位体系。其中,常规流是最为基础的。 这次就和大家分享常规流的一些布局要点和重要的概念。 在常规流中的框(boxes,元素形成的矩形区域),都属于一个格式化的上下文中,可能是块的,也可能是行内的,但不可能同时是行内的又是块的。块框参转载 2011-11-07 20:50:45 · 1607 阅读 · 0 评论 -
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之十二
'display','position'和'float'相互关系 前面几贴,我们介绍了display,position,float,介绍了他们是如何影响框的生成和框的布局的。 那么,这几个特性之间有无制约关系呢,比如,既浮动又是绝对定位的元素,到底应当是浮动还是应当以绝对定位的方式定位呢? 带着我们的问题,请看以下3者间的关系。 标准如是说 1. 如果 'display' 的值为转载 2011-11-15 18:54:02 · 476 阅读 · 0 评论