CSS

文章目录

1. CSS概述

1.1 什么是CSS
1.2 发展史
1.3 快速入门
1.4 CSS三种导入方式

2 选择器

2.1 基本选择器（！！！）
2.2 层次选择器
2.3 结构伪类选择器
2.4 属性选择器（！！！）

3 美化网页元素

3.1 为什么要美化网页
3.2 字体样式
3.3 文本样式
3.4 超链接伪类与阴影
3.5 列表
3.6 背景

4 盒子模型

4.1 什么是盒子模型
4.2 边框
4.3 内外边距
4.4 圆角边框与阴影

5 浮动

5.1 标准文档流
5.2 display
5.3 float
5.4 父级边框塌陷问题
5.5 对比

6 定位

6.1 相对定位
6.2 绝对定位
6.3 固定定位
6.4 z-index

7 CSS总结
写在最后

1. CSS概述

如何学习：

CSS是什么
CSS怎么用（快速入门）
CSS选择器（重点+难点）
美化网页（文字、阴影、超链接、列表、渐变）
盒子模型
浮动
定位

1.1 什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

字体、颜色、编剧、高度、宽度、背景图片、网页定位、浮动

1.2 发展史

CSS1.0

CSS2.0 DIV（块）+CSS， HTML与CSS结构分离的思想，网页变得简单。

CSS2.1 浮动，定位

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

1.3 快速入门

style.css 文件：

/*语法：
  选择器 {
      声明1;
      声明2;
      声明3;
}
 */
h1{
    color: red;
}

Index.html 文件：

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

    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<h1>标题</h1>

</body>
</html>

图解：

在这里插入图片描述
CSS优势：

内容和表现分离
网页结构表现统一，可以实现复用
样式十分丰富
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录！

1.4 CSS三种导入方式

style.css 文件：

/*外部样式*/
h1{
    color: blue;
}

index.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>

    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<!--优先级：就近原则-->

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:red;">我是标题</h1>

</body>
</html>

注意三种导入方式的优先级：就近原则！

2 选择器

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

2.1 基本选择器（！！！）

标签选择器：选择一类标签

代码

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

    <style>
        /*便签选择器：会选择页面上所有的这个标签*/
        h1{
            color: red;
            background: antiquewhite;
            border-radius: 24px;
        }
        p{
            font-size: 50px;
        }
    </style>

</head>
<body>

<h1>Demut</h1>
<h1>Demut</h1>

<p>Jever</p>

</body>
</html>

结果：

在这里插入图片描述

类选择器 class：选择所有class属性一致的标签，跨标签

使用方式：.类名称{}

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式： .class的名称{}
        好处： 可以多个标签归类，是同一个class，可以复用

        */
        .demut{
            color: forestgreen;
        }
        .jever{
            color: blueviolet;
        }
    </style>

</head>
<body>

<h1 class="demut">Demut</h1>
<h1 class="jever">Demut</h1>
<h1 class="demut">Demut</h1>


<p class="demut">Jever</p>

</body>
</html>

结果：

在这里插入图片描述

id 选择器：全局唯一，不可重复使用！

使用方式：#id名称{}

代码：

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

    <!--优先级： id > 类 > 标签-->
    <style>
        /*id选择器: id必须保证全局唯一
            #id名称{}
         */
        #demut{
            color:darkviolet;
        }

        .style1{
            color: forestgreen;
        }

        h1{
            color: red;
        }
    </style>

</head>
<body>

<h1>标题1</h1>
<h1 class="style1">标题2</h1>
<h1>标题3</h1>
<h1 class="style1" id="demut">标题4</h1>

</body>
</html>

结果：

在这里插入图片描述

优先级： id > class > 标签

2.2 层次选择器

