【狂神说】CSS

最新推荐文章于 2023-08-27 22:01:17 发布

南风未凉

最新推荐文章于 2023-08-27 22:01:17 发布

阅读量575

点赞数

CC 4.0 BY-SA版权

分类专栏：前端基础文章标签： css

本文链接：https://blog.youkuaiyun.com/Memory_share/article/details/115038200

前端基础专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了CSS，包括其发展历程、基本概念、选择器、美化网页元素的方法、盒子模型、浮动、定位以及动画等内容。重点讲解了CSS的选择器优先级、文本样式、背景、边框和阴影等，强调了内容与表现的分离、样式丰富性和SEO优势。

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

CSS

学习目标

在这里插入图片描述

1.什么是CSS
2.CSS应该怎么用 -
3.CSS选择器（重点难点）
4.美化网页（文字、阴影、超链接、列表、渐变…） -
5.盒子模型
6.浮位
-7.定位
8.网页动画（特殊效果）

1.初识CSS

1.1什么是CSS

层叠样式表：Cascading Style Sheets 是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)

等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS:表现

（美化网页）：字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…

在这里插入图片描述

1.2 CSS的发展史

CSS1.0 :19912月W3 了第一个有关样式的标准CSS1.0。这个版本中，已经包含了的相关font的相关属性、颜色与背景的相关属

性、文字的相关属性、box的相关属性等。

CSS2.0 DIV（块）+ CSS, HTML 和CSS结构分离，网页变得简单 SEO 1985年5月，CSS2.0正式推出。这个版本推荐的是内容和表

现效果分离的方式，并开始使用样式表结构。

CSS2.1 浮动、定位 2004年2月，CSS2.1正式推出。它在CSS2.0的基础上略微做了改动，删除了许多不被浏览器支持的属性。

CSS3.0 圆角、阴影、动画…

1.3 快速入门

创建文件格式

在这里插入图片描述

基础入门

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

    <!--规范  <style> 可以编写css代码，每一个声明最好用分号结尾
            语法：
                选择器{
                声明一；
                声明二；
                声明三；
                }
      -->
    <style>
        h1{
            color: brown;
        }
    </style>


</head>
<body>

<h1>这个是标题</h1>

</body>
</html>

一般不建议使用，html与css相分离

一般单独写一个css文件，在html中使用link标签引入

在这里插入图片描述

CSS的优势：

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

1.4、CSS的三种导入方式

内部样式
外部样式
行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
   
    <!--  内部样式  -->
    <style>
        h1{
            color: brown;
        }
    </style>
    
    <!--  外部样式  -->
    <link rel="stylesheet" href="css/style.css">
    
</head>
<body>
    
<!--三种样式优先级：就近原则-->
<!--行内样式： 在标签元素中，编写一个style属性，编写样式即可-->
    
<h1 style="color: cornflowerblue">这是一个标题</h1>
    
</body>
</html>

拓展：外部样式的两种写法

链接式：

link标签通过URL路径引入外部的CSS文件到HTML中，是一种HTML标签，属于书写HTML的语法，只能放在HTML源代码中使用。

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

导入式：

CSS 2.1中的@import；@import是在样式表定义中再引入外部的CSS文件，相当于一种样式，属于书写CSS的语法。

<style>
    @import "css/style.css";
</style>

区别：

两者都是外部引用CSS的方式，但是存在一定的区别。

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面完全载入后才加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1中提出的，低版本的浏览器不支持。

区别4：link支持使用JavaScript控制DOM去改变样式；@import不支持这样的操作（JavaScript可以获取link标签元素，但获取不到

@import，因为@import只是一种CSS语法）。

本质上，两者使用选择区别不大，但为了软件中编辑布局网页HTML代码，一般使用link较多，也推荐使用link。

2.选择器

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

2.1、基本选择器

1.标签选择器：标签选择器会选择到页面上的的这个标签的元素; 选择一类标签

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

    <style>
        /* 标签选择器会选择到页面上的的这个标签的元素  */
        h1  {
           color: cornflowerblue;
            background: aqua;
            border-radius: 20px;
        }p{
            font-size: 30px;
                 }
    </style>
</head>
<body>

<h1>CSS</h1>

