【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之十:控制紧接浮动的排列-clear 特性 [问题点数:40分,结帖人WebAdvocate]

Bbs6
本版专家分:5096
版主
结帖率 90.28%
Bbs8
本版专家分:42452
Blank
红花 2011年7月 Web 开发大版内专家分月排行榜第一
Blank
黄花 2011年6月 Web 开发大版内专家分月排行榜第二
Bbs9
本版专家分:81610
Blank
红花 2011年2月 Web 开发大版内专家分月排行榜第一
2010年11月 Web 开发大版内专家分月排行榜第一
Blank
黄花 2011年3月 Web 开发大版内专家分月排行榜第二
2011年1月 Web 开发大版内专家分月排行榜第二
2010年10月 Web 开发大版内专家分月排行榜第二
2010年9月 Web 开发大版内专家分月排行榜第二
2010年6月 Web 开发大版内专家分月排行榜第二
Blank
蓝花 2012年10月 Web 开发大版内专家分月排行榜第三
2010年7月 Web 开发大版内专家分月排行榜第三
Bbs2
本版专家分:112
Blank
红花 2009年9月 其他开发语言大版内专家分月排行榜第一
Bbs1
本版专家分:90
Bbs2
本版专家分:406
Bbs1
本版专家分:0
分享说说标准--CSS核心可视化格式模型(visual formatting model)之六:常规流中的相对定位
前两个”<em>说说</em><em>标准</em>“系列的帖子已经将常规流中的BFC和IFC都说过了。今天跟大家<em>分享</em>最后常规流中的最后一个要点:常规流中的相对定位。 绝对定位元素在常规流中的占位是未偏移前的位置 一旦一个框按照常规流或者是<em>浮动</em>得到定位,它还可以相对该位置而偏移。这就是相对定位。按照这种方式偏移一个框(B1)不会对后续的框(B2)有影响: ● B2在定位时,就好象B1没有发生偏移一样。 ● B1偏移后,B
分享说说标准——CSS核心可视化格式模型(visual formatting model)之十一:绝对定位
在前面的帖子中,我们已经讲了<em>可视化</em><em>模型</em>中布局的两大方面:1. 常规流 2. <em>浮动</em>,布局3大部分只剩下了绝对定位。前面的帖子中也零星的提到过关于绝对定位的某些<em>特性</em>,但都不够细致系统。rnrn[size=18px][b]绝对定位(Absolute positioning)[/b][/size]rn[b]rn相对包含块偏移定位[/b]rn在绝对定位<em>模型</em>中,一个框明确地基于它的包含块偏移。不是父元素,这点需注意。rn要是人家问你,绝对定位相对于谁定位啊?你很快乐的说:它的父元素。那就显得矬了- -!rn专业的说法,相对于包含快定位。所以,绝对定位元素的定位,关键是包含块,什么是包含块?见:[url=http://topic.csdn.net/u/20100721/18/14517372-74a3-4053-b99e-395f698b2407.html?034624954574003275]【<em>分享</em>】<em>说说</em><em>标准</em>——CSS<em>核心</em><em>可视化</em><em>格式</em><em>模型</em>(<em>visual</em> <em>formatting</em> <em>model</em>)之一:包含块(containing block)[/url]rnrn[b]完全脱离常规流[/b]rn它完全脱离了[url=http://topic.csdn.net/u/20100728/16/e10db11c-e212-4e10-83a2-df4ebbf7ccc7.html?25508]常规流[/url](对后继的兄弟节点没有影响)。rn这一点又与<em>浮动</em>元素不同,好歹<em>浮动</em>元素会对后继的行框产生影响,而且,后面声明的绝对定位元素也不会受前面定义的绝对元素的影响。rn可以这么理解,常规流中的元素,都在同一个层上,<em>浮动</em>是处于常规流之上的一个特殊层,可能会对常规流中的元素有影响。但是绝对定位的元素不会,可以把每个绝对定位的框看做一个单独的图层,独来独往。所以,说它完全脱离了常规流也不无道理。rn注意一点,绝对元素定位的 top 和 left 值跟绝对元素未脱离常规流之前在常规流中位置有关。rnrn看这个例子:rn[code=HTML] rn absoluternrn DIV 中的普通文本元素rn rn absolutern[/code]以上例子中,两个绝对定位元素都未声明其 top <em>特性</em>,那么top就会取它在常规流中的位置(后面会讲到)。rn中间的DIV在常规流中,影响了后面的绝对定位元素的位置,但是没有受到前面的绝对定位元素的影响。rn实际截图:rn[img=https://lh5.googleusercontent.com/2Fsp5SEtPrUacwnePK_ZsqokKdvSlrrkUp7wvQkEUt2hlSqnAcyIG4Ry4Nh7SDh-z7y7-uhUDkqSCsdSH3i7ES_1CVKLH7btyl8jk69a53sBMJv0EA][/img]rnrn[b]绝对定位元素生成的包含块[/b]rn一个绝对定位框会为它的常规流子元素和定位派生元素(不包含 fiexed 定位的元素)生成一个新的包含块。不过,绝对定位元素的内容不会在其它框的周围<em>排列</em>。rn至于,为何只为常规流中的子元素还有绝对定位元素生成包含块,就不大了解了……有知道的么?<em>分享</em>一下……rn注意,绝对定位框还会创建 block <em>formatting</em> contexts。在IE中则会触发 hasLayout 。rnrn[b]堆叠层次[/b]rn它们可能会掩盖另一个框的内容,或者被另外一个框掩盖,这取决于互相重合的框的堆叠层次。 也就是我们前面说的三维的<em>可视化</em><em>模型</em>,除了X轴,Y轴,还有Z轴。rnrnrn[size=18px][b]固定定位(Fixed positioning)rn[/b][/size]rn固定定位是绝对定位的一个子类。唯一的区别是,对于固定定位框,它的包含块由可是窗口(viewport)创建。对于连续媒介,固定定位框并不随着文档的滚动而移动。从这个意义上说,它们类似于固定的背景图形。对于页面媒介,固定定位框在每页里重复。对于需要在每一页底部放置一个签名时,这个方法非常有用。rnrn注意,在IE6里不支持 Fixed 定位,通常的做法是使用绝对定位,然后用JS<em>控制</em>绝对定位框的位置,来代替固定定位。rnrnW3C官方给出一个使用固定定位布局的例子,为了看起来明显,我给所有的div加了个红色的边框,各位可以自行测试:rn[code=HTML]rnrnrn A frame document with CSS2rn rnrnrn ...rn ...rn ...rn ...rnrn[/code]rn效果应该是(来自W3C):rn[img=https://lh4.googleusercontent.com/9BAerbhkOeqBngVW80G1K590GxC06o_wwGtct8RYXfU6y-pNAGwfwZwg8I1F3_D2tsTcd9YBxJuI_IvzgwBR0xdMQmX1TybGT9xz9WkcaKCPl_7Sdg][/img]rnrnrn[b]<em>可视化</em><em>格式</em><em>模型</em>概述:[/b]rn[url=http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196]http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196[/url]rnrn[b]更多<em>说说</em><em>标准</em>系列:[/b]rn[url=http://topic.csdn.net/u/20100705/09/40918be9-bb47-4477-abf0-a45801f9df34.html?93428]【<em>分享</em>】<em>说说</em><em>标准</em>系列目录[/url]
分享说说标准——CSS核心可视化格式模型(visual formatting model)之一:包含块(containing block)
上个帖子中对<em>可视化</em><em>格式</em><em>模型</em>做了一个概述,并简单的介绍了一下包含块的概念,在这里:【<em>分享</em>】<em>说说</em><em>标准</em> --CSS中非常重要的<em>可视化</em><em>格式</em><em>模型</em>(<em>visual</em> <em>formatting</em> <em>model</em>)简介 。 这个帖子会就包含块的细节给出详细的讲解。 上回贴说到,一个元素box的定位和尺寸,有时候会跟某一矩形框有关,这个矩形框,就被称作元素的包含块。而元素会为它的子孙元素创建包含块,那么,是不是说
分享说说标准——CSS核心可视化格式模型(visual formatting model)之十二
'display','position'和'float'相互关系 前面几贴,我们介绍了display,position,float,介绍了他们是如何影响框的生成和框的布局的。 那么,这几个<em>特性</em>之间有无制约关系呢,比如,既<em>浮动</em>又是绝对定位的元素,到底应当是<em>浮动</em>还是应当以绝对定位的方式定位呢? 带着我们的问题,请看以下3者间的关系。 <em>标准</em>如是说 1. 如果 'display' 的值为
分享说说标准——CSS核心可视化格式模型(visual formatting model)之八:float 特性以及浮动(Float)定位细则一
<em>浮动</em><em>特性</em>非常有用,3大布局<em>核心</em>之一。虽然如此,它涉及内容过多,浏览器兼容性问题也很多。它的定位不仅涉及 [url=http://topic.csdn.net/u/20100721/18/14517372-74a3-4053-b99e- 395f698b2407.html?034624954574003275]包含块[/url],还涉及到了[url=http: //topic.csdn.net/u/20100804/16/0130ce8c-1568-442b- a4f5-91e7a2bf9197.html?020362301444696174]行框[/url],[url=http: //topic.csdn.net/u/20100726/16/e2e78b6a-dbb4-4b71-a001- a79497473520.html?08639417137108301]块框[/url],还有[url=http: //topic.csdn.net/u/20100726/16/e2e78b6a-dbb4-4b71-a001- a79497473520.html?08639417137108301]行内框[/url]等内容;并且,各浏览器对其的支持还有不少兼容性问题。因此,它既是美梦又是噩梦。rn那么,<em>浮动</em>产生的困惑缘何而生,又由何而灭呢?一切都由W3C<em>标准</em>来定夺吧……rnrn[size=18px][b]float <em>特性</em>[/b][/size]rn[b]'float'[/b]rn[img=https://lh3.googleusercontent.com/RNrVX9AkwXZ5WcGOmBYztVzrj6VsSeuma6AnrOx2hQZb2N7G4cq_5axYt_P6U5NGDpoXl1rPtyVSrS0ofbWJngLjefZz6gWCRkK6s6SHBuxRAJLvrQ][/img]rnrn[b]适用于哪些元素[/b]rn可设置给任意元素,但只适用于生成非绝对定位框的元素。rn例:rn[code=HTML] rn absolutern relativern[/code]截图:rn[img=https://lh3.googleusercontent.com/EhXj1ZCUu8jsl5MvjNF9qpaXmidJEuAYib8gFt8bdp9TOXk9j7pTUKnH5LbpExX3JX_nsYSyq-MuKwum80WPvG_w82anM7kp6McmzQMOZMYWwvOLuw][/img]rn可见,对于绝对定位的元素,<em>浮动</em>没有任何效果。这也体现了<em>浮动</em>和绝对定位之间的一种平衡。rn而且,用Firefox的Firebug查看,你会发现,对于绝对定位元素计算后的 “float” 值,是”none”,而不是”right”。Chrome中则是 right……rnrn[b]特值的含义[/b]rn该属性指定框应当向左右移动或者不移动。<em>特性</em>值有如下含义:rn[color=#0000FF]left[/color]rn该元素产生一个向左<em>浮动</em>的块框。内容在该框的右边<em>排列</em>,就是[url=http://topic.csdn.net/u/20100811/16 /b4f01f87-e86e-40bc-88ae-121dbdcc3310.html?92677]上一篇帖子[/url]中所说的文字环绕,起点是框的顶部(会受'<em>clear</em>'属性的影响)。rn[color=#0000FF]right[/color]rn与left类似,框向右侧<em>浮动</em>,内容在该框的左侧<em>排列</em>,从顶部开始。rn[color=#0000FF]none[/color]rn该框不<em>浮动</em>。rnrn这个大家应该都比较清楚吧,不再浪费篇章举例了。rnrn[size=18px][b]<em>浮动</em>细则[/b][/size]rnrn[b]1. 对于根元素的<em>浮动</em>,浏览器应该当作 none[/b]rn[url=http://topic.csdn.net/u/20100721/18/14517372-74a3-4053-b99e-395f698b2407.html?034624954574003275]根元素[/url]无所谓是否<em>浮动</em>,没有实际意义。rnrn[b]2. 左<em>浮动</em>框的左外边界(margin edge)不可以出现在它包含块左边界之左。对于右<em>浮动</em>的元素也有类似规则[/b]rn以上的话,看起来有点绕眼……rn是这么个意思,左<em>浮动</em>元素的左 margin 最多紧贴[url=http://topic.csdn.net/u/20100721/18/14517372-74a3-4053-b99e- 395f698b2407.html?034624954574003275]包含块[/url]的左边界。注意,是margin edge,不是border edge也不是content edge。关于边界 (edge) 见:[url=http://topic.csdn.net/u/20100708/16 /6cd03a69-10e8-4c06-8d17-365319990d75.html?04361624679125218]<em>说说</em><em>标准</em>——你真的了解盒子<em>模型</em>(box <em>model</em>)吗?[/url]rn[code=HTML] rn rn leftrn rightrn[/code]示意图:rn[img=https://lh6.googleusercontent.com/TCfxy_49qJpHaUIP2c3Suby-9ZdjTqYRbdrL_d7Jh8Mt5a9ExWLlHtyiSJw_hnXL--WlsD1yOnvGwxmaOBxeatmermKol0iKt2VZkUUmSucHE4cKgg][/img]rnrn[b]3. 如果当前框是左<em>浮动</em>框,并且在源文档中存在更早生成的左<em>浮动</em>框,那么对于任意这些先前的框,要么当前框的左外边出现在先前框的右外边之右,要么它的顶部必须在先前框的底部之下。对于向右<em>浮动</em>的框也有类似的规则。[/b]rn也就是说,<em>浮动</em>元素的定位受先前生成的<em>浮动</em>框的影响。后面的<em>浮动</em>元素,需要紧挨着先前同向<em>浮动</em>元素的 margin 边进行定位,如果空间不足,则折行,放置到它之前元素的下面。rn例如:rn[code=HTML] rn rn left1rn left2rn left3rn[/code]截图:rn[img=https://lh3.googleusercontent.com/BsJBB8Nu6_vuHoO5SCd7n7padnaQmfteaw3FpHfqhQh9wEyp0_AKQR8N7SbLOlWyb2Slo2NIcozNgutOnWUS9tatcomOygozdPC6byK8mwSbHSRqBg][/img]rn如上图中,把left2当作当前元素,那么,它前面有left1生成的<em>浮动</em>框,所以,它会贴着left1的右 margin 边<em>排列</em>。而到left3 的时候,剩余的空间已经不能够放置它了,所以,折行放置。rnrn[b]4. 左<em>浮动</em>框的右外边不可以出现在它右侧的任何右<em>浮动</em>框的左外边之右。对于向右<em>浮动</em>的元素也有类似的规则。[/b]rnrn注意,以上说的是右侧,不是下侧,此规则不包括左<em>浮动</em>框下面的右<em>浮动</em>框。就是说,同一行中的左<em>浮动</em>元素和有<em>浮动</em>元素不能够有互相折叠的现象。rn[code=HTML] rn rn leftrn rightrn[/code]rn以上两个<em>浮动</em>元素的包含块宽度为200px,无法在一行放置,所以,右<em>浮动</em>元素只好折行显示了。rn宽度设置成300px之后,则可以放到一行。rn[img=https://lh5.googleusercontent.com/draerS1xTatQ5x5sFn5F9AuGfQMpl4Mq4ssZiXenM36_YEjrBzh7OpJBLhQkcFP0z8ivIfwSt0YXrNcSeoAh_KXOwPQovt6mAtjoA4bn1ZdlBNHwTw][/img]rnrnrn[b]5. <em>浮动</em>框的顶外边不能高于它包含块的顶部。当一个<em>浮动</em>框发生在两个margin折叠的中间时,<em>浮动</em>元素的定位好像它有另一个空的块级父框位于常规流中。那个空父框的定位规则在margin 折叠一节有说明。[/b]rnrn第一句好理解,说的是顶边不能超出包含块,跟左边右边不能超出一个道理。rn后面的规则是说,当<em>浮动</em>框处于两个发生margin折叠的地方时,会被当作被包含在一个空的块框中,它上面和下面的margin会穿过它发生margin折叠,当它不存在。rn[code=HTML] rn Arn Orn B[/code]以上代码中,3个 div 的包含块是初始包含块。O 处于 A 和 B 的中间,A和B在理论上应当发生margin 折叠。那么,发生了么?rn看截图:rn[img=https://lh6.googleusercontent.com/Dvu3L9T3NngUYdSCgocsx-fW8sDoxXuTk8oMW5J-AFXjxrBlZp59kDi4XYy8TRpECLorL7qGR0NnCBiCkRFbUxlzThb1aSd77-O7QngaqcHL1b9zzg][/img]rn依此图看,确实是没问题的……rn但是,IE中是这样么,各位看官可以自行查看,保你大吃一斤。哈哈!rnrn今天就到这里吧,太多记不住……rnrn下一帖:[url=http://topic.csdn.net/u/20100817/16/a46d9997-6beb-4ea2-b257-302abd4736a6.html?52785]【<em>分享</em>】<em>说说</em><em>标准</em>--CSS<em>核心</em><em>可视化</em><em>格式</em><em>模型</em>(<em>visual</em> <em>formatting</em> <em>model</em>)之九:<em>浮动</em>(Float)定位细则二[/url]rnrn[b]<em>可视化</em><em>格式</em><em>模型</em>概述:[/b]rn[url=http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196]http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196[/url]rnrn[b]更多<em>说说</em><em>标准</em>系列:[/b]rn[url=http://topic.csdn.net/u/20100705/09/40918be9-bb47-4477-abf0-a45801f9df34.html?93428]【<em>分享</em>】<em>说说</em><em>标准</em>系列目录[/url]
说说标准--CSS核心可视化格式模型(visual formatting model)之八:float 特性以及浮动(Float)定位细则一
<em>浮动</em><em>特性</em>非常有用,3大布局<em>核心</em>之一。虽然如此,它涉及内容过多,浏览器兼容性问题也很多。它的定位不仅涉及 包含块 ,还涉及到了行框 ,块框 ,还有行内框 等内容;并且,各浏览器对其的支持还有不少兼容性问题。因此,它既是美梦又是噩梦。 那么,<em>浮动</em>产生的困惑缘何而生,又由何而灭呢?一切都由W3C<em>标准</em>来定夺吧……float <em>特性</em>'float'适用于哪些元素 可设置给任意元素,但只适用于生成非绝对定位框的元素。 例:absolute
说说标准——CSS核心可视化格式模型(visual formatting model)之八:float 特性以及浮动(Float)定位细则一
<em>浮动</em><em>特性</em>非常有用,3大布局<em>核心</em>之一。虽然如此,它涉及内容过多,浏览器兼容性问题也很多。它的定位不仅涉及 包含块,还涉及到了行框,块框,还有行内框等内容;并且,各浏览器对其的支持还有不少兼容性问题。因此,它既是美梦又是噩梦。 那么,<em>浮动</em>产生的困惑缘何而生,又由何而灭呢?一切都由W3C<em>标准</em>来定夺吧…… float <em>特性</em> 'float' 适用于哪些元素 可设置给任意元素,但只适用于
说说标准——CSS核心可视化格式模型(visual formatting model)之十三:分层的显示(Layered presentation)
前面已经将 CSS 中比较<em>核心</em>的布局基础讲解完毕了。其中说到的主要有 3 种布局方式,一种是常规流中的定位,一种是<em>浮动</em>,最后的是绝对定位。不熟悉的童鞋可以翻看以前关于常规流,<em>浮动</em>,绝对定位的帖子。这 3 种定位方式,可以让你把元素放到任何需要的地方(- -# 当然,不包含浏览器可见窗口之外)。 为了说明方便,我们把浏览器的可视窗口看 作二维的坐标系,以左上角为原点。假设两个元素分别形成了 100px×100px 的框,我把 A 的左上角放到了坐标为(100,
说说标准——CSS核心可视化格式模型(visual formatting model)之十一:绝对定位
在前面的帖子中,我们已经讲了<em>可视化</em><em>模型</em>中布局的两大方面:1. 常规流 2. <em>浮动</em>,布局3大部分只剩下了绝对定位。前面的帖子中也零星的提到过关于绝对定位的某些<em>特性</em>,但都不够细致系统。 绝对定位(Absolute positioning) 相对包含块偏移定位 在绝对定位<em>模型</em>中,一个框明确地基于它的包含块偏移。不是父元素,这点需注意。 要是人家问你,绝对定位相对于谁定位啊?你很快乐的说:
说说标准--CSS核心可视化格式模型(visual formatting model)之六--常规流中的相对定位
CSS<em>标准</em>,常规流,相对定位,position:relative
分享说说标准——CSS核心可视化格式模型(visual formatting model)之九:浮动(Float)定位细则二
本帖接 [url=http://topic.csdn.net/u/20100816/16/997fe0cc-f195-4ac1-bf48-54bf4887eb66.html?06178771996721558]【<em>分享</em>】<em>说说</em><em>标准</em>——CSS<em>核心</em><em>可视化</em><em>格式</em><em>模型</em>(<em>visual</em> <em>formatting</em> <em>model</em>)之八:float <em>特性</em>以及<em>浮动</em>(Float)定位细则一[/url]rnrn[b]6. <em>浮动</em>框的顶边不可以高于源文档中先前元素产生的块框或<em>浮动</em>框的顶[/b]rn例子最直接了:rn[code=HTML] rn rn Orn Arn Brn[/code]O、A、B都是<em>浮动</em>元素,O、A是做<em>浮动</em>元素,根据宽度计算,A应该处于O的下一行。B是右<em>浮动</em><em>浮动</em>元素。按照<em>标准</em>,B<em>浮动</em>的时候,顶边不应高于A,因此,B不会放到O的右侧显示rn如图:rn[img=https://lh5.googleusercontent.com/vhhZ_X3Q6IiPYu3yFDMa1fEmknFL9QO5_AjLlQfv7yxOiXOP7Tamm14fYV6ldtOMT37DKy25di_AlWD-2Eua56dYZ9sDqFL1Uhy7gnlsPRxqipgt3g][/img]rn如果让A和B换个位置:rn[code=HTML] rn rn Orn Brn Arn[/code]这时候:rn[img=https://lh5.googleusercontent.com/LJIcmO4cuhqJL9SJCGePgiEeqYy3tQyjNZIUhsIyZqHzBwJq98DDlebQzKz61OYfWGC-C5BLND3XodbAqYLoopJ1UJCQSDqx4QeVFi7Elsp_ndrnSw][/img]rn很神奇吧,别以为上面有位子<em>浮动</em>元素就会往上放。rnrn[b]7. <em>浮动</em>框的顶边不可以高于源文档中先前元素产生的包含一个框的任何行框的顶。[/b]rn在前面的内容中说到过,<em>浮动</em>元素会缩短行框。rn关于行框,请参见:[url=http://topic.csdn.net/u/20100804/16/0130ce8c-1568-442b-a4f5-91e7a2bf9197.html?020362301444696174]<em>说说</em><em>标准</em>——CSS<em>核心</em><em>可视化</em><em>格式</em><em>模型</em>(<em>visual</em> <em>formatting</em> <em>model</em>)之五:常规流中的inline <em>formatting</em> context[/url]。rn例子:rn[code=HTML] rn leftrn blublublublublublublublublublublublurn rightrn[/code]截图:rn[img=https://lh4.googleusercontent.com/3e9qyWpF1hep96RTcECH23H5IpS7x2weOINAIlcP_2ckU2lLvkl7g2uKOnaqnUNDyKZOkabJwCsC6K8sXnKQMfxqtiYXlzeDiMlq1c9zgnMh2_3jsg][/img]rn依照<em>标准</em>来说,应该按照上图的方式放置 right 这个<em>浮动</em>元素。但是,只有Firefox/Chrome/Safari/Opera/IE8(S)是这样的,在IE6/IE7/IE8(Q)中,是这样的:rn[img=https://lh6.googleusercontent.com/YYcUESCeEp77payt8zt1wr8fyR7BdFuWd-OwuwTnuC-DSRpRjPhvqscht4WhsuBi6sB_ZFestkz7uuD9UPLiUvQqrf3SjLaoIOYBqzp8gkf3H_umyQ][/img]rn看来,这条规则,IE遵守的不好啊……rn大家注意这个兼容性问题。rnrn[b]8. 左<em>浮动</em>框左边如果有另外一个左<em>浮动</em>框,它的右外边不可以出现在它包含块的右边之右。(或者比较宽松的要求是:一个左<em>浮动</em>不可以超出右边,除非它已经尽可能地靠左<em>排列</em>。)对于向右<em>浮动</em>的元素也有类似的规则。[/b]rn此条规则也是限定<em>浮动</em>元素的位置范围,不可超出包含块。rnrn[b]9. <em>浮动</em>框要放置得尽可能的高。[/b]rn在符合所有规则的情况下,尽可能的向上放,注意6、7两条关于其顶边的规则。rnrn[b]10. 左<em>浮动</em>框必须尽量靠左放置,右<em>浮动</em>框必须尽量靠右放置。在更高的位置和更靠左或靠右的位置间,选择前者。[/b]rn和第9条,可以算是<em>浮动</em>的大规则吧,尽量的向上向左/右放。rnrn这几条规则中说到的其他元素,都和<em>浮动</em>元素处于相同的[url=http://topic.csdn.net/u/20100802/18 /400e449a-edc5-4593-9db7-be050d527237.html?031234066046151554] block <em>formatting</em> context [/url]中。rnrn[size=18px][b]总结[/b][/size]rn可见,<em>浮动</em>的规则却是很让人迷惑,但从这几条规则中你也不难发现,<em>浮动</em>的宗旨是,在不溢出包含块的情况下,尽量的靠上靠左/右放置,但是不能高于它前面生成的块框、<em>浮动</em>框和行框的顶。rnrn下帖预告:【<em>分享</em>】<em>说说</em><em>标准</em>--CSS<em>核心</em><em>可视化</em><em>格式</em><em>模型</em>(<em>visual</em> <em>formatting</em> <em>model</em>)之十:<em>控制</em><em>紧接</em><em>浮动</em>的<em>排列</em>:<em>clear</em> <em>特性</em>rnrn那将是另一个纠结的噩梦……rnrn[b]<em>可视化</em><em>格式</em><em>模型</em>概述:[/b]rn[url=http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196]http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196[/url]rnrn[b]更多<em>说说</em><em>标准</em>系列:[/b]rn[url=http://topic.csdn.net/u/20100705/09/40918be9-bb47-4477-abf0-a45801f9df34.html?93428]【<em>分享</em>】<em>说说</em><em>标准</em>系列目录[/url]
分享说说标准——CSS核心可视化格式模型(visual formatting model)之五:常规流中的inline formatting cont
在[url=http://topic.csdn.net/u/20100802/18/400e449a-edc5-4593-9db7-be050d527237.html?031234066046151554]【<em>分享</em>】<em>说说</em><em>标准</em>——CSS<em>核心</em><em>可视化</em><em>格式</em><em>模型</em>(<em>visual</em> <em>formatting</em> <em>model</em>)之四:常规流中的Block <em>formatting</em> context[/url]中,已经<em>分享</em>了块<em>格式</em>化上下文,现在继续<em>分享</em>关于常规流中的inline <em>formatting</em> contexts。rnrn[size=18px][b]行内<em>格式</em>化上下文(inline <em>formatting</em> contexts)[/b][/size]rnrn[b]什么是行框[/b]rn相对于块<em>格式</em>化上下文,在行内<em>格式</em>化上下文中,框(boxes)一个接一个地水平<em>排列</em>,起点是[url=http://topic.csdn.net/u /20100721/18 /14517372-74a3-4053-b99e-395f698b2407.html?81014]包含块[/url]的顶部。水平方向上的 margin,border 和 padding 在框之间得到保留。框在垂直方向上可以以不同的方式对齐:它们的顶部或底部对齐,或根据其中文字的基线对齐。包含那些框的长方形区域,会形成一行,叫做行框。rn[code=HTML] TEXT1text in spangreat1thx a lotbeegive me 5!Aloha![/code]以上代码中,无换行符及空格,共形成了7个行内框。rn示意图:rn[img=https://lh3.googleusercontent.com/lvXv36Efhw2bAfXFwtD9TIwbL4T5zZhkuq1VU25hpWpjhjHMCxWdr-8uDbPizv1VYYGzCC-qFIQw6MNtDWyZqPRE2s-7Jhk73xa3YZmqGJQr6h_LfQ][/img]rn行框的宽度由它的[url=http://topic.csdn.net/u/20100721/18 /14517372-74a3-4053-b99e-395f698b2407.html?81014]包含块[/url]和其中的<em>浮动</em>元素决定。高度的确定由行高度计算规则决定,后面会介绍。rnrn[b]行内框在行框中垂直方向上的对齐[/b]rn行框的高度总是足够容纳所包含的所有框。不过,它可能高于它包含的最高的框(例如,框对齐会引起基线对齐)。当一个框 B 的高度小于包含它的行框的高度时,B 在行框中垂直方向上的对齐决定于 ‘vertical-align’ <em>特性</em>。 ‘vertical-align’ 默认值为基线( ‘baseline ’)对齐。rn[code=HTML] rn text in spanrn great1rn[/code]示意图:rn[img=https://lh6.googleusercontent.com/3HUfpIBpEuBHe64axtUIGNv4kvB16cTXPDXJ6yU2l_uGp_0Slnca-RM3R_jKUzM9jnPcFNdopCwoDh2fv0882lOKi4mL5QFG9noyXVlVfdVL55SlAQ][/img]rnEM所形成的行内框内容的顶端与行中最高元素的顶外边界对齐。rnrn[b]行内框可能被分割[/b]rn如果几个行内框在水平方向无法放入一个行框内,它们可以分配在两个或多个垂直堆叠的行框中。因此,一个段落就是行框在垂直方向上的堆叠。行框在堆叠时没有垂直方向上的分割且永不重叠。rn如果一个行内框超出包含它的行框的宽度,它会被分割成几个框,并且这些框会被分布到几个行框内。如果一个行框不能被分割(例如,行内框只包含单个字符,或者语言特殊的断字规则不允许在行内框里换行,或者行内框受到带有nowrap或pre值的 ‘white-space’ <em>特性</em>的影响),这时,行内框会溢出行框。rn如果一个行内框被分割,margin、padding 和 border 在所有分割处没有视觉效果。rn行内框还可能由于双向文本处理(bidirectional text processing)而在同一个行框内被分割为好几个框。rn修改上面例子中 P 元素的宽度为100px:rn[code=HTML] rn text in spanrn great1rn[/code]示意图:rn[img=https://lh4.googleusercontent.com/YE5dnIEGyl41LO1Z09tXccc0kgoMbknMR4NX1r4hyZYcXn3FVne2YUzFYWVyxlpnb4VCu_g13gdf5xcE9FyxnhS2J0uNYpEpsct-LzZAFTojyqxTzQ][/img]rn发现,因为行框宽度限制(100px),第一个 SPAN 元素形成的行内框,被分割成了3段。rnrn[b]行框的范围[/b]rn通常,行框的左边接触到其[url=http://topic.csdn.net/u/20100721/18 /14517372-74a3-4053-b99e-395f698b2407.html?81014]包含块[/url]的左边,右边接触到其 [url=http://topic.csdn.net/u/20100721/18 /14517372-74a3-4053-b99e-395f698b2407.html?81014]包含块[/url]的右边。然而,<em>浮动</em>元素可能会处于包含块边缘和行框边缘之间。总之,尽管在相同的行内<em>格式</em>化上下文中的行框通常拥有相同的宽度(包含块的宽度),它们可能会因<em>浮动</em>元素缩短了可用宽度,而在宽度上发生变化。同一行内<em>格式</em>化上下文中的行框通常高度不一样(如,一行包含了一个高的图形,而其它行只包含文本)。rn[code=HTML] rn FLOATrn great1rn goodrn[/code]示意图:rn[img=https://lh4.googleusercontent.com/FOrM6eir6r6x7oIBXLaV-cWVgMcJ-Fe3rp0CNhbKpc48wrK6SaQM-Sp-DVxRhaU8H81c_UBIBQmCw5g41DKuur3D3J3DzeY4simJRbkR8RCKdGMLAw][/img]rn根据我的理解,行框的范围应是上图所示,不知道,有没有感觉不正确的同学,请告知,并说明原因,谢谢。rnrn[b]行内框的水平对齐[/b]rn当一行中行内框宽度的总和小于包含它们的行框的宽,它们在水平方向上的对齐,取决于 ‘text-align’ <em>特性</em>。如果其值是 ‘justify’,用户端也可以拉伸行内框(除了 inline-table 和 inline-block 框)中的空间和文字 。注意,rn[code=HTML] rn FLOATrn great1rn goodrn[/code]示意图:rn[img=https://lh4.googleusercontent.com/hV2kxvYrhBH4X2zrk5t06KST5sB1l-uEikw1cCGbOxLY5kc88oTr9j5NWrfwPFKGfsSy2niHw50L89N2oPc_pHzPtfMR3qH4-_bod3R_ueufWzFNEQ][/img]rn可见,对齐的时候是根据行框的宽度,居中对齐。rnrn[b]空的行内框应该被忽略[/b]rn不包含文本,保留空白符,margin/padding/border 非0的行内元素,以及其他常规流中的内容(比如,图片,inline blocks 和 inline tables),并且不是以换行结束的行框,必须被当作零高度行框对待。就 margin 折叠而言,这种行框必须被忽略。rn[code=HTML] DIV1rnrn DIV2[/code]示意图:rn[img=https://lh4.googleusercontent.com/XgKQF8dyXe1K8n1yWq5v0X1Va5BEN4YNpi_cLvtWQM3NDie6eznUPsjaMZWYzCvY1lzY6kjX3A8Q_2tjLGto3msYItDtOntG49vYAnNxR9FLtqahvA][/img]rn可见,span 和其中的空行内框都被忽略。rnrn这个概念也蛮抽象难懂的,没必要死扣它到底是个什么东西。rnrn[size=18px][b]参考资料[/b][/size]rnW3C:[url=http://www.w3.org/TR/CSS2/visuren.html#inline-<em>formatting</em>]http://www.w3.org/TR/CSS2/visuren.html#inline-<em>formatting</em>[/url]rnrn[size=18px][b]扩展阅读[/b][/size]rn<em>可视化</em><em>格式</em><em>模型</em>概述:rn[url=http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196]http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196[/url]rnrn[b]更多<em>说说</em><em>标准</em>系列[/b]rn[url=http://topic.csdn.net/u/20100705/09/40918be9-bb47-4477-abf0-a45801f9df34.html?93428]【<em>分享</em>】<em>说说</em><em>标准</em>系列目录[/url]
浮动元素排列规则
<em>浮动</em>元素<em>排列</em>规则
分享说说标准——CSS核心可视化格式模型(visual formatting model)之五:常规流中的inline formatting context
在【<em>分享</em>】<em>说说</em><em>标准</em>——CSS<em>核心</em><em>可视化</em><em>格式</em><em>模型</em>(<em>visual</em> <em>formatting</em> <em>model</em>)之四:常规流中的Block <em>formatting</em> context中,已经<em>分享</em>了块<em>格式</em>化上下文,现在继续<em>分享</em>关于常规流中的inline <em>formatting</em> contexts。 行内<em>格式</em>化上下文(inline <em>formatting</em> contexts) 什么是行框 相对于块<em>格式</em>化上下文,在
分享说说标准——CSS核心可视化格式模型(visual formatting model)之四:常规流中的Block formatting context
在上次<em>分享</em>的【<em>分享</em>】<em>说说</em><em>标准</em>——CSS<em>核心</em><em>可视化</em><em>格式</em><em>模型</em>(<em>visual</em> <em>formatting</em> <em>model</em>)之三:定位体系概述中,大致介绍了<em>可视化</em><em>模型</em>中的定位体系。其中,常规流是最为基础的。 这次就和大家<em>分享</em>常规流的一些布局要点和重要的概念。 在常规流中的框(boxes,元素形成的矩形区域),都属于一个<em>格式</em>化的上下文中,可能是块的,也可能是行内的,但不可能同时是行内的又是块的。块框参
分享说说标准——CSS中非常重要的可视化格式模型(visual formatting model)简介
从今天开始,我会跟大家<em>分享</em>CSS非常重要的<em>可视化</em><em>格式</em><em>模型</em>,那这个概念到底有多重要呢?盒子<em>模型</em>是CSS中所有元素产生的box的自身构成,而<em>可视化</em><em>格式</em><em>模型</em>则是把这些box,按照规则摆放到页面上,也就是通常所说的布局。换句话说,<em>可视化</em><em>格式</em><em>模型</em>是整个页面的<em>模型</em>,这个<em>模型</em>规定了怎么在页面里摆放box,box相互作用等等。属于CSS的最为<em>核心</em>的概念之一。 <em>可视化</em><em>格式</em><em>模型</em>的概念非常多,我会分多次说明,我也会在
分享说说标准——CSS核心可视化格式模型(visual formatting model)之二:控制框(Controlling Box)的形成
关于<em>可视化</em><em>模型</em>的包含块,已经在“[url=http://topic.csdn.net/u/20100705/09/40918be9-bb47-4477-abf0-a45801f9df34.html?49356]<em>说说</em><em>标准</em>[/url]”系列中跟大家<em>分享</em>过了。rnrn这次,跟大家<em>分享</em>另一个比较重要的概念,这个概念也许大家会很熟悉,因为经常挂在嘴边,这就是,块元素和块框,行内元素和行框,以及 display <em>特性</em>等。rnrn我们经常用到块元素、行内元素的概念,那么,到底什么是块元素,什么是行内元素,它们有什么特点,怎么形成的,有什么作用呢?什么是块框,什么又是行内框呢?rnrn下面,请大家跟我一起走近W3C<em>标准</em>,看个究竟吧。rnrn[size=18px][b]一、块级元素和块框[/b][/size]rn块级元素是源文档中那些在视觉上被<em>格式</em>化为块(如:段落)的元素。某些 'display' <em>特性</em>的取值会产生块级元素:'block','list-item','run-in'(某些时候是块级元素,参见下文 “run-in”),以及'table'。rnrn块级元素(不包含 table),会形成仅包含块框或仅包含行内框的主块框( principal block box )。主块框会为子孙元素建立包含块,生成内容,并且也是涉及所有定位体系的框。主块框参与[url=http://www.w3.org/TR/CSS2/visuren.html#block-<em>formatting</em>]block <em>formatting</em> context[/url]。rnrn某些块级元素在主块框之外生成额外的框:'list-item'元素。这些额外的框根据原始框来定位。 个人感觉那些额外的框是用来放置标志的,比如,LI 元素前面的点。rnrn[size=16px][b]匿名行框[/b][/size]rn例1:rn[code=HTML] rnSome textrn More textrn[/code](并假定DIV和P都设置了 'display: block'),DIV 看来包含行内内容和块内容。为了使<em>格式</em>化简单一些,我们假定有一个匿名块框围绕在"Some text"周围。rn[img=https://lh6.googleusercontent.com/ppLUjs0-4yY6F_Fz32GPRuytOc1c-iiz3e-XRI-wjbL9kJn0iPmskA_77E1eYEP9xcSpZE_koRJKJe3kBQnC7J98hTGBwZnazbgy-gV9PL2TPj2fKw][/img]rn[b][size=10px]来自W3C,上面的图中有 3 个框,div 的 box,P 的 box,以及包含 “Some text” 的匿名块框。[/size][/b]rnrn换句话说:如果一个块框(如上例中为DIV生成的框)在其中包含另外一个块框或插入框(如上例中的P),那么,我们强迫它只能包含块框或插入框。因此,上面的 “Some text” 被强制加到一个匿名的块框里面。rnrn当一个行内框包含一个块框(block box)时,这个行内框 (inline box)(和与它处于同一行框内的祖先行内框)会围绕着块框被截断。断点之前和之后的[url=http://topic.csdn.net/u/20100804/16/0130ce8c-1568-442b-a4f5-91e7a2bf9197.html?36690]行框(line boxes)[/url]会被封闭到匿名的框里,并且,这个块框会成为这些匿名框的兄弟框。当这样的行内框受到相对定位的影响时,相对定位也会影响块框。rn例2:rn[code=HTML]rnrn Anonymous text interrupted by a blockrn rnrnrn rn This is anonymous text before the P.rn This is the content of P.rn This is anonymous text after the P.rn rn rn[/code]上述代码中,SPAN 元素包含匿名文本区块 C1,后跟块级元素 P ,最后是匿名文本区块 C2。最后的框(boxes)是围绕 SPAN 的DIV形成的块框,包含 C1 的匿名块框,P 的块框,和另一个包含 C2 的匿名块框。rn[img=https://lh3.googleusercontent.com/48bEH18jAFdUkvdm1EmUH3c5WEntFxPXXoPOOEFr1scNp0-DqAuwI6DPOfxAyHKU_NCveDzglwSx1Y0tZNZHSW5SZRvmj5vVawKZI2eTTP025GBS][/img]rn[b][size=10px]注意,[/size][/b][url=http://topic.csdn.net/u/20100804/16/0130ce8c-1568-442b-a4f5-91e7a2bf9197.html?36690]行框(line box)[/url][b][size=10px]和行内框(inline box)是两个不同的概念,后续会说到行框(line box)。[/size][/b]rnrn匿名框的<em>特性</em>(properties)从包含它的非匿名框那里继承而来(比如,例1中,匿名框会继承包含它的 DIV <em>特性</em>)。给继承<em>特性</em>会使用初始值。比如,字体,匿名框会从DIV继承,但是margin值会是 0 。rnrn匿名框不会影响元素的原有<em>特性</em>设置。如例2中 SPAN 设置了 border,产生匿名框后,C1 C2还是被红色的边框包围。rnrn注意,块框会占据一整行。rnrn[size=18px][b]二、行内级别元素和行内框[/b][/size]rnrn行内元素是源文档中那些不形成新的内容块的元素;内容在行内分布(如,段落内着重的文本,行内图形等等)。某些'display'<em>特性</em>的值形成行内元素:'inline','inline-table','run-in'(某些时候;参见下文 “run-in”)。行内级别元素生成行内框。rn rn[size=16px][b]匿名行内框[/b][/size]rnrn例1:rn[code=HTML] Some emphasized text[/code]P元素生成一个块<em>控制</em>框,其内还有几个行内框。"emphasized"的框是一个行内元素()产生的行内框,而其它的框("Some"和"text")是块级元素(P)产生的行内框。后者就称为匿名行内<em>控制</em>框,因为它们没有与之相关的行内元素,所以,这些框被叫做匿名行内框。rnrn这样的行内框从其父块框那里继承可以继承的属性。非继承属性取它们的初始值。例子中,初始匿名框的颜色继承自P,而背景是透明的。rnrn空格内容会根据 'white-space' <em>特性</em>被压缩,不会创建任何匿名行内框。rnrn匿名行内框和匿名块框可以被统称为匿名框。rnrn在<em>格式</em>化 table 时,会形成更多的匿名框。rnrn[size=18px][b]三、插入框[/b][/size]rnrn[b]插入框的表现如下[/b]:rn1. 如果插入框包含一个块框,那么插入框会成为一个块框;rn2. 如果一个块框(不是<em>浮动</em>,也不是绝对定位)跟随在一个插入的<em>控制</em>框之后,则该插入框成为该块框的第一个行内框。rn3. 否则,该插入框成为一个块框。rnrn一个'run-in'框在插入标题时很有用,如下例:rn[code=HTML]rnrn A run-in box examplern rnrn A run-in heading.rn And a paragraph of text that follows it. rn[/code]本例可能被<em>格式</em>化为:rn[b]A run-in heading. [/b]And arnparagraph of text thatrnfollows it.rnrn尽管,从视觉看,它成为块框的一部分,插入元素的<em>特性</em>仍然继承自源树中它的父元素。rnrn注意,Firefox至今仍不支持 ‘run-in’:[url=https://developer.mozilla.org/en/CSS/display]https://developer.mozilla.org/en/CSS/display[/url]。rnrn[size=18px][b]四、’display’ <em>特性</em>[/b][/size]rnrn[b]'display'<em>特性</em>[/b]rnrn[b]值[/b]: inline | block | list-item | run-in | compact | marker |table | inline-table | table-row-group | table-header-group |table-footer-group | table-row | table-column-group | table-column |table-cell | table-caption | none | inheritrn[b]初始值[/b]: inlinern[b]适用于[/b]: 所有元素rn[b]可否继承[/b]: 否rn[b]百分比[/b]: N/Arn[b]媒介[/b]: 所有rnrn[b]block[/b]rn该值使一个元素生成一个块框。rn[b]inline-block[/b]rn该值使一个元素生成一个块框,自身在文档流中像一个行内元素,跟替换元素相似。元素的内部按照块框<em>格式</em>化,自身按照一个行内替换元素<em>格式</em>化。rn[b]inline[/b]rn该值使一个元素生成一个或多个行内框。rn[b]list-item[/b]rn该值使一个元素(如HTML中的LI)生成一个原始块框和一个列表项行内框。要了解列表和列表<em>格式</em>化的信息,请参见列表一节。rn[b]none[/b]rn该值使一个元素在<em>格式</em>化结构中不显示(换言之,该元素对布局没有影响)。子孙元素也不产生任何框;该行为不能由设置子孙元素的 'display' 属性而被覆盖。rn请注意 'none' 的显示<em>特性</em>并不生成一个不可见的框;它根本不生成框。CSS包含了机制使一个元素能够在<em>格式</em>化结构中生成框而影响<em>格式</em>化,但本身不可见( visible <em>特性</em>)。rn[b]run-in[/b]rn根据上下文,这些值要么生成块框,要么生成行内框。对于插入和压缩框适用的属性基于它们最终的状态(行内或块类)。rnrn注意,尽管'display'的初始值是 'inline',用户端(对我们来说是浏览器)的缺省样式表可以覆盖它。比如,P 和 DIV 的 display <em>特性</em>值是 ‘block’,TABLE的display <em>特性</em>值是 ‘table’。rnrn另外注意,在IE6和IE7中,对display<em>特性</em>支持的不完全。例如:rn[code=HTML]rn rn IE6 and IE7 don't support the property valuern[/code]发现,除IE6和IE7之外,其他浏览器中,DIV的宽度都根据内容 shrink-to-fit了。rnrn这节的概念较多,较为抽象,没必要每一小条都记住。大概理解即可,但一定要搞清楚什么是块元素和块框,什么是行内元素和行内框。rnrn<em>可视化</em><em>格式</em><em>模型</em>概述:rn[url=http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196]http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196[/url]rnrn更多<em>说说</em><em>标准</em>系列:rn[url=http://topic.csdn.net/u/20100705/09/40918be9-bb47-4477-abf0-a45801f9df34.html?93428]【<em>分享</em>】<em>说说</em><em>标准</em>系列目录[/url]
CSS浮动原理
CSS Float是网页设计最强大的灵活性功能之一。本文介绍CSS Float的基本原理和行为特征,并介绍各种浏器Float<em>特性</em>的Bugs。 内容 基本的<em>浮动</em>原理 <em>浮动</em>是如何进行的 <em>浮动</em>从何处开始 水平<em>浮动</em>堆叠 反向<em>浮动</em> Clearing Floats 基本的<em>浮动</em>原理任何元素 elemen
css clear属性 的深入了解
<em>css</em>  <em>clear</em>属性深入了解:一、什么是 CSS  <em>clear</em>清除<em>浮动</em>?                   元素<em>浮动</em>之后,周围的元素会重新<em>排列</em>,为了避免这种情况,使用 <em>clear</em> 属性。            <em>clear</em> 属性指定元素两侧不能出现<em>浮动</em>元素。            使用 <em>clear</em> 属性往文本中添加图片廊:  <em>clear</em>属性值:left 清除该元素 左边的<em>浮动</em>元素。俗一点就是说...
清除浮动最有效的css写法
说起来呢,基本上只要你给容器div加了float的属性,就需要清除<em>浮动</em>来使页面显示正常,那么,到底有什么方法可以让<em>浮动</em>轻松清除呢? 可以用display:flex;替代,但是它对IE8,9支持不是很好,所以不怎么这么用。1.在容器div的里面结束标记之前写如下这样的div这段代码:虽然通俗易懂,容易掌握,但是在页面中加入了一个无意义的空标
CSS之——盒子模型、盒子的定位与浮动
一、CSS盒子<em>模型</em> 所有HTML元素可以看作盒子,在CSS中,&quot;box <em>model</em>&quot;这一术语是用来设计和布局时使用。 CSS盒<em>模型</em>本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。 盒<em>模型</em>允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子<em>模型</em>(Box Model): Margin(外边距) - 清除边框外的区域,外边距是透明的。 ...
浮动的优缺点,如何清除浮动
什么是<em>浮动</em>?元素<em>浮动</em>以后可以想做或向右移动,直到它的外边缘碰到包含它的框或者另外一个<em>浮动</em>元素的边框为止。元素<em>浮动</em>以后会脱离正常的文档流,所以文档的普通流中的框就变现的好像<em>浮动</em>元素不存在一样。<em>浮动</em>的好处: 在图片周围包含文字 创建网页布局 <em>浮动</em>的缺点: 无法撑起父元素。 同级别的兄弟元素会围绕在周围。 清除<em>浮动</em>这是一个<em>浮动</em>的demo:<!doctype html> <me
浅谈clearfix类和clear清除浮动
CSS<em>浮动</em>会对原本的布局产生破坏,所以我们会考虑清除<em>浮动</em>产生的影响,本文不谈<em>浮动</em>以及各种清除<em>浮动</em>的方法,只讨论<em>clear</em>fix类和<em>clear</em>清除<em>浮动</em>。 在网页设计中,很常见的一种情况是给内容一个div作为包裹容器,而这个包裹容器不设置高度,而是让里面的内容撑开包裹容器的高度。 </
sql数据结构数据库
CSS<em>浮动</em>(float,<em>clear</em>)通俗讲解 CSS<em>浮动</em>(float,<em>clear</em>)通俗讲解 CSS<em>浮动</em>(float,<em>clear</em>)通俗讲解
CSS 清理浮动 clear属性
清理虽然<em>浮动</em>可以便于页面布局,但同时会产生一些问题,也就是常说的副作用。<em>浮动</em>元素最常见的缺陷是:父元素的高度塌陷和影响兄弟元素的位置。首先,看看父元素的高度塌陷。假设有一个容器,其中两个子元素,一个子元素向左<em>浮动</em>,一个子元素向右<em>浮动</em>。代码如下:.wrapper {    border: 2px dashed #ccc;}.wrapper &amp;gt; div {    width: 80px;    ...
CSS布局模型/流动模型(Flow)/浮动模型 (Float)/层模型(Layer)
1<em>css</em>布局<em>模型</em> 清楚了CSS 盒<em>模型</em>的基本概念、 盒<em>模型</em>类型, 我们就可以深入探讨网页布局的基本<em>模型</em>了。布局<em>模型</em>与盒<em>模型</em>一样都是 CSS 最基本、 最<em>核心</em>的概念。 但布局<em>模型</em>是建立在盒<em>模型</em>基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局<em>模型</em>是本,那么 CSS 布局模板就是末了,是外在的表现形式。  CSS包含3种基本的布局<em>模型</em>,用英文概括为:Flow
浮动float和清楚浮动clearfix
<em>浮动</em>,在HTML排版常常被使用的一个CSS属性,很多网页设计都会用到<em>浮动</em>,但并不是说<em>浮动</em>是网页排版的必需品。由于<em>浮动</em>具有破坏性,很多时候采用<em>浮动</em>反而会造成适得其反的效果。在张大神的CSS三无准则中就有一条准则是“无<em>浮动</em>”,提倡整个网页排版最好不需要用到<em>浮动</em>元素。每个人并非张大神,对于网页的排版设计有自己的想法和方式,需不需要用到<em>浮动</em>都取决自己,不需要太过刻意去追求完全无<em>浮动</em>的布局。 float的
CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性
CSS清除<em>浮动</em>_清除float<em>浮动</em> - DIVCSS5 http://www.div<em>css</em>5.com/jiqiao/j406.shtml
css 不使用浮动横向排列
解释一下display的几个常用的属性值,inline , block, inline-block inline: 使元素变成行内元素,拥有行内元素的<em>特性</em>,即可以与其他行内元素共享一行,不会独占一行.  不能更改元素的height,width的值,大小由内容撑开.  可以使用padding,margin的left和right产生边距效果,但是top和bottom就不行. bloc...
html在一行内横向排列并排同行同时显示两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
01/23/2014, Posted in  移动 Comments: No comments 最近在做一个div <em>css</em>切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性。趁现在还清醒赶紧记下笔记先: 一、并排在一行的两个div样式有这种情况:ie或者ff下对于子div设置float左的时候,如果另外的子div没有设置float左的 话,两个
DIV布局之道四:clear:both清除DIV两侧浮动详解
我们要实现图中表格实现的效果,使用DIV+CSS该如何实现呢? 众所周知,要实现如上效果,我们写一个两行两列的表格,使得表格第二行两个单元格合并即可实现上图效果,可以使用如下代码实现: XML/HTML Code复制内容到剪贴板 table width="303" height="151" border="1" align="center" cellpadding
CSS:标准文档流、浮动、绝对定位—(解决有时候父元素不能自动扩展)
CSS(表现<em>标准</em>语言)的三种定位机制 <em>标准</em>文档流:从上到下、从左到右,由块级标签(独占一行div ul li dl dt )和行级元素(同一行显示)组成 自动居中 margin:0 auto;设置margin之后不能同时设置float和position <em>浮动</em>:float(实现块级元素横向排版) :left none right 向左或向右移动,直至碰到容器为止。 当元素没有设置宽度值,而设置
CSS样式之clear清除浮动
CSS样式之<em>clear</em>清除<em>浮动</em>
css浮动基本规则
说到元素的<em>浮动</em>,首先要明确一个概念就是包含块(containing block)。所谓<em>浮动</em>元素的包含块,就是其最近的块级祖先元素。我们后面会举例来说明。这里关于<em>浮动</em>的问题,主要有以下几点: 1、<em>浮动</em>元素的外边界不能超过其包含块的内边界。 2、<em>浮动</em>元素的外边界是另一<em>浮动</em>元素的外边界。 3、<em>浮动</em>元素的顶端不能比之前出现的<em>浮动</em>元素的顶端更高。 4、<em>浮动</em>元素顶端不超过当前行。 5、<em>clear</em>属性。 1、<em>浮动</em>
CSS中浮动的特点
我们在给标签设置<em>浮动</em>后,会有一下几个特点 1 <em>浮动</em>会脱离<em>标准</em>流       如果一个元素按照正常的<em>标准</em>流来显示,会在html中所属的位置上占位,后面的元素会紧跟着它,但是<em>浮动</em>脱离了<em>标准</em>流,以后我们在看到<em>浮动</em>的元素之后,不能以正常的<em>标准</em>流里进行判断 2 <em>浮动</em>的元素会影响下面的元素,不会影响上面的元素 * {
清除浮动的几种简单方法:万能清除浮动法,clear:both......
方法一:给父级元素添加声明:overflow:hidden;。 例: .wrap{ border:3px solid #000;overflow:hidden;} .box01{ width:500px; height:500px; background:#F00; float:left;} .box02{ width:500px; height:500px; background:#09F; ...
CSS中clear清除浮动属性
1. 作用规定元素的某一侧不允许存在<em>浮动</em>元素。2. 应用消除其他<em>浮动</em>元素对其产生的影响。3. 值值说明both两侧都不允许存在<em>浮动</em>元素left清除元素左侧<em>浮动</em>元素right清除元素右侧<em>浮动</em>元素none无清除效果(默认值)4. 原理设置了<em>clear</em>的元素将不像前一个<em>浮动</em>元素对齐,换行重新开始。5. 实际应用解决网页中的“塌陷”问题(什么是塌陷:如果父级元素只包含<em>浮动</em>元素,那么在未设置高度的同时,则父...
css-清除浮动的原理与方法
一.什么是清除<em>浮动</em>?1.<em>浮动</em>的缺陷<em>浮动</em>虽然可以便于页面布局,但同时会产生一些问题,也就是我们常说的“副作用”。一个元素设置了<em>浮动</em>(即 float 值为 left, right 或 inherit 并从父元素上继承 left 或 right 值)的常见缺陷是——影响它的兄弟元素的位置和父元素产生高度塌陷,下面对这两个问题展开说明。一个元素设置了<em>浮动</em>后,会影响它的兄弟元素,具体的影响方式较为复杂,这要...
HTML-CSS浮动元素详解
Posted on 2016-07-08 11:18 王者归来! 阅读(202) 评论(0) 编辑 收藏 <em>浮动</em>定位是指 1.1将元素排除在普通流之外,即元素将脱离<em>标准</em>文档流 1.2元素将不在页面占用空间 1.3将<em>浮动</em>元素放置在包含框的左边或者右边 1.4<em>浮动</em>元素依旧位于包含框之内 2. <em>浮动</em>的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个<em>浮动</em>框的边框为止经常使
可视化格式模型css浮动、定位、盒模型
桃子叔叔原创,转帖请注明 桃子叔叔有话说: 在很多前端工程师的认知里,前端三剑客中js是重中之重,学好了js,掌握了spa框架和自动化工程化的一系列工具就无敌了,而往往忽略了<em>css</em>基础的知识,特别是平时忙于业务,随便问上一嘴,基本都是磕磕巴巴,很难像js一样了然于胸。桃子叔叔今天特意回头去看<em>css</em>最基础最重要但也是最容易忽视的部分,拿起来温习,希望可以和小伙伴们一起切磋,有任何...
html 盒子模型基础(文档流,浮动,页面布局)(五)
1.文档流: .box1{ margin-top: 500px; background-color: red; } .box2{ width: 100px; height: 100px; background-color: yellow; } span{ backgro
html——float与clear详解(深度好文)
教程开始:          首先要知道,div是块级元素,在页面中独占一行,自上而下<em>排列</em>,也就是传说中的流。如下图:              可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素是独占一行的。        注意,以上这些理论,是指<em>标准</em>流中的div。
浅谈CSS清除浮动(ClearFix)的方法
为什么要清除<em>浮动</em>? 可以很简洁地说,清除<em>浮动</em>就是为了清除<em>浮动</em>元素产生的不良影响。 <em>浮动</em>带来的负面影响 1、背景无法显示 2、边框无法撑开 3、margin、padding设置值无法正确显示 清除<em>浮动</em>的方法 1. 给父元素设置一定的高度height 2.使用<em>css</em>的<em>clear</em>属性 3. 使用“隔墙法” 4. 使用 :after伪元素 5. 使用 overflow属性 6. 给父元素设置display: table
关于CSS中继承、特殊性、重要性、层叠的理解
CSS继承: CSS的某些样式是具有继承性的,那么什么是继承呢?简单的来说,继承就是应用样式的元素的后代会继承样式的某些属性。 例:p{color;blue;} 我爱前端开发。 显示的效果为:p中的文本和span中的文本都被设置为了蓝色,即标签继承了标签的样式(注:有些CSS样式是不具有继承性的,如:边框、边界、背景、定位、布局等) 注:继承的好处在于恰当地使用继承可以减少代码中的选择器
详解 清除浮动 的多种方式(clearfix)
说明本文适合知道HTML 与 CSS基础知识的读者,或者想要了解清除<em>浮动</em>背后原理的读者!1.什么是<em>浮动</em>首先我们需要知道定位 元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位方式 1、普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素:按照从上到下的方式逐个<em>排列</em> 页面中的行内元素:按照从左到右的方式逐个<em>排列</em> 但是如
理解CSS clear:both/left/right的含义以及应用
前言:        感觉是刚过春招,又要开始秋招,对于技术渣渣、学历普通的我,忧愁再次降临。开始准备秋招路途中……来温故而知新,沉下心好好学习。貌似本人在清除<em>浮动</em>中第一次接触<em>clear</em>:left/right,平时只用到<em>clear</em>:both,好像也只见到这个,这就尴尬了。 一、什么是<em>浮动</em>,<em>标准</em>文档流又是个啥        所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从
CSS基础之盒子模型浮动布局
盒<em>模型</em>      谈到盒<em>模型</em>,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content)、填充(padding)、边框(border)、边界(margin); 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。 先上图: 上图清晰的表明了盒<em>模型</em>的具体表现样式; margin外边距+borde
关于对CSS中BFC (块级格式化上下文) 的理解
转自: https://www.thinktxt.com/web-front/2017/02/18/<em>css</em>-bfc-layout-<em>model</em>.html 也许你已经掌握了HTML、CSS的基本布局技能,但是有可能还有一些难以琢磨透的专业名词还不是很清楚,比如BFC。今天我们就来聊聊对BFC的理解,以便我们在布局的过程中能够更加得心应手。 概念 BFC(Block Formatt
Basic Visual Formatting in CSS
Basic Visual Formatting in CSS
清除浮动的四种样式写法
/* 清除<em>浮动</em>1 */ /* 添加额外标签使用 */ .<em>clear</em> { <em>clear</em>: both; }   /* 清除<em>浮动</em>样式2 */ .<em>clear</em>fix { overflow: auto; /* overflow: hidden;同理 */ zoom: 1; }   /* 清除<em>浮动</em>样式3 */ /* :after相当于额外空标签 */ .<em>clear</em>fix:after{...
CSS——脱离标准流方法一:浮动
<em>浮动</em>是<em>css</em>里面布局用的最多的属性。<em>浮动</em>语句:float:left;  左<em>浮动</em>float:right;  右<em>浮动</em>1、没有<em>浮动</em>的时候2、两个盒子都左<em>浮动</em><em>浮动</em>的元素脱标,那么就能并排了,并且能够设置宽高了。一个span标签如果<em>浮动</em>,不需要转成块级元素,就能设置宽度、高度。<em>浮动</em>的所有标签已经不区分行内、块了。<em>浮动</em>的元素互相贴靠。3、两个盒子都右<em>浮动</em>4、<em>浮动</em>的元素有“字围”效果 &amp;lt;div&amp;gt;盒子...
清除浮动的三种方法(::after/.clear/overflow)
清除<em>浮动</em>的三种方法 ::after <em>clear</em>:both; overflow
css笔记:清除子元素对父元素的浮动效果的三种方法
清除子元素对父元素的<em>浮动</em>效果的三种方法对于<em>浮动</em>元素,我们知道如果父元素不设置height,而子元素全部设置为<em>浮动</em>,父元素不会被撑开(也就是父元素为一条直线,height为0),我们看到的就是一条线在所有子元素上面。例如:<!DOCTYPE html> <em>clear</em>_float</
流式布局、浮动布局及绝对定位布局
知识点: 1.掌握三大布局技巧——流式布局、<em>浮动</em>布局及绝对定位布局; 2.精通<em>标准</em>文档流、盒子<em>模型</em>、float属性以及position属性等知识。 W3C 由万维网联盟制定的一系列<em>标准</em>: 1.结构化<em>标准</em>语言(HTML和XML) 2.表现<em>标准</em>语言(CSS) 3.行为<em>标准</em>语言(DOM和ECMAScript) CSS三种定位机制:<em>标准</em>文档流 <em>浮动</em>和绝对定位
css 浮动 -张鑫旭博客笔记
原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 本文地址:http://www.zhangxinxu.com/wordpress/?p=594 1.<em>浮动</em>的原始意义 我们使用float<em>浮动</em>做了很多其本职工作以外的事情,于是我们会混淆,我们会回看不清float真正的面目。<em>浮动</em>真正的意义在哪里呢?要知道这个问题的答案很简单,假设现在CSS中
CSS技巧(一):清除浮动和兼容性处理
<em>浮动</em>的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的<em>浮动</em>元素停了下来。高度塌陷:<em>浮动</em>元素父元素高度自适应(父元素不写高度时,子元素写了<em>浮动</em>后,父元素会发生高度塌陷)清楚<em>浮动</em>用到的<em>css</em>属性<em>clear</em><em>clear</em>:left | right | both | none | inherit:元素的某个方向上不能有<em>浮动</em>元素<em>clear</em>:both:在左右两侧均不允许<em>浮动</em>元素。下面是几种清除...
WEB入门.七 CSS布局模型
学习内容<em>标准</em>文档流 流动<em>模型</em>(flow <em>model</em>)<em>浮动</em><em>模型</em>(float <em>model</em>)CSS基本布局能力目标理解<em>标准</em>文档流使用流动<em>模型</em>实现页面布局 使用<em>浮动</em><em>模型</em>实现页面布局掌握常用CSS布局本章简介上一章节讲解了盒子<em>模型</em>以及页面元素定位,理解了绝对定位、相对定位、包含块三者之间的关系以及应用场合。例如:绝对定位的页面元素会脱离<em>标准</em>文档流,通过指定的坐标位置进行定位;相对定位则不脱离<em>标准</em>文档流,只是
标准文档流和浮动
文档流(百度百科) 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序,该在什么位置就在什么位置,也可以按照上面的意思理解,自上而下,自左到右的顺序) 详细说明:比如网页的div标签它默认占用的宽度位置是一整行,p标签默认占用宽度也是一整行,因为div标签和p标签是块状对象。 网页中大部分对象默认是占用文档流,也有一些对象是不占
CSS 基础点集锦一:盒子模型浮动、清除浮动
1、盒子<em>模型</em>:示意图(图片来自w3school):说明:上图中,由内而外依次是 元素内容(content) 内边矩(padding-top、padding-right、padding- bottom、padding-left) 边框(border-top、border-right、border-bottom、border- left) 外边距(marging-top、margin-right、ma
CSS 浮动的理解
以下都是我碰到过的疑惑,在此一一验证: 1、div1不<em>浮动</em>,div2左<em>浮动</em>,发生什么情况? 说明一个情况:<em>浮动</em>只是脱离其所在行,但仍然是在该行<em>浮动</em>。该行是普通流决定的。如上图,div1是普通流占据第一行,那么div2占据第二行,其只能在第二行<em>浮动</em>。 2、div1左<em>浮动</em>,div2不<em>浮动</em>,顺序是(div1,div2),发生什么情况?可以这样分析:div1在原本行中<em>浮动</em>起来, 说明:di
深入ASP.NET MVC Model验证-使用.NET验证特性类指定Mode验证规则
上一篇文章也有介绍使用验证<em>特性</em>类指定Mode验证规则,但是介绍的不是很详细,下面详细深入谈谈如何使用.NET内置验证<em>特性</em>类指定Mode验证规则及自定义符合自己的业务规则的验证<em>特性</em>类的方法。一、使用内置的.NET验证<em>特性</em>类在程序集 System.ComponentModel.DataAnnotations.dll, v4.0.0.0中为我们定义很多有用的验证<em>特性</em>类。最常用类如下:CompareAtt...
CSS基础-21CSS定位-浮动的应用,实现瀑布流布局
html> lang="en"> charset="UTF-8"> href="<em>css</em>03.<em>css</em>" type="text/<em>css</em>" rel="stylesheet"> id="mydiv1"> src="images/item1.jpg"> src="
H5 CSS基础二:清除浮动是个难点
原文链接原文写的非常好,在此引用!众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除<em>浮动</em>,那么有<em>浮动</em>元素的父元素容器将元素将无法自动撑开。换句简单好理解的话来说,假如你在写CODE时,其中div.A(这个就是说页面中有一个div,并且把其命名为class=”A”)中包含了两个或多个子元素div.B,div.C,div.D(这里我以三个为例),并且此时div.B和
清除浮动 clear:both的原理
清除<em>浮动</em>的原理,就是给<em>浮动</em>元素留下足够的空间
Css学习--三种布局模型(流动模型浮动模型、层模型)
希望读者在阅读者这篇文章之前了解一下关于盒<em>模型</em>的相关知识 一、流动<em>模型</em> 流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动<em>模型</em>来分布网页内容的。 流动布局<em>模型</em>具有2个比较典型的特征: 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧
CSS可视化格式模型
<em>可视化</em><em>格式</em><em>模型</em>     要掌握的三个最重要的CSS概念是<em>浮动</em>、定位和框<em>模型</em>。这些概念<em>控制</em>在页面上安排和显示元素的方式,形成CSS的基本布局。如果你习惯于用表格<em>控制</em>布局,那么这些概念初看上去可能有点奇怪。实际上,大多数人只有在使用CSS开发沾点一段时间之后,才能完全占我框<em>模型</em>的复杂性、绝对定位和相对定位之间的差异以及<em>浮动</em>和清理的实际工作方式。在切实掌握这些概念之后,使用CSS开发沾点就会变
css可视化格式模型
3个重要的<em>css</em>概念:<em>浮动</em>、定位和盒<em>模型</em> 1.盒<em>模型</em> 当我们在<em>css</em>中设计一个块级元素的width和height属性时比如.box{width :100px; height:100px}时,其中的width 和height仅仅是对content部分设置的,即定义上图中padding下虚线方框内区域的长和宽。而不是内容,内边距,边框的总和。 2.外边距叠加 当两个或者更多垂直外边距相遇...
【CSS布局模型】流动模型浮动模型、层模型
流动<em>模型</em>流动是默认的网页布局<em>格式</em>,默认情况下HTML元素都根据该模式来分布网页内容。 该<em>模型</em>下有两个特征元素块状元素顾名思义,他是一个方块, - 块状元素在默认情况下于包含元素中自上而下垂直排布。 - 默认情况下,宽度为100%,所以实际上块状元素都独占一行。高度宽度、行高以及顶和底边距都可设置。内联元素(行内元素) 内敛元素会在所处的包含元素中自左到右水平分布显示。 和其他元素都在一行上
CSS 浮动基本概念
<em>浮动</em>在文档布局中是一个非常重要的概念,CSS 允许<em>浮动</em>任何元素。 <em>浮动</em>的<em>特性</em>: 1. <em>浮动</em>元素会被从正常文档流中删除,不过还是会影响文档的布局 2. <em>浮动</em>元素周围的外边距不会被合并 3. 距离<em>浮动</em>元素最近的块级祖先元素是它的包含块 4. <em>浮动</em>元素会生成一个块级框,不管它本身是什么
html+css 浮动模型
float:使元素站队 <em>浮动</em>元素产生了<em>浮动</em>流: 1.所有产生了<em>浮动</em>流的的元素,块级元素看不到<em>浮动</em>元素(分层显示) html: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;link rel=&quot;stylesheet&quot; href=&quot;1.<em>css</em>&quot;&am
HTML----css clear的理解,清除浮动方式
<em>clear</em>:both的理解 在CSS中我们会经常要用到“清除<em>浮动</em>”Clear,比较典型的就是<em>clear</em>:both; 语法: <em>clear</em> : none | left |right | both 参数: none : 允许两边都可以有<em>浮动</em>对象 both : 不允许有<em>浮动</em>对象 left : 不允许左边有<em>浮动</em>对象 right : 不允许右边有<em>浮动</em>对象 当属性设置float(<em>浮动</em>)时,其所
CSS中浮动的原理和规则
任何元素 element 都可以被<em>浮动</em>。段落、div、list、tables,以及图像都可以被<em>浮动</em>,事实上即使是像 span 和 strong这样的行内置元素也可以很好地进行<em>浮动</em>。<em>浮动</em>的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个<em>浮动</em>框的边框为止。由于<em>浮动</em>框不在文档的普通流中,所以文档的普通流中的块框表现得就像<em>浮动</em>框不存在一样。请看下图,当把框 1 向右<em>浮动</em>时,它脱离文档流并且向右移动,...
CSS中的三种基本的定位机制(普通流、定位、浮动
一、普通流   普通流中元素框的位置由元素在XHTML中的位置决定。块级元素从上到下依次<em>排列</em>,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。   普通流就是html文档中的元素如块级元素、行内元素依据他们的显示属性按照在文档中的先后次序依次显示。是块级元素就占一行或多行,是行内元素就和其他元素共处一行,没什么好说的,该咋显示咋显示,一个萝卜一个坑。 二
5-CSS-浮动清除-继承-优先级-定位-引入CSS-盒子模型
CSS<em>浮动</em>和清除 float:让元素<em>浮动</em>,取值:left(左<em>浮动</em>)、right(右<em>浮动</em>) <em>clear</em>:清除<em>浮动</em>,取值:left(清除左<em>浮动</em>)、right(清除右<em>浮动</em>)、both(同时清除) 1、CSS<em>浮动</em> <em>浮动</em>的元素,将向左或向右<em>浮动</em>,<em>浮动</em>到包围元素的边上,或上一个<em>浮动</em>元素的边上<em>浮动</em>的元素,不再占空间了。并且,<em>浮动</em>元素的层级要高于普通元素,像飞起来了。<em>浮动</em>的元素,一定是“块元素”。不管
HTML5高级之css清除float浮动
我们先来回忆一下float的特征:        1)块在一排显示        2)内联支持宽高        3)默认内容撑开宽度        4)脱离文档流        5)提升层级半层     由于float<em>浮动</em>脱离文档流,那么就很容易产生各种兼容性和由于<em>浮动</em>产生的视觉效果上的差别。接下来我们分析几种主要的解决方法。大家最熟悉的方法应该就是添加空标签,然后利用<em>clear</em>
css清除浮动float的七种常用方法总结和兼容性处理
7、万能清除法 **after伪类** 清<em>浮动</em>(现在**主流**方法,**推荐使用**) ``` 选择符:after{ content:"."; <em>clear</em>:both; display:block; height:0; overflow:hidden; visibility:hidden;
关于float浮动的块级元素在编写html时先后顺序对布局的影响
闲来没事,在做2016年百度前端技术学院,任务三:三栏式布局 看了下任务需求: 感觉 so easy,于是立马动手写了! html部分 <em>css</em>部分 结果一看: 刚看到这个结果时感觉脸都绿了,然后调出<em>css</em>仔细看哪里写错了: 找了半天也没看出<em>css</em>哪里写的不对,之后我又看了下学院里面其他同学
清除浮动兼容ie
.<em>clear</em>:after { content: &quot;&quot;; display: block; height: 0; <em>clear</em>: both; visibility: hidden; } .<em>clear</em> { zoom: 1; }
CSS定位、浮动、对齐
定位 position 元素可以使用 top right bottom left属性定位,但是都要先设定position类型,否则不能正常工作 position属性指定了元素的定位类型:static fixed relative absolute static 静态定位 这是HTML元素的默认值, 元素出现在正常的流中, static定位不会受到上下左右的影响 fixed...
详解CSS中clear属性both、left、right值的含义
<em>clear</em>的值有四个 none:允许两边都可以有<em>浮动</em>对象; both:不允许有<em>浮动</em>对象; left:不允许左边有<em>浮动</em>对象; right:不允许右边有<em>浮动</em>对象。 老实说,我没真正理解字面上的意思,因为这几段话是有歧义的,例如<em>clear</em>:right的解释是“不允许右边有<em>浮动</em>对象”,我一直以为是清除自身右方(下方)容器的<em>浮动</em>。但其实不是。下面一个一个DEMO的看,希望你能懂left和right
keras的模型可视化
keras提供了<em>模型</em><em>可视化</em>的函数,但是要依赖一些工具,我们在win7系统安好Anaconda2和keras后,还要进行如下操作:1、安装graphviz模块1.1 命令行输入 pip install graphviz1.2 安装graphviz软件。官网地址为http://www.graphviz.org/官网中有解压版和安装版,推荐解压版,因为我使用解压版成功了,安装版好像出了点问题- -1.3
CSS网页布局方式--浮动流、定位流
网页布局方式定义: 网页的布局方式就是浏览器如何对网页中的元素进行排版 主要分三种 <em>标准</em>流 <em>浮动</em>流 定位流 <em>标准</em>流(文档流/普通流)排版 定义:浏览器默认的排版方式 在<em>css</em>中元素分三类:行内元素、块级元素以及行内块级元素 <em>标准</em>流中分两种排版方式 垂直排版:元素是块级元素 水平排版:行内元素及行内块级元素
H5和CSS3新特性总结
说到H5C3会不会觉得东西好多啊,今天就整理了一份总结性的内容;CSS3选择器有哪些? 答:属性选择器、伪类选择器、伪元素选择器。   CSS3新<em>特性</em>有哪些?答:1.颜色:新增RGBA,HSLA模式2. 文字阴影(text-shadow、)3.边框: 圆角(border-radius)边框阴影: box-shadow4. 盒子<em>模型</em>:box-sizing5.背景:background-size...
CSS/DIV:不用float实现块状元素/block/的同行排列
div是块状元素。所谓块状元素,就是默认一行只能有一个,不管这行后面有没有剩余的位置,第二个都会放到第二行。 一般让两个div放到一行的方法是做如下定义 #div1{display:inline; float:left;}其中,display:inline表示将其转换为内联元素,然后一行就可以放置多个了。float:left表示向左漂,所有的元素都会依次飘在左上方。 如果就是不想用f
强连通分量及缩点tarjan算法解析
强连通分量: 简言之 就是找环(每条边只走一次,两两可达) 孤立的一个点也是一个连通分量   使用tarjan算法 在嵌套的多个环中优先得到最大环( 最小环就是每个孤立点)   定义: int Time, DFN[N], Low[N]; DFN[i]表示 遍历到 i 点时是第几次dfs Low[u] 表示 以u点为父节点的 子树 能连接到 [栈中] 最上端的点   int
文章热词 tensorboard模型可视化 Tensorboard可视化 颜色模型 卷积神经网络可视化 损失函数模型
相关热词 6.0特性 c++ visual bootstrap css 实现右浮动 c++格式设置 visual c#特性实现模型的主键 人工智能专业核心课程 python核心教程免费
我们是很有底线的