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试一下。