CSS入门

最新推荐文章于 2024-11-10 22:49:43 发布

HF1203

最新推荐文章于 2024-11-10 22:49:43 发布

阅读量846

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/HF1203/article/details/114374718

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.CSS3 入门

1: 什么是CSS
2: CSS 怎么用（快速入门）
3: CSS 选择器（重点加难点）
4: CSS 美化网页（文字，阴影，超链接，列表，渐变…）
5: CSS 盒子模型
6：浮动
7：定位
8：网页动画（特效）

学习网站：菜鸟

1.1什么是CSS

CSS:Cascading Style Sheet 层叠样式表/级联样式表
CSS:表现，美化网页字体，大小，颜色，宽高，背景图片，网页定位，网页浮动

1.2 CSS 发展史

CSS1.0 基础

CSS2.0 ：div +css，HTML与CSS 结构分离的思想，网页变得简单，SEO

CSS2.1：浮动，定位

CSS3.0 ：圆角，阴影，动画…浏览器兼容性

1.3快速入门

优势

内容和表现分离
网页结构表现同意，可以复用
样式十分丰富
利用SEO ，容易被搜索引擎收录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!-- 规范语法 ，每一句声明使用分号结尾
        选择器{
                    声明1；
                    声明2；
                    声明3；
        }
        -->
        /*h1{*/
        /*    color: blue;*/
        /*}*/
    </style>
 <!--   /* 使用link 引入css 样式文件 建议使用这种方式*/-->
    <link rel="stylesheet" href="src/first.css">
</head>
<body>

<h1> 我是标题</h1>
</body>
</html>

未来使用VUE

1.4CSS 的三种导入方式

行内样式（优先级高不建议这么写）
内部样式（优先级就近原则）
外部样式（优先级就近原则）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!-- 规范语法 ，每一句声明使用分号结尾
        选择器{
                    声明1；
                    声明2；
                    声明3；
        }
        -->
        /*h1{*/
        /*    color: blue;*/
        /*}*/
    </style>
 <!--   /* 使用link 引入css 样式文件 建议使用这种方式*/-->
    <link rel="stylesheet" href="src/first.css">
</head>
<body>

<h1> 我是标题1</h1>
<!--行内样式表-->
<h2 style="color: red">我是标题2</h2>
</body>
</html>

外部样式表拓展：

以上使用的连接式使用link 引入外部样式表，所有出来后展示出来
```
 <link rel="stylesheet" href="src/first.css">
```
导入试@import url(“path”)，优先展示网页结构再去渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        @import  url("src/first.css");
    </style>
 <!--   /* 使用link 引入css 样式文件 建议使用这种方式*/-->
    <!--<link rel="stylesheet" href="src/first.css">-->
</head>
<body>

<h1> 我是标题1</h1>
<!--行内样式表-->
<h2 style="color: red">我是标题2</h2>
</body>
</html>

虽然，这两种方式都是为了加载css文件，但还是存在细微的差别。

1：本质的差别，link属于XHTML标签，而@import完全是css提供的一种方式。

link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。

2：加载顺序的差别：当一个页面被夹在的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式（就是闪烁），网速慢的时候还挺明显。

3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容。

4：使用dom控制样式时的差别。当时用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的（不支持）。

5（不推荐）：@import可以在css中再次引入其他样式表，比如创建一个主样式表，在主样式表中再引入其他的样式表。

2 CSS三种基本选择器

作用：选择页面上的某一个或者某一类元素

标签选择器:会选择页面所有的这个标签的元素
类选择器 class
id选择器

2.1标签选择器

例如 h1所有的h1都会被css 样式表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <style>
        h1{
            color: red;
            background: aqua;
            border-radius: 20px;
        }

    </style>
</head>
<body>
<h1>我是标题</h1>
<h1>我是标题</h1>
<h2>我是标题</h2>
</body>
</html>

2.2 类选择器

类选择器语法

<!-- 优点，可以多个标签归类，是同一个class，可以复用-->
<style>
.classname{
声明一；
声明二；
...
}
<style>

例如 h1和h3 使用同一种样式复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <style>
       .class1{
            color: red;
            background: aqua;
            border-radius: 20px;
        }

    </style>
