日星网 windows 中文论坛

 找回密码
 加入我们

QQ登录

只需一步,快速开始

查看: 2349|回复: 9

CSS 日常积累经验

[复制链接]
发表于 2012-7-23 02:13:31 | 显示全部楼层 |阅读模式
1. word-warp: break-word   自动换行

2.
  1. div嵌套时,外层div高度不随内层div高度增长问题的解决<div id=”a1″>

  2.        <div id=”b1″></div>

  3.         <div id=”b2″></div>

  4. </div>

  5. 当b1和b2都是float=left时候,a1层的高度不会被b1和b2的高度撑开。(这个现象只有IE8发生,其他版本IE以及IE8选择兼容模式后就没有问题。)

  6. 解决方法:a1的display=table

  7. 以上转自:http://www.rainshadow.com.cn/?p=833

  8. ——————————————————————分隔符———————————————————————

  9. display=inline-block也可以达到要求

  10. 另外还有一个解决办法:

  11. <!--在层的最下方产生高度为1的空格,可以使得父层随子层增长-->

  12. <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>

  13. ——————————————————————分隔符———————————————————————

  14. display 属性规定元素应该生成的框的类型


  15. 可能的值

  16. none此元素不会被显示。block此元素将显示为块级元素,此元素前后会带有换行符。inline默认。此元素会被显示为内联元素,元素前后没有换行符。inline-block行内块元素。(CSS2.1 新增的值)list-item此元素会作为列表显示。run-in此元素会根据上下文作为块级元素或内联元素显示。compactCSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。markerCSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。table此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。inline-table此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。table-row-group此元素会作为一个或多个行的分组来显示(类似 <tbody>)。table-header-group此元素会作为一个或多个行的分组来显示(类似 <thead>)。table-footer-group此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。table-row此元素会作为一个表格行显示(类似 <tr>)。table-column-group此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。table-column此元素会作为一个单元格列显示(类似 <col>)table-cell此元素会作为一个表格单元格显示(类似 <td> 和 <th>)table-caption此元素会作为一个表格标题显示(类似 <caption>)inherit规定应该从父元素继承 display 属性的值。
复制代码
 楼主| 发表于 2012-7-26 06:16:19 | 显示全部楼层
3. IE6下的border不显示及其它CSS没有效果的原因之一。
做一个带边框的DIV块,在FF下和IE8下都没有问题,可是在IE6下就是没有效果。在网上找了一下,有的说是b order属性的顺序没写对,有的说给个浮动...试了都不好使。后来一大顿的改,原来是用复制别人的一段样式代码时,没注意编码的格式。dreamweaver下ctrl+j重新设置一下编码才搞定。特些留迹,防止以后再绊倒。

4. Firefox下的background-posion, 不能混用,不能不输入单位,否则显示出错。

5.<a > <span> 在同一行,span居右时,<span>要放在<a>的前面
  1. <div class="news_list"><span>{date('Y-m-d',$r[inputtime])}</span><a href="{$r[url]}" title="{$r[title]}">{str_cut($r[title],36,'')}</a> </div>
复制代码
 楼主| 发表于 2012-7-31 00:29:48 | 显示全部楼层
6.  ie6下 line-height 失效的解决办法
关于IE6下line-height属性失效问题,以前图省事儿就直接用padding解决了。今天又遇到了问题,查找了一下,找到了上面的文章,IE6下line-height属性失效是由于文字中包含img、input、select、textarea、button、object等标记造成的。

解决办法:
对和文字相连接的img、input、textarea、select、object等元素加以css样式:
margin: (所属line-height-自身高度)/2px 0;
vertical-align:middle;

不过据本人尝试,margin: (所属line-height-自身高度)/2px 0; 这个设置方法有偏差,准确来说要比 (所属line-height-自身高度)/2 这个数值更小一些

7.IE6下空标签高度问题
    当你把标签的高度设置为0-19内的数字时,IE6会一致的显示为19px高。解决方法:给标签加上overflow:hidden。

8. IE6 双倍边距问题
    当浮动元素设置margin边距时,边距会加倍。解决方法是给浮动元素加上display:inline属性。

9. IE6/7下绝对定位(position:absolute)元素消失

解决方法:把绝对定位元素和浮动元素分开,就是在两个元素中间加一个空白的div
 楼主| 发表于 2012-8-6 00:52:24 | 显示全部楼层
10. text-indent 文本块中首行文本的缩进。

11.IE下button设置border:none无效的解决方案  

