DIV CSS技巧.docx

DIV CSS技巧.docx

《DIV CSS技巧.docx》由会员分享，可在线阅读，更多相关《DIV CSS技巧.docx（26页珍藏版）》请在冰豆网上搜索。

DIVCSS技巧

IE6支持max-height、min-heightCSS样式

让IE6支持max-height、让IE6支持min-height样式属性方法教程

我们在写CSS的时候，常常会遇到让一个图片或一个布局不能超出设定一定高度范围值，有时也需要设置一个最小高度值，以达到对齐等样式。

接下来由DIVCSS5为大家总结的如何解决IE6不支持max-height和不支持max-height的方法；IE6max-height、min-height不支持解决方法。

目录

1.IE6支持max-height解决方法

2.IE6支持min-height解决方法

3.IE6支持max-height又支持min-height方法

1、IE6支持max-height解决方法  - TOP

IE6支持最大高度解决CSS代码：

.yangshi{max-height:

1000px;_height:

expression（（document.documentElement.clientHeight||document.body.clientHeight）<1000?

"1000px":

""）;overflow:

hidden;}

说明：

max-height:

1000px;这个是IE6以上级其它品牌浏览器支持最大范围高度。

而_height:

expression（（document.documentElement.clientHeight||document.body.clientHeight）<1000?

"1000px":

""）;overflow:

hidden;则是让IE6支持max-height替代CSS代码，但效果和其它版本浏览器相同效果。

让所有浏览器都支持max-height的CSS样式代码，完整：

max-height:

1000px;_height:

expression（（document.documentElement.clientHeight||document.body.clientHeight）<1000?

"1000px":

""）;overflow:

hidden;这里的1000和1000px是你需要的数值，注意3个数值的相同。

让IE6支持最大高度max-height的时候别忘记加上overflow:

hidden;

2、IE6支持min-height解决方法  - TOP

IE6支持最小高度解决CSS代码：

.yangshi{min-height:

1000px;_height:

expression（（document.documentElement.clientHeight||document.body.clientHeight）>1000?

"1000px":

""）;}

说明：

min-height:

1000px;这个是IE6以上级其它品牌浏览器支持最小范围高度。

而_height:

expression（（document.documentElement.clientHeight||document.body.clientHeight）>1000?

"1000px":

""）;则是让IE6支持min-height替代CSS代码，但效果和其它版本浏览器相同效果。

让所有浏览器都支持min-height的CSS样式代码，完整：

min-height:

1000px;_height:

expression（（document.documentElement.clientHeight||document.body.clientHeight）>1000?

"1000px":

""）;这里的1000和1000px是你需要的数值，注意3个数值的相同。

3、IE6支持max-height又支持min-height方法  - TOP

让所有浏览器包括IE6即支持最大高度又支持最小高度。

.yangshi{Max-Height:

620px;Min-Height:

40px;_height:

expression（this.scrollHeight>620?

"620px":

（this.scrollHeight<40?

"40px":

"auto"））;}

IE6支持Max-Height和支持Min-HeightCSS代码

_height:

expression（this.scrollHeight>620?

"620px":

（this.scrollHeight<40?

"40px":

"auto"））;

说明：

以上代码作用是让对象的最小高度为40px，最大高度为620px的CSS样式属性

IE6支持min-width、max-widthCSS样式属性

让IE6支持max-width、IE6支持min-width样式

我们在写CSS的时候，常常会遇到让一个图片或一个布局不能超出设定一定宽度范围值,有时需要设置一个最小宽度，接下来由DIVCSS5为大家总结的解决IE6不支持max-width和不支持max-width的方法。

以下为CSS宽度之IE6支持最小宽度、最大宽度解决技巧（你可能需要进一步详细了解CSSwidth知识）。

目录

1.IE6支持max-width解决方法

2.IE6支持min-width解决方法

3.IE6即支持max-width又支持min-width

1、IE6支持max-width解决方法  - TOP

IE6支持最大宽度，解决CSS代码：

.yangshi{max-width:

1000px;_width:

expression（（document.documentElement.clientWidth||document.body.clientWidth）<1000?

"1000px":

""）;overflow:

hidden;}

说明：

max-width:

1000px;这个是IE6以上级其它品牌浏览器支持最大范围宽度。

而_width:

expression（（document.documentElement.clientWidth||document.body.clientWidth）<1000?

"1000px":

""）;overflow:

hidden;则是让IE6支持max-width替代CSS代码，但效果和其它版本浏览器相同效果。

让所有浏览器都支持max-width的CSS样式代码，完整：

max-width:

1000px;_width:

expression（（document.documentElement.clientWidth||document.body.clientWidth）<1000?

"1000px":

""）;overflow:

hidden;这里的1000和1000px是你需要的数值，注意3个数值的相同。