本案例中测试代码如下：（选择器均已注释！）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器*/
        /*body p{ !*body后面的p标签均会变色！*!*/
        /*    background: yellow;*/
        /*}*/

        /*子选择器*/
        /*body>p{*/
        /*    background: forestgreen;*/
        /*}*/

        /*相邻兄弟选择器*/ /*选择相邻同辈且是下一个同辈*/
        /*.active+p{*/
        /*    background: blue;*/
        /*}*/

        /*通用选择器*/ /*当前选中元素的向下所有兄弟*/
        /*.active~p{*/
        /*    background: blueviolet;*/
        /*}*/
    </style>
</head>

<body>
    <p>p1</p>
    <p class="active">p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
    <p>p4</p>

</body>
</html>

原网页展示：

在这里插入图片描述

后代选择器：在某个元素的后面 grandparent parent son

body p{ /*body后面的所有p标签均会变色！*/
  	background: yellow;
}

结果：

在这里插入图片描述

子选择器： parent son

body>p{ /*body后面的下一代p标签变色*/
    background: forestgreen;
}

在这里插入图片描述

相邻兄弟选择器

.active+p{/*选择相邻同辈且是下一个同辈*/
    background: blue;
}

在这里插入图片描述

通用选择器

.active~p{ /*当前选中元素的向下所有兄弟*/
		background: blueviolet;
}

在这里插入图片描述

2.3 结构伪类选择器

伪类：添加了条件（带冒号）

结构伪类选择：条件与结构相关！

案例展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: cadetblue;
        }

        /*ul的最后一个元素*/
        ul li:last-child{
            background: red;
        }

        /*选中p1 ： 定位到父元素，选择当前的第一个元素
        选择当前p元素的父级元素，选中父级元素的第一个子元素，并且是当前元素猜生效！
        */
        p:nth-child(1){
            background: yellow;
        }

        /*选中父元素，下的p元素的第二个，类型*/
        p:nth-of-type(2){
            background: forestgreen;
        }
    </style>
</head>

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

</body>
</html>

在这里插入图片描述

2.4 属性选择器（！！！）

重点掌握：

a[]{} 属性选择器语句格式，a可替换为其他元素名称
=绝对相等
*=包含匹配
^=开头匹配
$=结尾匹配

测试代码：

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

    <style>
        .demo a{
            float:left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: yellow;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        
        /*!*选中存在id的元素 a[]{} *!*/
        /*a[id=first]{*/
        /*    background: red;*/
        /*}*/
        
        /*!*选中class中有links的元素*!*/
        /*a[class*="links"]{*/
        /*    background: aqua;*/
        /*}*/
        
        /*!*选中href中以http开头的元素*!*/
        /*a[href^=http]{*/
        /*    background: blueviolet;*/
        /*}*/
        
        /*!*选中以png结尾的元素*!*/
        /*a[href$=png]{*/
        /*    background: black;*/
        /*}*/

    </style>

</head>

<body>

<p class="demo">
    <a href="http://www.bing.com" class="links item first" id="first">1</a>
    <a href="http://www.bing.com" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item first">3</a>
    <a href="images/123.png" class="links item first">4</a>
    <a href="abc" class="links item first">5</a>
    <a href="http://www.bing.com" class="links item first">6</a>
    <a href="http://www.bing.com" class="links item first">7</a>
    <a href="http://www.bing.com" class="links item first">8</a>
    <a href="http://www.bing.com" class="links item first">9</a>
    <a href="http://www.bing.com" class="links item last">10</a>
</p>

</body>
</html>

原网页效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ke7xTlWf-1584945060143)(/Users/demut/Library/Application Support/typora-user-images/image-20200323110351243.png)]

属性选择器说明如下：

选中存在id的元素

a[id=first]{
		background: red;
}

运行结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GI7vNlLR-1584945060144)(/Users/demut/Library/Application Support/typora-user-images/image-20200323110542952.png)]

选中class中包含links的元素

a[class*="links"]{
		background: aqua;
}

在这里插入图片描述

选中href中以http开头的元素

a[href^=http]{
		background: blueviolet;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yaknGbMa-1584945060146)(/Users/demut/Library/Application Support/typora-user-images/image-20200323110803311.png)]

选中href中以png结尾的元素