</head>
<body>
<h1 class="class1">我是标题</h1>
<h1>我是标题</h1>
<h2 class="class1">我是标题</h2>
</body>
</html>

2.3 id选择器

id选择器语法

<!-- id 选择器必须全局唯一-->
<style>
#idname{
声明一；
声明二；
...
}
<style>

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <style>
       .class1{
            color: red;
            background: aqua;
            border-radius: 20px;
        }

        #id1{
            color: red;
            background: blue;
            border-radius: 20px;
        }

    </style>
</head>
<body>
<h1 class="class1">我是标题</h1>
<h1 id="id1">我是标题</h1>
<h2 class="class1">我是标题</h2>
</body>
</html>

3CSS层次选择器

后代选择器：在某个元素的后面
```
div p{        
color: red;    
}
```
子选择器：儿子向下
```
div > p{       
color: blue;   
}
```
相邻兄弟选择器：只有一个向下
```
.classname + p{
color: yellow;   
}
```
通用选择器:通用兄弟选择器，当前这种元素的所有兄弟元素
```
.classname ~ p{
color: yellow;   
}
```

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        div p {
            color: red;
        }

        div > p {
            color: blue;
        }

        .classname ~ p {
            color: yellow;
        }

        .classname + p {
            color: yellow;
        }
    </style>
</head>
<body>
<div align="center">
    <p class="classname">花非花 雾非雾</p>
    <p>夜半来 天明去</p>
    <p> 来如春梦了无痕，去似朝云无觅处</p>
    <ul>
        <li>
            <p>花非花 雾非雾</p>
        </li>
        <li>
            <p>夜半来 天明去</p>
        </li>
        <li>
            <p>来如春梦了无痕，去似朝云无觅处</p>
        </li>
    </ul>
    <p>花非花 雾非雾</p>
    <p>夜半来 天明去</p>
    <p> 来如春梦了无痕，去似朝云无觅处</p>
</div>
<p>来如春梦了无痕，去似朝云无觅处</p>
</body>
</html>

4 CSS结构伪类选择器

结构伪类选择器：定位相关

 <style>
        /* 选择ul的第一个子元素 ，不使用class 和id 选择器*/
        ul li:first-child {
            background: aqua;
        }
        /* 选择ul的最后一个子元素，不使用class 和id 选择器**/
        ul li:last-child {
            background: red;
        }
         /*选择p 元素的父类 的第一个元素,且当前元素是p 才生效，否则无效*/
        p:nth-child(1){
            background: yellow;
        }
         /*选择p 元素的父类 的第一个 p元素，会选择类型**/
        p:nth-of-type(1){
            background: blue;
        }
    </style>

5属性选择器

常用的选择器：id+class 结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
</head>
<style>
    .demo a{
        float: left;
        display: block;
        height: 50px;
        width: 50px;
        border-radius: 5px;
        background: red;
        text-align: center;
        margin-right: 5px;
        font: bold 20px/50px Arial;
    }
/*    存在id属性的元素*/
/*    属性选择器的格式
属性名=属性值 （可用匹配正则）
*/
    a[id]{
        background: yellow;
    }
    /*
    =号 精准匹配
    *= 模糊匹配
    ^= 以什么结尾
    $=以什么结尾
    */
    a[id=first]{
        background: blue;
    }
    a[class*="link"]{
        background: aliceblue;
    }

    a[href^="http"]{
        background: chartreuse;
    }
    a[href$="png"]{
        background: darkmagenta;
    }
</style>
<body>
<p class="demo">
    <a href="http://www.baidu.com" target="_blank" class="link item first" id="first">1</a>
    <a href="../images/weixin.png" class=" links item  active" target="_blank"  title=" test">2</a>
    <a href="" target="_blank"  id="second">3</a>
    <a href="" target="_blank" >4</a>
    <a href="" target="_blank" >5</a>
    <a href="" target="_blank" >6</a>
    <a href="" target="_blank" >7</a>
    <a href="" target="_blank" >8</a>
    <a href="" target="_blank" >9</a>
    <a href="" target="_blank" >10</a>
