CSS3知道这些就足够了

最新推荐文章于 2024-10-17 14:29:24 发布

雪忆·HL

最新推荐文章于 2024-10-17 14:29:24 发布

阅读量1k

点赞数 28

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/weixin_70204933/article/details/136423367

版权

1 什么是CSS和发展史

1.1 什么是CSS

CSS：Cascading Style Sheet，层叠级联样式表

作用：表现（美化网页）（eg:字体、颜色、边距、高度、宽度、背景图片、网页定位，网页浮动···）

1.2 发展史

CSS1.0：美化基本样式，eg:字体加粗(现标签可实现)···

CSS2.0 ：DIV（块）+CSS HTML和CSS结构分离思想；简化网页；SEO(搜索引擎优化)

CSS2.1:网页浮动、定位··

CSS3.0：圆角边框，阴影，动画···；浏览器兼容性(包含以上版本功能)

2 CSS快速入门及优势

style：

基本入门：

不建议使用，但是偶尔练习的时候为了图方便可以这么去写

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

  <!--规范，<style>可以编写CSS的代码，每一个声明最好使用分号结尾
  语法：
      选择器{
          声明1;
          声明2;
          声明3;
      }
  -->
    <style>
        h1{
            color: aqua;
        }
    </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

建议使用这种规范：

显示结果：

CSS优势：

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

3 三种CSS导入方式

行内样式：一般不建议这么写，但是偶尔为了偷个懒，网页已经发展的非常大了，不想针对这个元素再单独写一个，就直接标一个是可以的（行内样式最直接，但是布局不利）
```
<body>

<h1 style="color: chartreuse">我是标题</h1>
</body>
```

内部样式

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

外部样式

链接式(link):常用样式；html标签

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    外部样式-->
  <link rel="stylesheet" href="CSS/style.css">
</head>

导入式(@import): 不经常使用，现在多用link标签取代（@import是CSS2.1特有的！）

弊端：当一个网页代码过多时，通过浏览器显示时会先出现框架，再显现效果

<head>
<meta charset="UTF-8">
   <title>Title</title>
<!--  导入式-->
 <style>
   @import url("CSS/style.css");
 </style>
</head>

优先级：行内样式优先级最高，如果style标签定义在标签引入之前，则link引入的外部样式优先，如果style标签定义在link标签之后，则style标签样式优先级高（就近原则：即离标签越近优先级越高）

4 选择器

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

4.1 三种基本选择器

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

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

  <style>
    /*标签选择器，会选择到页面上所有的这个标签的元素*/
    h1{
        color: #951bd2;
        background: #1b8cd2;
        border-radius: 24px;
    }
    p{
        font-size: 80px;
    }
  </style>
</head>
<body>

<h1>学CSS</h1>
<h1>学CSS</h1>
<p>好好做笔记</p>

</body>
</html>

显示效果：

类选择器（class）：选择所有class属性一致的标签，跨标签 .类名{}

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

  <style>
        /*类选择器的格式：.class的名称{}
        好处，可以多个标签归类，是同一个class，可以复用
        */
        .first{
          color: blue;
        }
        .second{
          color: aquamarine;
        }
  </style>
</head>
<body>

<h1 class="first">标题1</h1>
<h1 class="second">标题2</h1>
<h1 class="second">标题3</h1>

<p class="first">P标签</p>

</body>
</html>

显示效果：

id选择器：全局唯一 #id名{}

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

    <style>
        /*  id选择器:id必须保证全局唯一！
            #id名称{}
            优先级：
            不遵循就近原则，是固定的顺序
            id选择器>class选择器>标签选择器
         */
        #S1{
            color: antiquewhite;
        }
        .style1{
            color: deeppink;
        }
        h1{
            color: aqua;
        }
    </style>
</head>
<body>

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

</body>
</html>

显示效果：

优先级：id>class>标签

4.2 层次选择器

后代选择器：在某个元素的后面（如果有多个，就全都是）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器*/
        body p{
            background: red;
        }
	</style>
</head>
<body>

    <p>p0</p>
    <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>
    <p class="active">p7</p>
    <p>p8</p>
</body>
</html>

显示效果：