a[href$=png]{
		background: black;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-opr2sLgo-1584945060146)(/Users/demut/Library/Application Support/typora-user-images/image-20200323110905967.png)]

3 美化网页元素

3.1 为什么要美化网页

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

span标签：重点要突出的字，使用span标签套起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>

<body>
欢迎学习 <span id="title1">Java</span>
</body>
</html>

3.2 字体样式

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style>
        body{
            font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
            color: #a13d30;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bolder;
        }
    </style>


</head>

<body>
<h1>数学分析</h1>
<p>
    数学分析的主要内容是微积分学，微积分学的理论基础是极限理论，极限理论的理论基础是实数理论。微积分学是微分学(Differential Calculus)和积分学(Integral Calculus)的统称，英语简称Calculus，意为计算，这是因为早期微积分主要用于天文、力学、几何中的计算问题。后来人们也将微积分学称为分析学（Analysis)，或称无穷小分析，专指运用无穷小或无穷大等极限过程分析处理计算问题的学问。
</p>

<p class="p1">
    I have searched a thousand years,
    　 And I have cried a thousand tears.
    　 I found everything I need,
    　 You are everything to me.
</p>
</body>
</html>

结果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LmQ8FXne-1584945060147)(/Users/demut/Library/Application Support/typora-user-images/image-20200323112750268.png)]

3.3 文本样式

颜色 color rgb rgba
文本对齐方式 text-align:center
首行缩进 text-indent:2em
行高 line-height: 单行文字上下居中！ line-height=height
装饰 text-decoration
文本图片水平对齐方式：vertical-align:middle

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
<!--
    颜色：
        RGB 红绿蓝 0~F
        RGBA A为透明度 0～1
    text-align： 左右排版
    text-indent: 段落首行缩进
    line-height: 行高
-->
    <style>
        h1{
            color: rgb(0,255,255,0.5);
            text-align: center;
        }
        .p1{
            text-indent: 2em; /*1em表示一个字*/
        }
        .p3{
            background: yellow;
        }
        .l1{
            text-decoration: underline; /*下划线*/
        }
        .l2{
            text-decoration: line-through; /*中划线*/
        }
        .l3{
            text-decoration: overline; /*上划线*/
        }
    </style>
</head>

<body>
<h1>数学分析</h1>
<p class="p1">
    数学分析的主要内容是微积分学，微积分学的理论基础是极限理论，极限理论的理论基础是实数理论。微积分学是微分学(Differential Calculus)和积分学(Integral Calculus)的统称，英语简称Calculus，意为计算，这是因为早期微积分主要用于天文、力学、几何中的计算问题。后来人们也将微积分学称为分析学（Analysis)，或称无穷小分析，专指运用无穷小或无穷大等极限过程分析处理计算问题的学问。
</p>

<p class="p3">
    I have searched a thousand years,
    　 And I have cried a thousand tears.
    　 I found everything I need,
    　 You are everything to me.
</p>

<p class="l1">123123123</p>
<p class="l2">123123123</p>
<p class="l3">123123123</p>

</body>
</html>

结果：

在这里插入图片描述

3.4 超链接伪类与阴影

正常情况：a{}

鼠标悬停：a:hover{}

鼠标按住未释放：a:active{}

鼠标点击后：a:visited{}

text-shadow：阴影颜色水平偏移垂直偏移阴影半径

代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接伪类</title>
    <style>
        /*默认颜色*/
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠标悬停颜色*/
        a:hover{
            color: orange;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: green;
        }
        /*点击后的颜色*/
        
        /*text-shadow： 阴影颜色 水平偏移 垂直偏移 阴影半径 */
        #price{
            text-shadow: lightblue 0px 0px 10px;
        }
    </style>

</head>

<body>
<a href="#">
    <img src="images/s25648004.jpg" alt="">
</a>
<p>
    <a href="#">算法导论（原书第3版)</a>
</p>
<p>
    <a href="">作者： Thomas H.Cormen / Charles E.Leiserson / Ronald L.Rivest / Clifford Stein </a>
