山西农业大学20241008

06-CSS

- [一. 背景](#一. 背景)
- - [1. 背景颜色](#1. 背景颜色)
  - [2. 背景图片](#2. 背景图片)
  - - [2.1 背景图引入](#2.1 背景图引入)
    - [2.2 背景图平铺](#2.2 背景图平铺)
    - [2.3 背景图定位](#2.3 背景图定位)
    - [2.4 背景图尺寸](#2.4 背景图尺寸)
    - [2.5 简写](#2.5 简写)
- [二. 定位](#二. 定位)
- - [1. 定位的概念](#1. 定位的概念)
  - [2. 相对定位](#2. 相对定位)
  - [3. 绝对定位](#3. 绝对定位)
  - [4. 固定定位](#4. 固定定位)

一. 背景

注意: 如果要使用背景,容器必须有宽度和高度

1. 背景颜色

background-color: 颜色值;

元素背景颜色会出现在元素的最底层

2. 背景图片

2.1 背景图引入

background-image: url('图片路径')

背景图片的大小一般和设置的元素的大小比例相同, 大小不同
-- 如果元素范围小于图片的大小, 图片显示不全
-- 如果元素范围大于图片的大小, 图片会在X轴和Y轴平铺

一般背景属性不会单独使用, 配合其他的属性一起使用

2.2 背景图平铺

background-repeat:

取值:

no-repeat ; 不平铺

repeat-x ; 在x轴重复图像

repeat-y ; 在y轴重复图像

2.3 背景图定位

background-position: 50px 50px; // x轴 , y轴

还可以取值为百分比, 元素的宽高的百分比

还可以取值为关键字: top, right, bottom, left, center;

2.4 背景图尺寸

background-size:100% auto; 保证x轴优先完整显示	x轴拉满100%, 图片在x轴展示不会多也不会少;y轴auto自动按照比例进行缩放,图片在y轴重复或者显示不全
background-size:auto 100% ;保证Y轴优先完整显示	Y轴拉满100%, 图片在Y轴展示不会多也不会少;X轴auto自动按照比例进行缩放,图片在X轴重复或者显示不全
background-size:cover	图片铺满整个容器, 不留多余空间, 除非比例刚好.否则损失部分图像
background-size:contain	保证一张图片在容器中, 一点也不损失图像, 出现多余空间时,会重复或者空白

2.5 简写

background: 背景颜色背景图片平铺定位/尺寸

background: red url("./img/01.jpg") no-repeat center center / cover;

最简化:

background: url("./img/01.jpg");

background: red;

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        .bgColor{
            width: 100px;
            height:100px;
            border-radius: 5px;
            background-color: #EBAD7D;
        }
        .bgImg{
            width: 200px;
            height: 500px;
            border: 3px solid #000;
            background-image: url("./img/02.png");
            background-repeat:no-repeat ;
            background-position: center center;
            background-size:contain;
        }
    </style>
</head>
<body>
<div class="bgColor">Hello World!!!</div>
<div class="bgImg"></div>
</body>
</html>

二. 定位

1. 定位的概念

指元素以什么形式定位在文档中, 因为定位的属性不止一种

一般元素在页面中会使用浮动定位和文档流定位; 不方便的位置可以使用定位

定位分为三种类型, 属性为: position:

取值:

relative : 相对定位

absolute: 绝对定位

fixed: 固定定位
设置好以上三个值, 元素会称为 已定位的元素

配合方向进行元素的位移

top; right; bottom; left

2. 相对定位

position: relative;

相对于自己在文档流中本来的位置(自己的原位置)进行定位

应用:

实现位置的微调, 不影响页面布局

配合着绝对定位一起使用

3. 绝对定位

position: absolute;

绝对定位属性给到元素后, 会迅速脱离文档流, 但是不是浮动, 比浮动飘得还高, 遮挡所有兄弟元素, 包含文字

使用绝对定位后, 父元必须设置宽高

特点:

默认情况情况下, 相对于整个body父元素定位

绝对定位的元素, 参照的是距离自己最近的``已经定位的祖先元素

一般情况下, 我们布局需要元素相对于父元素定位, 因此可以给父元素添加一个定位属性, 相对定位最好, 因为相对定位不脱离文档流

应用: 让一个元素在父元素中上下左右都居中

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .father{
            background: #8EE1FF;
            height: 750px;
            /* 父元素变为已经定位的元素, 并且不脱离文档流 */
            position: relative;
        }
        .son{
            width: 120px;
            height: 100px;
            background: orange;
            /*绝对定位 : 脱离文档流*/
            position: absolute;
            top:50%;
            left:50%;
            margin-top: -50px; /* 元素高度的一半 */
            margin-left: -60px; /* 元素宽度的一般 */
        }
    </style>
</head>
<body>

    <div class="father">
        <div class="son"></div>
    </div>

</body>
</html>

4. 固定定位

position: fixed;

有固定定位的元素, 不参照其父元素, 只参照html根标签, 效果上是浏览器窗口

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        .box{
            height: 5000px;
            background: #EBAD7D;
        }
        .d1{
            width: 200px;
            height: 200px;
            background: #8EE1FF;
            position: fixed;
            right: 20px;
            bottom:20px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="d1"></div>
</div>
</body>
</html>