CSS3知道这些就足够了

雪忆·HL2026-01-03 10:48

文章目录

      • [1 什么是CSS和发展史](#1 什么是CSS和发展史)
        • [1.1 什么是CSS](#1.1 什么是CSS)
        • [1.2 发展史](#1.2 发展史)
      • [2 CSS快速入门及优势](#2 CSS快速入门及优势)
      • [3 三种CSS导入方式](#3 三种CSS导入方式)
      • [4 选择器](#4 选择器)
        • [4.1 三种基本选择器](#4.1 三种基本选择器)
        • [4.2 层次选择器](#4.2 层次选择器)
        • [4.3 结构伪类选择器](#4.3 结构伪类选择器)
        • [4.4 属性选择器（常用）](#4.4 属性选择器（常用）)
      • [5 美化网页元素](#5 美化网页元素)
        • [5.1 为什么要美化网页](#5.1 为什么要美化网页)
        • [5.2 字体样式](#5.2 字体样式)
        • [5.3 文本样式](#5.3 文本样式)
        • [5.4 阴影](#5.4 阴影)
        • [5.5 超链接伪类](#5.5 超链接伪类)
        • [5.6 列表](#5.6 列表)
        • [5.7 背景](#5.7 背景)
        • [5.8 渐变](#5.8 渐变)
      • [6 盒子模型](#6 盒子模型)
        • [6.1 什么是盒子模型](#6.1 什么是盒子模型)
        • [6.2 边框使用](#6.2 边框使用)
        • [6.3 内外边距](#6.3 内外边距)
        • [6.4 圆角边框](#6.4 圆角边框)
        • [6.5 盒子阴影](#6.5 盒子阴影)
      • [7 浮动](#7 浮动)
        • [7.1 标准文档流](#7.1 标准文档流)
        • [7.2 display](#7.2 display)
        • [7.3 float](#7.3 float)
        • [7.4 父级边框塌陷问题](#7.4 父级边框塌陷问题)
        • [7.5 对比](#7.5 对比)
      • [8 定位](#8 定位)
        • [8.1 相对定位](#8.1 相对定位)
        • [8.2 绝对定位](#8.2 绝对定位)
        • [8.3 固定定位 fixed](#8.3 固定定位 fixed)
        • [8.4 z-index及透明度](#8.4 z-index及透明度)
      • [9 CSS总结](#9 CSS总结)

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：

基本入门：

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

html 复制代码 
<!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优势：

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

3 三种CSS导入方式

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

    html 复制代码 
    <body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: chartreuse">我是标题</h1>
</body>

  2. 内部样式

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

  3. 外部样式

    • 链接式(link):常用样式；html标签
    html 复制代码 
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    外部样式-->
  <link rel="stylesheet" href="CSS/style.css">
</head>

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

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

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

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

4 选择器

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

4.1 三种基本选择器

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

    html 复制代码 
    <!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>

显示效果：

  1. 类选择器（class）：选择所有class属性一致的标签，跨标签 .类名{}
html 复制代码 
<!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>

显示效果：

  1. id选择器：全局唯一 #id名{}
html 复制代码 
<!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 层次选择器
  1. 后代选择器：在某个元素的后面（如果有多个，就全都是）
html 复制代码 
<!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>

显示效果：

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

    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>

显示效果：

  1. 相邻兄弟选择器：同辈（只有当前class元素（可以有多个）相邻（向下）的一个）
html 复制代码 
<!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>

显示效果：

  1. 通用选择器：当前选中元素向下的所有兄弟元素
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 结构伪类选择器

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

html 复制代码 
<!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>

效果显示：

注：

html 复制代码 
  p:nth-child(1){
    background: #64d21b;
  }
  p:nth-child(2){
    background: #64d21b;
  }

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

html 复制代码 
<a href="">233</a>
<h1>h1</h1>
4.4 属性选择器（常用）

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

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

常用正则表达式含义：

=:绝对等于

*=：包含等号右侧元素

^=:以此元素开头

$=:以此元素结尾

html 复制代码 
<!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标签里面

  1. 存在id属性的元素 a[]{}
html 复制代码 
/*存在id属性的元素 a[]{}*/
a[id]{
  background: red;
}

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

显示效果：

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

  1. 选择class中带有某一标签的元素
html 复制代码 
/*class中有links item的元素*/
a[class="links item"]{
  background: yellow;
}

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

显示效果：

  1. 选中herf属性中以某一内容为开头的元素和某一内容结尾的元素
html 复制代码 
/*选中href中以http开头的元素*/
a[href^=http]{
  background: yellow;
}

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

显示效果：

5 美化网页元素

5.1 为什么要美化网页
  1. 有效传递页面信息
  2. 美化网页，页面漂亮，才能吸引用户
  3. 凸显页面的主题
  4. 提高用户的体验

span标签：突出一句话中重点的字，约定俗成用是span标签

html 复制代码 
<!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:字体颜色

  1. 分散：

    html 复制代码 
    <!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>

显示效果：

  1. 组合（即一步到位）：

    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 文本样式
html 复制代码 
<!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 - 链接被点击的那一刻
html 复制代码 
<!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:正方形

html 复制代码 
<!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>
css 复制代码 
#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 背景

背景颜色、背景图片

html 复制代码 
<!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 渐变
css 复制代码 
background-color: #85FFBD; /*这个也可以不要，是默认的颜色*/
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
html 复制代码 
<!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 边框使用
html 复制代码 
<!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;

html 复制代码 
<!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

如图所示：

边框圆角的代码如下：

html 复制代码 
<!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

html 复制代码 
<!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.增加父级元素的高度

css 复制代码 
#father{
    /*第一种方法*/
    height: 300px;
}

最后实现效果：

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

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

css 复制代码 
/*第二种方法*/
.clear{
    clear: both;
    margin:0;
    padding: 0;
}

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

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

3.overflow

css 复制代码 
#father{
    /*第三种方法*/
    overflow: hidden;
}

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

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

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

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

总体代码如下：

html 复制代码 
<!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;

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

css 复制代码 
top:-20px;
left:20px;
bottom:-10px;
right:20px;

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

html 复制代码 
<!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、在父级元素范围内移动

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

html 复制代码 
<!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

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

html 复制代码 
<!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也是设置透明度）

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

html 复制代码 
<!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>
css 复制代码 
#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);  !*这个已过时，早版本可以用*!*/
}

实现效果：

9 CSS总结

参考博客：CSS

相关推荐
代码匠心36 分钟前
AI 自动编程：一句话设计高颜值博客
前端·ai·ai编程·claude
_AaronWong2 小时前
Electron 实现仿豆包划词取词功能：从 AI 生成到落地踩坑记
前端·javascript·vue.js
cxxcode2 小时前
I/O 多路复用：从浏览器到 Linux 内核
前端
用户5433081441942 小时前
AI 时代，前端逆向的门槛已经低到离谱 — 以 Upwork 为例
前端
JarvanMo2 小时前
Flutter 版本的 material_ui 已经上架 pub.dev 啦！快来抢先体验吧。
前端
恋猫de小郭2 小时前
AI 可以让 WIFI 实现监控室内人体位置和姿态，无需摄像头？
前端·人工智能·ai编程
哀木3 小时前
给自己整一个 claude code，解锁编程新姿势
前端
程序员鱼皮3 小时前
GitHub 关注突破 2w，我总结了 10 个涨星涨粉技巧！
前端·后端·github
UrbanJazzerati3 小时前
Vue3 父子组件通信完全指南
前端·面试
是一碗螺丝粉3 小时前
5分钟上手LangChain.js：用DeepSeek给你的App加上AI能力
前端·人工智能·langchain
热门推荐
01GitHub 镜像站点02【OpenClaw 本地实战 Ep.3】突破瓶颈：强制修改 openclaw.json 解锁 32k 上下文记忆03OpenClaw 使用和管理 MCP 完全指南04AI Agent 平台横评：ZeroClaw vs OpenClaw vs Nanobot05Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services06AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南07Clawdbot部署教程：解决‘gateway token missing’授权问题的完整步骤08Window 10部署openclaw报错node.exe : npm error code 12809OpenClaw + 飞书（Feishu）环境搭建指南10本地部署 OpenClaw + DeepSeek-R1 完全指南