子选择器：下一代的人（如果那一代有多个，也全都是）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*子选择器*/
        body>p{
            background: #1b8cd2;
        }
    </style>
</head>
<body>

    <p>p0</p>
    <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>
    <p class="active">p7</p>
    <p>p8</p>
</body>
</html>

显示效果：

相邻兄弟选择器：同辈（只有当前class元素（可以有多个）相邻（向下）的一个）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*相邻兄弟选择器：只有一个，相邻（向下）*/
        .active + p{
            background: blueviolet;
        }
    </style>
</head>
<body>

    <p>p0</p>
    <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>
    <p class="active">p7</p>
    <p>p8</p>
</body>
</html>

显示效果：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
        .active ~p{
            background: aqua;
        }
        /*p7亮是因为p1来的*/
    </style>
</head>
<body>

    <p>p0</p>
    <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>
    <p class="active">p7</p>
    <p>p8</p>
</body>
</html>

显示效果：

注：③和④都是同级同元素,不包括自己。所以③的p1和p7不会变色，④的p1不变色而p7变色

重点注意这些符号：后代是空格，子选择器是>，相邻兄弟选择器是+，通用兄弟选择器是~

4.3 结构伪类选择器

伪类：条件，其意思就是所有的后面要加冒号，以冒号开头的都是伪类

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--避免使用class、id选择器来做-->
  <style>
      /*ul的第一个子元素*/
      ul li:first-child{
          background: red;
      }

      /*ul的最后一个子元素*/
      ul li:last-child{
        background: #951bd2;
      }

      /*只选中p1:定位到父元素，选择当前的第一个元素
      选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！否则不生效。按顺序选择
      */
      p:nth-child(1){
        background: #64d21b;
      }
      p:nth-child(2){
        background: #64d21b;
      }

      /*选中父元素下的p元素的第二个，按类型选择*/
      p:nth-of-type(2){
        background: deeppink;
      }

      /*这就叫伪类，它有一个动作*/
      /*a:hover{*/
      /*  background: red;*/
      /*}*/

  </style>
</head>
<body>
  <a href="">233</a>
  <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>

效果显示：

注：

  p:nth-child(1){
    background: #64d21b;
  }
  p:nth-child(2){
    background: #64d21b;
  }

这段代码并未生效，因为此时p的父级元素是a标签，其第一个与第二个分别是a与h1标签，不是p标签，所以不生效。想让p1生效，将这两行代码随便注释一行即可

<a href="">233</a>
<h1>h1</h1>

4.4 属性选择器（常用）

它是把类选择器和id选择器结合了

属性名，属性名=属性值（正则）

常用正则表达式含义：

=:绝对等于
*=：包含等号右侧元素
^=:以此元素开头
$=:以此元素结尾

<!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: aqua;
      text-align: center; /*对齐方式：居中对齐*/
      color: gainsboro; /*文字颜色：灰色*/
      text-decoration: none;  /*去掉下划线*/
      margin-right: 5px;  /*外边距向右偏移*/
      font:bold 20px/50px Arial;  /*字体粗细、字体大小、行高、字体*/
    }
  </style>
</head>
<body>

<p class="demo">

  <a href="https://www.baidu.com" class="links item first" id="first">1</a>
  <a href="https://blog.csdn.net/weixin_70204933?type=blog" 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>

显示效果：

注：以下css代码均放在上述html代码的style标签里面

存在id属性的元素 a[]{}

/*存在id属性的元素 a[]{}*/
a[id]{
  background: red;
}

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

显示效果：

补充：红色被后面的greenyellow给覆盖了（下同）

选择class中带有某一标签的元素

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

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

显示效果：

选中herf属性中以某一内容为开头的元素和某一内容结尾的元素

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

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

显示效果：

5 美化网页元素

5.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">CSS</span>
</body>
</html>

显示效果：

5.2 字体样式

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

分散：

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

    <!--
      font-family：字体
      font-size:字体大小
      font-weight:字体粗细
      color:字体颜色
    -->
    <style>
      body{
        font-family: "Arial Black",楷体;
        color: coral;
      }
      h1{
        font-size: 50px;  /*还可以换成em，1个缩进叫em*/
      }
      .p1{
        font-weight: bold;  /*lighter是更细，粗细写数字也行*/
      }
    </style>

