CSS背景与定位详解-优快云博客

本文详细介绍了CSS中背景属性的应用及元素的布局特性，并解析了不同类型的定位方式及其使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、background背景图

属性解释
background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：
background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置
background-attachment 设置背景图片是固定还是随着页面滚动条滚动
属性连写
实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>background</title>
    <style>
    .list{
        width: 300px;
        /* border: 1px solid black; */
        margin: 0px auto;
        list-style: none;
    }
    .list li{
        height: 60px;
        border-bottom: 1px dotted black;
        background: url("images/bg01.png") no-repeat 0 10px;
        text-indent: 50px;
        line-height: 60px;
    }
    /* 图片间距是80px */
    .list .l2{
        background-position-y: -70px;
    }
    .list .l3{
        background-position-y: -150px;
    }
    .list .l4{
        background-position-y: -230px;
    }
    .list .l5{
        background-position-y: -310px;
    }
    .list li a{
        text-decoration: none;
        color: black;
    }
    </style>
</head>
<body>

    <ul class="list">
        <li><a href="#">我们的我们</a></li>
        <li class="l2"><a href="">我们的我们</a></li>
        <li class="l3"><a href="">我们的我们</a></li>
        <li class="l4"><a href="">我们的我们</a></li>
        <li class="l5"><a href="">我们的我们</a></li>
    </ul>

</body>
</html>

二、元素的布局特性

块级元素（block-level）的布局特性
对于块级元素，有如下几个布局特性：
1. 独占一行（width默认为100%，height为0）
2. 可以设置任何尺寸相关的属性（width、padding、margin和border）；
行内级元素（inline-level）的布局特性
下行内级元素的分类，其可再细分两类元素：
1、可置换行内元素在MDN中，其对“可置换行内元素”的定义如下：
按字面翻译，“可置换行内元素”，是展示内容不在CSS作用域内的元素。这句话是不是不好理解？我们可以换另外一种方式理解：“可置换行内元素”，是这样一类元素，其展示的内容是通过元素的src、value等属性或CSS content属性从外部引用得到的，可被替换的。随着内容来源或内容数量的变化，可置换元素本身也会有水平和垂直方向上尺寸的变化。典型的可替换元素有、、和，表单类的可替换元素有和，某些元素只在一些特殊情况下表现为可替换元素，例如、、和。
2、不可置换行内元素 “不可置换行内元素”其实就是我们常见的一类行内元素，这一类行内元素有和等。“不可置换行内元素”是相对于“可置换行内元素”的，其展示的内容是在CSS作用域范围内的，是不可替换的。

言归正传，行内级元素有如下几个布局特性：
1. 在一行内可以与多个同类型的元素按从左到右的顺序排列
2. 不可置换行内元素不能设置width、height和垂直方向上的margin，而可置换行内元素则可以;
3. 在水平和垂直方向上的对齐方式，行内级元素分别受父元素的text-align属性和自身vertical-align属性的控制（父元素是table-cell元素时，也受父元素的vertical-align属性控制），在水平方向上默认左对齐，在垂直方向上默认在行框的baseline 基线上显示（“行框”的概念，会在后面深入讲解)；

三、定位

文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

关于定位
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

relative 生成相对定位元素，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对于body来定位。

absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

定位元素的偏移
定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。

定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

.box01{
    ......
    position:absolute;  /* 设置了绝对定位 */
    left:200px;            /* 相对于参照元素左边向右偏移200px */
    top:100px;          /* 相对于参照元素顶部向下偏移100px */
    z-index:10          /* 将元素层级设置为10 */
}

新增相关样式属性

/* 设置元素透明度,将元素透明度设置为0.3，此属性需要加一个兼容IE的写法 */
opacity:0.3;
/* 兼容IE */
filter:alpha(opacity=30);

布局特性

一、background背景图

二、 元素的布局特性

三、定位

二、元素的布局特性