设置最大max-width的时候别忘记加上overflow:

hidden;

2、IE6支持min-width解决方法  - TOP

IE6支持最小宽度，解决CSS代码：

.yangshi{min-width:

1000px;_width:

expression（（document.documentElement.clientWidth||document.body.clientWidth）>1000?

"1000px":

""）;}

说明：

min-width:

1000px;这个是IE6以上级其它品牌浏览器支持最大范围宽度。

而_width:

expression（（document.documentElement.clientWidth||document.body.clientWidth）>1000?

"1000px":

""）;则是让IE6支持min-width替代CSS代码，但效果和其它版本浏览器相同效果。

让所有浏览器都支持min-width的CSS样式代码，完整：

min-width:

1000px;_width:

expression（（document.documentElement.clientWidth||document.body.clientWidth）>1000?

"1000px":

""）;

这里的1000和1000px是你需要的数值，注意3个数值的相同。

3、让IE6支持min-width同时又支持max-width解决方法  - TOP

让IE6即支持最小宽度又支持最大宽度限制设置。

这种情况我们常常碰到对图片控制，让不确定大小的图片，如果太宽，不能超出一定范围值，小的时候不控制他的方法，用到CSS代码：

_width:

expression（this.scrollWidth>620?

"620px":

（this.scrollWidth<1?

"1px":

"auto"））;

对图片控制CSS完整代码：

img{max-width:

620px;_width:

expression（this.scrollWidth>620?

"620px":

（this.scrollWidth<1?

"1px":

"auto"））;}

这里说明：

图片不能超出大于620px的宽度，又不小于1像素的宽度。

让所有浏览器包括IE6浏览器支持最大宽度又支持最小宽度DIVCSS代码：

.yangshi{max-width:

620px;min-width:

1px;_width:

expression（this.scrollWidth>620?

"620px":

（this.scrollWidth<1?

"1px":

"auto"））;}

DIV+CSSimportant知识讲解

常常我们使用!

importantcsshack区别IE6和IE7等浏览器对CSS属性的识别。

而我们要知道使用CSSimportant是针对IE7优先权识别带此单词CSS演示。

如：

color:

#F00!

important;color:

#00F这两个同样的对字体颜色控制，常理来说浏览器从左到右读取，IE浏览器将读取这2个颜色最后一个color:

#00F来显示网页文字颜色，但是在IE7中将会显示color:

#F00!

important;的颜色，这就是由于IE7独特的识别支持important并优先级介绍相同CSS属性的important设置CSS样式属性。

常见我们使用此important来区别IE7与其它浏览器的解决csshack。

常用完整的CSSHACK如下：

区别FF，IE7，IE6：

background:

orange;*background:

green!

important;*background:

blue;

CSShack之区别不同浏览器的写法：

或CSSHACK可进入DIVCSSHACK的IE6、IE7、IE8、Firefox兼容性CSSHACK讲解：

可以说使用important是为IE7准备的CSSHACK单词。

针对IE7优先权的CSS样式表单词。

DIVCSS兼容

CSS兼容是什么？

什么是DIV+CSS兼容？

DIVCSS5这里为大家解释究竟什么是CSS兼容

CSS兼容包括以下几点:

1、CSS网页版式错位

2、CSS网页在不同浏览器显示文字大小、颜色不一致

3、CSS网页空白

4、DIV+CSS在各浏览器中显示布局样式不同

DIVCSS兼容原因：

1、未初始化CSS

2、charset编码不正确

3、标签为结束

4、浏览器解释CSS属性不同

5、CSS失效，未doctype声明

解决网页不兼容方法：

1、统一一次用到标签的CSS属性，也就是CSS初始化

2、设置好charset网页编码，如网页UTF编码内容复制到GBK网页里需要借助CSS工具（常用DW软件）转换编码

3、记得关闭标签，如

4、使用CSSHACK兼容各大浏览器5、记得正确的CSSdoctype声明

DIVCSS图片_CSSimg

css图片_DIVCSS图片_CSSimg

这里为大家介绍的是DIVCSS对img图片控制。

我们常常会遇到以下情况：

1、img图片多了边框，特别是链接后的图片带边框

2、图片超出撑破DIV

下面我们通过CSS来解决这2个问题。

1、img图片多了边框，特别是链接后的图片带边框

有边框的图片

根据以上图，我们对图片加链接，结果图片出现了边框，

解决方法：

我们只需在初始化IMG标签CSS即可

img{padding:

0;border:

0;}加入此CSS即可消除边框

CSS去掉图片边框效果

2、图片超出撑破DIV

我们常常会遇到由于一个图片过宽过大，撑破了我们设置的宽度。

解决办法