</p>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m2eUe5tt-1614852687442)(C:\Users\Sjmao\AppData\Roaming\Typora\typora-user-images\1614755328388.png)]

6CSS美化网页元素

6.1为什么要美化网页

有效的传递网页信息
美化网页，吸引用户
凸显主题
提高用户体验例如

例如：span 标签，凸显文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>
    <style>
        #hello{
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎
<span id="hello">
    Hello World
</span>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hyYWGw6Z-1614852687453)(C:\Users\Sjmao\AppData\Roaming\Typora\typora-user-images\1614755842470.png)]

6.2 CSS字体样式

字体样式 font-family: 楷体（可多选针对中英文）
字体大小 font-size
字体粗细 font-weight
字体颜色 color
font: bold 20px/50px Arial;(粗细，大小/行高，字体样式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性使用</title>
    <style>
        .font_class{
            font-family: 楷体,serif;
            font-weight: bold;
            color: dodgerblue;
        }
        p{
            font-size: 30px;
        }
    </style>
</head>
<body>

<h1> 诗句</h1>
<p class="font_class"> 力拔山兮气盖世，时不利兮骓不逝，骓不逝兮可奈何，虞姬虞姬奈若何</p>
<p > 夜来幽梦忽还乡，小轩窗，正梳妆，相顾无言，唯有泪千行</p>
</body>
</html>

6.3CSS文本样式

颜色 color
文本对齐方式 text-align
首行缩进text-indent
行高 line-height
装饰 text-decoration
图片文字居中 vertical-align: middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性使用</title>
    <style>
        .font_class{
            font-family: 楷体,serif;
            font-weight: bold;
            color: dodgerblue;
            text-align: center;

        }
        /*
        颜色color
        居中text-align
        缩进text-indent
        行高：line-height
        上划线： text-decoration: overline;
        中划线： text-decoration: line-through;
        下划线： text-decoration: underline;
        */
        h1{
            color: #FF0000;
            text-align: center;
        }
        /*属性选择器*/
        p[id=p1]{
            font-size: 30px;
            text-indent: 2em;
            line-height:50px;
            text-decoration: overline;

        }
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>

<h1> 诗句</h1>
<p class="font_class"> 力拔山兮气盖世，时不利兮骓不逝，骓不逝兮可奈何，虞姬虞姬奈若何</p>
<p id="p1"> 夜来幽梦忽还乡，小轩窗，正梳妆，相顾无言，唯有泪千行，男而且说三分话，留下七分打天下，无人与我里黄昏，无人问我粥可温，大雪纷飞何所似，恰若柳絮因风起</p>
<p>
    <img src="../images/weixin.png" alt="image">       　
    <span>　3. 天不老，情难绝。心似双丝网，中有千千结。</span>

</p>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JTFh4Mbr-1614852687456)(C:\Users\Sjmao\AppData\Roaming\Typora\typora-user-images\1614759003229.png)]

6.4 CSS 文本阴影和超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接伪类</title>
    <style>
   /*默认取消下划线*/
        a{
            text-decoration: none;
        }
   /*鼠标悬浮效果*/
        a:hover{
            color: chartreuse;
        }
   /*点击超链接效果*/
        a:active{
            color: yellow;
        }
   /*未访问的效果*/
        a:link{
            color: coral;
        }
   /*已访问的效果*/
        a:visited{
            color: black;
        }
        /* text-shadow :阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #p1{
            text-shadow: #FF0000 10px 10px 10px;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="../images/weixin.png" alt="image">
</a>
<p>
    <a href="#"> 作者 ：果子1
    </a>
</p>
<p id="p1"> 联系方式：13888888888</p>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iKqNcuFU-1614852687460)(C:\Users\Sjmao\AppData\Roaming\Typora\typora-user-images\1614759932953.png)]

6.5CSS 列表样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <style>
       .cate_menu_lk{
           text-decoration: none;
           color: black;
       }
        .cate_menu_item{

        }
        h1{
            text-indent: 3em;
        }
        /* 后代选择器*
        没有圆点 list-style: none;
        空心圆点 list-style: circle;
        数字 list-style: decimal;
        正方形 list-style: square;
        /
         */
        ul li{
            line-height: 50px;
            list-style: none;
        }
    </style>
