欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

最新整理的css+div技巧,绝对经典!

flash 夜阑小雨 845℃ 0评论

1、 使用float:left 来控制列数,如果box的总宽度除列数的百分比,有小数哪么在ie下就会自动换行(解决方法:box的宽度除列数的百分比 要为整数)

2、 不让链接折行

a {
    white-space:nowrap;
}

3、删除链接上的虚线框

a:active, a:focus {

outline:none;
}

4、 图片放大
    img{
zoom:1 放大
      }
5、图片替代文字,使用缩进+隐藏+宽度。

div {
   
     text-indent:300px 缩进
     overflow:hidden; 隐藏
     width:1px;宽
}

6.文字换行:

<div style=”float:left; margin-top:30px; margin-left:15px; word-wrap:break-word; word-break:keep-all; width:50%; hight:85%;”>dfasddfasdfasdffd
gsdghdfasddfasdfasdffdgsdghdfasddfasdfasdffdgsdghdfasddfasdfasdffdgsdghdfasddfasdfasdffdgsdgh</div>

一、 针对浏览器的选择器

  这些选择器在你需要针对某款浏览器进行css设计时将非常有用.

  IE6及其更低版本,本文由52CSS.com整理,转载请注明出处!

  * html {}

  IE7及其更低版本

  *:first-child+html {} * html {}

  仅针对IE7

  *:first-child+html {}

  IE7和当代浏览器

  html>body{}

  仅当代浏览器(IE7不适用)

  html>/**/body{}

  Opera9及其更低版本

  html:first-child {}

  Safari

  html[xmlns*=””] body:last-child {}

  要使用这些选择器,请将它们放在样式之前. 例如:

Example Source Code

#content-box {

width: 300px;

height: 150px;

}

Example Source Code

* html #content-box {

width: 250px;

}

二、让IE6支持PNG透明

  一个IE6的Bug引起了大麻烦, 他不支持透明的PNG图片。

  你需要使用一个css滤镜

Example Source Code

*html #image-style {

background-image: none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”fil

ename.png”, sizingMethod=”scale”);

}

三、移除超链接的虚线

  FireFox下,当你点击一个超链接时会在外围出现一个虚线轮廓. 这很容易解决, 只需要在标签样式中加入:本文由52CSS.com整理,转载请注明出处!

Example Source Code

outline:none.

a{

outline: none;

}

四、给行内元素定义宽度

  如果你给一个行内元素定义宽度,那么它只是在IE6下有效. 所有的HTML元素要么是行内元素要么就好是块元素. 行内元素包括: <span>, <a>, <strong> 和 <em>. 块元素包括<div>, <p>, <h1>, <form>和<li> . 你不能定义行内元素的宽度, 为了解决这个问题你可以将行内元素转变为块元素.

Example Source Code

span { width: 150px; display: block }

五、让固定宽度的页面居中

  为了让页面在浏览器居中显示, 需要相对定位外层div, 然后把margin设置为auto.

Example Source Code

#wrapper {

margin: auto;

position: relative;

}

六、IE6双倍边距的bug

1、问题:在IE6下如果某个标签使用了float属性,同时设置了其外补丁“margin:10px 0 0 10px”可以看出,上边距和左边距同样为10px,但第一个对象距左边有20px。
2、解决办法:当将其display属性设置为inline时问题就都解决了。
3、说明:这是因为块级对象默认的display属性值是block,当设置了浮动的同时,还设置了它的外边距 就会出现这种情况。也许你会问:“为什么第二个对象和第一个对象之间就不存在双倍边距的BUG”?因为浮动都有其相对应的对象,只有相对于其父对象的浮动 对象才会出现这样的问题。第一个对象是相对父对象的,而第二个对象是相对第一个对象的,所以第二个对象在设置后不会出现问题。另外在一些特殊布局中,可能需要组合使用display:block;和display:inline;才能达到预期效果。
当然最坏的情况下,我们就可以使用”margin:10px 0 0 10px;*margin:10px 0 0 10px;_margin:10px 0 0 5px”,这种“标准属性;*IE7识别属性;_IE6识别属性”HACK方式解决。

七、Box Model 盒模型bug的一般解决办法
 

八、两个层之间的3px间隙

给右边的层,应用float:left;浮动,即可解决IE 3px bug。
给左边的层,应用margin-right:-3px;,同样可解决IE 3px bug。

九、在IE中的HTML注释引起文字奇怪的复制