</p>
<p id="price">
    ¥128.00
</p>
</body>
</html>

结果：

在这里插入图片描述

3.5 列表

重点在于去掉原点，并进行一些简单修饰。

代码展示：

css文件：

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
#nav{
    width: 40%;
}

/*ul li*/
/*
list-style:
none去掉圆点
circle空心圆
decimal数字
square正方形
*/
ul{
    background: #a0a0a0;
}
ul li{
    height: 30px;
    list-style: none; /*去掉圆点*/
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #000000;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="style.css">
</head>


<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
    </ul>
</div>

</body>
</html>

运行结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lxcmLvBU-1584945060149)(/Users/demut/Library/Application Support/typora-user-images/image-20200323134533097.png)]

3.6 背景

此处重点介绍背景图片的平铺以及渐变颜色的处理。

渐变颜色推荐网址：https://www.grabient.com/（可直接copy css代码，打开较慢，请耐心等待）

背景图片平铺：

代码展示:

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

    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("images/a.png");
            /*默认全部平铺*/
        }
        .div1{
            background-repeat: repeat-x; /*横向平铺*/
        }
        .div2{
            background-repeat: repeat-y; /*纵向平铺*/
        }
        .div3{
            background-repeat: no-repeat; /*不平铺*/
        }
        
    </style>

</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

横向平铺：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G3jK6Yzz-1584945060149)(/Users/demut/Library/Application Support/typora-user-images/image-20200323142524730.png)]

纵向平铺：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9tUvgPQH-1584945060150)(/Users/demut/Library/Application Support/typora-user-images/image-20200323142625795.png)]

无平铺：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8VMgnXxI-1584945060151)(/Users/demut/Library/Application Support/typora-user-images/image-20200323142659022.png)]

4 盒子模型

4.1 什么是盒子模型

在这里插入图片描述

margin: 外边距
padding: 内边距
border：边框

4.2 边框

border: 粗细，样式，颜色

边框的粗细
边框的样式
边框的颜色

案例集中在4.3中展示。

4.3 内外边距

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            /*body总有一个默认的外边距*/
            /*margin: 0;*/
        }
        #box{
            /*border: 粗细，样式，颜色*/
            width: 300px;
            border: 1px solid red;

            /*外边距可以令其居中*/
            margin: 0 auto;
            /*
            margin: 0; 全部
            margin: 0 1px; 上下 左右
            margin: 0 1px 2px 1px; 上右下左
            */
        }
        h2{
            font-size: 16px;
            background-color: rebeccapurple;
            color: gold;
            text-align: center;
            margin-top: 0;
        }
        form{
            background: cadetblue;
            padding: 5px;
        }
        div input{
            border: 1px dashed yellowgreen;
        }
    </style>

</head>

<body>

<div id="box">
    <h2>用户登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

结果：

在这里插入图片描述

盒子计算模型：

margin+border+padding+内容宽度

4.4 圆角边框与阴影

圆角边框：

border-top-left-radius: 40px 20px; x方向和y方向
border-top-right-radius: 右上角
border-bottom-left-radius: 左下角
border-bottom-right-radius: 右下角

也可统一使用border-radius来设置。

阴影：

box-shadow:水平偏移量x 垂直偏移量y 模糊范围颜色

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框和阴影</title>
    <style>
        .box{
            background-color: brown;
            font-size: 20px;
            text-align: center;
            float: left;

            /*box-shadow:水平偏移量x 垂直偏移量y 模糊范围 颜色*/
            box-shadow: 10px 10px 30px #888;
        }
        .box1{
            height: 100px;
            width: 150px;
            border-top-left-radius: 35px 40px;
            border-bottom-right-radius: 20px;
            border: 1px solid royalblue;
        }
        .box2{
            height: 50px;
            width:150px;
            border-radius: 25px;
        }
        .box3{
            height: 100px;
            width: 100px;
            border-radius: 50px;
        }
    </style>
</head>

<body>
<div class="box1 box">box1</div>
<div class="box2 box">box2</div>
<div class="box3 box">box3</div>
</body>
</html>