<p>基本选择器</p>

</body>
</html>

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

类选择器的格式：.class的名称
好处：可以多个标签归类，是同一个class 可以复用

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

    <style>
        /* 类选择器的格式：.class的名称
            好处：可以多个标签归类，是同一个class 可以复用
        */
        .孙悟空{
            color: gold;
        }
        .齐天大圣{
            color: #1c2862;
        }
    </style>

</head>
<body>

<h1 class="孙悟空">标题一</h1>
<h1 class="齐天大圣">标题二</h1>
<h1 class="孙悟空">标题三</h1>

<p class="孙悟空">p标签</p>

</body>
</html>

3.id选择器：

id选择器：id必须保证全局唯一
语法： # id名称{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*  id选择器 ：id必须保证全局唯一
          语法：  # id名称{}

            三种选择器优先级：
            不遵循就近原则 ，是固定的
            id选择器>类选择器>标签选择器
        */
        #wudi{
            color: #958825;
        }
        .nan{
            color: aqua;
        }
        h1{
            color: blueviolet;
        }
    </style>

</head>
<body>

<h1 id="wudi">标题一</h1>
<h1 class="nan">标题二</h1>
<h1>标题三</h1>

</body>
</html>

三种选择器优先级：

不遵循就近原则，是固定的

id选择器>类选择器>标签选择器

2.2、层次选择器

后代选择器：在某个元素的后面祖爷爷—>爷爷----->爸爸----->儿子

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

    <style>
       /*后代选择器*/
        body p{
           background: aquamarine;
       } 
       

    </style>

</head>
<body>


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

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

子选择器 ：一代儿子

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

相邻兄弟选择器（弟弟选择器）同辈向下最近的一个

/*弟弟选择器：只能选择一个，相邻（向下的）*/
    .active +p{
  background: blueviolet;
 }

通用选择器：当前选中元素的向下的所有兄弟元素

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

2.3、伪类结构选择器

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

    <style>
        /*选择ul中的第一个子元素*/
        ul li:first-child{
            background: red;
        }
        /*选择ul中的最后一个子元素*/
        ul li:last-child{
            background: blue;
        }

        /* 选中p1 ：定位到父元素，选择当前的第一个元素
            选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效，顺序
            如 选择body元素1是h1.不是p元素，不显示。
        */
        p:nth-child(1){
            background: yellow;
        }

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

</head>
<body>
<!--<h1>h1</h1>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
   <li>li1</li>
   <li>li2</li>
   <li>li3</li>

</ul>


</body>
</html>

在这里插入图片描述

hover：鼠标移上去变

2.4 、属性选择器（常用）

属性名 . 属性名  =  属性值（正则）
=  绝对等于
*=  包含这个元素
^=  以这个开头
$=  以这个结尾

<!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: 20px;
            background: blue;
            text-align: center;  /*对齐方式*/
            color : #dfdedb;
            text-decoration: none; /*去下划线*/
            margin-right: 5px;
            font:bold 20px/50px Arial;

        }

        /* 属性名 . 属性名  =  属性值（正则）
        =  绝对等于
        *=  包含这个元素
        ^=  以这个开头
        $=  以这个结尾
        */
        /*存在id属性的元素        a[] {}       */
        /*a[id]{
            background: yellow;
        }*/

        /* id=first的元素*/
        /*a[id=first]{
            background: yellow;
        }*/

        /*class中有links的元素 */
        /*a[class*=links]{
            background: yellow;
        }*/

        /*选中href中以http开头的元素*/
        /*a[href^=http]{
            background: yellow;
        }*/

        /*选中herf中以以pdf结尾的元素*/
        a[href$=pdf]{
            background: yellow;
        }



    </style>



</head>
<body>
<p class="demo">

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

</p>

</body>
</html>

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</title>

    <style>
        /*
        font-family :字体
         font-size ：字体大小
         font-weight ：字体粗细
         color:  字体颜色
        */
        body {
            font-family: "Arial Black" , 楷体;
        }

        h1 {
            font-size: 50px;
            color: #25d4d4;
        }
        .title1{
            font-weight: bolder;
        }


    </style>

</head>
<body>
<h1>剧情简介</h1>

