CSS定位与兼容性

  • CSS定位与兼容性已关闭评论
  • 290 views
  • A+
所属分类:CSS

CSS浮动和清除

Float:元素浮动,取值:left或right

(1)浮动元素可以向左或向右浮动,浮动到包围元素的边框或上一个浮动元素的边上为止;

(2)元素浮动起来后,所占的空间就消失了,浮动元素的层级要高于普通元素;

(3)任何元素都可以浮动,浮动元素将变成“块元素”,不管原来是什么元素;

块元素,具有width和height属性,而行内元素默认width和height不起作用。

提示:元素浮动,可以使用行内元素转成“块元素”;

一个行内元素,要想宽和高能用,可我不想进行浮动,能否实现?

Display的属性:可以取值:none(无)、block(块元素)、inline(行内元素)

 

CSS继承和优先级

CSS继承性

内部元素将继承外部元素的样式,多个外部元素的样式,最终将叠加到内部元素上;

<body>是一个网页中最大的标记(容器),它里面定义的样式,会被所有的子元素进行继承;

哪些CSS属性能被继承呢?

主要是CSS文本相关或CSS字体相关的属性,都会被继承。

Font-size、font-family、font-style、font-weight

Color、line-height、text-align、text-indent、letter-spacing、word-spacing、text-decoration等

提示:在继承过程中,是通过层层覆盖来实现相同属性值的替换。也就是说,距离“目标元素”越近,样式的优先级越高。

CSS优先级

(1)单个选择器的优先级

       !important(IE6不支持) > 行内样式(style属性) > ID选择器 > Class选择器 > HTML标签选择器

(2)多个选择器的优先级计算

假设,用1代表标签选择器,10代表类选择器,100代表ID选择器,1000代表行内样式