结果展示：

在这里插入图片描述

5 浮动

5.1 标准文档流

块级元素：独占一行

h1-h6 p div 列表…

行内元素：不独占一行

span a img strong…

行内元素可以放在块级元素中，反之不可

5.2 display

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* display:
        block 块元素
        inline 行内元素
        inline-block 是块元素，但是可以内联 --> 在一行
        */
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>

<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

结果：

在这里插入图片描述

5.3 float

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        .float_right{
            float: right;
        }
        .float_left{
            float: left;
        }
    </style>

</head>

<body>
<div style="color: grey;">
    <img src="images/Werstrass.jpeg" class="float_right" width="80" height="110">
    <p style="text-indent: 2em">
        早期的微积分，已经被数学家和天文学家用来解决了大量的实际问题，但是由于无法对无穷小概念作出令人信服的解释，在很长的一段时间内得不到发展，有很多数学家对这个理论持怀疑态度，柯西（Cauchy）和后来的魏尔斯特拉斯（weierstrass）完善了作为理论基础的极限理论，摆脱了“要多小有多小”、“无限趋向”等对模糊性的极限描述，使用精密的数学语言来描述极限的定义，使微积分逐渐演变为逻辑严密的数学基础学科，被称为“Mathematical Analysis”，中文译作“数学分析”。
    </p>
</div>

</body>
</html>

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xLtLBGa7-1585065166258)(/Users/demut/Library/Application Support/typora-user-images/image-20200324233244151.png)]

5.4 父级边框塌陷问题

问题描述：元素未全在父级边框内，如图，布局很丑！

在这里插入图片描述

测试源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Overflow</title>
    <style>
        .border{
            border: 3px solid #4CAF50;
            padding: 5px;
        }
        .float_right{
            float: right;
        }
    </style>
</head>

<body>
<div class="border">
    <img src="images/Werstrass.jpeg" class="float_right" width="120" height="170">
    <p>
        勤学如春起之苗，不见其增，日有所长；<br/>
        辍学如磨刀之石，不见其损，日有所亏.
    </p>
</div>
  
</body>
</html>

解决方案：

增加父级元素的高度 (Too low，不推荐)

在元素后增加一个空的div，清除浮动。

<style>
	.clear{
			clear: both;
			margin: 0;
			padding: 0;
	}
</style>

...
<div class="clear"></div>

运行结果：

在这里插入图片描述

overflow方法。

在父元素上通过添加clearfix类，并设置overflow:auto;来解决问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Overflow</title>
    <style>
        .border{
            border: 3px solid #4CAF50;
            padding: 5px;
        }
        .float_right{
            float: right;
        }
        .clearfix{
            overflow: auto;
        }
    </style>
</head>

<body>
<div class="border">
    <img src="images/Werstrass.jpeg" class="float_right" width="120" height="170">
    <p>
        勤学如春起之苗，不见其增，日有所长；<br/>
        辍学如磨刀之石，不见其损，日有所亏.
    </p>
</div>

<p style="clear: right; color: red">
    在父元素上通过添加clearfix类，并设置overflow:auto;来解决问题。
</p>

<div class="border and clearfix">
    <img src="images/Werstrass.jpeg" class="float_right" width="120" height="170">
    <p>
        勤学如春起之苗，不见其增，日有所长；<br/>
        辍学如磨刀之石，不见其损，日有所亏.
    </p>
</div>

</body>
</html>

运行结果：

在这里插入图片描述

父类添加一个伪类：after

.border:after{
		content: '';
		display: block;
		clear: both;
}

运行结果：

在这里插入图片描述

小结：

浮动元素后面增加空div

简单，代码中尽量避免空div
设置父元素的高度

简单，元素假设有一个固定的高度，就会被限制
overflow

下拉的场景中，避免使用
父类添加一个伪类:after（推荐）

写法稍微复杂一定，但是没有副作用！

5.5 对比

display

方向不可以控制
float

