css技术汇总.doc

1.div居中一定要记得设置宽度，否则不会产生居中效果。2. 表格居中方法一： tablemargin:auto方法二：tableposition:absolute;width:500px;left:50%; margin:100px 0 0 -250px;border:1px solid #000000;来自第七站台3. 框和布局（box）在KB005: CSS 层叠中已经介绍了 CSS 的重要之处。CSS 可以说是页面表现的基础， CSS 可以控制布局，控制元素的渲染。布局是讲在电影画面构图中，对环境的布置、人物地位的调度、人物之间的关系、人物和景物的关系等的安排。大同小异，CSS 的布局也是一样。CSS 的布局，包含两个大部分： 元素：元素及其组成，类似电影布局中人物的高矮胖瘦、衣着配饰等，以及场景中的桌椅板凳，物品等等。 定位：元素的位置， 类似电影场景的中对环境的设置，人物作为元素，他们之间的关系会影响其在场景中的位置。总的说来，CSS 的布局比电影场景布局简单的多，因为 CSS 中要控制的元素都是死的，而人是活的有思想的（无思想的道具除外）。元素和框模型观察页面的构成元素，其中包括 SPAN DIV TABLE INPUT IMG 等等。仔细观察每个元素，它们的形状都是矩形的，严格的说，元素形成了一个矩形的区域，这个区域就是 CSS 中最基本的布局要素， 常被称作 box，你可以在很多 W3C CSS2.1 规范的原文中看到 box 这个字眼。本篇文章要讲的主要内容， 就是关于 box 组成及其变化的一系列规则，也就是今天要讲的内容：Box Module，通常被译作“盒子模型”，有的地方被译作“框模型”。 因为 W3C 的很多地方用到了 box 这个词，有些地方译作“盒子”不大通顺，权且统统译作“框”。本部分主要包括两部分：框的组成以及相关特性( property )，外边距折叠( Collapsing margins )。框的构成以及相关 CSS 特性( property )结构为了给文档树中的各个元素排版定位（布局），浏览器会根据渲染模型1为每个元素生成四个嵌套的矩形框， 分别称作 content box、padding box、border box 和 margin box，它们是不可分割的，并可能会重合， 这就是 CSS 规范中描述的“框模型”（box model）。它是以 CSS 的角度去看一个元素被渲染后的抽象形态。 是一个元素自身的构成部分，不同于布局：多个元素在页面上的定位。注：padding、border 和 margin 区域都包括 top、right、bottom、left 四部分。如图所示（LM 代表 left margin，RP 代表 right padding，TB 代表 top border）。上面的大框，代表一个元素生成的矩形区域( box )，每一个 box 都包括一个 content 区域（元素的内容，如文本，图形等）以及环绕其四周的 padding (元素的内边距，填充部分)、border (元素的边框) 和 margin (元素的外边距) 区域。注：1. 元素在页面上定位及布局的规则，包括 position 和 float 等等，详见：W3C CSS2.1 - 9 Visual formatting model边界上述四个区域（content、 padding、border 和 margin）分别有他们自己的边界，细化来说，每个区域都有 top、right、bottom、left 四个边界。 Content 边界/内边界：Content 边界环绕在由该元素的宽和高决定的一个矩形上，这个尺寸通常由该元素渲染后的内容决定。 这四个 content 边界组成的矩形框就是该元素的 content box。 Padding 边界：Padding 边界环绕在该元素的 padding 区域的四周，顾名思义，填充背景色，在此范围内有效。如果 padding 的宽度为0， 则 padding 边界与 content 边界重合。这四个 padding 边界组成的矩形框就是该元素的 Padding box。 Border 边界：Border 边界环绕在该元素的 border 区域的四周，如果 border 的宽度为0，则 border 边界与 padding 边界重合。 这四个 border 边界组成的矩形框就是该元素的 border box。 Margin 边界/外边界：Margin 边界环绕在该元素的 margin 区域的四周，如果 margin 的宽度为0，则 margin 边界与 border 边界重合。 这四个 margin 边界组成的矩形框就是该元素的 margin box。一个简单的例子，来自 W3C 官方： Examples of margins, padding, and borders UL background: yellow; margin: 12px 12px 12px 12px; padding: 3px 3px 3px 3px; /* No borders set */ LI color: white; /* text color is white */ background: blue; /* Content, padding will be blue */ margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px; /* Note 0px padding right */ list-style: none /* no glyphs before a list item */ /* No borders set */ LI.withborder border-style: dashed; border-width: medium; /* sets border width on all sides */ border-color: lime; First element of list Second element of list is a bit longer to illustrate wrapping.示意图：相关 CSS 特性：padding、margin 和 border11). marginmargin 是 margin-top, margin-right, margin-bottom, margin-left 的简写，表明 margin 的大小范围。 它的值可以是 宽度值、百分比值或 auto 这3者之一，注意：宽度值必须带有单位。margin 非 table 类型的元素，以及 table 类型中 table-caption, table 和 inline-table 这3类。例如 TD TR TH 等，margin 是不适用的。 并且，对于行内非替换元素（例如 SPAN），垂直方向的 margin 不起作用。 ddd可以看到，DIV 的上下 border 紧贴着灰色的 SPAN 元素。另外，垂直方向上的不同元素的相邻的 margin 在某些情况下，会发生折叠的现象。2). paddingpadding 是 padding-top, padding-right, padding-bottom, padding-left 的缩写。默认值是 0。可以应用到的元素：除 display 值是 table-row-group，table-header-group， table-footer-group， table-row， table-column-group 和 table-column 的所有元素。3). borderborder 是 border- top, border-right, border-bottom, border-left 的缩写。border 包含3个部分，border-width，border- color，border-style，分别用来设置它的宽度，颜色和样式。适用于任何元素。border-width 是 border-top-width, border-right-width, border-bottom-width, border-left-width。默认值是0。 可用值有thin，medium，thick，以及常用的数值带单位的宽度值。border-color 是 border-top-color, border-right-color, border-bottom-color, border-left-color 的简写。默认值是 color 特性的值。border-style 是 border-top-style, border-right-style, border-bottom-style, border-left-style 的简写。默认值是 none 特性的值。 可用值有：none，hidden，dotted，dashed，solid，double，groove，ridge，inset等。注：1. 详见：W3C CSS2.1 - 8 Box model外边距折叠( Collapsing margins )1在介绍 margin 特性的时候，简单的介绍了外边距折叠。Collapsing margins，即外边距折叠，指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距。其中所说的 margin 毗邻，可以归结为以下两点： 这两个或多个外边距没有被非空内容、padding、border或clear分隔开。 这些 margin 都处于普通流中2。下面详细的介绍其规则。注：1. 详见：W3C CSS2.1 - 8.3.1 Collapsing margins2. 既 in-flow，非浮动元素，非定位元素两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠关键词解析两个或多个说明其数量必须是大于一个，又说明，折叠是元素与元素间相互的行为，不存在 A 和 B 折叠，B 没有和 A 折叠的现象。毗邻是指没有被非空内容、padding、border 或 clear 分隔开，说明其位置关系。注意一点，在没有被分隔开的情况下，一个元素的 margin-top 会和它普通流中的第一个子元素(非浮动元素等)的 margin-top 相邻； 只有在一个元素的 height 是 auto 的情况下，它的 margin-bottom 才会和它普通流中的最后一个子元素(非浮动元素等)的 margin-bottom 相邻。示例代码： B 效果图：以上代码中，margin 会把 B 的包含块撑开。如果一个元素的 height 特性的值不是 auto，那么它的 margin-bottom 和它子元素的 margin-bottom 不算相邻，因此，不会发生折叠。 margin-top 没有此限制，所以是 100px，margin-bottom 没有折叠，只有 50px。垂直方向是指具体的方位，只有垂直方向的 margin 才会折叠，也就是说，水平方向的 margin 不会发生折叠的现象。折叠后 margin 的计算1). 参与折叠的 margin 都是正值例子：AB示意图：在 margin 都是正数的情况下，取其中 margin 较大的值为最终 margin 值。2). 参与折叠的 margin 都是负值当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移。示例代码：AB示意图：3). 参与折叠的 margin 中有正值，有负值如果，毗邻的 margin 中有正值，同时存在负值会怎样呢？有正有负，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。示例代码：AB示意图：上面的例子最终的 margin 应该是 100 + (-50) = 50px。4). 相邻的 margin 要一起参与计算，不得分步计算要注意，相邻的元素不一定非要是兄弟节点，父子节点也可以，即使不是兄弟父子节点也可以相邻。而且，在计算时，相邻的 margin 要一起参与计算，不得分步计算。一个复杂的实例： A B 错误的计算方式：算 A 和 B 之间的 margin，分别算 A 和其父元素的折叠，然后与其父元素的父元素的折叠，这个值算出来之后，应该是 90px。依此法算出 B 的为 80px；然后，A和B折叠，margin 为 90px。请注意，多个 margin 相邻折叠成一个 margin，所以计算的时候，应该取所有相关的值一起计算，而不能分开分步来算。以上例子中，A 和 B 之间的 margin 折叠产生的 margin，是6个相邻 margin 折叠的结果。将其 margin 值分为两组： 正值：50px，150px，200px 负值：-60px，-100px，-120px根据有正有负时的计算规则，正值的最大值为 200px，负值中绝对值最大的是 -120px，所以，最终折叠后的 margin 应该是 200 + (-120) = 80px。浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠浮动元素的 margin 在垂直方向上也不会发生 margin 折叠，即使和它相邻的子元素也不会。A B示意图：两个绿色的块儿之间，相距100px，而若 B 和它的浮动包含块发生 margin 折叠的话，金色的条应该位于绿色块的最上方，显然，没有发生折叠。创建了块级格式化上下文1的元素，不和它的子元素发生 margin 折叠以 “overflow : hidden” 的元素为例： B若 B 和它的 overflow:hidden 包含块发生 margin 折叠的话，金色的条应该位于绿色块的最上方，否则，没有发生。示意图：元素自身的 margin-bottom 和 margin-top 相邻时也会折叠自身 margin-bottom 和 margin-top 相邻，只能是自身内容为空，垂直方向上 border、padding 为 0。示例： 以上代码运行后，我们讲得到的是红色边框的正方形，方框的宽高都应该是 100px，高度不应该是 150px。示意图：注：1. 既，Block formatting contexts，参考W3C CSS2.1 - 9.4.1 Block formatting contexts4 网页居中显示： 需要设置两个地方，一个是body，一个是外边框div。 CSS：bodymargin:0;padding:0;text-align:center;#main /*最外层DIV*/width:760px;margin:0 auto;padding:05 文字垂直居中显示 在DIV中定义一个行高与其高度相同即可。 CSS：.titleheight:25px;line-height:25px;vertical-align:middle;6 图片垂直居中显示 在标签中加入align=absmiddle即可。7 三列结构中的的DIV写法适用于左右栏是窄幅，中栏为主要内容显示，让其宽度自适应。CSS:#mainwidth:760px;margin:0 auto;.leftwidth:100px;float:left;.rightwidth:120px;float:right;.centermargin:0 120px 0 100px;/*页面中栏内容，未设置浮动，通过设置左右边界达到此DIV放于中栏的效果*/width:auto;.clearclear: both;HTML：/*让最外层的main层能自适应包含的div的高度*/8浮动无标题文档bodymargin:0;padding:0; #onebackground:#CC6600;width:100px;height:100px;float:left;/*设置向左浮动后，这个盒子所占的位置就让给了后面的盒子*/#twobackground:#ccc;width:120px;height:120px; #threebackground:#33CCCC;width:100px;height:100px; 1 23 红色部分代码注释前的效果：没注释红色部分代码的效果：设置向左浮动后，盒子1所占的位置就让给了后面的盒子，盒子2想上移占据了原来盒子1的位置。浮动是向父容器靠拢。9.绝对定位元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块(指的是body)。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样（这个位置会让给后面的元素）。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。看下面的例子：无标题文档bodymargin:0;padding:0;#onebackground:#CC6600;width:100px;height:100px;#twobackground:#ccc;width:100px;height:100px;position:absolute; /*第二个框设置为绝对定位，它的位置会让给第3个框*/top:100px;left:100px;#threebackground:#33CCCC;width:100px;height:100px; 1 2 3没有写红色部分css的效果为：写了红色部分css的效果为：如果想将上面三个盒子移到网页的某个位置，那么需要使用一个外层的盒子包含这三个盒子。（增加了红色部分代码）无标题文档bodymargin:0;padding:0;#mainborder:1px black solid;width:300px;height:300px;margin:200px auto auto 200px; position:relative;#onebackground:#CC6600;width:100px;height:100px;#twobackground:#ccc;width:100px;height:100px;position:absolute;top:100px;left:100px;#threebackground:#33CCCC;width:100px;height:100px;1 23但是这时候的效果为：要把第2个盒子移到大盒子里面，需要将大盒子的position设置为relative(蓝色部分代码)，这时效果为：10. 要注意把body div ul li p等使用到的标签的margin和padding设为011. ie6hack1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如： 相应的css为 #IamFloat float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ 3.浮动ie产生的双倍距离 #box float:left; width:100px; margin:0 0 0 100px; /这种情况之下IE会产生200px的距离 display:inline; /使浮动忽略 这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline 元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);#box display:block; /可以为内嵌元素模拟为块元素 display:inline; /实现同一行排列的效果 diplay:table; 4 IE与宽度和高度的问题 IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：#box width: 80px; height: 35px;htmlbody #box width: auto; height: auto; min-width: 80px; min-height: 35px; 5.页面的最小宽度 min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE6不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个 放到 标签下，然后为div指定一个类, 然后CSS这样设计： #container min-width: 600px;width:expression(document.body.clientWidth 600? 600px: auto ); 第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 6.DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. #box float:left; width:800px; #leftfloat:left; width:50%; #right width:50%; *html #left margin-right:-3px; /这句是关键 7.IE捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。 8.float的div闭合;清除浮动;自适应高度; 例如：这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;) 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在 之间加上这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为：.clearclear:both; 将块状元素（DIV、UL等）的高度定义为min-height在标准浏览器（I6不支持min-height）下可以让元素的高度自动适应，但遗憾的是这一特点并不总是有效，当父级元素中包含浮动元素时高度则不能够自动适应，这时只需在父级元素闭合前的最后一行加入，并且将clear这种样式定义为：.clear clear:both; 即可让父级元素的高度自动适应。 作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。 例如某一个wrapper如下定义： .colwrapper overflow:hidden; zoom:1; margin:5pxauto; 9. IE6下为什么图片下有空隙产生解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top| bottom |middle |text-bottom 都可以解决. 10.如何对齐文本与文本输入框 加上 vertical-align:middle; 11.web标准中定义id与class有什么区别吗 一.web标准中是不容许重复ID的,比如 div id=aa 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他. 二.属性的优先级问题 ID 的优先级要高于class,看上面的例子三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单. 12.为什么无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高和字号造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px | font-size:0; 13.怎么样才能让层显示在FLASH之上呢 解决的办法是给FLASH设置透明 FF与IE兼容技巧 1. Div居中问题 div设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，IE需要设定body居中，首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。 2.链接(a标签)的边框与背景 a 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。 3.超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A Code: 4. 游标手指cursor cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以 5.UL的padding与margin ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ulmargin:0;padding:0;就能解决大部分问题 6. FORM标签 这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,formmargin:0;padding:0;给定义死了,所以后面就不会为这个头疼了. 7. BOX模型解释不一致问题 在FF和IE 中的BOX模型解释不一致导致相差2px解决方法：divmargin:30px!important;margin:28px; 注意这两个 margin的顺序一定不能写反，important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div maring:30px;margin:28px重复定义的话按照最后一个来执行，所以不可以只写margin:xx px!important; #box width:600px; /for ie6.0- width:500px; /for ff+ie6.0 #box width:600px!important /for ff width:600px; /for ff+ie6.0 width /*/:500px; /for ie6.0- 8.FireFox下如何使连续长字段自动换行 众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入的方法来解决 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa /* intLen) strTemp+=strContent.substr(0,intLen)+; strContent=strContent.substr(intLen,strContent.length); strTemp+=+strContent; obj.innerHTML=strTemp; if(document.getElementById & !document.all) toBreakWord(ff, 37); /* */ 没用过，有待检验 IE6,IE7,FF IE8.0 出来了，对CSS的支持又有新问题。浏览器多了，网页兼容性更差了，疲于奔命的还是我们 ，IE8对标准的支持已经不错和FF基本没有差别