提供一些解决办法:
1、不放置注释。最简单、最快捷的解决方法
2、注释不要放置于2个浮动的区块之间。
3、将文字区块包含在新的<div></div>之间,如:<div style=”float:right;width:400px”><div>↓这就是多出来的那只猪</div></div>。
4、去除文字区块的固定宽度,与3有相似之处。
5、有的人在猪后加一个<br />或者空格,但只是消除现象。
6、不要给浮动元素设置多宽度,使其不会到达包含元素的底部,或者对最后一个元素设置margin-right: -3px;或者更小。
7、注释可以这样写:<!–[if !IE]>Put your commentary in here…<![endif]–>

十、图片替换技术

  用文字总比用图片做标题好一些. 文字对屏幕阅读机和SEO都是非常友好的.

Example Source Code

HTML:

<h1><span>Main heading one</span></h1>

CSS:

h1 { background: url(heading-image.gif) no-repeat; }

h1 span {

position:absolute;

text-indent: -5000px;

}

  你可以看到我们对标题使用了标准的<h1>作为标签并且用css来将文本替换为图片. text-indent属性将文字推到了浏览器左边5000px处, 这样对于浏览者来说就看不见了.

  关掉css,然后看看头部会是什么样子的.

十一、 最小宽度

  IE6另外一个bug就是它不支持 min-width 属性. min-width又是相当有用的, 特别是对于弹性模板来说, 它们有一个100%的宽度,min-width 可以告诉浏览器何时就不要再压缩宽度了.

除IE6以外所有的浏览器你只需要一个 min-width: Xpx; 例如:

Example Source Code

.container {

min-width:300px;

}

  为了让他在IE6下工作, 我们需要一些额外的工作. 开始的时候我们需要创建两个div, 一个包含另一个:

Example Source Code

<div class=”container”>

<div class=”holder”>Content</div>

</div>

  然后你需要定义外层div的min-width属性,本文由52CSS.com整理,转载请注明出处!

Example Source Code

.container {

min-width:300px;

}

这时该是IE hack大显身手的时候了. 你需要包含如下的代码:

Example Source Code

* html .container {

border-right: 300px solid #FFF;

}

* html .holder {

display: inline-block;

position: relative;

margin-right: -300px;

}

  As the browser window is resized the outer div width reduces to suit until it shrinks to the border width, at which point it will not shrink any further. The holder div follows suit and also stops shrinking. The outer div border width becomes the minimum width of the inner div.

十二、隐藏水平滚动条

  为了避免出现水平滚动条, 在body里加入 overflow-x:hidden .

Example Source Code

body { overflow-x: hidden; }

  当你决定使用一个比浏览器窗口大的图片或者flash时, 这个技巧将非常有用

13.特殊产品列表