</head>
<body>
<h1> 商品</h1>
<ul class="JS_navCtn cate_menu">

    <li class="cate_menu_item" data-index="2" clstag="h|keycount|head|category_02a">
        <a target="_blank" class="cate_menu_lk" href="//shouji.jd.com/">手机</a>
        <span class="cate_menu_line">/</span>
        <a target="_blank" class="cate_menu_lk" href="//wt.jd.com">运营商</a>
        <span class="cate_menu_line">/</span>
        <a target="_blank" class="cate_menu_lk" href="//shuma.jd.com/">数码</a>
    </li>
    <li class="cate_menu_item" data-index="3" clstag="h|keycount|head|category_03a">
        <a target="_blank" class="cate_menu_lk" href="//diannao.jd.com/">电脑</a>
        <span class="cate_menu_line">/</span>
        <a target="_blank" class="cate_menu_lk" href="//bg.jd.com">办公</a>
    </li>
    <li class="cate_menu_item" data-index="4" clstag="h|keycount|head|category_04a">
        <a target="_blank" class="cate_menu_lk" href="//channel.jd.com/home.html">家居</a>
        <span class="cate_menu_line">/</span>
        <a target="_blank" class="cate_menu_lk" href="//channel.jd.com/furniture.html">家具</a>
        <span class="cate_menu_line">/</span>
        <a target="_blank" class="cate_menu_lk" href="//jzjc.jd.com/">家装</a>
        <span class="cate_menu_line">/</span>
        <a target="_blank" class="cate_menu_lk" href="//channel.jd.com/kitchenware.html">厨具</a>
    </li>
    <li class="cate_menu_item" data-index="5" clstag="h|keycount|head|category_05a">
        <a target="_blank" class="cate_menu_lk" href="//channel.jd.com/1315-1342.html">男装</a>
        <span class="cate_menu_line">/</span>
        <a target="_blank" class="cate_menu_lk" href="//phat.jd.com/10-507.html">女装</a>
        <span class="cate_menu_line">/</span>
        <a target="_blank" class="cate_menu_lk" href="//phat.jd.com/10-156.html">童装</a>
        <span class="cate_menu_line">/</span>
        <a target="_blank" class="cate_menu_lk" href="//channel.jd.com/1315-1345.html">内衣</a>
    </li>
    <li class="cate_menu_item" data-index="6" clstag="h|keycount|head|category_06a">
        <a target="_blank" class="cate_menu_lk" href="//beauty.jd.com/">美妆</a>
        <span class="cate_menu_line">/</span>
        <a target="_blank" class="cate_menu_lk" href="//channel.jd.com/beauty.html">个护清洁</a>
        <span class="cate_menu_line">/</span>
        <a target="_blank" class="cate_menu_lk" href="//channel.jd.com/pet.html">宠物</a>
    </li>



</ul>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I5u8EF5p-1614852687463)(C:\Users\Sjmao\AppData\Roaming\Typora\typora-user-images\1614762031474.png)]

6.6CSS背景图片应用及渐变

background :red url(“path”) 270px 10px no-repeat; 背景颜色，图片，图片位置，平铺样式

渐变样式使用网站

div：区块标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片应用及渐变</title>
    <style>
        div{
            float: left;
            border: 2px solid red;
            width: 300px;
            height: 300px;
            margin-top: 10px;
            background-image: url("../images/weixin.png");
        }
        /*
           不平铺 background-repeat: no-repeat;
           水平平铺  background-repeat: repeat-x;
           垂直平铺background-repeat: repeat-y;
           平铺  background-repeat: repeat;
        */
        .div1{
            background-repeat: no-repeat;
            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片应用及渐变</title>
    <style>
        div{
            float: left;
            border: 2px solid red;
            width: 300px;
            height: 300px;
            margin-top: 10px;
            background-image: url("../images/weixin.png");
        }
        /*
           不平铺 background-repeat: no-repeat;
           水平平铺  background-repeat: repeat-x;
           垂直平铺background-repeat: repeat-y;
           平铺  background-repeat: repeat;
        */
        .div1{
            background-repeat: no-repeat;
            background-color: #4158D0;
            background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

        }
    </style>
</head>
<body>
<div class="div1"></div>
<div ></div>
<div ></div>

</body>
</html>
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div ></div>
<div ></div>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3MRHX5GA-1614852687467)(C:\Users\Sjmao\AppData\Roaming\Typora\typora-user-images\1614763601237.png)]