</head>
<body>

<h0>励志文章摘抄（一）</h0>

<h1>一生定要美丽一次</h1>

<p class="p1">生长在非洲荒漠地带的依米花，默默无闻，少有人注意过它。许多旅人以为它只是一株草而已。但是，它会在一生中的某个清晨突然绽放出美丽的花朵。
  那是无比绚丽的一朵花，似乎要占尽人世间所有色彩一样。它的花瓣儿呈莲叶状儿，每瓣自成一色：红、白、黄、蓝，与非洲大地上空的毒日争艳。
  但是，它的花期很短，最多只有两天。两天后它就会随着母株一起枯萎，开花意味着它的生命的终结。
</p>

<p>在非洲的荒漠地带，植物的生长需要水分，而开花的植物对水分的需求更大。非洲一般植物都有庞大的根系采水，以供自身的水分需求。但是依米花没有根系，它只有惟一的一条主根，孤独地蜿蜒盘曲着钻入地底深处，寻找有水的地方。那需要幸运和顽强努力，一株依米花往往需要四至五年的时间在干燥的沙漠里寻找水源，然后一点点积聚养分，在完成蓓蕾所需要的全部养分后，它开花了！所以在它最美丽的时候，它因耗尽了自己的所有的养分而凋零。
  用五年的时间为开一朵花努力，这是何等顽强而心酸的事情。假若依米花生长在水草丰沃的地方，它将会美丽一辈子的，偏偏，它的家乡在荒漠。
  这个世界上，万物都有灿烂一回的时候，这是上苍赐给万物的权利。
</p>

<p>人要比依米花智慧和理性，人想灿烂一回的理想要比依米花更强烈。但我们却往往没有一生都不屈不挠和努力，在遭遇困难和阻挠的时候，往往接受环境给予自己安排的命运。
  人生的道路有几十年，但像依米花那样地勇往直前的岁月真的太少了。用一生定要美丽一次的心情去努力和坚持，每个人都会比现在做得更好！
</p>

<p>
  经典段落：
  She walks in beauty, like the night Of cloudless climes and starry skies;
  And all that's best of dark and bright；Meet in her aspect and her eyes.
  她走在美的光彩中，像夜晚皎洁无云而且繁星漫天，黑夜与白天最美妙的色彩，都在她的面容和目光里显现。
</p>

</body>
</html>

显示效果：

组合（即一步到位）：

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

