1、行内元素之间水平的 margin 取总和;块级元素之间竖直的 margin 取大者,也就是发生“塌陷”(当元素浮动的时候,不会发生塌陷);子元素的 margin 会作为父元素的内容,超过时会发生溢出,但在 IE 低版本中会自动扩大父元素。
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;
- }
************************************************持续更新*****