<p class="title1">曾经，一个身穿火红色衣服的男人向全宇宙宣称，黑洞的深处有一片被称之为彩虹海的奇迹之地，
    在那里宝石遍地，黄金在河里流淌，天空中横跨着上万种颜色的巨大彩虹，到达那里的人，
    可以实现自己的任何愿望。这一宣言点燃了全宇宙的热情，吸引着来自四面八方的人们，
    追随红衣男人飞向黑洞，最终却没有一个人能够回来，与冒险者一起消失的红衣男人麦林，
    被后人厌恶的称之为“红魔鬼”，彩虹海也被认为是有史以来最大的谎言。</p>

<p>若干年后，麦林的儿子——麦当在地球上成长为了一个少年，为了完成与父亲拉钩定下的约定，
    决心再次出发寻找那个被视为谎言的彩虹海。</p>

<p>为了到达彩虹海，麦当结识了已经毁灭的亚亚罗星球国王咕咚·萌西和太阳系最后一个星学家笛亚，
    为了进入可以到达存在彩虹海的巨型黑洞所在地哥罗星系，一起踏上了进入自然虫洞“魔鬼脚印”的旅途。<p>

<p>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>

font-family : 字体
font-size ：字体大小
font-weight ：字体粗细
color: 字体颜色

在这里插入图片描述

3.3、文本样式

颜色：

单词：RGB 三原色 0~f 16进制表示

RGBA： A 透明度 0~1
文本对方式 ：text-align: center; 排版居中
首行缩进：text-indent: 2em; 首行缩进2字（px是像素）

行高：

    行高 和块 的高度一致时，就可以上下居中
 height: 50px;  line-height: 50px;

装饰：

text-decoration: line-through;    中划线
text-decoration: overline;  上划线
 text-decoration: underline;  下划线
 text-decoration: none;   a标签去下划线

文本图片水平对齐：vertical-align: middle;

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

    <style>
        /*颜色;   单词：RGB  三原色  0~f 16进制表示
                      RGBA：   A 透明度  0~1
            text-align: center;  排版居中
               text-indent: 2em; 首行缩进2字（px是像素）
               行高 和块 的高度一致时，就可以上下居中
                height: 50px;  line-height: 50px;
                text-decoration: line-through;    中划线
                text-decoration: overline;  上划线
                 text-decoration: underline;  下划线

        */
        h1{
            /*color: #0000ff;*/
            color :rgba(0,255,45,0.7);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p4 {
            background: yellow;
            height: 50px;
            line-height: 50px;
        }

        /*中划线*/
        .l1{
            text-decoration: line-through;
        }

        /*上划线*/
        .l2{
            text-decoration: overline;
        }

        /*下划线*/
        .l3{
            text-decoration: underline;
        }
        /*a标签去下划线*/
        a{
            text-decoration: none;
        }
        /*水平对齐 ：参照物  a  b
        */
        img,span{
            vertical-align: middle;
        }
    </style>

</head>
<body>



<h1>剧情简介</h1>

<p class="p1">曾经，一个身穿火红色衣服的男人向全宇宙宣称，黑洞的深处有一片被称之为彩虹海的奇迹之地，
    在那里宝石遍地，黄金在河里流淌，天空中横跨着上万种颜色的巨大彩虹，到达那里的人，
    可以实现自己的任何愿望。这一宣言点燃了全宇宙的热情，吸引着来自四面八方的人们，
    追随红衣男人飞向黑洞，最终却没有一个人能够回来，与冒险者一起消失的红衣男人麦林，
    被后人厌恶的称之为“红魔鬼”，彩虹海也被认为是有史以来最大的谎言。</p>

<p>若干年后，麦林的儿子——麦当在地球上成长为了一个少年，为了完成与父亲拉钩定下的约定，
    决心再次出发寻找那个被视为谎言的彩虹海。</p>

<p>为了到达彩虹海，麦当结识了已经毁灭的亚亚罗星球国王咕咚·萌西和太阳系最后一个星学家笛亚，
    为了进入可以到达存在彩虹海的巨型黑洞所在地哥罗星系，一起踏上了进入自然虫洞“魔鬼脚印”的旅途。<p>

<p class="p4">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">123456</p>
<p class="l2">123456</p>
<p class="l3">123456</p>

<a href="http://www.baidu.com">123</a>

<img src="images/a.png" alt="图片">
<span> 健康和超声波</span>


</body>
</html>

在这里插入图片描述

3.4、阴影

在这里插入图片描述

/*text-shadow:阴影颜色  水平偏移 垂直偏移  阴影半径 */
#price{
    text-shadow: black 10px 10px 10px;
}