H2{color:#FF0000}          优先级 1

.news h2{color:#0000FF}      优先级 11

div.news h2{color:#00FF00}  优先级 12

div#news h2{color:#FFFF00}  优先级 102

 

PHP通过include()require()将外部的某个文件引入到当前网页中。

Header.php

Footer.php

 

CSS定位属性

Position:元素定位,取值:static(静态定位)、fixed(固定定位)、relative(相对定位)、absolute(绝对定位)

Left:设置元素距离左边多远;

Right:设置元素距离右边多远;

Top:设置元素距离上边多远;

Bottom:设置元素距离下边多远;

 

Static(静态定位)

任何元素,默认情况下都是静态定位。

Fixed(固定定位)

固定定位,是相对于浏览器窗口(大小是一定的),来进行的定位。

固定定位元素,将脱离普通文档流,并且不再占用空间,层级要高于普通文档中的元素。

固定定位元素,在没有指定定位坐标的前提下,将保持原来的形状和位置。

固定定位元素,是一个“块元素”,不管它原来是什么元素。

Relative(相对定位)

相对定位,是相对于“它原来的自己”来进行的定位(偏移)。

相对定位,所占的空间依然保留,层级高于普通元素。

相对定位,在没有设置定位坐标前,将保持原来的形状和位置。

绝对定位(absolute)

绝对定位,是相对于它的祖先定位元素(上级元素是绝对定位元素或相对定位元素),来进行的定位。如果一直往上层找定位元素,如果没有找到,相对于网页来进行定位

绝对定位元素,不再占用空间,层级高于普通元素。

 

CSS兼容性

不兼容性:因为不同的浏览器厂商,对CSS的解析不一样,造成了同一个网页,在不同的浏览器下浏览的结果相差太多,这种现象叫“不兼容”。解决“不兼容”的办法,就是兼容性的调整。

 

解决不兼容性,大致三种方法:

  • 常用的全局CSS属性设置
  • 常用的兼容性设置
  • CSS HACK

 

第一种:常用的全局CSS属性设置

(1)清除所有的标记的内外边距

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0}

(2)项目符号

ul,ol,li{list-style:none;}

(3)全局字体颜色设置

body{font-size:12px;color:#444;}

(4)常用标题的设置

h1,h2,h3,h4,h5,h6{font-size:100%}

h1{padding:11px 0 0; margin-bottom:4px;font:normal 20px/30px 黑体;text-align:center;}

h2 { padding:6px 0 0; margin-bottom:4px; font:normal 20px/30px 黑体; text-align:center; }

h3{font-size:12px}

h4{font-size:12px;font-weight:normal}

 

(5)全局链接

a{text-decoration:none;cursor:pointer}

a:link, a:visited {color:#004276}

a:hover{text-decoration:underline;color:#ba2636}

(6)图片

img{border:none;}

 

(7)浮动和清除

.float1{float:left;}

.float2{float:right}

.clear{clear:both;}

.blank10{height:10px;clear:both;}

 

(8)颜色

.red{color:#FF0000;}

.blue{color:#0000FF;}

.green{color:#00ff00;}

 

第二种:常用的兼容性设置

IETEST软件:可以测试IE6、IE7

(1)网页居中

IE5下的居中,应该是:text-align:center

Firefox下的居中,应该是:margin:0px auto;

 

body{font-size:12px;color:#444;background:url(../images/bg-body.gif) repeat-x #f1f1f1;text-align:center;}

.box{width:973px;margin:0px auto;text-align:left;}

(2)单行内容垂直中齐

Div{height:80px;line-height:80px;}

(3)IE中元素浮动时,margin左右加倍的问题

解决办法:Display:inline;

 

(4)实现1px高度的<div>

在IE6下解决办法:overflow:hidden; //超出1px外的部分全部隐藏掉

 

第三种:CSS HACK简介

CSS HACK,针对不同浏览器,编辑不同的CSS代码的过程,就叫CSS HACK。

(1)CSS属性的HACK

div{

background-color:#FF0000; //所有浏览器都支持

*background-color:#00FF00;   //ie6和IE7支持

_background-color:#0000FF;   //IE6认识

}

(2)CSS选择器的HACK(了解一下)

       IE7浏览器能识别

*+html div{

Background-color:#FF0000;

}

*html div{

Background-color:#FF0000;

}

 

注意:CSS HACK虽然可能解决一些浏览器兼容的问题,但必竟不是W3C的规范,因此尽量少用,如果实在调试不过去,偶尔用一下可以。

 

CSS浮动和清除

浮动元素向左或向右浮动(飘动),浮动包围元素(父元素)的边上或者上一个浮动元素的边上;

浮动元素应该是一个“块元素”,行内元素加了“浮动”特性后,将变成“块元素”;

行内元素,经过什么操作,可以变成“块元素”?

浮动、display:block、固定定位、绝对定位

浮动元素不占空间,层级应高于普通元素;

 

CSS定位:让元素相对于某个元素来进行相应的偏离。层级应该高于普通元素。

Position:定位属性,取值:static(默认、普通文档流、没有定位)、fixed(固定定位)、relative(相对)、absolute(绝对)

定位属性要配合四个定位坐标(left right   top bottom)值,来实现元素的定位;

固定定位(fixed):相对于浏览器窗口,来进行的定位。不占空间。将生成一个“块元素”,不管原来是什么元素。

相对定位(relative):相对于“它原来自己”进行定位。占空间。

绝对定位(absolute):相对于祖先定位元素(相对定位、绝对定位),进行定位。不占空间。生成“块元素”。

 

CSS HACK:针对不同浏览器(FF、IE7、IE6),书写CSS代码的过程。

div{

background-color:#FF0000;   //所有浏览器都支持

*background-color:#00FF00;   //IE6和IE7

_background-color:#0000FF;   //IE6

}

注意:一般来说,使用公共的CSS属性写法,可能满足我们的大部分兼容性,偶尔会有几个特殊的CSS属性存在不兼容性,就可以使用CSS HACK试一下。