使用CSS控制改对象IMG标签宽度即可，假如该对象为.yangshi设置宽度为500px，那我们就只需设置.yangshiimg{max-width:

500px;}但是在IE6中max-width是失效的，那我们最好解决办法，在上传图片的时候更加设置宽度，让图片本身宽度小于该地方设置宽度即可，这样感觉很麻烦，但是很多大的网站都是这样解决，一可以避免撑破设置宽度，二可以降低图片大小让浏览器更快打开网页。

总结：

1、一个网页中难免有图片，这时我们需要初始化img标签即：

img{padding:

0;border:

0;}

2、避免图片过宽撑破网页，我们建议在上传图片时候将图片剪切来比设置宽度小，同时还可以对该对象加入overflow:

hidden属性，即隐藏超出内容包括图片。

DIVCSS优化

DIVCSS优化

DIVCSS5为大家介绍简单的CSS优化。

涉及优化内容：

1、CSS代码优化

2、CSS重用优化

一、CSS代码优化地方：

1、border（CSS边框）简写：

border-top:

1pxsolid#000;border-bottom:

1pxsolid#000;border-left:

1pxsolid#000;border-right:

1pxsolid#000;

可以简写为：

border:

1pxsolid#000;

2、padding（CSSpadding）简写：

padding-top:

1px;padding-right:

2px;padding-bottom:

3px;padding-left:

4px;

可简写为：

padding:

1px2px3px4px;

padding-top:

1px;padding-right:

1px;padding-bottom:

1px;padding-left:

1px;

可简写为：

padding:

1px;

3、margin简写

margin-top:

1px;margin-right:

2px;margin-bottom:

3px;margin-left:

4px;

可简写为：

margin:

1px2px3px4px;

margin-top:

1px;margin-right:

1px;margin-bottom:

1px;margin-left:

1px;

可简写为：

margin:

1px;

4、background简写

background-color:

#000;可以简写为background:

#000;

background-image:

url（图片地址）

可简写为：

background:

url（图片地址）

5、font简写

font-size:

12px;line-height:

12px;font-family:

Arial,Helvetica,sans-serif;

可简写为：

font:

12px/12pxArial,Helvetica,sans-serif;

二、CSS重用优化

这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便，CSS实例如下：

.yangshi_a{width:

100px;height:

20px;text-align:

left;float:

left;font-size:

24px;}

.yangshi_b{width:

100px;height:

20px;text-align:

right;float:

left;font-size:

24px;}

他们都有相同高度、宽度、浮动、文字大小，而只有内容居左居右不同（你可能需要了解CSS居中），我们就可以提取他们相同属性

优化后:

.yangshi_a,.yangshi_b{width:

100px;height:

20px;text-align:

left;float:

left;font-size:

24px;}

.yangshi_b{text-align:

right;}

注意观察以上代码，自己理解，不懂可到CSS论坛提出问题。

 DIV间距设置

DIV间距设置专题-DIVCSS5

目录

1.清除上下DIV的间隙间距

2.更多DIV间距解决方法

3.左右DIV结构设置间距

4.DIV间距小结

一、消除上下结构 - TOP

DIV之间距离

让两个上下结构DIV块距离为零，通常新手在制作DIVCSS页面的时候，不会考虑到初始化CSS属性，这样各标签属性默认的CSS属性将会造成错位、兼容等问题。

如上下结构的2个boxDIV块，中间有一定间距无法消除

解决方法：

 - TOP

在CSS里设置DIV标签各属性参数为0

div{margin:

0;border:

0;padding:

0;}

这里就设置了DIV标签CSS属性相当于初始化了DIV标签CSS属性，这里设置margin外边距为0；边框border属性为0和内补白也为0；这样相当于就初始化了DIV之间距各属性距离为0，这样就不会造成DIV直接有一定的距离。

当然推荐在制作开发DIVCSS的时候最好将网页CSS属性、常用网页标签初始化一下。

CSS初始化技巧地址：

二、让左右结构内容之间有一定距离 - TOP

如上图，左右结构内容之间一定距离设置技巧

解决方法与技巧：

一般我们使用float浮动属性（float:

left（局左）、float:

right（居右））来解决此问题。

这样的布局一般总的宽度一定，只需左、右内容DIV宽度设置小于总宽度即可实现，注意的是宽度计算一定是包括自己设置宽度+边框宽度+padding宽度+margin宽度组成。

提示：

在DIVCSS制作中很多时候需要计算的如这样的布局。

实例图：

实现以上效果，提示总宽度为200px,而左右布局都有边框并中间间隔一定距离，这里为了样式所以距离设置比较大。

CSS代码：

 .div-c{width:

200px;}

.div-a{float:

left;width:

50px;border:

1pxsolid#999;height:

60px;}

.div-b{float:

right;width:

120px;border:

1pxsolid#999;height:

60px;}

Html代码：