CSS 注意点
2014-04-11 16:34
267 查看
1、行内元素之间水平的 margin 取总和;块级元素之间竖直的 margin 取大者,也就是发生“塌陷”(当元素浮动的时候,不会发生塌陷);子元素的 margin 会作为父元素的内容,超过时会发生溢出,但在 IE 低版本中会自动扩大父元素。
2、没有设置 width 的盒子会自动向右伸展,直到不能伸展为止,即是伸展到父元素所能容纳的大小为止,此时的 width 值即为伸展之后的值。当设置了 float 后,则不会伸展,而是根据内容确定 width 值。
3、设置 float 后,盒子会脱离标准流,不再占有位置。有一点需要注意,如例子所示:
HTML代码:
CSS代码:
效果:
可以看到,a 和 b 都没有设置 width,但由于 a 设置了 float ,所以width 不会伸展。而这里需要注意的是,b 的左边框是与 a 的左边框重叠的(因为两者都没有设置 margin),也就是 b 占领了 a 原来的位置,但 b 的内容是围绕 a 的内容排列的。
此时若设置 b 也为 float:left; 则效果如下:
b 的边框不会与 a 重叠。
而若加入另一个 <div> 且不设置 float,则新加入的 <div> 的左边框会与 a 的左边框重叠,内容会围绕 a 和 b 排列。
另外,若子元素都是浮动元素,则父元素的大小与子元素无关,对于没有设置高度父元素,其高度会变成 0 。而往往会在子元素的最后添加一个空的 div ,设置 clear:both; 以扩展父元素的高度。
4、绝对定位是以离它“最近的”、“已经定位的”、“祖先”元素为基准进行偏移。若不存在则以浏览器窗口为基准。(“已经定位”是指设置了 position 且值不是 static)
5、IE6 中存在的问题:设了 position:absolute; 的子元素使用 left 定位的时候,偏移量会加上父元素的 padding 的值。解决方法:为父元素加入 CSS hack :height:1%;
6、不同浏览器的特殊 CSS 标志
height:50px;
/*正常浏览器*/
[;height:50px;] /* chrome */
-moz-height:50px; /*firefox*/
_height:50px; /*IE6*/
*height:50px; /*IE7*/
height:50px\9; /*IE8*/
height:50px !important; 用于提升 CSS 的优先级,但是对于 IE6 而言,它能读出被 !important 修饰的 CSS 语句,但是并不会为其提升优先级。所以注意含有 !important 的语句应该放在前面,以便在
IE6 中后面的语句能够覆盖它。
7、竖直方向的居中
8、通常为了呈现比较好的效果,标题常用图片而不是文本。有这么几种方法:
1)<h1><span>title</span></h1>
将 <span> 设置 display:none; 后将图片作为 <h1> 的背景图片。(图片可以是透明的,但是如盲人阅读器等无法读出文本,而且若图片不可用或不支持CSS,则无法显示。)
2)<h1><span>title</span></h1>
将 <span> 设置 text-indent:-10000; 后将图片作为 <h1> 的背景图片。(图片可以是透明的,盲人阅读器也可读出文本,但若图片不可用或不支持CSS,则无法显示。)
3)<h1><span></span>title</h1>
将 <span> 设置 position:absolute; 后将图片作 <span> 的背景,覆盖文本。(盲人阅读器可读出文本,图片不可以或不支持CSS也可正常显示文本,但图片不能是透明的。)
(若要完美解决,估计只能借助 JS 了)
9、IE6 中使用 PNG 作为背景图片的透明效果实现
1)采用 gif 图像。同时设置背景图片为 gif 和 png,为设置 png 的 CSS 语句加上 !important
2)采用滤镜。注意滤镜中的 png 图片必须是32位的,并且设置背景图片的元素必须设置高度或者宽度。如:
10、IE6 中,即使将 <a> 设置为 display:block; ,对于 handover 也是只有当鼠标移动到文字上才触发,解决方法是为 a 加一个高度,如 height:1em;
11、纯 CSS 制作三角形效果:
************************************************持续更新********************************************************
2、没有设置 width 的盒子会自动向右伸展,直到不能伸展为止,即是伸展到父元素所能容纳的大小为止,此时的 width 值即为伸展之后的值。当设置了 float 后,则不会伸展,而是根据内容确定 width 值。
3、设置 float 后,盒子会脱离标准流,不再占有位置。有一点需要注意,如例子所示:
HTML代码:
<div id="a">123456</div> <div id="b">123456789</div>
CSS代码:
#a{ border:5px dashed black; height:50px; float:left; } #b{ border:5px solid red; height:50px; }
效果:
可以看到,a 和 b 都没有设置 width,但由于 a 设置了 float ,所以width 不会伸展。而这里需要注意的是,b 的左边框是与 a 的左边框重叠的(因为两者都没有设置 margin),也就是 b 占领了 a 原来的位置,但 b 的内容是围绕 a 的内容排列的。
此时若设置 b 也为 float:left; 则效果如下:
b 的边框不会与 a 重叠。
而若加入另一个 <div> 且不设置 float,则新加入的 <div> 的左边框会与 a 的左边框重叠,内容会围绕 a 和 b 排列。
另外,若子元素都是浮动元素,则父元素的大小与子元素无关,对于没有设置高度父元素,其高度会变成 0 。而往往会在子元素的最后添加一个空的 div ,设置 clear:both; 以扩展父元素的高度。
4、绝对定位是以离它“最近的”、“已经定位的”、“祖先”元素为基准进行偏移。若不存在则以浏览器窗口为基准。(“已经定位”是指设置了 position 且值不是 static)
5、IE6 中存在的问题:设了 position:absolute; 的子元素使用 left 定位的时候,偏移量会加上父元素的 padding 的值。解决方法:为父元素加入 CSS hack :height:1%;
6、不同浏览器的特殊 CSS 标志
height:50px;
/*正常浏览器*/
[;height:50px;] /* chrome */
-moz-height:50px; /*firefox*/
_height:50px; /*IE6*/
*height:50px; /*IE7*/
height:50px\9; /*IE8*/
height:50px !important; 用于提升 CSS 的优先级,但是对于 IE6 而言,它能读出被 !important 修饰的 CSS 语句,但是并不会为其提升优先级。所以注意含有 !important 的语句应该放在前面,以便在
IE6 中后面的语句能够覆盖它。
7、竖直方向的居中
<div id="outer"> <div id="middle"> <div id="inner">word word word word word word word word word word </div> </div> </div>
#outer{ height:100px; border: 1px solid black; overflow:hidden; position: relative; } #outer[id]{ display:table; position:static; } #middle{ position:absolute; top: 50%; } #middle[id]{ display: table-cell; vertical-align:middle; position:static; } #inner{ position:relative; top: -50%; }
8、通常为了呈现比较好的效果,标题常用图片而不是文本。有这么几种方法:
1)<h1><span>title</span></h1>
将 <span> 设置 display:none; 后将图片作为 <h1> 的背景图片。(图片可以是透明的,但是如盲人阅读器等无法读出文本,而且若图片不可用或不支持CSS,则无法显示。)
2)<h1><span>title</span></h1>
将 <span> 设置 text-indent:-10000; 后将图片作为 <h1> 的背景图片。(图片可以是透明的,盲人阅读器也可读出文本,但若图片不可用或不支持CSS,则无法显示。)
3)<h1><span></span>title</h1>
将 <span> 设置 position:absolute; 后将图片作 <span> 的背景,覆盖文本。(盲人阅读器可读出文本,图片不可以或不支持CSS也可正常显示文本,但图片不能是透明的。)
(若要完美解决,估计只能借助 JS 了)
9、IE6 中使用 PNG 作为背景图片的透明效果实现
1)采用 gif 图像。同时设置背景图片为 gif 和 png,为设置 png 的 CSS 语句加上 !important
2)采用滤镜。注意滤镜中的 png 图片必须是32位的,并且设置背景图片的元素必须设置高度或者宽度。如:
<!--[if gte ie 6]> <style type="text/css"> div{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="bg.png",sizingMethod="crop"); background: none; width: 1px; /*若有必要*/ } </style> <![endif]-->
10、IE6 中,即使将 <a> 设置为 display:block; ,对于 handover 也是只有当鼠标移动到文字上才触发,解决方法是为 a 加一个高度,如 height:1em;
11、纯 CSS 制作三角形效果:
<div></div>
div{ width:0; height:0; border: 10px solid white; border-left-color: black; }
************************************************持续更新********************************************************
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 纯CSS制作的新闻网站中的文章列表
- ip地址基础知识
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- 不同版本IE使用不同css(css条件注释语句用法)
- VBS基础编程教程 (第1篇)
- css类选择器的使用方法详解
- VBS基础编程教程 (第3篇)