3.5、超链接伪类

正常情况下 a:hover

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


    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: #00ff00;
        }

        /*鼠标悬浮的状态（只需要记住： hover）*/
        a:hover{
            color: #25d4d4;
            font-size: 50px;
        }

        /* 鼠标按住未释放的状态*/
        a:active{
            color: firebrick;
        }

        a:visited{
            color: red;
        }
        /*text-shadow:阴影颜色  水平偏移 垂直偏移  阴影半径 */
        #price{
            text-shadow: black 10px 10px 10px;
        }

    </style>
</head>
<body>
<a href="#">
    <img src="images/1602202M245.jpg" alt="图片">
</a>

<p>
    <a href="#">码出高效：Java开发手册</a>
</p>

<p>
    <a href="#">作者：孤尽老师</a>
</p>
<p id="price">$99</p>


</body>
</html>css

在这里插入图片描述

3.6、列表

list style：

none 去掉圆点

circle 空心圆

decimal 数字

square 正方形

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


</head>
<body>

<div id="nav">
    <h2>全部商品分类</h2>

    <ul>
        <li>
            <a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a>&nbsp;&nbsp;
        </li>

        <li>
            <a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<li><a href="#">数码</a>&nbsp;&nbsp;
        </li>

        <li>
            <a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a>&nbsp;&nbsp;
        </li>


        <li>
            <a href="#">家具</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a>&nbsp;&nbsp;
        </li>

        <li>
            <a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a>&nbsp;&nbsp;
        </li>

        <li>
            <a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a>&nbsp;&nbsp;
        </li>

        <li>
            <a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a>&nbsp;&nbsp;
        </li>

        <li>
            <a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a>&nbsp;&nbsp;
        </li>

    </ul>

</div>


</body>
</html>

#nav{
    width: 300px;
    background: #b7b7b1;
}

h2{
    font-size: 30px;
    font-weight: bold;
    color: #000000;
    background:red url("../images/d .png") 260px 10px no-repeat;
    text-indent: 1em;
    line-height: 35px;

}
/*list style
none 去掉圆点
circle 空心圆
decimal  数字
square  正方形
*/
ul li{
    height: 30px;
    text-indent: 1em;
    list-style: none;
    /*background:url("../images/r.png");*/
    /*background: repeat no-repeat;*/
    /*background-position: 200px 2px;*/
    background:url("../images/r.png") 225px 2px no-repeat;
}

a{
    text-decoration: none;
    color: #000000;
    font-size: 14px;
}
a:hover{
    color: #cfa91c;
    text-decoration: underline;
}

在这里插入图片描述

3.7、背景

背景颜色
背景图片

div{
    width: 900px;
    height: 700px;
    /* 边框的粗细 实现  颜色*/
    border: 1px solid red;
    background-image: url("images/abc.png");
    /* 默认是全部平铺的 repeat*/
}

.div1{
    background-repeat: repeat-x;
}

.div2{
    background-repeat: repeat-y;
}

.div3{
    background-repeat: no-repeat;
}

在这里插入图片描述

3.8、渐变

渐变色：Grabient
径向渐变、圆形渐变

background-color: #4158D0;
background-image: linear-gradient(261deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

可以更改百度背景颜色

在这里插入图片描述

4、盒子模型

4.1、什么是盒子模型

在这里插入图片描述

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

4.2、边框

盒子边框
- 设置边框样式（border-style）
  
  none：没有边框即忽略所有边框的宽度（默认值）
  
  solid：边框为单实线(最为常用的)
  
  dashed：边框为虚线
  
  dotted：边框为点线
  
  double：边框为双实线
border-width 边框宽度

<style>
    /* body总有一个默认的外边距margin  通常开始就初始化*/
    
    h1,ul,a,body{
        margin: 0;
        padding: 0;
        text-display: none;
    }
    #box{
        border: 1px solid red;
        width: 300px;
    }

    h2{
        background: #d021ad;
        line-height: 30px;
        text-align: center;
        font-size: 16px;
    }
    form{
        background: #25d4d4;
    }
    /* border: 粗细、样式（实线虚线）颜色 */
    div:nth-child(1){
        border: #1a2a79 solid 2px;

    }
    div:nth-child(2){
        border: #000000 dashed 2px;

    }
    div:nth-child(3){
        border: #6521d3 dashed 3px;

    }