<!--  字体风格(如斜体）-->
  <style>
    p{
      font:oblique bolder 16px "楷体";  /*字体风格、粗细、大小、样式（用空格隔开）*/
    }
  </style>

</head>
<body>

<p>人要比依米花智慧和理性，人想灿烂一回的理想要比依米花更强烈。但我们却往往没有一生都不屈不挠和努力，在遭遇困难和阻挠的时候，往往接受环境给予自己安排的命运。
  人生的道路有几十年，但像依米花那样地勇往直前的岁月真的太少了。用一生定要美丽一次的心情去努力和坚持，每个人都会比现在做得更好！
</p>

</body>
</html>

显示效果：

5.3 文本样式

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

  <!--
  颜色：
    单词
    RGB 0~F
    RGBA A:0~1(透明度)

    text-align:排版，居中
    text-indent: 2em; ：段落首行缩进
    height: 300px;
    line-height: 300px;
    行高和块的高度一致，就可以上下居中
  -->
  <style>
    h1{
      color: rgb(0,255,255,0.9);
      text-align: center; /*文本对齐（居中）*/
    }
    .p1{
      text-indent: 2em; /*1个em即一个字,px是像素*/
    }
    .p3{
      background: #951bd2;
      height: 300px;
      line-height: 300px;
    }
    /*下划线*/
    .l1{
      text-decoration: underline;
    }
    /*中划线*/
    .l2{
      text-decoration: line-through;
    }
    /*上划线*/
    .l3{
      text-decoration: overline;
    }
    /*a标签默认有下划线，超链接去下划线*/
    a{
      text-decoration: none;
    }

    /*水平对齐 参照物:a、b*/
     img,span{
       vertical-align: middle;  /*center是水平的中，middle是垂直的中*/
     }

  </style>

</head>
<body>

<a href="">123</a>

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

<h1>一生定要美丽一次</h1>

<p class="p1">生长在非洲荒漠地带的依米花，默默无闻，少有人注意过它。许多旅人以为它只是一株草而已。但是，它会在一生中的某个清晨突然绽放出美丽的花朵。
  那是无比绚丽的一朵花，似乎要占尽人世间所有色彩一样。它的花瓣儿呈莲叶状儿，每瓣自成一色：红、白、黄、蓝，与非洲大地上空的毒日争艳。
  但是，它的花期很短，最多只有两天。两天后它就会随着母株一起枯萎，开花意味着它的生命的终结。
</p>

<p>在非洲的荒漠地带，植物的生长需要水分，而开花的植物对水分的需求更大。非洲一般植物都有庞大的根系采水，以供自身的水分需求。但是依米花没有根系，它只有惟一的一条主根，孤独地蜿蜒盘曲着钻入地底深处，寻找有水的地方。那需要幸运和顽强努力，一株依米花往往需要四至五年的时间在干燥的沙漠里寻找水源，然后一点点积聚养分，在完成蓓蕾所需要的全部养分后，它开花了！所以在它最美丽的时候，它因耗尽了自己的所有的养分而凋零。
  用五年的时间为开一朵花努力，这是何等顽强而心酸的事情。假若依米花生长在水草丰沃的地方，它将会美丽一辈子的，偏偏，它的家乡在荒漠。
  这个世界上，万物都有灿烂一回的时候，这是上苍赐给万物的权利。
</p>

<p class="p3">人要比依米花智慧和理性，人想灿烂一回的理想要比依米花更强烈。但我们却往往没有一生都不屈不挠和努力，在遭遇困难和阻挠的时候，往往接受环境给予自己安排的命运。
  人生的道路有几十年，但像依米花那样地勇往直前的岁月真的太少了。用一生定要美丽一次的心情去努力和坚持，每个人都会比现在做得更好！
</p>

<p>
  经典段落：
  She walks in beauty, like the night Of cloudless climes and starry skies;
  And all that's best of dark and bright；Meet in her aspect and her eyes.
  她走在美的光彩中，像夜晚皎洁无云而且繁星漫天，黑夜与白天最美妙的色彩，都在她的面容和目光里显现。
</p>

<p>
  <img src="images/造梦无双.png" alt="">
  <span>handsome</span>
</p>

</body>
</html>

显示效果：

5.4 阴影

text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径（代码见5.5）

5.5 超链接伪类

- a:link - 正常，未访问过的链接 - a:visited - 用户已访问过的链接 - a:hover - 当用户鼠标放在链接上时 - a:active - 链接被点击的那一刻

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

  <style>
    /*默认的颜色*/
    a{
      text-decoration: none;
      color: black;
    }
    /*鼠标悬浮的状态(只需要记住hover)*/
    a:hover{
      color: orange;
      font-size: 50px;
    }
    /*鼠标按住未释放的状态*/
    a:active{
      color: green;
    }
    /*正常，未访问过的链接*/
    a:link{
      color: red;
    }
    /*用户已访问过的链接*/
    a:visited{
      color: greenyellow;
    }
    /*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
    #name{
      text-shadow:  aqua 10px -10px 2px;
    }
  </style>

</head>
<body>

<!--<a href="#">这行代码的意思是链接当前页面-->
<a href="#">
  <img src="images/QQ图片20220507112343.jpg" alt="" height="233px">
</a>
<p>
  <a href="#">光遇</a>
</p>
<p>
  <a href="">作者：沐辰</a>
</p>
<p id="name">
  霞谷
</p>
</body>
</html>

显示效果：

5.6 列表

list-style:
none:去掉原点
circle:空心圆
decimal:数字
square:正方形

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

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

<ul>
  <li>
    <a href="#">图书</a>
    <a href="#">音像</a>
    <a href="#">数字商品</a>
  </li>
  <li>
    <a href="#">家用电器</a>
    <a href="#">手机</a>
    <a href="#">数码</a>
  </li>
  <li>
    <a href="#">电脑</a>
    <a href="#">办公</a>
  </li>
  <li>
    <a href="#">家居</a>
    <a href="#">家装</a>
    <a href="#">厨具</a>
  </li>
  <li>
    <a href="#">服饰鞋帽</a>
    <a href="#">个性化妆</a>
  </li>
  <li>
    <a href="#">礼品箱包</a>
    <a href="#">钟表</a>
    <a href="#">珠宝</a>
  </li>
  <li>
    <a href="#">食品饮料</a>
    <a href="#">保健食品</a>
  </li>
  <li>
    <a href="#">彩票</a>
    <a href="#">旅行</a>
    <a href="#">充值</a>
    <a href="#">票务</a>
  </li>
</ul>
</div>

</body>
</html>

#nav{
    width: 300px;
    background: rgba(182, 166, 166, 0.44);
}

 .title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /*颜色、图片、图片位置、平铺方式*/
    background: red url("../images/d.png") 270px 10px no-repeat;
    background-size: 20px;
}
/*ul li*/
/*
list-style:
    none:去掉原点
    circle:空心圆
    decimal:数字
    square:正方形
 */