某个元素设置无边框,只需要给元素设置border:none即可,当然设置border:0效果一样,但实际上两者是有性能差别的

border:none:边框设置为为none,不做任何处理;
border:0:边框宽度设置为0像素,但是实际上border-color和border-style还是在渲染的。

然而在IE中,对于button和input元素确并不是这样,在IE6,7中border:none仅等价于border-style:none,而边框所占的空间还是在的。这导致了调input的宽度和高度在各个浏览器中不统一!在IE6,7中,虽然设置了border:none后,边框仍存在。不信你试一试。
下面给出解决方法:
第一种方法:

border:0 none;第二种方法:
给button加个背景颜色

button{
background:#fff;
}

12. IE6下min-weight不好用的情况

width:expression(clientwidth>300?"100%":"200px")
如果大于300px,就为100%,否则为200px

13. IE6下min-height不好用的情况

height:auto!important;  height:500px;  min-height:500px;
或是#test { min-height:100px; background:#BBB; _height:100px; overflow: visible; }  
 楼主| 发表于 2012-8-27 02:09:12 | 显示全部楼层
1.在IE下,默认内容居中,在FF下默认居左,所以无论在哪里,需要居中的内容一定先定义好align居中,这样才不会在FF下出现位置移动。


2.在IE下,如果ABLE中写了多个的DIV不会有什么问题,但在FF下,没有清除浮动的情况的时候,本应该换行的DIV不会自动换新行,所以需要在这个需换行的DIV中加上清除浮动的代码:clear:both;这样在FF下可以正常显示,不会出现重叠现象。


3.在FF下,DIV默认居左,需要居中必用margin:0 auto,所以在兼容的时候样式中必须写margin:0 auto!important;text-align:center即可,顺序不可反,注:!important除IE外都可以解析的,在其他浏览器中有优先权,IE根本不会理它。


4.在写样式表时,需要写出在不同浏览器的样式时,将适合FF的写在前边:比如:left:15px!important;left:10px;两种样式的写法必须都要同时出现,否则显示不正确


5.一边写样式,一边用两种浏览器进行调试,这样可以最大程度避免以后的修改麻烦。


6.在FF下,最好用padding,不要用margin


7.form表单中的textarea标签在IE和FF下显示不一样,在FF中会撑开DIV或TABLE,所以在写样式的时候,可以给它加上width和height属性,并且要加上overflow-y:auto;这样在两种浏览器下显示的结果都是一样的。


8.在FIRFOX下,空TD中必须添加“&nbsp;”为内容,否则在FF下会被合并在一起,体现不出你想要的空白


9.display:inline属性,可以让元素与其它元素显示在同一行


10.overflow:hidden属性,可以让溢出的内容隐藏不可见


11.在FF下,可以用<center></center>标签让一个整体的table页面水平居中


12.table-layout:fixed;属性,在FF中必须为每个规定宽度的table中加上这个样式,否则,会被内容撑变形。
发表于 2012-11-8 00:12:52 | 显示全部楼层
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>半透明div</title>
  5. <style>
  6. #div1 { margin:0px auto; width:500px; height:370px ; text-align:center; background:url(/jscss/demoimg/wall3.jpg);}
  7. #div2 {  height:330px; filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;z-index:100; background-color:#ffffff;  }
  8. </style>
  9. </head>
  10. <body>
  11. <div id="div1">
  12. <div style="padding:20px;"><div id="div2">这里是透明的DIV</div></div>
  13. </div>
  14. </body>
  15. </html>
复制代码
CSS半透明效果
发表于 2012-11-11 09:21:47 | 显示全部楼层
两侧的li紧靠两边
  1. <div style="margin:0; padding:0; border:0; width:300px; height:100px; background:none; overflow:hidden; position:absolute; z-index:10;">
  2.         <div style="width:280px; background:pink; position:relative; z-index:11; height:100px;">
  3.          <ul style="margin:0; padding:0;list-style:none; width:300px; position:absolute; z-index:10">
  4.              <li style="width:80px; height:100px; margin-right:20px; float:left; background:yellow; position:relative; z-index:99">1</li>
  5.              <li style="width:80px; height:100px; margin-right:20px; float:left; background:yellow; position:relative; z-index:99">2</li>
  6.              <li style="width:80px; height:100px; margin-right:20px; float:left; background:yellow; position:relative; z-index:99">3</li>
  7.          </ul>
  8.      </div>
  9. </div>
复制代码
发表于 2012-12-4 05:57:10 | 显示全部楼层
解决长串英文字母显示不能自动换行的问题和td中汉字自动换行 && CSS强制不换行