body { font-size:12px}
ul { width:400px; margin:0; padding:0; list-style:none}
.newslist { line-height:20px; padding:5px 0; color:#333; border-bottom:1px dashed #ccc}
.newslist span { color:#888; float:right; text-align:right}
a { color:#333; text-decoration:none}
a:hover { color:blue; text-decoration:underline}

正确的做法:

<ul>
   <li class=”newslist”><span>2008-11-28</span>·<a href=”#”>10%无责赔偿仍存 交强惊</a></li>
</ul>

14.区分IE6,IE7,firefox三种浏览器的CSS HACK

区别IE6与FF:background:orange;*background:blue;

区别IE6与IE7:background:green !important;background:blue;

区别IE7与FF:background:orange; *background:green;

区别FF,IE7,IE6:background:orange;*background:green !important;*background:blue;

注:IE都能识别*;标准浏览器(如FF)不能识别*;IE6能识别*,但不能识别 !important,IE7能识别*,也能识别!important;FF不能识别*,但能识别!important;

IE6 IE7 FF
* √ √ ×
!important × √ √

——————————————————————————–
另外再补充一个,下划线”_”,
IE6支持下划线,IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6,IE7,firefox
: background:orange;*background:green;_background:blue;

只要记住IE7=*,IE6=_,然后按照先Firefox后IE7,最后IE6的顺序进行编写,一般就可以保证大部分用户浏览正常了。

xxx. yyy{width:600px;* width:600px;_ width:590px;}

15.css强制不换行

div{white-space:nowrap;}

css自动换行

div{ word-wrap: break-word; word-break: normal; }

css强制英文单词断行

div{word-break:break-all;}

一、button的使用

button标签是W3C HTML标准中按钮的标准代码,或许你还在使用Input的方法,但button标签拥有更灵活的使用方式和更丰富的表现形式,越来越受到广大设计师的亲睐(说的好假-_-)

但问题也出现在这个button标签在ie看来可不是那么亲切,ie6\7都存在一个问题——宽度,它无缘无故会比正常表现的按钮宽上不少,这样就破坏了设计师们精心设计的内容样式了。不过有问题,我们就能解决问题,而且用CSS能快速帮你解决。

button {
width:auto;
overflow:visible;
}

这样子设置按钮的属性就能解决宽度问题,但我们还需要在为“怪异模式quirk mode”下的IE考虑

<!–[if IE]>
<style>button{width:1;}</style>
<!– [endif]–>

这样就能完美修复(quirk mode 下并没有做尝试 懒了 -_-)

在实际使用button的过程中,又发现了IE对高度及行高解释有所不同,并且IE 6 /7与8也有大约2px、3px的差距(没有自己看),如果对该元素实现以下的背景图效果就会发现这个问题(下图是FF的效果)

而这是IE6/7

解决的方案很简单

在元素css中如下设置:
height:15px;
vertical-align:middle;
line-height:15px;

也就是将行高和高度设置为相同的值(这里我是根据图片的高度),再将其水平居中

这个方法也可以应用在其他问题中,能够实现元素的水平居中(例如实现元素在block元素中的水平居中)

不知道为什么,ie下的字体大小感觉和ff下不同,而且设置的margin-left也不同,暂时没有理会,看来对button的差异还没有完全了解

二、简单实现段落文字的左右对齐

.content {
text-justify:inter-ideograph;
text-align:justify;
}

其实文字对齐这个问题要完美解决还是很复杂的,但这两个css设置已经能满足我对段落对其的要求了,以后要再深入了解一下其他的方法

三、Word-spacing的用途

可能很多人都遇到过想让表格、表单中的中文三字和四字进行对齐,而在HTML中使用&nbsp;似乎并不好看,严重破坏美感,这里我给出一个简单的方法来让三字和四字完美对齐

首先在html中让三字的文字都手动空一格

比如:用_户_名 (下划线代表空格)

然后针对这些元素设置css属性:word-spacing:2px;

恩,在标准浏览器下已经完美了,但ie可不这么看

于是在ie条件语句下,再给样式设置word-spacing:0px;

这样就简单的解决三字和四字对齐问题

当然如果遇到两个字、三个字、四个字都有的情况,这就不可能这么用了,暂时留给大家想想简单有效的办法吧!

6. CSS box模型的另一种调整技巧
这个Box模型的调整主要是针对IE6之前的IE浏览器的,它们把边界宽度和空白都算在元素宽度上。比如:
#box
{
width: 100px;
border: 5px;
padding: 20px
}
这样调用它:
<div id=”box”>…</div>
这时盒子的全宽应该是150点,这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上,它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。
但用CSS也可以达到同样的目的,让它们显示效果一致。
#box
{
width: 150px
}

#box div
{
border: 5px;
padding: 20px
}
这样调用:
<div id=”box”><div>…</div></div>
这样,不管什么浏览器,宽度都是150点了

7. 块元素居中对齐
如果想做个固定宽度的网页并且想让网页水平居中的话,通常是这样:
#content
{
width: 700px;
margin: 0 auto
}
你会使用 <div id=”content”> 来围上所有元素。这很简单,但不够好,IE6之前版本会显示不出这种效果。改CSS如下:
body
{
text-align: center
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto
}
这会把网页内容都居中,所以在Content中又加入了
text-align: left 。

8. 用CSS来处理垂直对齐
垂直对齐用表格可以很方便地实现,设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高,而想让导航文字垂直居中的话,设定这个属性是没用的。
CSS方法是什么呢?对了,把这些文字的行高设为 2em:line-height: 2em ,这就可以了。

9. CSS在容器内定位
CSS的一个好处是可以把一个元素任意定位,在一个容器内也可以。比如对这个容器:
#container
{
position: relative
}
这样容器内所有的元素都会相对定位,可以这样用:
<div id=”container”><div id=”navigation”>…</div></div>
如果想定位到距左30点,距上5点,可以这样:
#navigation
{
position: absolute;
left: 30px;
top: 5px
}
当然,你还可以这样:
margin: 5px 0 0 30px
注意4个数字的顺序是:上、右、下、左。当然,有时候定位的方法而不是边距的方法更好些。

10. 直通到屏幕底部的背景色
在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部,用表格是很方便的,但如果只用这样的CSS:
#navigation
{
background: blue;
width: 150px
}
较短的导航条是不会直通到底部的,半路内容结束时它就结束了。该怎么办呢?
不幸的是,只能采用欺骗的手段了,给这较短的一栏加上个背景图,宽度和栏宽一样,并让它的颜色和设定的背景色一样。
body
{
background: url(blue-image.gif) 0 0 repeat-y
}
此时不能用em做单位,因为那样的话,一旦读者改变了字体大小,这个花招就会露馅,只能使用px。

转载请注明:夜阑小雨 » 最新整理的css+div技巧,绝对经典!

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址