/*ul{*/
/*    background: rgba(182, 166, 166, 0.44);*/
/*}*/

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/r.png");
    background-repeat: no-repeat;
    background-position: 230px 2px;
    background-size: 20px;
    /*background: rgba(182, 166, 166, 0.44);*/
}

a{
    text-decoration: none;
    font-size: 13px;
    color: #000;    /*这数字可以缩写*/
}

a:hover{
    color: orange;
    text-decoration: underline;
}

显示效果：

5.7 背景

背景颜色、背景图片

<!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/B站头像.png);    /*默认是全部平铺的repeat*/
    }
    .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>

显示效果：

5.8 渐变

background-color: #85FFBD; /*这个也可以不要，是默认的颜色*/
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);

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

<!--    径向渐变，圆形渐变-->
    <style>
        body{
            /*background-color: #85FFBD; !*这个也可以不要，是默认的颜色*!*/
            background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
        }
    </style>

</head>
<body>

要开心点哦！！！

</body>
</html>

显示效果：

6 盒子模型

6.1 什么是盒子模型

margin：外边距

padding：内边距

border：边框

6.2 边框使用

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

  <style>
    /*body总有一个默认的外边距margin:0,常见操作*/
    /*h1,ul,li,a,body{*/
    /*  margin: 0;*/
    /*  padding: 0;*/
    /*  text-decoration: none;*/
    /*}*/
    /*border:粗细，样式，颜色*/
    #box{
      width: 300px;
      border: 1px solid red;  /*solid是实线*/
    }

    h2{
      font-size: 16px;
      background: orange;
      line-height: 30px;
      margin: 0;
      color: white;
    }

    form{
      background: aqua;
    }

    div:nth-of-type(1) input{
      border: 3px solid black;
    }
    div:nth-of-type(2) input{
      border: 3px dashed red; /*dashed虚线*/
    }
    div:nth-of-type(3) input{
      border: 3px solid olive;
    }
  </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>

显示效果：

6.3 内外边距

顺时针旋转
margin:0
margin:0 1px
margin:0 1px 2px 3px

注：margin写4个其实是上，右，下，左，顺时针排列，两个就是上下、左右，一个就是全部，注意除非是0，写其他的数字（超过0）时要加px等单位才行

外边距的妙用，居中元素
margin: 0 auto;

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

<!--  外边距的妙用，居中元素
      margin: 0 auto;
      -->
  <style>

    #box{
      width: 300px;
      border: 1px solid red;  /*solid是实线*/
      margin: 66px auto;
    }

    /*
    顺时针旋转
    margin:0
    margin:0 1px
    margin:0 1px 2px 3px
     */

    h2{
      font-size: 16px;
      background: orange;
      line-height: 30px;
      margin: 0 10px;
      color: white;
    }

    form{
      background: aqua;
    }

    input{
      border:1px solid black;
    }

    div:nth-of-type(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+border+padding+内容宽度，这全部长度为296*22

注：内边距是内容到边框之间的距离，外边距是边框到外面的距离

6.4 圆角边框

四个角

border-radius，其是按照顺时针，从左上开始，50分配完了20 都分配完了重新开始，其他的类推

eg：两个就是左上右下，这是两个的，50px 20px

如图所示：

边框圆角的代码如下：

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

<!--
左上 右上 右下 左下,顺时针方向
圆圈：圆角=半径
-->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 50px 20px 10px 5px;
        }
    </style>

