css基础知识-优快云博客

本文详细介绍了CSS基础知识，包括引用方式、基础选择器、背景和文本属性等。还阐述了盒子模型，涵盖内/外边距、边框等。此外，讲解了浮动、清除浮动的方法，以及定位方式，如相对定位、绝对定位等，帮助开发者掌握CSS布局技巧。

css基础知识

css的作用

给页面中的HTML标签设置样式

css引用的三种方式

1.行内样式:使用style属性,所有的标签都有style属性,不推荐使用

2.内部样式:使用style标签,style标签要在head标签中

3.外部样式:需要创建外部文件,通过使用link标签引入,开发时推荐使用

优先级

优先级:1.行内>内部和外部

就近原则:谁离标签近谁生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css引用的三种方式</title>
    <style>
        p{
            color: green;
        }
    </style>
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
    <h2 style="color: yellowgreen;">
        1.行内样式:使用style属性,所有的标签都有style属性,不推荐使用
    </h2>
    <p>
        2.内部样式:使用style标签,style标签要在head标签中
    </p>
    <h3>
        3.外部样式:需要创建外部文件,通过使用link标签引入,开发时推荐使用
    </h3>
    <h4>
        优先级:1.行内>内部和外部
        就近原则:谁离标签近谁生效
    </h4>
</body>
</html>

css基础选择器

1.标签选择器

结构：标签名 { css属性名：属性值； }

➢作用：通过标签名，找到页面中所有这类标签，设置样式

➢注意点：

1.标签选择器选择的是一类标签，而不是单独某一个

2.标签选择器无论嵌套关系有多深，都能找到对应的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>
        li{
            color: #12d622;
        }
    </style>
</head>
<body>
    <ul>
        <li>标签</li>
        <li>标签</li>
        <li>标签</li>
        <li>标签</li>
        <li>标签</li>
    </ul>
</body>
</html>

2.类选择器

结构：**.**类名{ css属性名：属性值； }

➢作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

➢注意点：

1.所有标签上都有class属性，class属性的属性值称为类名（类似于名字）

2.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头

3.一个标签可以同时有多个类名，类名之间以空格隔开

4.类名可以重复，一个类选择器可以同时选中多个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        .p1{
            color: aqua;
        }
        .p2{
            background-color: coral;
        }
    </style>
</head>
<body>
    <p class="p1">1.每个标签都有class属性,class属性的值叫做类名</p>
    <p class="p1">2.类名由:数字,字母,下划线,中划线组成,不能用数字开头</p>
    <p class="p1 p2">3.一个表签可以有多个类名,类名中间用空格隔开</p>
    <p>4.一个类名可以在多个标签中使用</p>
    <p>5.类使用符号  .  来表示</p>
</body>
</html>

3.id选择器

结构：#id属性值 { css属性名：属性值； }

➢作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

➢注意点：

1.所有标签上都有id属性

2.id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！

3.一个标签上只能有一个id属性值

4.一个id选择器只能选中一个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
        #p1{
            color: blue;
        }
    </style>
</head>
<body>
    <p id="p1">
        1.每个标签都有id属性<br>
        2.每个标签只能有一个id<br>
        3.一个id只能对应一个标签<br>
        4.id选择器使用#代表
    </p>
</body>
</html>

4.通配符选择器

结构：***** { css属性名：属性值； }

➢作用：找到页面中所有的标签，设置样式

➢注意点：

1.开发中使用极少，只会在极特殊情况下才会用到

2.在基础班小页面中可能会用于去除标签默认的margin和padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符</title>
    <style>
        *{
            color: aqua;
        }
    </style>
</head>
<body>
    <h1>通配符:选择所有标签</h1>
    <p>极少使用</p>
</body>
</html>

选择器的优先级

通配符<标签选择器<类选择器<id选择器

css背景