浮动起来的话会脱离标准文档流，所以要处理父级边框塌陷问题

6 定位

本章测试源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666666;
        }
        #first{
            background-color: gold;
            border: 1px dashed #a13d30;
        }
        #second{
            background-color: aqua;
            border: 1px dashed rebeccapurple;
        }
        #third{
            background-color: crimson;
            border: 1px dashed chartreuse;
        }
    </style>
</head>
  
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

运行结果：

在这里插入图片描述

6.1 相对定位

局部更改测试源码。

#first{
    background-color: gold;
    border: 1px dashed #a13d30;
    position: relative;
    top: -20px; /*距离上部偏离-20*/
    left: 20px; /*距离左侧偏离20*/
}
#third{
    background-color: crimson;
    border: 1px dashed chartreuse;
    position: relative;
    bottom: 10px; /*距离下部偏离10px*/
    right: 20px; /*相对右侧偏离20px*/
}

测试结果:

在这里插入图片描述

相对定位： position:relative;

相对于原来的位置，进行指定的偏移，相对定位之后，仍然在标准文档流中。

相对定位的一个练习：

练习源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: magenta;
            text-decoration: none;
            display: block;
        }
        a:hover{
            background-color: lightblue;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>
<div id="box">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>

</body>
</html>

练习结果：

在这里插入图片描述

6.2 绝对定位

没有父级元素定位的情况下，相对于浏览器定位。
假设父级元素存在定位，通常相对于父级元素进行偏移。
在父级元素范围内移动。

相对于浏览器或父级的位置，进行指定的偏移，绝对定位之后，仍然在标准文档流中。

局部更改测试代码：

#second{
    background-color: aqua;
    border: 1px dashed rebeccapurple;
    position: absolute;
    right: 30px;
}

测试结果：

在这里插入图片描述

6.3 固定定位

positon:fixed;

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute; /*绝对定位*/
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background-color: yellowgreen;
            position: fixed; /*固定定位*/
            right: 0;
            bottom: 0;
        }
    </style>
</head>

<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

测试结果：(上下滚动，红块上下移动，绿块始终在固定位置)

在这里插入图片描述

6.4 z-index

图层: z-index: 默认为0，最高～999

测试代码:

style.css文件：

#content{
    width: 145px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
    text-align: center;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 145px;
    height: 25px;
    top: 200px;
}
.tipText{
    color: white;
    z-index: 999;
}
.tipBg{
    background: #000;
    opacity: 0.3;
}

index.html文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="content">
    <ul>
        <li><img src="images/Cauchy.png" alt=""></li>
        <li class="tipText">柯西！</li>
        <li class="tipBg"></li>
        <li>时间：2099-01-01</li>
    </ul>
</div>

</body>
</html>

测试结果：

在这里插入图片描述

7 CSS总结

在这里插入图片描述

写在最后

地球上有77亿人，204个国家，809个岛屿。两个人遇见概率是2920万之ー，幸运如我，在最好的时光，刚好遇见了你!
To Demut and Dottie!

Targetu

发布了32 篇原创文章 · 获赞 39 · 访问量 1729

私信关注

JD一文带你入门CSS！

CSS

文章目录

1. CSS概述

1.1 什么是CSS

1.2 发展史

1.3 快速入门

1.4 CSS三种导入方式

2 选择器

2.1 基本选择器（！！！）

2.2 层次选择器

2.3 结构伪类选择器

2.4 属性选择器（！！！）

3 美化网页元素

3.1 为什么要美化网页

3.2 字体样式

3.3 文本样式

3.4 超链接伪类与阴影

3.5 列表

3.6 背景

4 盒子模型

4.1 什么是盒子模型

4.2 边框

4.3 内外边距

4.4 圆角边框与阴影

5 浮动

5.1 标准文档流

5.2 display

5.3 float

5.4 父级边框塌陷问题

5.5 对比

6 定位

6.1 相对定位

6.2 绝对定位

6.3 固定定位

6.4 z-index

7 CSS总结

写在最后

猜你喜欢