7 盒子模型

7.1边框，内边距，外边距

margin 外边距 0,0,0,0 顺时针上右下左
padding 内边距 0,0,0,0 顺时针上右下左
border 边框
- 边框粗细
- 样式
- 杨色

盒子元素的计算方式：你的元素到底有多大 margin+padding+border +内容宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        #app{
            width: 300px;
            height: 300px;
            border: 2px solid red;
            padding: 5px;
        }
        h2{
            text-align: center;
        }
        /* 使用margin 居中 
        上下为0 左右对齐
        */
        div{
            align-items:  center;
            margin: 0 auto;
        }
        body{
            text-align: center;
        }


    </style>
</head>
<body>
123
<div id="app">
    <h2>登录</h2>
    <form method="get" action="结构伪类选择器.html">
        <div>
            <span>用户名</span>
            <input type="text" >

        </div>
        <div>
            <span>密码 &nbsp&nbsp</span>
            <input type="password" >

        </div>
    </form>

</div>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hmbb5JPX-1614852687470)(C:\Users\Sjmao\AppData\Roaming\Typora\typora-user-images\1614764949870.png)]

7.2圆角边框及阴影

border-radius :顺时针，相对圆角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框及阴影</title>
    <style>
        div{
            width: 25px;
            height: 25px;
            background: red;
            /*border: 10px solid #FF0000 ;*/
            border-radius: 50px 0 0 0;
            box-shadow: #4158D0 10px 10px 10px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Wtl76ve-1614852687472)(C:\Users\Sjmao\AppData\Roaming\Typora\typora-user-images\1614766334165.png)]

8 display 和float 浮动

display和浮动都可以用来排版，一般使用float浮动

display: inline-block; 即使行内元素也是块元素
display: block; 变成块元素
display: inline;变成内联元素
float 浮动CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。float:left/right元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        /*  display: inline-block; 即使行内元素也是块元素
           display: block; 变成块元素
          display: inline;变成内联元素
        */
        div {
            width: 300px;
            height: 100px;
            border: 2px solid red;
            display: inline;
        }

        span {
            width: 300px;
            height: 100px;
            border: 2px solid red;
            display: block;
        }
    </style>
</head>
<body>
<div> div 块元素</div>
<span>span 行内元素</span>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动float</title>
    <style>
        .div01{
            float: left;
        }
        .div02{
            float: left;
        }
        .div03{
            float: right;
        }
    </style>
</head>
<body>
<div>
    <div class="div01">
        <img src="../images/weixin.png" alt="png">
    </div>
    <div class="div02">
        <img src="../images/weixin.png" alt="png">
    </div>
    <div class="div03">
        <img src="../images/weixin.png" alt="png">
    </div>

    <span>疏影横斜水清浅，暗香浮动月黄昏。</span>
    <span>小荷才露尖尖角，早有蜻蜓立上头。</span>
    <span>门前大桥下，来了一群鸭。</span>
    <span>早晨8点40出门 ，距离上班迟到还有20分钟 ，天气微凉有雨,我急忙的寻到单车 一路飞奔，脑子一片空白，看不清马路崖边的美女</span>
</div>

</body>
</html>

8.1解决边框塌陷问题

增加父级元素宽高

增加一个空的div 添加clear both

.clear{
clear:both;
margin:0;
padding:0;
}

在父级元素种添加overflow，解决意出问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overFloat</title>
  <style>
      #content{

          border: #FF0000 solid 2px;
      }
      .div1{
          float: left;
      }
      .div2{
          float: left;
      }
      .div3{
          float: left;
      }
      .div04{
          float: left
      }

      #content:after{
          content: "";
          clear: both;
          display: block;
      }
      /*.clear{*/
      /*    clear: both;*/
      /*    margin: 0;*/
      /*    padding: 0;*/
      /*}*/

  </style>