</style>

在这里插入图片描述

4.3、内外边距

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

    <style>
        /* body总有一个默认的外边距margin  通常开始就初始化*/

        h1,ul,a,body{
            margin: 0;
            padding: 0;
            text-display: none;
        }
        /*外边距的妙用居中元素
        margin: 0 auto;  上下为0  左右居中
        四个的话：是上、右、下、左 顺时针
        三个a、b、c 是 上a 左右b  下c
        两个  上下   左右
        */
        #box{
            border: 1px solid red;
            width: 300px;
            margin: 0 auto;
        }

        h2{
            background: #d021ad;
            line-height: 30px;
            text-align: center;
            font-size: 16px;
            margin: 3px 4px;
        }
        form{
            background: #25d4d4;
        }
        input{
            border: 1px solid black;
        }
        div:nth-child(1){
            padding: 10px 2px;
        }


    </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: 0 auto; （上下为0 左右居中）
margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。
margin参数（padding相同）：四个的话：是上、右、下、左顺时针

三个a、b、c 是上a 左右b 下c

两个上下左右
padding不会出现负值，margin是可以出现负值的

在这里插入图片描述

盒子的计算方式：你这个元素到底多大？

margin + border + padding + 内容宽度

4.4、圆角边框

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

    <style>
        div{
            width: 50px;
            height: 50px;
            background: red;
            margin: 100px;
            border:  solid red;
            border-radius: 50px 0px 0px 0px;

        }
         .title{
            border-radius: 91.5px;
        }

    </style>

</head>
<body>
<div></div>
<img src="../images/abc.png" class="title"/>
<img src="../images/abc.png"/>
</body>
</html>

在这里插入图片描述

可以利用圆角边框将头像变为圆的

border-radius: 左上角右上角右下角左下角;

4.5、阴影

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

    <style>

        div{
            width: 1200px;
            margin: 0 auto;
        }
        img{
            border-radius: 91.5px;
            box-shadow: 10px 10px 100px yellow;
        }

    </style>

</head>
<body>
<div>
    <img src="images/abc.png"/>
</div>

</body>
</html>

在这里插入图片描述

5、浮动

5.1 、标准文档流

在这里插入图片描述

块级元素：独占一行
- h1-h6 p div 列表
行内元素：不独占一行
- span a img strong
行内元素可以被包含在块级元素里面，反之不可以

5.2、display

这个也是实现行内元素排列的一种方式，但很多情况下我们都是用float

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

        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: none;

        }
    </style>


</head>
<body>

<div>块元素</div>


<span>行内元素</span>



</body>
</html>

5.3、float

float：左右浮动
选择器 {float:属性值;}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

div{
    margin: 10px;
    padding: 10px;
}

.father{
    border: 1px solid red;
}
.layer01{
    border: 1px solid black;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px solid #41e5e5;
    display: inline-block;
    float: left;

}.layer03{
     border: 1px solid yellow;
     display: inline-block;
     float: left;
 }.layer04{
      border: 1px solid green;
      display: inline-block;
    float:left;
    clear: both;
  }

在这里插入图片描述

5.4、解决父级边框塌陷的问题

clear

/* 
clear right:  右侧不允许有浮动元素
clear left： 左侧不允许有浮动元素
clear both； 两侧侧不允许有浮动元素
clear none；
*/

解决方案：

增加父集元素的高度

.father{
    border: 1px solid red;
    height：  800px;
}

增加一个空的div标签，清除浮动

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

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

overflow

在父级元素中增加一个  overflow:hidden

父类添加一个伪类：after

#father:after{
	content:'';
	dispaly:block;
	clear:both;
}

