CSS

background

background-color

背景颜色属性

表示颜色的三种方法

background-color:red;
background-color: rgb(255,0,0);
十六进制表示法background-color: #ff0000; 2的8次方为256 刚好可以使用16进制代替RGB表示颜色

十六进制表示法，简写：

#000   黑
#fff    白
#f00   红
#333   灰
#222   深灰
#ccc   浅灰

background-image

背景图片设置， background-image:url(images/wuyifan.jpg);

url：uniform resouces locator 统一资源定位

CSS除了浮动，还有一个对应的属性定位。

CSS有三种定位，这三种定位再页面中各有用途，也可以配合使用。

定位

相对定位

position:relative

相对对位，是盒子相对于原始位置的位置改变。

我定义了三个不浮动的盒子，每个盒子的大小为 80px x 80px，我将第二个盒子进行相对定位，定位代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>相对定位</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .box1{
            width: 80px;
            height: 80px;
            background-color: skyblue;
        }
        .box2{
            width: 80px;
            height: 80px;
            background-color: orange;
            /*使用相对定位，将盒子向右下方移动 40px*/
            position: relative;
            top: 40px;
            left: 40px;
            /*设置下变局 40px*/
            margin-bottom: 40px;
        }
        .box3{
            width: 80px;
            height: 80px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

效果：

我们看到，

我们设置的明明是 top: 40px; left: 40px; 但是盒子并没有向左上方移动，恰恰相反，盒子却朝右上角移动。这也是一个很令人无语的现象，暂时体会不到设计者的心意。所以，我们要注意： top 是向下移动， bottom 向上移动， left 向左移动， right 向右移动。
我们可以看到第二个盒子的没有脱离文档流（他原来的位置仍然占一行），所以 相对定位不会使元素脱离文档流
因为相对定位没有脱离文档流，所以，他 移动后的会留下一片空白。
给box2设置margin发现， margin仍然作用在box2原来的位置上，这是因为 相对布局并不是真正的让元素的位置发生了改变，只是浏览器的渲染机制将盒子绘制到别的位置了而已。

作用

因为相对定位会留下"坑"，所以，相对定位和其他定位相比，用处很小。主要用于微调元素和做绝对定位的参考。

下面来说一下绝对定位：

绝对定位

position:absolute

相对定位是相对于原来的位置的改变，绝对定位则是将浏览器左上角或页面左上角作为原点，进行位置的变换。

绝对定位会脱离标准流

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>相对定位</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            .box1{
                width: 80px;
                height: 80px;
                background-color: skyblue;
            }
            .box2{
                width: 80px;
                height: 80px;
                background-color: orange;
                position: absolute;
            }
            .box3{
                width: 80px;
                height: 80px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>

只能看到两个盒子，中间的盒子脱离了文档流，第三个盒子代替了第二个盒子的位置。第二个盒子浮动在第三个盒子上方。所以我们只能看到两个盒子。

绝对定位的参考点

绝对定位有四个属性，top、bottom、left、right，用来准确定位。这四个属性各有各的用途。top属性和bottom属性虽然都是用来定位的，但是二者之间仍然有一定的区别。

top
蓝色区域为页面。这里不再用代码演示。
bottom
如果使用bottom的话，则定位的参考点，就会变为 浏览器首屏窗口尺寸，对应页面的左下角
有下面者一段代码，box0盒子距离浏览器底边的距离为100px，距离左边距离为150px
```
.box0{
    width: 50px;
    height: 50px;
    background-color: #000;
    position: absolute;
    bottom: 100px;
    left: 150px;
}
```
效果：
当我缩放浏览器后，发现：
left和right属性
left和right属性的定位，要依据参考点，
如果是top、left 则定位点为页面的左上角
而如果是top、right 则定位点为页面的右上角
bottom、left 定位点为浏览器首屏的左下角
bottom、right 定位点为浏览器首屏的右下角
当上层元素也是定位的元素，那么，就会以上层元素作为参考点。上层元素不仅仅指父元素。
注意，上层元素的任何定位方式，都可以作为参考点
绝对定位会无视父容器的padding
绝对定位后，盒子如何居中？
因为绝对定位后，元素脱离了文档流，所有 margin:0 auto 就会失效，我们可以使用绝对定位的方式，使元素居中
```
position: absolute;
left: 50%;
top: 0;
margin-left: width/2;   /*宽度的一半*/
```

固定定位

position:fixed

固定定位是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置始终不变。使用和其他盒子类似，这里不再演示

IE6不兼容

清除定位

static 即标准流的定位方式。

position: static;

z-index

设置页面的高度，高度高的，压住高度低的。

只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。

z-index值没有单位，就是一个正整数。默认的z-index值是0。

如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。

如果父元素的高度大，那么他的子元素的高度也大。从父现象。

z-index: 988;

margin

margin代表外边距，是CSS常用的属性之一，和Android中的外边距有类似的效果。

margin塌陷现象

标准文档流中，竖直方向的margin不叠加，以较大的为准。

什么意思呢？

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style type="text/css">

        *{
            margin: 0;
            padding: 0;
        }
        .p1{
            width: 200px;
            height: 200px;
            background-color: orange;
            margin-bottom: 100px;
        }
        .p2{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <p class="p1"></p>
    <p class="p2"></p>
</body>
</html>

如上代码，我们在浏览器上绘制两个块级元素，设置一个下边距为100px，另一个上边距为200px，两个元素之间的间距应该为300px，但是神奇的事情出现了：

从上图我们可以看出，这两个元素之间的间距只有200px。

这就是所谓的margin塌陷现象！！（这不是没事找事儿吗）

脱离标准流就没有这种现象了！脱离标准流就没有这种现象了！脱离标准流就没有这种现象了！脱离标准流就没有这种现象了！脱离标准流就没有这种现象了！脱离标准流就没有这种现象了！

盒子居中

margin中有两个属性，

1margin-left: auto; /*左边距自定设置*/
margin-right: auto; /*右边距自定设置*/

margin-left:auto 将左边距自动设定，默认会占用左侧所有的位置为边距：

而同时设置 1margin-left: auto; 与 margin-right: auto; 会使元素居中，这是因为空白会被两侧平均分配。

可以简写为 margin:0 auto

magin的奇葩现象

margin元素的初衷是用来表示兄弟元素之间的边距，而不是用来表示父子元素之间的边距，padding通常用来表示父子之间的边距。

有如下代码：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            width: 300px;
            height: 300px;
            background-color: orange;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

效果如下：

我们看到，我们设置内部的div margin-top:20px，希望div2距离div1有20px的间隔，结果div1也跟着margin了。

我们给div1加一个边框，然后又正常了！

之所以出现这个状况主要是因为margin在改变间距时，实际上改变的是整个行，使用 margin-top:20px; 是将整个行侠义20px，所以就造成了这个效果，但是为什么加上边框后就可以了？谁设计的！出来，宝宝保证不打死你！

脱离文档流后

脱离文档流后，这种坑爹的效果就消失了，和margin的塌陷现象相同。

建议

所以，我们在表示父子的间距时，要尽量使用父元素的padding来表示子元素的外边距。

能不用margin就不用margin ，属性太坑！

上一页DOCTYPE标签、XHTML与HTML的区别下一页CSS的继承性、层叠性、权重

最后更新于2年前

这有帮助吗？

CSS