</head>
<body>
<div id="content">
    <div class="div1">     <img class=" img1" src="../images/weixin.png" alt="png"></div>
   <div class="div2">      <img class=" img1" src="../images/weixin.png" alt="png"></div>
   <div class="div3">      <img class=" img1" src="../images/weixin.png" alt="png"></div>
    <div class="div04">
        疏影横斜水清浅，暗香浮动月黄昏。
        小荷才露尖尖角，早有蜻蜓立上头。
        门前大桥下，来了一群鸭。
        早晨8点40出门 ，距离上班迟到还有20分钟 ，天气微凉有雨。我急忙的寻到单车 一路飞奔，脑子一片空白，看不清马路崖边的美女
    </div>
    <div class="clear"></div>
</div>
</body>
</html>

父级添加一个伪类：after

father:after{
content:"";
dispaly:block;
clear:both;
}

小结： float 需要解决父级边框塌陷问题

浮动元素后面添加空的div
设置父级元素高度
overflow
父级添加一个伪类：after

9定位

9.1 相对定位

postion:relative 相对于自己来重新布局位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        div{

            padding: 5px;
            font-size: 20px;
            line-height: 50px;
            margin: 10px;
        }
        .father{
            border: #FF0000 solid 2px;

        }
        #div1{
            border: blue solid 2px;
            background: #FFCC70;
        }
        #div2{
            border: green solid 2px;
            background:#4158D0;
            position: relative;
            top:30px;
        }
        #div3{
            border: yellow solid 2px;
            background: #C850C0;
        }
    </style>
</head>
<body>
<div class="father">
    <div id="div1">第一个盒子</div>
    <div id="div2">第二个盒子</div>
    <div id="div3">第三个盒子</div>

</div>

</body>
</html>

9.2 绝对定位

父类元素没有定位时绝对定位以浏览器边框为基础定位
父类元素有定位时绝对定位以父类元素边框为基础定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        div{

            padding: 5px;
            font-size: 20px;
            line-height: 50px;
            margin: 10px;
        }
        .father{
            border: #FF0000 solid 2px;
            position: relative;

        }
        #div1{
            border: blue solid 2px;
            background: #FFCC70;
        }
        #div2{
            border: green solid 2px;
            background:#4158D0;
            position: absolute;
            top:0;
        }
        #div3{
            border: yellow solid 2px;
            background: #C850C0;
        }
    </style>
</head>
<body>
<div class="father">
    <div id="div1">第一个盒子</div>
    <div id="div2">第二个盒子</div>
    <div id="div3">第三个盒子</div>

</div>

</body>
</html>

9.3 固定定位

固定定位是

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        body{
            height: 1000px;
        }
        /*绝对定位：相对于浏览器 */
        div:nth-of-type(1){
            width: 50px;
            height: 50px;
            background: #4158D0;
            position: fixed;
            right: 0;
            top: 500px;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: #ff9950;
            position: absolute;
            right: 0;
            top: 700px;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

9.4z-index

图层~ z-index 从0开始
opacity 设置透明度也可以解决层级问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <link rel="stylesheet" href="../css/z-index.css">
    <style>
        div{
            padding: 0;
            margin: 0;
            overflow: hidden;
            line-height: 50px;
            border: 1px red solid;
            width: 412px;

        }
        ul, li{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        div ul{
            position: relative;
        }
        .li1{
            position: absolute;
            width: 412px;
            background: aliceblue;
            top:206px;
            line-height: 25px;
            color: rebeccapurple;
            /*z-index: 2;*/
        }
        .li2{
            position: absolute;
            width: 412px;
            background: black;
            top:206px;
            line-height: 25px;
            color: wheat;
            /*opacity: 0.5;*/
        }
    </style>
</head>

<body>
<div>
    <ul>
        <li>
            <img src="https://i0.hdslb.com/bfs/sycp/creative_img/202101/a7c77664e25efff752e5dbbb4731f660.jpg@412w_232h_1c" alt="image">
        </li>
        <li class="li1"> hello world</li>
        <li class="li2">1</li>
        <li>时间 2020000</li>
        <li>地点 月球</li>
    </ul>
</div>
</body>
</html>