小结：
1. 浮动元素后面增加空div
简单，代码中尽量避免空div
1. 设置父元素的高度
  
  简单，元素假设有了固定的高度，就会被限制
2. overflow
  
  简单，下拉的一些场景避免使用
3. 父类添加一个伪类：after（推荐
  
  写法稍微复杂一些，但是没有副作用，推荐使用

5.5、对比

display

方向不可控

float

浮动起来的话会脱离标准文档流，需要解决父级边框塌陷的问题

6、定位

6.1、相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            
        }
        div{
            padding: 10px;
            margin: 10px;
            line-height: 25px;
            font-size: 12px;
        }
        #father{
            border: 1px solid #FFCC70;
        }
        #first{
            border: 1px solid #25d4d4;
            background: #25d496;
            position: relative;/*相对定位*/
            top: 10px;
            bottom: 5px;

        }
        #second{
            border: 1px dashed #6551d9;
            background: #6521d3;
            position: relative;
            left: 10px;
            right: 5px;
        }
        #third{
            border: 1px dashed #d02178;
            background: #d021ad;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first"> 第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

相对定位： position ：relative

相对与原来的位置进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留

left: 10px;
right: 5px;

top: 10px;
bottom: 5px;

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father {
            width: 300px;
            height: 300px;
            border: 2px solid red;
            padding: 10px;
        }
        a{
            width: 100px;
            height: 100px;
            display: block;
            background: #d021ad;
            line-height: 100px;
            text-align: center;
            text-decoration: none;
            color: white;
        }
        a:hover{
            background: #46c4cb;
        }
        a:nth-of-type(2),a:nth-of-type(4){
            position: relative;
            bottom: 100px;
            left: 200px;
        }
        a:last-child{
            position: relative;
            bottom: 300px;
           left: 100px;
        }
    </style>


</head>
<body>
<div id="father">
    <a href="#">链接一</a>
    <a href="#">链接二</a>
    <a href="#">链接三</a>
    <a href="#">链接四</a>
    <a href="#">链接五</a>
</div>
</body>
</html>

在这里插入图片描述

6.2、绝对定位

绝对定位：基于xxx进行定位。上下左右

没有父级元素的前题下，会相对与浏览器定位
假设父级元素存在定位，我们通常会相对于父级元素进行偏移
在父级元素范围内移动

相对于父级或浏览器的位置进行指定的偏移，绝对定位的话，它在标准文档流中，原来的位置不会被保留。

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

        div{
            padding: 10px;
            margin: 10px;
            line-height: 25px;
            font-size: 12px;
        }
        #father{
            border: 1px solid #FFCC70;
            position: relative;
        }
        #first{
            border: 1px solid #25d4d4;
            background: #25d496;



        }
        #second{
            border: 1px dashed #6551d9;
            background: #6521d3;
            position: absolute;
            bottom: 10px;
            left: 100px;

        }
        #third{
            border: 1px dashed #d02178;
            background: #d021ad;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first"> 第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

6.3、固定定位

位置固定不变的

<!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: #6521d3;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>元素一</div>
<div>元素二</div>

</body>
</html>

6.4、z-index

在这里插入图片描述

图层 z-index 默认是0，最高无限~999
透明度: opacity: 0.5;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="images/88.png" alt=""></li>
        <li id="tipText">哪怕成功的希望不大，也要无限的追下去，直到成功为止。</li>
        <li id="tipTx"></li>
        <li>时间：2088-05-05</li>
        <li>地点：嫦娥天宫</li>
    </ul>
</div>

</body>
</html>

#content{
    width: 960px;
    border: 1px solid black;
    padding: 0;
    margin: 0;
    overflow: hidden;
    line-height: 25px;
    font-size: 18px;

}
ul,li{
    list-style: none;
    padding: 0;
    margin: 0;
}
/*父类的相对定位*/
#content ul{
    position: relative;
}
#tipText,#tipTx{

    width: 960px;
    height: 25px;
    position: absolute;
    top: 550px;


}
#tipText{
    color: red;
    z-index: 999;
    font-family: 楷体;
    font-size: 30px;
}
#tipTx{
    background: #131312;
    opacity: 0.5;/*透明度*/
}