</head>
<body>

<div></div>

</body>
</html>

显示效果：

练习：试着自己做出一个圆形和半圆

6.5 盒子阴影

box-shadow

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

  <style>
    div{
      width: 100px;
      height: 100px;
      border: 10px solid red;
      box-shadow: 10px 10px 100px orange;
    }

    /*margin:0 auto;居中
    要求：块元素，块元素有固定的宽度，这样才能实现居中效果
    */
    img{
      /*margin: 0 auto; 这里直接放没有效果，有点问题，用text-align: center来居中*/
      border-radius: 540px;
      box-shadow: 10px 10px 100px orange;
    }
  </style>

</head>
<body>

<!--display:block;强制将它改成块元素-->
<div style="width: 5000px; display: block; text-align: center">
    <img src="images/微信图片_20220622162036.jpg" alt="">
</div>

</body>
</html>

显示效果：

7 浮动

7.1 标准文档流

块级元素：独占一行

h1~h6 p div 列表...

行内元素：不独占一行

span a img strong...

行内元素可以被包含在块级元素中，反之，则不可以

7.2 display

block:块元素
inline:行内元素
inline-block:是块元素，但是可以内联，在一行！
none：消失

（代码见7.4）

7.3 float

左右浮动 float

（代码见7.4）

7.4 父级边框塌陷问题

clear
clear：right; 右侧不允许有浮动元素
clear：left; 左侧不允许有浮动元素
clear：both; 两侧不允许有浮动元素
clear：none; 可以让它浮动

什么是父级边框塌陷问题？

如图所示：

这种里面的框不在外面的大框内，就是塌陷

解决方案：

1.增加父级元素的高度

#father{
    /*第一种方法*/
    height: 300px;
}

最后实现效果：

不建议使用第一种，太low了

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

/*第二种方法*/
.clear{
    clear: both;
    margin:0;
    padding: 0;
}

实现效果：（2、3、4解决方案的效果均是此图）

方法二是在网页最末端，添加一个（原生）div，div进行：若有左右浮动，则在下行显示，因为div没有浮动。所以(父级div)边框将（包裹它），它又是最末尾元素，故解决了塌陷

3.overflow

#father{
    /*第三种方法*/
    overflow: hidden;
}

overflow：高度超出了，不应该往下堆积，而是形成侧边栏/滚动条这样的效果

4.父类添加一个伪类：after

/*第四种方法*/
#father:after{
    content: '';    /*增加一个内容*/
    display: block;
    clear: both;
}

这个after等同于方法二对父级添加一个div的操作，这种方法可以避免在程序里面增加空div，即在不改动原有代码的基础上，新增一些代码

总体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
block:块元素
inline:行内元素
inline-block:是块元素，但是可以内联，在一行！
none：消失
-->
  <style>
      #father{
          width: 500px;
          /*解决父级边框塌陷问题的第一种方法*/
          /*height: 300px;*/
          margin: 10px;
          padding: 5px;
          border: 1px solid red;
          /*第三种方法*/
          /*overflow: hidden;*/
      }

    /*第四种方法*/
    #father:after{
        content: '';    /*增加一个内容*/
        display: block;
        clear: both;
    }

    /*
    clear：right;右侧不允许有浮动元素
    clear：left;左侧不允许有浮动元素
    clear：both;两侧不允许有浮动元素
    clear：none;可以让它浮动
     */
    span{
        width: 100px;
        height: 100px;
        border: 1px dashed red; /*dashed是虚线*/
        display: inline-block;
        float:left;
        /*clear:both;*/
    }
    p{
        margin: 0;
        padding: 0;
        width: 100px;
        height: 100px;
        border: 1px dashed red;
        display: inline-block;
        float:left;
        /*clear:both; !*浮起来的同时还能保证它是一个块元素*!*/
    }

    /*第二种方法*/
    /*.clear{*/
    /*    clear: both;*/
    /*    margin:0;*/
    /*    padding: 0;*/
    /*}*/
    </style>