例如:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa不能处理自动换行,将表格伸的很长很长,而汉字字符却可以自动换行。


原因是:
英文字母之间如果没有空格,系统认为是一个单词,就不会自动换行。汉字就没有这种情况。


解决办法:
用表格把要显示的内容装起来。
在<table>标签中加入“style='TABLE-LAYOUT: fixed'”,
在需要强制单词换行的<td>标签中加入“style='word-WRAP: break-word'”。
这样就可以了。



      Div 中 :  


div 实现长英文字母自动换行CSS
IE浏览器
#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}

Firefox浏览器
#wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }



2、不设置单元格宽度,但汉字会自动换行:

      解决方法: <table style='word-break:keep-all'>


CSS强制不换行

word-break属性, keep-all;不换行。。     IE7和FF   , IE6 不行。。

white-space: nowrap;        IE6 及一下版本


顺便写下语法:

语法:
white-space : normal | pre | nowrap
取值:
normal   : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre   : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象
nowrap   : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。参阅 noWrap 属性

说明:
设置或检索对象内空格字符的处理方式。
空格字符,像换行,空格,TAB,在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时,你可以使用不换行空格的命名实体    来添加空格,用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。
此属性作用于块对象。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 whiteSpace 。
发表于 2013-1-5 05:57:56 | 显示全部楼层
IE6 IE7浮动元素 禁止自动换行

解决方法:如果不想固定宽度(当然没有固定,否则还有这个问题么= =),可以禁止内容自动换行,即对对浮动元素设置"white-space:nowrap;"。亲测有效哦~
发表于 2013-2-28 06:09:03 | 显示全部楼层

图片与文字垂直居中

图片与文字垂直居中

可用图片的属性: vertical-align:middle;或 vertical-align:length(值)
vertical-align
初始值: baseline(缺省值)
可否继承:否
适用于: 内联元素(不能用在块状结构中)
说明:vertical-align:baseline使元素的基线同父元素的基线对齐.
警告:vertical-align不能影响表格单元中的内容的对齐,对于块元素中的内容也一样.


一、如果一行内容中有图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于垂直居中呢,很简单,就是在图片中添加CSS属性:vertical-align:middle;这样,它们在同一行就会垂直居中对齐了。

二、 在网页中,有时会需要在文字旁边加跟上一个图片。
在css默认情况里,是图片置顶对齐,文字置底对齐,文字和图片排列在一起就很难看;
在CSS2手册中,找到vertical-align的属性,可接受的参数值如下:
baseline |sub | super |top |text-top |middle |bottom |text-bottom |length
baseline :  将支持valign特性的对象的内容与基线对齐
sub :  垂直对齐文本的下标
super :  垂直对齐文本的上标
top :  将支持valign特性的对象的内容与对象顶端对齐
text-top :  将支持valign特性的对象的文本与对象顶端对齐
middle :  将支持valign特性的对象的内容与对象中部对齐
bottom :  将支持valign特性的对象的文本与对象底端对齐
text-bottom :  将支持valign特性的对象的文本与对象顶端对齐
length :  CSS2 由浮点数字和单位标识符组成的长度值 | 或者百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0,对于百分数来说就是0%。目前IE5尚不支持。请参阅长度单位
为了布局更好看,我选择了text-bottom,让文字与图片在同一水平线上,效果好多了


我们使用text-bottom时,如果line-height没有超过文字高度当然是没有问题,如果line-height远远大于文字高度的话,就会出现图片偏下的效果,和原来图片偏上的效果没什么区别了,那我们该怎么解决这个问题呢?

length就要大显身手了,0即为居顶效果,那么我们只要设成负值,适当调整,就能得到我们想要的结果了!
div#logininfo img{
margin-right:3px;
vertical-align:-4px;
}

总结:对于单行图片文字垂直居中(有图片的情况下)
1.当没有高度行高时,我们只要简单的对内联元素应用vertical-align:middle;就可以了.此外对于一个图片和文字的高度相差无几的,不用这个样式也是可以的.
2.对于有行高或有行高+高度的,FF可以正确显示,ie6失效.所以也只能对IE6以下版本使用KACK了!,现在IE7已经改正了这个错误.
3.对2补充一下,可以用不定高度,用上下补白的方法,这样就可以兼容IE6了。
您需要登录后才可以回帖 登录 | 加入我们

本版积分规则

手机版|小黑屋|日星网 ( 黑ICP备07001742号 )

GMT, 2018-11-21 09:44 AM , Processed in 0.018388 second(s), 21 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表