背景颜色:background-color

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景颜色</title>
    <style>
        ul{
            /* 颜色名 */
            background-color: yellowgreen;
            /* 16进制 */
            background-color: #999;
            /* rgb */
            background-color: rgb(255, 122, 134);
            /* rgba */
            background-color: rgba(255, 122, 166, 0.5);
            /* hsl */
            background-color: hsl(0, 77%, 53%);
            /* hsla */
            background-color: hsla(0, 77%, 53%, 0.5);
        }
        li{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</body>
</html>

背景图片:background-image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片</title>
    <style>
        body{
            height: 800px;
            width: 1000px;
            /* 背景图片 */
            background-image: url(img/sunjunpchuazhoutu.jpg);
            /* 背景平铺 */
            background-repeat: no-repeat;
            /* 背景尺寸 */
            background-size: 1000px 500px;
            /* 背景定位 */
            background-position: 300px 200px;
        }
    </style>
</head>
<body>
    
</body>
</html>

背景简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景简写</title>
    <style>
        body{
            height: 800px;
            width: 100%;
            background: yellowgreen url(img/sunjunpchuazhoutu.jpg) no-repeat 200px 300px;
            background-size: 1000px 500px;
        }
    </style>
</head>
<body>
    
</body>
</html>

css文本属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本属性</title>
<style>
.l1{
/* 字体颜色 */
color: aqua;
}
.l2{
/* 文字方向:ltr rtl */
direction: rtl;
}
.l3{
/* 行高 */
line-height: 50px;
/* 字符间距 */
letter-spacing: 30px;
/* 文本对齐 */
text-align: center;
/* 文本装饰 */
text-decoration: underline;
}
a{
/* 去除a标签的下划线 */
text-decoration: none;
}
p{
/* 首行缩进 */
text-indent: 1em;
}
.l3{
/* 控制字母 */
text-transform:capitalize;
}
p{/* 处理空格 */
字体
CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。
white-space: pre-line;
}
.l4{
/* 单词间距,不支持中文 */
word-spacing: 190px;
}
</style>
</head>
<body>
<p>asdfghj
<a href="#">百度</a>
</p>
<p>
CSS 文本属性
属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。
</p>
<ul>
<li class="l1">ssssssssssss</li>
<li class="l2">asdfgh</li>
<li class="l3">hello word!</li>
<li class="l4">hello word!</li>
<li class="l5">ssssssssssss</li>
<li class="l6">ssssssssssss</li>
<li class="l7">ssssssssssss</li>
<li class="l8">ssssssssssss</li>
<li class="l9">ssssssssssss</li>
</ul>
</body>
</html>

css字体/颜色属性

字体属性:font

字体样式如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
    <link rel="stylesheet" href="css/font.css">
</head>
<body>
    <p>字体样式:</p>
    <p class="p1">1.font-size 字体大小</p>
    <p class="p2">
        2.font-weight 字体宽度
        取值:normal 正常  blod 加粗   bolder 更粗
        100~900
    </p>
    <p class="p3">
        3.font-style 字体样式(是否倾斜) <br>
        normal 正常   italic 倾斜
    </p>
    <p class=".p4">
        4.font-family 字体系列
    </p>
    <p class="p5">
        5.font 简写(复合属性,连写):倾斜 加粗 大小 系列
    </p>
</body>
</html>

颜色属性:color

可以用以下方法来规定 CSS 中的颜色：

十六进制色

RGB 颜色

RGBA 颜色

HSL 颜色

HSLA 颜色

css选择器的进阶

复合选择器

1.后代选择器：空格

作用：根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素

➢选择器语法：选择器1选择器2 { css }

➢结果：

•在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式

➢注意点：

1.后代包括：儿子、孙子、重孙子……

2.后代选择器中，选择器与选择器之前通过空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
    <style>
        /* 要求,修改所有ul中的p标签的文字大小 */
        ul p{
            /* ul中的所有p标签 */
            font-size: 40px;
        }
        /* ul中所有的li */
        ul li{
            color: red;
        }
        /* 子选择器:直接子元素 */
        body>p{
            color: yellowgreen;
        }
    </style>
</head>
<body>
    <p>这是外边的p标签</p>
    <ul>
        <li>
            <p>这是ul的孙子</p>
        </li>
        <li>
            <p class="p2">
                这是li的儿子
            </p>
        </li>
        <li>
            <a href="#" id="a1">这是body的重孙子</a>
        </li>
    </ul>
</body>
</html>

2.子代选择器：>

➢作用：根据 HTML 标签的嵌套关系，选择父元素子代中满足条件的元素

➢选择器语法：选择器****1 > 选择器****2 { css }

➢结果：

•在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

➢注意点：

1.子代只包括：儿子

2.子代选择器中，选择器与选择器之前通过 > 隔开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器</title>
<style>
/* div中的所有p标签 */
.d1 p{
background-color: aqua;
}
/* 子选择器:只有直接子元素会生效 */
.d1>p{
font-size: 30px;
}
</style>
</head>
<body>
<div class="d1">
<p>直接后代</p>
<div>
<p>间接后代</p>
</div>
</div>
</body>
</html>

3.交集选择器：紧挨着

➢作用：选中页面中同时满足多个选择器的标签

➢选择器语法：选择器1选择器****2 { css }

➢结果：

•（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

➢注意点：

1.交集选择器中的选择器之间是紧挨着的，没有东西分隔

交集选择器中如果有标签选择器，标签选择器必须写在最前面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交集选择器</title>
    <style>
        p.a{
            color: red;
        }
    </style>
</head>
<body>
    <p class="a">
        交集选择器中的选择器之间是紧挨着的，没有东西分隔
        交集选择器中如果有标签选择器，标签选择器必须写在最前面
    </p>
    <p class="b">
        爱上对方过后就哭了
    </p>
    <a href="#" class="a">阿斯顿</a>
</body>
</html>

4.并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <style>
        /* l1 红  l2,l3 黄 */
        .li1{
            color: red;
        }
        .li2,.li3{
            color: yellowgreen;
        }
        .p1,
        .li2>p {
            color: aqua;
        }
        ul .p2,
        span{
            color: pink;
        }
    </style>
</head>
<body>
    <p class="p1">并集选择器</p>
    <ul>
        <li class="li1">
            并集选择器中的每组选择器之间通过 , 分隔
        </li>
        <li class="li2">
            <p class="p2">
                并集选择器中的每组选择器可以是基础选择器或者复合选择器
            </p>
            <span>asdasd</span>
        </li>
        <li class="li3">
            并集选择器中的每组选择器通常一行写一个，提高代码的可读性
            <span>asdasd</span>
        </li>
    </ul>
    <span>asdasdasd</span>
</body>
</html>

5.hover伪类选择器

➢作用：选中鼠标悬停在元素上的状态，设置样式

➢选择器语法：选择器**:hover** { css }

➢注意点：

1.伪类选择器选中的元素的某种状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hover伪类选择器</title>
    <style>
        p:hover{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>鼠标移入变色</p>
</body>
</html>

元素显示模式

1.1 块级元素

➢显示特点：

1.独占一行（一行只能显示一个）

2.宽度默认是父元素的宽度，高度默认由内容撑开

3.可以设置宽高

➢代表标签：

•div、p、h系列、ul、ol,li、dl、dt、dd、form、header、nav、footer……

1.2行内元素

➢显示特点：

1.一行可以显示多个

2.宽度和高度默认由内容撑开

3.不可以设置宽高

➢代表标签：

•a、span 、b、u、i、s、strong、ins、em、del……

1.3 行内块元素

➢显示特点：

1.一行可以显示多个

2.可以设置宽高

➢代表标签：

•input、textarea、button、select……

•特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

1.4元素显示模式转换

➢目的：改变元素默认的显示特点，让元素符合布局要求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素显示模式</title>
    <style>
        a{
            /* 变块 */
            display: block;
            height: 100px;
            width: 100px;
            background-color: aqua;
        }
        p{
            /* 变行内 */
            display: inline;
            background-color: pink;
        }
        .i1{
            /* 隐藏 */
            display: none;
        }
        .d1{
            height: 300px;
            background-color: chocolate;
        }
        .d1:hover .i3{
            display: none;
        }
    </style>
</head>
<body>
    <a href="#">行内--块</a>
    <a href="#">行内--块</a>
    <p>块--行内</p>
    <img src="img/A.jpg" class="i1">
    <img src="img/A.jpg" class="i2">
    <div class="d1">
        <img src="img/A.jpg" class="i3">
    </div>
</body>
</html>

盒子模型

div

div:div是一个盒子,是一个块状元素,默认占一整行,默认没有高度

盒子的概念
1.页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
2.浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
盒子模型
CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div</title>
    <style>
        .a{
            height: 300px;
            background-color: aqua;
        }
        .b{
            height: 300px;
            width: 500px;
            background-color: yellowgreen;
        }
        .b:hover{
            background: url(img/sunjunpchuazhoutu.jpg) no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="a">
        div是一个盒子,是一个块状元素,默认占一整行,默认没有高度
    </div>
    <div class="b">

    </div>
</body>
</html>

扩展

内/外边距

1.内边距:padding

作用：设置边框与内容区域之间的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内边距</title>
    <style>
        .d1{
            height: 400px;
            width: 500px;
            border: 1px solid pink;
            /* 内边距，填充 */
            padding: 10px;
            box-sizing: border-box;
        }
        img{
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="d1">
        <img src="img/2.jpg" alt="">
    </div>
</body>
</html>

2.外边距:margin

作用：只给盒子的某个方向单独设置外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距</title>
    <style>
        .d1,.d2,.d3{
            height: 200px;
            width: 200px;
            background-color: yellowgreen;
            margin: 10px;
        }
        .d2{
            /* 左边距220px */
            margin-left: 220px;
            margin-top: -210px;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4">
        <a href="#">立刻就会</a>
        <a href="#">在这次</a>
        <a href="#">去微软</a>
        <a href="#">阿斯蒂芬</a>
    </div>
</body>
</html>

自动内减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 300px;
            width: 300px;
            background-color: aqua;
        }
        .d2{
            padding: 20px;
            border: 3px solid red;
            box-sizing: border-box;
        }
        .d3{
            padding: 20px;
            border: 10px solid red;
            /* 自动内减 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>

边框

边框（border）- 单个属性
作用：给设置边框粗细、边框样式、边框颜色效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框</title>
    <style>
        div{
            height: 300px;
            width: 500px;
        }
        .a1{
            /* 边框的粗细 */
            border-width: 5px 10px 15px 20px;
            /* 边框颜色 */
            border-color: blue yellow green yellowgreen;
            /* 边框样式 */
            border-style: solid dashed double dotted;
        }
        .a2{
            border: 2px solid aqua;
            /* 上边框 */
            /* border-top-width: 10px; */
            /* 上 top  下 bottom  左 left  右 right */
        }
        .a3{
            /* 简写 */
            border: 5px solid pink;
        }
    </style>
</head>
<body>
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>
</body>
</html>

圆角边框

属性名:border-radius

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角边框</title>
    <style>
        .d1{
            width: 300px;
            height: 300px;
            background-color: aqua;
            border-radius: 30px;
            /* 四个值 */
            border-radius: 10px 20px 30px 40px;
        }
        .d2{
            width: 300px;
            height: 300px;
            border-radius: 150px;
            background-color: pink;
        }
        .d3{
            width: 150px;
            height: 300px;
            border-radius: 0 150px 150px 0;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>

浮动

作用：用于网页布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右

属性名:float

属性值:left(左浮动)/right(右浮动)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        div{
            height: 300px;
            width: 300px;
        }
        .a{
            float: left;
            background-color: aqua;
        }
        .b{
            float: left;
            background-color: aquamarine;
        }
        .c{
            float: left;
            background-color: bisque;
        }
        .d{
            float: left;
            background-color: blueviolet;
        }
        /* 浮动 */
        .e{
            height: 300px;
            width: 100%;
            background-color: yellowgreen;
            /* both:清除两边
                left：左 right 右
                none：不清除
            */
            clear: left;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
</body>
</html>

清除浮动

清除浮动的介绍

含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
原因：
子元素浮动后脱标 → 不占位置
目的：
需要父元素有高度，从而不影响其他网页元素的布局

方法

1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        .a{
            border: 1px solid red;
            height: 400px;
        }
        .b{
            height: 300px;
            width: 300px;
            margin: 5px;
            background-color: yellowgreen;
            float: left;
        }
        .c{
            height: 300px;
            background-color: pink;
        }
        .cl::before,
        .cl::after{
            /* content:文字、图片 */
            content: "";
            display: table;
        }
        .cl::after{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="a cl">
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
    </div>
    <div class="c"></div>
</body>
</html>

2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        .a{
            border: 1px solid red;
            height: 400px;
        }
        .b{
            height: 300px;
            width: 300px;
            margin: 5px;
            background-color: yellowgreen;
            float: left;
        }
        .c{
            height: 300px;
            background-color: pink;
        }
        .cl::after{
            /* content:文字、图片 */
            content: "";
            display: block;
            clear: both;
            /* 补充写法 */
            height: 0;
            /* 隐藏元素 */
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="a cl">
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
    </div>
    <div class="c"></div>
</body>
</html>

3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动:额外标签法</title>
    <style>
        .a{
            border: 1px solid red;
        }
        .b{
            height: 300px;
            width: 300px;
            margin: 5px;
            background-color: yellowgreen;
            float: left;
        }
        .c{
            height: 300px;
            background-color: pink;
        }
        .d{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b">
            额外标签法：
            在父元素的最后添加一个块元素
            设置样式：clear:both
        </div>
        <div class="b">
            不建议使用：增加了页面复杂度
        </div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="d"></div>
    </div>
    <div class="c"></div>
</body>
</html>

定位

作用:

1.可以让元素自由的摆放在网页的任意位置
2.一般用于盒子之间的层叠情况

定位方式:

静态定位:static

相对定位:relative

绝对定位:absolute

固定定位:fixed

静态定位是默认值

1.相对定位

介绍:自恋型定位，相对于自己之前的位置进行移动
代码:position: relative
特点：
1.需要配合方位属性实现移动
2.相对于自己原来位置进行移动
3.在页面中占位置 → 没有脱标
应用场景：
1.配合绝对定位组CP（子绝父相）
2.用于小范围的移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        div{
            height: 300px;
            width: 300px;
        }
        .a{
            background-color: aqua;
        }
        .b{
            background-color: pink;
            position: relative;
            left: 150px;
            bottom: 150px;
        }
        .c{
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b">
        相对定位：相对于自身进行移动
        1.没有脱标
        2.会保留原来的位置
    </div>
    <div class="c"></div>
</body>
</html>

2.绝对定位

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
代码:position: absolute
特点：
1.需要配合方位属性实现移动
2.默认相对于浏览器可视区域进行移动
3.在页面中不占位置 → 已经脱标
应用场景：
1.配合绝对定位组CP（子绝父相）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝地定位</title>
    <style>
        .a{
            height: 500px;
            width: 800px;
            background-color: antiquewhite;
            position: relative;
        }
        .b{
            height: 200px;
            width: 200px;
            background-color: aqua;
            position: absolute;
            bottom: 0;
            right: 0;
        }
        .c{
            height: 200px;
            width: 200px;
            background-color: pink;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b">
            绝对定位：
            相对于非静态定位的父元素进行移动
            1.不保留原来的位置
            2.脱离了标准文档流
        </div>
        <div class="c"></div>
    </div>
</body>
</html>

3.子绝父相

场景：让子元素相对于父元素进行自由移动
含义：
子元素：绝对定位
父元素：相对定位
子绝父相好处：
父元素是相对定位，则对网页布局影响最小

4.固定定位

介绍：死心眼型定位，相对于浏览器进行定位移动
代码:position:fixed
特点：
1.需要配合方位属性实现移动
2.相对于浏览器可视区域进行移动
3.在页面中不占位置 → 已经脱标
应用场景：
1.让盒子固定在屏幕中的某个位置

5.半透明遮罩

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>透明遮罩</title>

    <style>

        .a{

            height: 500px;

            border: 1px solid red;

            position: relative;

        }

        img{

            height: 500px;

        }

        .b{

            height: 100px;

            width: 800px;

            color: white;

            background-color: rgba(0, 0, 0,0.5);

            position: absolute;

            top: 400px;

            /* 透明度 */

            /* opacity: 0.5; */

        }

    </style>

</head>

<body>

    <div class="a">

        <img src="img/2.jpg" alt="">

        <div class="b">

            半透明遮罩

        </div>

    </div>

</body>

</html>