CSS学习三~~相对定位，绝对定位，兼容性基础

来源：互联网发布：同意协议js验证编辑：程序博客网时间：2024/04/27 17:13

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

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

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

div#newsh2{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的解析不一样，造成了同一个网页，在不同的浏览器下浏览的结果相差太多，这种现象叫“不兼容”。解决“不兼容”的办法，就是兼容性的调整。

解决不兼容性，大致三种方法：

（1）常用的全局CSS属性设置

（2）常用的兼容性设置

（3） 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:0pxauto;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代码的过程，就叫CSSHACK。

（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的规范，因此尽量少用，如果实在调试不过去，偶尔用一下可以。

0 0