</head>
<body>

<div id="father">
    <div>div块元素</div>
    <span>span行内元素</span>
    <p>666666</p>
    <div class="clear"></div>
</div>

</body>
</html>

显示效果：

7.5 对比

display：方向不可以控制
float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

8 定位

8.1 相对定位

相对定位：position：relative;

相对于自己原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留（只是相对原来的位置偏移了，所以不会有边框塌陷）

top:-20px;
left:20px;
bottom:-10px;
right:20px;

补充：它这全是距离的意思，可理解成正数向内移，负数向外移

<!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 cyan;
      padding: 0;
    }
    #first{
      background-color: fuchsia;
      border: 1px dashed yellow;
      position: relative; /*相对定位：上下左右*/
      top:-20px;  /*距离上面-20，即往上移*/
      left:20px;/*距离左边+20，即向右移*/

    }
    #second{
      background-color: darkorchid;
      border: 1px dashed brown;
    }
    #third{
      background-color: coral;
      border: 1px dashed gold;
      position: relative;
      bottom: 10px;
      right: 20px;
    }
  </style>

</head>
<body>

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

</body>
</html>

显示效果：

练习：

8.2 绝对定位

定位：基于xxx定位，上下左右

1、没有父级元素定位的前提下，相对于浏览器定位

2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移

3、在父级元素范围内移动

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

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

  <style>
    div{
      margin: 10px;
      padding: 5px;
      font-size: 12px;
      line-height: 25px;
    }
    #father{
      border: 1px solid cyan;
      padding: 0;
      position: relative;
    }
    #first{
      background-color: fuchsia;
      border: 1px dashed yellow;
    }
    #second{
      background-color: darkorchid;
      border: 1px dashed brown;
      position: absolute;
      right: 30px;
      top: -10px;
    }
    #third{
      background-color: coral;
      border: 1px dashed gold;
    }
  </style>

</head>
<body>

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

</body>
</html>

实现效果：

8.3 固定定位 fixed

绝对定位是相对于浏览器的初始状态定位在这，会随着滚动条拖动而移动位置；而固定定位是永久固定在那里，不会随着滚动条拖动而移动位置（类似那种小广告）

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

  <style>
    body{
      height: 1000px;
    }
    /*absolute,绝对定位：相对于浏览器*/
    div:nth-of-type(1){
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      right: 0;
      bottom: 0;
    }
    /*fixed,固定定位*/
    div:nth-of-type(2){
      width: 50px;
      height: 50px;
      background: yellow;
      position: fixed;
      right: 0;
      bottom: 0;
    }
  </style>

</head>
<body>

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

</body>
</html>

实现效果：

8.4 z-index及透明度

z-index类似于PS中图层的概念

z-index：默认是0，最高无限（一般999就足够了）

opacity：0.5； /背景透明度/（之前讲的rgba也是设置透明度）

注：只有用了定位才会堆叠起来，否则是平铺的概念，浮起来了才有层级的概念

<!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/bg.png" alt=""></li>
    <li class="tipText">好好学习，天天向上，2024新年快乐！</li>
    <li class="tipBg"></li>
    <li>时间：2024-02-07</li>
    <li>地点：江西景德镇</li>
  </ul>
</div>

</body>
</html>

#content{
    width: 520px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;   /*不写这个圆点也会去掉是因为圆点就是在padding里面的,而padding被设为0了*/
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText, .tipBg{
    position: absolute;
    width: 520px;
    height: 25px;
    top: 278px;
}
.tipText{
    color: red;
    z-index: 999;/*最低是0，变成999就是一个很高的一个层次了*/
}
.tipBg{
    background: paleturquoise;
    opacity: 0.5;   /*背景透明度*/
    /*filter: alpha(opacity=50);  !*这个已过时，早版本可以用*!*/
}