CSS简单介绍

已于 2024-02-23 22:18:10 修改
阅读量1.4k 收藏 43
点赞数 24
文章标签： css 前端
于 2024-01-25 11:25:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/OIFHOIS/article/details/135719404
版权

CSS

文章目录

CSS简介

什么是CSS

  • 是一种样式设置的规则，用于控制页面的外观样式

为什么使用CSS

  1. 实现内容与样式的分离，便于团队开发

  2. 样式复用，便于网站的后期维护

  3. 页面的精确控制，让页面更精美

CSS作用

  1. 页面外观美观
  2. 布局和定位

基本用法

CSS语法

<head>
    <style>
        选择器{
            属性名：属性值；
            属性名：属性值；
        }
    </style>
</head>
  • 选择器：要修饰的对象
  • 属性名：修饰对象的那一个属性
  • 属性值：样式的取值

举例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS从入门到精通</title>
    <style>
      p {
        color: blue;
      }
      h2 {
        color: wheat;
      }
    </style>
  </head>
  <body>
    <p>CSS从入门到精通</p>
    <h2>主讲师：某某某</h2>
  </body>
</html>

表现形式如下：

在这里插入图片描述

CSS应用方式

也称为CSS的引用方式，有三种方式：内部样式、行内样式、外部样式

  1. 内部样式：

    • 也称为内部嵌入样式，在页面头部通过style定义

    • 对当前页面中所有符合样式选择器的标签都起作用

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS从入门到精通</title>
    <style>
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>CSS从入门到精通</p>
  </body>
</html>

  2. 行内样式

    • 也称为嵌入样式，使用HTML标签的style属性定义

    • 只对设置style属性的标签起作用

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p style="color: red">从入门到精通</p>
  </body>
</html>

    1. 外部样式

      使用单独的**.CSS文件定义，然后在页面中使用link标签或@import指令**引入

      • 使用**link标签**链接外部样式文件

        <link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

        提示：type属性可以省略

      • **@import**指令导入外部样式文件

        <style>
	@import "CSS样式文件路径";
    或
    @import url(CSS样式文件路径);
</style>

选择器

基础选择器

标签选择器

  • 也称为元素选择器，使用HTML标签作为选择器的名称

  • 以标签名作为样式应用的依据

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标签选择器</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>从入门到精通</p>
  </body>
</html>

表现形式如下：

在这里插入图片描述

类选择器

使用自定义的名称，以.号作为前缀，然后再通过HTML标签的class属性调用类选择器

以标签的class属性作为样式应用的依据

注意事项：

  • 调用时不能添加 . 号
  • 类选择器名称不能以数字开头
  • 一个HTML元素也可以应用多个class类，设置多个样式，此时多个类名之间需要用空格隔开

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>类选择器</title>
    <style>
      .true {
        color: red;
      }
    </style>
  </head>
  <body>
    <p class="true false">从入门到精通</p>
    <p class="false">从入门到入坟</p>
  </body>
</html>

表现形式如下：

在这里插入图片描述

ID选择器
  • 使用自定义名称，以#作为前缀，然后通过HTML标签的id属性进行名称匹配
  • 以标签的id属性作为样式应用的依据，一对一的关系

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ID选择器</title>
    <style>
      #haha {
        color: red;
      }
    </style>
  </head>
  <body>
    <p id="haha">从入门到精通</p>
  </body>
</html>

表现形式如下：

在这里插入图片描述

复杂选择器

复合选择器
  • 标签选择器和类选择器、标签选择器和ID选择器，一起使用
  • 必须同时满足两个条件才能应用样式

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>复合选择器</title>
    <style>
      p.haha {
        color: blue;
      }
      p.ha {
        color: antiquewhite;
      }
      h4#woxi {
        color: purple;
      }
      h4#wo {
        color: aquamarine;
      }
    </style>
  </head>
  <body>
    <p class="haha">从入门到精通</p>
    <p class="ha">从入门到精通</p>
    <h4 id="woxi">从入门到入坟</h4>
    <h4 id="wo">从入门到入坟</h4>
  </body>
</html>

表现形式如下：

在这里插入图片描述

组合选择器
  • 也称为集体声明
  • 将多个具有相同样式的选择器放在一起声明，使用逗号隔开

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组合选择器</title>
    <style>
      p,h4 {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>从入门到入土</p>
    <h4>从入门到精通</h4>
  </body>
</html>

表现形式如下：

在这里插入图片描述

嵌套选择器
  • 在某个选择器内部再设置选择器，通过空格隔开
  • 只有满足层次关系最里层的选择器所对应的标签才会应用样式
  • 使用空格时不区分父子还是后代，使用CSS3新增的>时必须是父子关系才行

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>嵌套选择器</title>
    <style>
      div p {
        color: red;
      }
      div > p {
        font-size: 5cap;
      }
    </style>
  </head>
  <body>
    <div>
      <p>从入门到精通</p>
      <ul>
        <li>
          <p>从入门到入土</p>
        </li>
      </ul>
    </div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

伪选择器

伪类选择器

根据不同的状态显示不同的样式，一般多用于超链接标签，普通的标签也可以使用伪类选择器

四种状态：

  • :link 未访问的链接
  • :visited 已访问的链接
  • :hover 鼠标悬浮到链接上，即移动在链接上（普通标签也可）
  • :active 选定的链接被激活，即点击在链接上（普通标签也可）

**注：**默认超链接为：蓝色、下划线

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪类选择器</title>
    <style>
      a:link {
        font-size: 12px;
        color: black;
        text-decoration: none;
      }
      a:visited {
        font-size: 15px;
        color: red;
      }
      a:hover {
        font-size: 20px;
        color: blue;
      }
      a:active {
        font-size: 40px;
        color: green;
      }
      p:hover {
        color: red;
      }
      p:active {
        color: blue;
      }
    </style>
  </head>
  <body>
    <a href="阿尼亚跳转.html" target="_blank">阿尼亚</a>
    <p>CSS从入门到精通</p>
  </body>
</html>

表现形式如下：

在这里插入图片描述

伪元素选择器

四种状态：

  • ::first-letter 为第一个字符的样式
  • ::first-line 为第一行添加样式
  • ::before 在元素内容的最前面添加的内容，需要配合content属性使用
  • ::after 在元素内容的最后面添加的内容，需要配合content属性使用

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪元素选择器</title>
    <style>
      p::first-letter {
        font-size: 20px;
        color: red;
      }
      p::first-line {
        background: pink;
      }
      p::after {
        content: "嘿嘿";
      }
      p::before {
        content: "哈哈";
      }
    </style>
  </head>
  <body>
    <p>
      Hellow Word
      <br />
      Welcome to CSS
    </p>
  </body>
</html>

表现形式如下：在这里插入图片描述—

其它选择器
其它选择器
:focus（焦点选择）

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      input {
        width: 100px;
        transition: all 2s;
      }
      input:focus {
        width: 500px;
      }
    </style>
  </head>
  <body>
    <input type="text" />
  </body>
</html>
:XXX-child（其父元素的子元素）
  • :first-child：其父元素的第一个子元素
  • :nth-child(n)：其父元素的第N个子元素
  • :last-child：其父元素的最后一个子元素

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>XXX_child</title>
  <style>
    li:first-child {
      color: red;
    }

    li:nth-child(3) {
      color: green;
    }

    li:last-child {
      color: blue;
    }
  </style>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</body>

</html>

结果如下：
在这里插入图片描述

::placeholder（占位文本）

::placeholder选择器允许自定义占位文本的样式，可用字体和背景属性的CSS属性修改

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>::placeholder</title>
    <style>
      ::placeholder {
        color: aqua;
        font-size: 15px;
        background: blue;
      }
    </style>
  </head>
  <body>
    <form action="">
      <input type="text" placeholder="姓名" />
    </form>
  </body>
</html>

表现形式如下：

在这里插入图片描述

属性选择器

属性选择器是通过元素的属性及属性值来选择元素的

用法：

  • [属性名]{}：选择含有指定属性的元素
  • [属性名=属性值]{}：选择含有指定属性及指定属性值的元素
  • [属性名^=属性值]{}：选择含有指定属性及指定属性值开头的元素
  • [属性值$=属性值]{}：选择含有指定属性及指定属性值结尾的元素
  • [属性值*=属性值]{}：选择含有指定属性，只要含有某个属性值的元素

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>属性选择器</title>
    <style>
      [title] {
        color: red;
      }
      [title="a"] {
        font-size: 60px;
      }
      [title^="a"] {
        background: pink;
      }
      [title$="c"] {
        font-size: 10px;
      }
      [title*="b"] {
        border: 5px solid black;
      }
    </style>
  </head>
  <body>
    <h1 title="a">《出塞》</h1>
    <h2 title="ab">唐·王昌龄</h2>
    <p title="abc">秦时明月汉时关，</p>
    <p title="abab">万里长征人未还。</p>
    <p title="c">但使龙城飞将在，</p>
    <p>不教胡马度阴山。</p>
  </body>
</html>

结果如下：

在这里插入图片描述

选择器优先级

优先级

行内样式>ID选择器>类选择器>标签选择器

原因：

首先加载标签选择器，再加载类选择器，然后加载ID选择器，最后加载行内样式

后加载会覆盖先加载的同名样式

内外部样式加载顺序

就近原则

**原因：**按照书写顺序依次加载，在同等优先级的前提下，后加载的会覆盖先加载的同名样式，所以离得越近越优先

!important

可以使用!important使某个样式有最高的优先级

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选择器优先级</title>
    <style>
      div {
        font-size: 20px;
      }
      .hello {
        font-weight: bold;
        color: blue;
      }
      #world {
        text-decoration: underline;
        color: green;
      }
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="hello" id="world" style="color: #ff7300">CSS从入门到精通</div>
    <p>主讲：永琪</p>
  </body>
</html>

表现形式如下：

在这里插入图片描述

CSS属性

字体属性

属性含义
font-size大小、尺寸
font-weight粗细
font-family字体
font-style样式
font简写
font-size（大小）
取值说明
inherited继承，默认从父标签继承字体大小（默认值），所有CSS属性的默认值
px像素，pixel
%百分比，相对于父标签字体大小的百分比
em倍数，相对于父标签字体大小的倍数

HTML根元素默认字体的大小为16px，也称为基础字体大小

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>font-size</title>
  </head>
  <body>
    <div style="font-size: 10px">
      <p style="font-size: inherit">继承10px</p>
      <p style="font-size: 20px">20px</p>
      <p style="font-size: 200%">200%</p>
      <p style="font-size: 3em">三倍</p>
    </div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

font-weight（粗细）
属性说明
normal普通（默认）
bold粗体
自定义400为普通，700为粗体

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>font-weight</title>
  </head>
  <body>
    <p style="font-weight: normal">普通</p>
    <p style="font-weight: bold">粗体</p>
    <p style="font-weight: 500">自定义500</p>
  </body>
</html>

表现形式如下：

在这里插入图片描述

font-family（字体）

要求系统中要安装指定的字体

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>font-family</title>
  </head>
  <body>
    <p style="font-family: 'Courier New', Courier, monospace;">普通</p>
    <p style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">粗体</p>
    <p style="font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">自定义500</p>
  </body>
</html>

表现形式如下：

在这里插入图片描述

font-style（样式）
属性说明
normal普通
italic斜体

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>font-style</title>
  </head>
  <body>
    <p style="font-style: normal">普通</p>
    <p style="font-style: italic">斜体</p>
  </body>
</html>

表现形式如下：

在这里插入图片描述

font（简写）

简写属性：

font：font-style|font-weight|font-size|font-family

必须按以上顺序书写

代码实现入下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>font</title>
  </head>
  <body>
    <p style="font: italic bold 20px 微软雅黑">简写属性</p>
    <p style="font: italic 20px bold 微软雅黑">不按顺序</p>
  </body>
</html>

表现形式如下：

在这里插入图片描述

文本属性

属性含义说明
color颜色
line-height行高行之间的高度
text-align水平对齐方式取值：left、center、right
vertical-align垂直对齐方式取值：top、middle、bottom可以用于图片和文字的对齐方式
text-indent首行缩进
text-decoration文本修饰取值：underline、overline、line-through
text-transform字母大小写转换取值：lowercase、uppercase
letter-spacing字符间距
word-spacing单词间距只对英文有效
white-space空白的处理方式文本超出后是否换行，取值：nowrap
color（颜色）

写法：

  1. 英文单词：例如 red

  2. 16进制的RGB：#RRGGBB

    （特定情况可以缩写，例如#FFFFFF—>#FFF 白色）不区分大小写

  3. rgb函数：rgb(red,green,blue)每种颜色的取值范围，[0,255]

    例如：rgb(255,0,0)—>红色

  4. rgba函数：rgba(red,green,blue,alpha)

    可以设置透明度，alpha的取值范围：[0,1] 0表示完全透明，1表示完全不透明

    例如：rgba(255,0,0,0.5)—>半透明红色

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>color</title>
  </head>
  <body>
    <p style="color: red">英文单词</p>
    <p style="color: #ff0">16进制RGB</p>
    <p style="color: rgb(100, 21, 32)">rgb函数</p>
    <p style="color: rgba(100, 21, 32, 0.5)">rgba函数</p>
  </body>
</html>

表现形式如下：

在这里插入图片描述

line-height（行高）
属性说明
normal默认
inherit继承父类
px像素
em倍数
%百分比

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>line-height</title>
  </head>
  <body>
    <p>行高</p>
    <p style="line-height: 50px">行高</p>
  </body>
</html>

表现形式如下:

在这里插入图片描述

text-align（水平对齐）
  • left：左对齐
  • center：居中对齐
  • right：右对齐

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>text-align</title>
  </head>
  <body>
    <div style="background-color: pink; height: 100px; width: 400px">
      <p style="text-align: left">左对齐</p>
      <p style="text-align: center">居中</p>
      <p style="text-align: right">右对齐</p>
    </div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

vertical-align（垂直对齐）
  • top：顶部对齐
  • middle：中线对齐
  • baseine：基线对齐
  • bottom：底部对齐

可用于图片和文字的对齐方式

**注：**默认方式是基线对齐，对齐目标不是彼此，而是文本

代码实现入下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vertical-align</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        font-size: 1.5rem;
      }
      img {
        vertical-align: middle;
      }
      div {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color: pink;
      }
      span {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <span>xxxx</span>
    <img src="/图像/动漫/阿尼亚01.webp" alt="" width="50px" height="50px" />
    <div></div>
  </body>
</html>

表现形式如下：
在这里插入图片描述

text-indent（首行缩进）

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>text-indent</title>
    <style></style>
  </head>
  <body>
    <p style="text-indent: 30px">djaslkdjklasjdlkashjnl</p>
  </body>
</html>

表现形式如下：

在这里插入图片描述

text-decoration（文本修饰）
  • underline：下划线
  • overline：上划线
  • line-through：删除线

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>text-decoration</title>
    <style></style>
  </head>
  <body>
    <p style="text-decoration: underline">下划线</p>
    <p style="text-decoration: overline">上划线</p>
    <p style="text-decoration: line-through">删除线</p>
  </body>
</html>

表现形式如下：

在这里插入图片描述

text-transform（大小写转换）
  • lowercase：小写转换
  • uppercase：大写转换

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>text-transform</title>
    <style></style>
  </head>
  <body>
    <p style="text-transform: lowercase">XIAOXIE</p>
    <p style="text-transform: uppercase">daxie</p>
  </body>
</html>

表现形式如下：

在这里插入图片描述

letter-spacing（字符间距）

**注：**每个字符之间无差别控制间距

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>letter-spacing</title>
    <style></style>
  </head>
  <body>
    <p style="letter-spacing: 15px">XIAOXIE</p>
    <p style="letter-spacing: 15px">从入门到精通</p>
  </body>
</html>

表现形式入下：

在这里插入图片描述

word-spacing（单词间距）

**注：**只对英文字母有效（其为主动空格间隔设置）（对中文有效）

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>word-spacing</title>
    <style></style>
  </head>
  <body>
    <p style="word-spacing: 15px">hello wor d</p>
    <p style="word-spacing: 15px">从入 门 到精通</p>
  </body>
</html>

表现形式入下：

在这里插入图片描述

white-space（空白处理）
  • nowrap：合并空格，不换行
  • pre：保留空格，不换行，换行只认标签和源码中的换行
  • pre-wrap：保留空格，换行

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>white-space</title>
    <style>
      .wscont {
        margin: 12px;
        padding: 12px;
        width: 300px;
        background: #f1f1f1;
        border: 1px solid #bababa;
        line-height: 32px;
        font-size: 15px;
        font-family: "微软雅黑";
        /* white-space: nowrap; */
      }
      .white {
        white-space: nowrap;
      }
      .pre {
        white-space: pre;
      }
      .prewrap {
        white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <div class="wscont">
      挥洒来开发环境等会拉开始减肥拉设计费凉快哪里看出VNK垃圾啊
    </div>
    <div class="wscont white">
      挥洒来开发环境等会拉开始减肥拉设计费凉快哪里看出VNK垃 圾啊奥术大师大所多
    </div>
    <div class="wscont pre">
      前面也空格了哦,傳前至家法入到飛成子能體點有自習且著就力子麼馬在體對
      前面也空格了哦,家公看成久各食等海灣整似,这里也有空格哦
      <br />安外年地夫色他熱的一幾於們等急且用而四，家公看成久各食等海灣整似。
    </div>
    <div class="wscont prewrap">
      前面也空格了哦,傳前至家法入到飛成子能體點有自習且著就力子麼馬在體對唱老要一
      <br />安外年地夫色他熱的一幾於們等急且用而四，家公看成久各食等海灣整似。
    </div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

背景属性

属性含义
background-color背景颜色
background-image背景图片
background-repeat背景图片的重复方式
background-position背景图片的显示位置
background-attachment背景图片是否跟随滚动
background简写
background-color（背景颜色）

默认值：transparent：透明无色

实现代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>background-color</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: saddlebrown;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

background-image（图片背景）
  • 必须使用**url()**方式指定图片的路径
  • 如果是在CSS样式文件中使用相对路径，此时是相对于CSS文件，而不是相对于HTML文件

实现代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>background-image</title>
    <style>
      div {
        width: 640px;
        height: 799px;
        background-image: url(/图像/风景/风景照01.jpg);
      }
      p {
        text-align: center;
        font-size: 20px;
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>这是一张风景照</p>
    </div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

background-repeat（背景重复）
  • repeat：重复（默认）
  • repeat-x：只在X轴重复
  • repeat-y：只在Y轴重复
  • no-repeat：不重复

实现代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>background-repeat</title>
    <style>
      div {
        width: 362px;
        height: 482px;
        background-image: url(/图像/动漫/阿尼亚01\(小\).PNG);
        display: inline-block;
        background-color: pink;
      }
      .x {
        background-repeat: repeat-x;
      }
      .y {
        background-repeat: repeat-y;
      }
      .no {
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div class="x"></div>
    <div class="y"></div>
    <div class="no"></div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

background-position（背景显示）
  • 默认左上角
  • top（顶部）、bottom（底部）、left（左边）、right（右边）、center（居中）
  • **坐标：**左上角为(0,0)坐标，向右为X正方向，向下为Y轴正方向，**记得加单位，格式为：**background-positon: 0px 0px;
  • background-position-x和background-position-y控制只在X轴或Y轴移动

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>background-position</title>
    <style>
      div {
        width: 362px;
        height: 482px;
        background-image: url(/图像/动漫/阿尼亚01\(小\).PNG);
        display: inline-block;
        background-color: pink;
        background-repeat: no-repeat;
      }
      .c {
        background-position: center;
      }
      .lc {
        background-position-x: center;
      }
      .zb {
        background-position: 200px 0;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div class="c"></div>
    <div class="lc"></div>
    <div class="zb"></div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

background-size（背景尺寸）

格式：background-size:<bg-size>[ <bg-size>]

取值：

  • auto：背景图像的真实大小，默认值
  • <length>：用长度值指定背景图像大小
  • <percentage>：用百分比指定背景图像大小
  • cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器
  • contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>background-size</title>
    <style>
      div {
        width: 300px;
        height: 500px;
        background: pink url(/媒体/图像/动漫/间谍过家家/阿尼亚01小.PNG)
          no-repeat top center;
        display: inline-block;
      }

      .z {
        background-size: 100px 200px;
      }
      .x {
        background-size: 50% 20%;
      }
      .y {
        background-image: url(/媒体/图像/动漫/间谍过家家/阿尼亚01.png);
        background-size: cover;
      }
      .no {
        background-image: url(/媒体/图像/动漫/间谍过家家/阿尼亚01.png);
        background-size: contain;
      }
    </style>
  </head>
  <body>
    <div class="z"></div>
    <div class="x"></div>
    <div class="y"></div>
    <div class="no"></div>
  </body>
</html>

结果如下：

在这里插入图片描述

background-attachment（背景滚动）
  • scroll：背景图片随着页面的滚动而滚动，（默认）
  • fixed：固定不动，背景图片不会随着页面的滚动而滚动，此时父类是整个页面
  • local：背景图片会随着元素的内容滚动而滚动

代码实现如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>cssDemo2</title>
    <style>
      .t {
        height: 200px;
        overflow-y: auto;
        background-color: antiquewhite;
        background-image: url("/图像/动漫/阿尼亚01.webp");
        background-repeat: no-repeat;
        background-position: right top;
        background-size: 163px 150px;
      }
      .one {
        background-attachment: fixed;
      }
      .two {
        background-attachment: scroll;
      }
      .three {
        background-attachment: local;
      }
      .kg {
        height: 1000px;
      }
    </style>
  </head>
  <body>
    <div class="t one">
      <h1>Hello World!</h1>
      <p>背景图片不重复，设置 position 实例。</p>
      <p>背景图片只显示一次，并与文本分开。</p>
      <p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
      <p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
      <p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
      <p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
    </div>
    <div class="t two">
      <h1>Hello World!</h1>
      <p>背景图片不重复，设置 position 实例。</p>
      <p>背景图片只显示一次，并与文本分开。</p>
      <p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
      <p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
      <p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
      <p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
    </div>
    <div class="t three">
      <h1>Hello World!</h1>
      <p>背景图片不重复，设置 position 实例。</p>
      <p>背景图片只显示一次，并与文本分开。</p>
      <p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
      <p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
      <p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
      <p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
    </div>
    <div class="kg" style="background-color: white"></div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

结论：

属性名滚动内容所在元素的滚动条滚动页面滚动条描述
scroll背景图片不滚动背景图片滚动
fixed背景图片不滚动背景图片不滚动此时背景图片贴着窗口
local背景图片滚动背景图片滚动
background（简写）

简写属性：

background：background-color|background-image|background-repeat|background-position / background-size

以空格隔开，没有书写顺序

实现代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>background</title>
    <style>
      div {
        width: 500px;
        height: 500px;
        background: pink url(/图像/动漫/阿尼亚01\(小\).PNG) no-repeat top / contain;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

列表属性

属性含义
list-style-type设置列表前的标记
list-style-image将图像作为列表前的标记
list-style-position设置标记的位置
list-style简写
list-style-type（设置标记）
属性值描述属性值描述
none不使用项目符号lower-alpha小写英文字母
disc实心圆upper-alpha大写英文字母
circle空心圆lower-roman小写的罗马数字
square实心方块upper-roman大写的罗马数字
decimal数字decimal-leading-zero0开头的数字

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>list-style-type</title>
  </head>
  <style>
    ul {
      list-style-type: upper-roman;
    }
  </style>
  <body>
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>芒果</li>
    </ul>
  </body>
</html>

表现形式如下：

在这里插入图片描述

list-style-image（图像标记）

该属性能将各列表的项目符号设置成个性化的图像

格式：

list-style-image:url(图像路径);

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>list-style-image</title>
  </head>
  <style>
    ul {
      list-style-image: url(/图像/小图标/眼睛.PNG);
    }
  </style>
  <body>
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>芒果</li>
    </ul>
  </body>
</html>

表现形式如下：

在这里插入图片描述

list-style-position（标记位置）
  • outside：（默认）列表项目标记放置在文本以外
  • inside：列表项目标记放置在文本以内

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>list-style-image</title>
  </head>
  <style>
    .position {
      list-style-position: inside;
    }
    li {
      border: 2px solid blue;
      /*设置每个li的表框*/
    }
  </style>
  <body>
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>芒果</li>
    </ul>
    <ul class="position">
      <li>苹果</li>
      <li>香蕉</li>
      <li>芒果</li>
    </ul>
  </body>
</html>

表现形式入下：

在这里插入图片描述

list-style（简写）

简写属性：

list-style：list-style-type|list-style-image|list-style-position

书写没有顺序

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>list-style</title>
    <style>
      ul {
        list-style: circle url(/图像/小图标/眼睛.PNG) inside;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>芒果</li>
    </ul>
  </body>
</html>

表现形式如下：

在这里插入图片描述

边框属性

属性含义
border-width设置边框宽度
border-style设置边框样式
border-color设置边框颜色
border简写
border-collapse合并边框
border-radius圆角边框

遵循上、右、下、左的顺序

border-width（边框宽度）
border-width含义
10px四条边都为10像素
10px 5px上下为10像素，左右为5像素
10px 5px 7px上为10像素，左右为5像素，下为7像素
10px 5px 7px 3px上为10像素，右为5像素，下为7像素，左为3像素

样式、颜色也遵循这种规律

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>border-width</title>
    <style>
      table {
        border-width: 10px 5px 7px 3px;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
      </tr>
    </table>
  </body>
</html>

表现形式如下：

在这里插入图片描述

border-style（边框样式）
属性说明
none无边框
dotted虚线边框
dashed虚线边框（粗）
solid实线边框
double双边框
groove凹槽边框
ridge垄状边框
inset嵌入边框
outset外凸边框
hidden隐藏边框

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>border-style</title>
    <style>
      p.none {
        border-style: none;
      }
      p.dotted {
        border-style: dotted;
      }
      p.dashed {
        border-style: dashed;
      }
      p.solid {
        border-style: solid;
      }
      p.double {
        border-style: double;
      }
      p.groove {
        border-style: groove;
      }
      p.ridge {
        border-style: ridge;
      }
      p.inset {
        border-style: inset;
      }
      p.outset {
        border-style: outset;
      }
      p.hidden {
        border-style: hidden;
      }
      p.mix {
        border-style: dotted dashed solid double;
      }
    </style>
  </head>
  <body>
    <p class="none">无边框。</p>
    <p class="dotted">虚线边框。</p>
    <p class="dashed">虚线边框。</p>
    <p class="solid">实线边框。</p>
    <p class="double">双边框。</p>
    <p class="groove">凹槽边框。</p>
    <p class="ridge">垄状边框。</p>
    <p class="inset">嵌入边框。</p>
    <p class="outset">外凸边框。</p>
    <p class="hidden">隐藏边框。</p>
    <p class="mix">混合边框</p>
  </body>
</html>

表现形式如下：

在这里插入图片描述

border-colore（边框颜色）

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>border-style</title>
    <style>
      .blue {
        border-style: solid;
        border-color: blue;
      }
      .color {
        border-style: solid;
        border-color: red green blue pink;
      }
    </style>
  </head>
  <body>
    <p class="blue">蓝色边框</p>
    <p class="color">彩色边框</p>
  </body>
</html>

表现形式如下：

在这里插入图片描述

border（简写）

简写属性：

border：border-width|border-style|border-colore

书写没有顺序

可以分为border-top、border-right、border-bottom、border-left四个方向来分别设置

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>border</title>
    <style>
      p {
        display: inline;
        border-top: 10px dotted greenyellow;
        border-right: 5px solid red;
        border-bottom: 7px double pink;
        border-left: 6px groove palevioletred;
      }
    </style>
  </head>
  <body>
    <p>边框</p>
  </body>
</html>

表现形式如下：

在这里插入图片描述

border-collapse（合并边框）

表格中相邻的边框是否合并（折叠）为单一边框

  • separated：不合并，（默认）
  • collapse：合并

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>border-collapse</title>
    <style>
      table {
        width: 500px;
        border: 1px solid blue;
        border-collapse: collapse;
      }
      td {
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>水果</td>
        <td>蔬菜</td>
        <td>肉</td>
      </tr>
    </table>
  </body>
</html>

表现形式入下：

在这里插入图片描述

border-radius（圆角边框）

为元素添加圆角边框

格式：

border-radius：10px 20px 30px 40px/40px 30px 20px 10px

（ / 的前四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径）

水平半径和垂直半径表示如下：

在这里插入图片描述

简写表示：

border-radius简写border-radius扩写
10px10px 10px 10px 10px / 10px 10px 10px 10px
10px / 20px10px 10px 10px 10px / 20px 20px 20px 20px
10px 15px / 20px 25px10px 15px 10px 15px / 20px 25px 20px 25px
10px 15px10px 15px 10px 15px / 10px 15px 10px 15px
10px 15px 20px10px 15px 20px 15px / 10px 15px 20px 15px

属性值：

  • px：半径值是设置的像素值

  • %：以元素的宽高乘以百分数后得到值r1和r2，进行绘制

    例如：

    div {
    width: 200px;
    height: 100px;
    border-radius: 50%;
}

    则其等同于border-radius：100px/50px;

    代码实现如下：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>圆角边框</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: plum;
        border-radius: 10px 20px 30px 40px/40px 30px 20px 10px;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

    表现形式如下：

    在这里插入图片描述

盒子模型

简介

盒子模型是网页布局的基础，将页面中的所有元素都看作是一个盒子，盒子都包含以下几个属性：

  • width：宽度
  • height：高度
  • border：边框
  • padding：内边距
  • margin：外边距
padding（内边距）

内边距的增加不会占据元素内部位置，所以会将整个元素"撑大"

所以盒子大小：内容的宽度和高度+内边距+边框

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>padding</title>
    <style>
      .wai {
        width: 100px;
        height: 100px;
        background: chartreuse;
        padding: 25px;
      }
      .nei {
        width: 50px;
        height: 50px;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div class="wai">
      <div class="nei"></div>
    </div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

margin（外边距）
居中对齐
/* 元素的水平居中 */ 
/* 1.块级元素的水平居中 */ 
	margin:0 auto; 
/* 提示：块级元素必须指定宽度 */
/* 2.文本的水平居中 */ 
	text-align:center; 
/* 3.文本垂直居中，将height和line-height设置为相同 */ 
	height:100px; 
	line-height:100px;

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>marginANDtext_center</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: rgb(206, 126, 139);
      }
      .nei {
        width: 50px;
        height: 50px;
        background: greenyellow;
        margin: auto;
        text-align: center;
        line-height: 50px;
      }
    </style>
  </head>
  <body>
    <div class="wai">
      <div class="nei">居中</div>
    </div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

外边距合并

也称外边距的折叠，指的是两个块级元素垂直外边距相遇时，它们将合并为一个外边距，合并后的外边距值为其中较大的那个外边距值

情况：

  • 当一个元素出现在另一个元素上面时，第一个元素的下边距与第二个元素的上边距发生合并
  • 当一个元素包含在另一个元素中时，并且没有内边距或边框把外边距分隔开时，两个元素的上边距会发生合并

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>margin_collapse</title>
    <style>
      .div1 {
        width: 50px;
        height: 50px;
        border: 5px solid black;
        margin: 10px;
      }
      .div2 {
        width: 50px;
        height: 50px;
        background: blue;
        margin-top: 20px;
      }
      .div3 {
        width: 25px;
        height: 25px;
        background: pink;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="div1"></div>
    <div class="div1"></div>
    <hr />
    <div class="div2">
      <div class="div3"></div>
    </div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

box-sizing（盒子尺寸）
属性值说明
content-box盒子的长宽不计算边和内边距（chrome浏览器默认）
border-box盒子的长宽计算边和内边距（IE浏览器默认）
inheritinherit 关键字指定一个属性应从父元素继承它的值

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lanye" />
    <meta name="description" content="HTML CSS JavaScript" />
    <meta name="generator" content="" />
    <meta name="keywords" content="HTML, CSS, JavaScript" />
    <title>box-sizing</title>
    <style>
      /*content-box的width和height从content算起，不包含border和padding*/
      .chrome {
        width: 100px;
        height: 100px;
        background-color: green;
        border: 5px solid black;
        padding: 5px;
        box-sizing: content-box;
      }

      /*border-box的width和height从border算起,包含border和padding*/
      .ie {
        border: 5px solid black;
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        background-color: red;
        padding: 5px;
        bottom: 110px;
        left: 10px;
      }
    </style>
  </head>

  <body>
    <div class="chrome"></div>
    <div class="ie"></div>
  </body>
</html>

结果如下：

在这里插入图片描述

定位方式

position：实现对元素的定位，有四种定位方式

取值含义说明
static默认值按照常规文档流进行显示
relative相对定位相对于标签原来的位置进行的定位
absolute绝对定位相对于第一个非static定位的父标签的定位
fixed固定定位相对于浏览器窗口进行定位

设定定位后，还要设置定位属性（偏移量）：top、bottom、left、right

relative（相对定位）

先设置元素的position属性为relative，然后再设置偏移量

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>position_relative</title>
    <style>
      .w {
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
      }
      .n {
        width: 10px;
        height: 10px;
        background-color: aqua;
        position: relative;
        top: 90px;
        left: 45px;
      }
    </style>
  </head>
  <body>
    <div class="w">
      <div class="n"></div>
    </div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

absolute（绝对定位）

先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置偏移量

注意：

  • 一般来说都会将父标签设置为非static定位
  • 如果父标签不是为static定位，则会相对于浏览器窗口进行定位
  • 设置元素为绝对定位后，元素会浮到页面上方

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>position_absolute</title>
    <style>
      .w {
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
        position: relative;
      }
      .n {
        width: 10px;
        height: 10px;
        background-color: aqua;
        position: absolute;
        top: 100px;
        left: 45px;
      }
    </style>
  </head>
  <body>
    <div class="w">
      <div class="n"></div>
    </div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

fixed（固定定位）

先设置元素的position属性为fixed，然后再设置偏移量

设置元素为固定定位后，元素会浮动在页面上方

实现代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>position_fixed</title>
    <style>
      div {
        width: 10px;
        height: 10px;
        background-color: aqua;
        position: fixed;
        top: 0;
        left: 50px;
      }
    </style>
  </head>
  <body>
     <img src="/图像/动漫/阿尼亚01.webp" alt="" />
    <div></div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

z-index（优先级）

设置元素定位方式后，元素会浮在页面上方，此时可以通过z-index属性设置优先级，控制元素的堆叠顺序

取值为数字，值越大优先级越高，默认为auto

**注：**只能给非static定位的元素设置z-index属性

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>z-index</title>
    <style>
      div {
        width: 100px;
        height: 50px;
      }
      .div1 {
        background-color: aqua;
        position: absolute;
        top: 0px;
        left: 100px;
        z-index: 100;
      }
      .div2 {
        background-color: bisque;
        position: absolute;
        top: 25px;
        left: 50px;
        z-index: 200;
      }
      .div3 {
        background-color: blueviolet;
        position: absolute;
        top: 50px;
        left: 0px;
        z-index: 0;
      }
    </style>
  </head>
  <body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

过渡属性

  • transition：过渡
  • transform 2D动画效果
  • transform 3D动画效果
  • transform-style：是否开启3D效果呈现
transition（过渡）
属性说明
transition-property用于指定要参与过渡的属性名称
transition-duration用于指定过渡的持续时间
transition-delay用于指定过渡的延迟等待时间
tranition-timing-function用于指定过渡的类型
trantion简写
transition-property（过渡属性）

用于指定要参与过渡的属性名称

  • none：表示没有属性参与过渡效果
  • all：表示所有属性都参与过渡效果
  • 自定义：自定义过渡属性，多个属性之间用逗号分隔开

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tranition-property</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        transition-property: width, height;
      }
      div:hover {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
transition-duration（过渡时间）

用来设置过渡需要花费的时间（单位为秒或者毫秒）

如果有多个属性过渡，也可以依次为这些属性设置过渡时间，多个属性之间使用逗号分隔开

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tranition-duration</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        transition-property: width, height;
        transition-duration: 1s, 0.7s;
      }
      div:hover {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
transition-delay（延迟等待）

用来设置过渡效果何时开始，单位是秒或毫秒

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>transition-delay</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: white;
        transition-property: width, background-color;
        transition-duration: 1s, 0.7s;
        transition-delay: 3s;
      }
      div:hover {
        width: 300px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
tranition-timing-function（过渡类型）
取值说明
linear匀速
ease先加速后减速
ease-in加速
ease-out减速
ease-in-out先加速后减速（较ease速度变化更明显）
cubic-bezier(n, n, n, n)使用 cubic-bezier() 函数来定义自己的值，每个参数的取值范围在 0 到 1 之间

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tranition-timing-function</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: white;
        transition-property: width, background-color;
        transition-duration: 1s, 0.7s;
        transition-delay: 1s;
        transition-timing-function: ease-in-out;
      }
      div:hover {
        width: 300px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
transition（简写）

transition： transition-property|transition-duration|transition-timing-function|transition-delay;

其中过渡属性和过渡时间为必填参数，过渡样式和延迟等待为选填参数，如非必要可以省略不写。另外，通过 transition 属性也可以设置多组过渡效果，每组之间使用逗号进行分隔

按顺序写

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tranition</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: white;
        transition: widht 0.7s linear, background-color 1.2s ease-in 0.6s;
      }
      div:hover {
        width: 300px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
transform 2D动画效果
  • transform-origin：基点
  • transform：translate：平移效果
  • transform：rotate：旋转效果
  • transform：scale：缩放效果
transform-origin（基点）

基点就是位移或者旋转等变形围绕的中心，默认都是中心点

格式：transform-origin:X轴 Y轴;

取值可为left,right,center,top,bottom，也可为像素值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>transform-origin</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background: pink;
        margin: 100px auto;
        transition: all 2s linear;
      }
      div:hover {
        transform: rotate(90deg);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

transform:translate（平移）

平移可分为以下几种：

  • transform：translateX：沿水平方向平移
  • transform：translateY：沿垂直方向平移
  • transform：translateZ：沿Z轴平移，不加透视看不出效果（主要应用于3D动画效果）
  • transform：translate（x，y，z）：自定义方向（注意中间逗号分隔）

参数是正数则方向为 右，下，大，负数则相反

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>transform:translate</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background: pink;
        transition: all 2s linear;
      }
      div:hover {
        transform: translate(200px, 200px);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

transform:rotate（旋转）

旋转的角度单位为 deg，要旋转360度即为 360deg

旋转可分为以下三种

  • transform：rotateX：以X为轴旋转（为3D动画）
  • transform：rotateY：以Y为轴旋转（为3D动画）
  • transform：rotateZ：以Z为轴旋转，2D平面旋转，可以设置基点

此处只讲述以Z为轴旋转的2D平面旋转

参数为正则为顺时针（Z轴）或向内（X轴）或向右（Y轴）翻转，负数则相反

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>transform:rotateZ</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background: pink;
        transition: all 2s linear;
      }
      div:hover {
        transform: rotateZ(90deg);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

transform:scale（缩放）

不影响其它页面布局的位置

默认基点为中心

放缩默认为围绕中心向外扩大或向内缩小，参数直接填写 要放缩的倍数即可

例如要放缩2倍： transform：scale(2)

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>transform:scale</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background: pink;
        transition: all 2s linear;
      }
      div:hover {
        transform: scale(2);
      }
    </style>
  </head>
  <body>
    <div></div>
    <div style="background-color: blue"></div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

transform 3D动画

3D动画要注意perspective（透视）属性

transform：translate（平移）

transform：translateZ（沿Z轴平移）

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>transform:translateZ</title>
    <style>
      body {
        perspective: 500px;
      }
      div {
        width: 200px;
        height: 200px;
        background: pink;
        transition: all 2s linear;
        margin: 100px auto;
      }
      div:hover {
        transform: translateZ(200px);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

transform：rotate（旋转）
  • transform：rotateX（沿X轴旋转）
  • transform：rotateY（沿Y轴旋转）

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>transform:rotateX</title>
    <style>
      body {
        perspective: 500px;
      }
      div {
        width: 200px;
        height: 200px;
        background: pink;
        transition: all 2s linear;
        margin: 100px auto;
        transform-origin: bottom;
      }
      div:hover {
        transform: rotateX(-180deg);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

transform-style（3D效果）
  • flat：默认值，不开启盒子3D效果
  • preserve-3d：开启盒子3D效果

首先，设置一个图形

目标：
在这里插入图片描述

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>transform-style</title>
    <style>
      body {
        perspective: 500px;
      }
      .out {
        width: 200px;
        height: 200px;
        background-color: rgb(229, 171, 171);
        margin: 100px auto;
        perspective: 500px;
      }
      .inner {
        width: 200px;
        height: 200px;
        background-color: rgb(71, 142, 219);
        transform: rotateX(60deg);
      }
    </style>
  </head>
  <body>
    <div class="out">
      <div class="inner"></div>
    </div>
  </body>
</html>

现在不开启3D效果，将整体旋转

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>transform-style</title>
    <style>
      body {
        perspective: 500px;
      }
      .out {
        width: 200px;
        height: 200px;
        background-color: rgb(229, 171, 171);
        margin: 100px auto;
        perspective: 500px;
        transition: all 1s linear;
      }
      .inner {
        width: 200px;
        height: 200px;
        background-color: rgb(71, 142, 219);
        transform: rotateX(60deg);
      }
      .out:hover {
        transform: rotateY(60deg);
      }
    </style>
  </head>
  <body>
    <div class="out">
      <div class="inner"></div>
    </div>
  </body>
</html>

表现形式如下：
在这里插入图片描述

现在开启3D效果

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>transform-style</title>
    <style>
      body {
        perspective: 500px;
      }
      .out {
        width: 200px;
        height: 200px;
        background-color: rgb(229, 171, 171);
        margin: 100px auto;
        perspective: 500px;
        transition: all 1s linear;
        transform-style: preserve-3d;
      }
      .inner {
        width: 200px;
        height: 200px;
        background-color: rgb(71, 142, 219);
        transform: rotateX(60deg);
      }
      .out:hover {
        transform: rotateY(60deg);
      }
    </style>
  </head>
  <body>
    <div class="out">
      <div class="inner"></div>
    </div>
  </body>
</html>

表现形式如下：
在这里插入图片描述

其它CSS

浮动和清除
float（浮动）

通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示

如果一行显示不了，则会换行显示

常用取值：

  • left：左浮动
  • right：右浮动
  • none：不浮动，默认值
clear（清除）

通过clear属性来实现清除，设置元素哪一侧不允许有浮动元素

常用取值：

  • left：左侧不允许出现浮动元素
  • right：右侧不允许出现浮动元素
  • both：两侧不允许出现浮动元素
  • none：允许两侧出现浮动元素，（默认）

结论：

  • 对于非浮动元素，两边都可以设置清除（常用）
  • 对于浮动元素，向哪边浮动，就只能设置哪边的清除

设置float属性后，元素会浮在页面上层，此时父容器无法计算自己尺寸，如果我们还想显示父容器，通常会在末尾添加一个清除了float属性的空的div来解决

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>floatANDclear</title>
    <style>
      #container {
        width: 500px;
        border: 1px solid violet;
      }
      .div1,
      .div2,
      .div3 {
        width: 100px;
        height: 50px;
      }
      .div1 {
        background-color: antiquewhite;
        float: left;
      }
      .div2 {
        background-color: aqua;
        float: left;
      }
      .div3 {
        background-color: aquamarine;
        float: right;
      }
      .clr {
        clear: left;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="div1">div1</div>
      <div class="div2">div2</div>
      <div class="div3">div3</div>
      <div class="clr"></div>
    </div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

显示和隐藏
display

通过display属性设置元素是否显示，以及是否独占一行

常用取值：

取值含义说明
none不显示
inline显示为内联元素，行级元素是的默认值将块状元素变为行级元素，不再独占一行
block显示为块级元素，块级元素的默认值将行级元素变为块级元素，独占一行
inline-block显示为内联元素，但是可以设置宽和高在inline基础上允许设置宽度和高度
flex开启弹性布局
table作为表格显示

注意：行级元素是无法设置宽度和高度的，可以为行级元素设置display:inline-block，然后就可以设置宽和高了

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>display</title>
    <style>
      div {
        width: 10px;
        height: 10px;
        background-color: antiquewhite;
        display: inline;
      }
      span {
        display: block;
      }
      .i-b {
        width: 100px;
        height: 10px;
        background-color: aqua;
        display: inline-block;
      }
      .none {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="none">不显示</div>
    <div>块</div>
    <div>级</div>
    <div>标</div>
    <div>签</div>
    <span>行级标签</span><span>行级标签</span>
    <span class="i-b">inline-block</span>
  </body>
</html>

表现形式如下：

在这里插入图片描述

display：flex

开启弹性布局

属性说明
flex-direction决定主轴的方向
flex-wrap决定换行方式
justify-content决定在主轴上的对齐方式
align-items决定在交叉轴上的位置（主轴为横轴，则交叉轴为纵轴）
align-content定义了多根轴线的对齐方式
flex-direction（主轴方向）
  • row：（默认值）主轴为水平方向，起点在左端
  • row-reverse：主轴为水平方向，起点在右端
  • column：主轴为垂直方向，起点在上沿
  • column-reverse：主轴为垂直方向，起点在下沿

代码实现如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>flex-direction</title>
    <style>
      /* 在css中设置 row */
      .content {
        width: 500px;
        height: 300px;
        background-color: brown;
        display: flex;
        flex-direction: column-reverse;
      }
      .content-item {
        width: 50px;
        height: 50px;
      }
      .item1 {
        background-color: black;
      }
      .item2 {
        background-color: blue;
      }
      .item3 {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="content-item item1"></div>
      <div class="content-item item2"></div>
      <div class="content-item item3"></div>
    </div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

flex-wrap（换行方式）
  • nowarp：（默认）不换行
  • wrap：换行，第一行在上方
  • wrap-reverse：换行，第一行在下方

代码实现如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>flex-wrap</title>
    <style>
      /* 在css中设置 row */
      .content {
        width: 300px;
        height: 300px;
        background-color: brown;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
      }
      .content-item {
        width: 50px;
        height: 50px;
      }
      .item1 {
        background-color: black;
      }
      .item2 {
        background-color: blue;
      }
      .item3 {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="content-item item1"></div>
      <div class="content-item item2"></div>
      <div class="content-item item3"></div>
      <div class="content-item item1"></div>
      <div class="content-item item2"></div>
      <div class="content-item item3"></div>
      <div class="content-item item1"></div>
      <div class="content-item item2"></div>
      <div class="content-item item3"></div>
    </div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

justify-content（对齐方式）
  • flex-start：（默认值）左对齐
  • flex-end：右对齐
  • center：居中
  • space-between：两端对齐，项目之间的间隔相等
  • space-around：每个项目两侧的间隔相等

代码实现如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>justify-content</title>
    <style>
      /* 在css中设置 row */
      .content {
        width: 300px;
        height: 300px;
        background-color: brown;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
      }
      .content-item {
        width: 50px;
        height: 50px;
      }
      .item1 {
        background-color: black;
      }
      .item2 {
        background-color: blue;
      }
      .item3 {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="content-item item1"></div>
      <div class="content-item item2"></div>
      <div class="content-item item3"></div>
    </div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

align-items（交叉轴位置）
  • flex-start：交叉轴的起点对齐，一行根据上边对齐。
  • flex-end：交叉轴的终点对齐，一行根据下边对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

代码实现如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>align-items</title>
    <style>
      /* 在css中设置 row */
      .content {
        width: 300px;
        height: 300px;
        background-color: brown;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
      }
      .content-item {
        width: 50px;
        height: 50px;
      }
      .item1 {
        background-color: black;
      }
      .item2 {
        background-color: blue;
      }
      .item3 {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="content-item item1"></div>
      <div class="content-item item2"></div>
      <div class="content-item item3"></div>
      <div class="content-item item1"></div>
      <div class="content-item item2"></div>
      <div class="content-item item3"></div>
      <div class="content-item item1"></div>
      <div class="content-item item2"></div>
      <div class="content-item item3"></div>
    </div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

align-content
  • flex-start：与交叉轴的起点对齐，跟作文一样，一行一行紧挨着
  • flex-end：与交叉轴的终点对齐，跟 flex-start类型，不过时从底部开始数
  • center：与交叉轴的中点对齐，从中间向下向上扩散
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
  • space-around：每根轴线两侧的间隔都相等
  • stretch（默认值）：轴线占满整个交叉轴

代码实现如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>align-content</title>
    <style>
      /* 在css中设置 row */
      .content {
        width: 300px;
        height: 300px;
        background-color: brown;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        align-content: center;
      }
      .content-item {
        width: 50px;
        height: 50px;
      }
      .item1 {
        background-color: black;
      }
      .item2 {
        background-color: blue;
      }
      .item3 {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="content-item item1"></div>
      <div class="content-item item2"></div>
      <div class="content-item item3"></div>
      <div class="content-item item1"></div>
      <div class="content-item item2"></div>
      <div class="content-item item3"></div>
      <div class="content-item item1"></div>
      <div class="content-item item2"></div>
      <div class="content-item item3"></div>
    </div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

display:table
属性说明
table（类似 <table>）此元素会作为块级表格来显示，表格前后带有换行符。
inline-table（类似 <table>）此元素会作为内联表格来显示，表格前后没有换行符。
table-row-group（类似 <tbody>）此元素会作为一个或多个行的分组来显示。
table-header-group（类似 <thead>）此元素会作为一个或多个行的分组来显示。
table-footer-group（类似 <tfoot>）此元素会作为一个或多个行的分组来显示。
table-row（类似 <tr>）此元素会作为一个表格行显示。
table-column-group（类似 <colgroup>）此元素会作为一个或多个列的分组来显示。
table-column（类似 <col>）此元素会作为一个单元格列显示。
table-cell（类似 <td> 和 <th>）此元素会作为一个表格单元格显示。
table-caption（类似 <caption>）此元素会作为一个表格标题显示。
visibility

常用属性：

取值含义
visible显示
hidden隐藏

区别：

  • display：隐藏时不在占据页面中的空间，后面的元素会占用其位置
  • visibility：隐藏时会占据页面中的空间，位置还保留在页面中，只是不显示

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>visibility</title>
    <style>
      div {
        width: 100px;
        height: 100px;
      }
      .div1 {
        visibility: hidden;
        background-color: bisque;
      }
      .div2 {
        visibility: visible;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

轮廓设置

outline（轮廓）：用于在元素周围绘制一个轮廓，位于border外围，可以突出显示元素

常用属性：

  • outline-width：轮廓宽度
  • outline-color：轮廓颜色
  • outline-style：轮廓样式
  • outline-offset：轮廓偏移
  • outline：简写
outline-width（轮廓宽度）
  • thin：通常为1px
  • medium：通常为3px
  • thick：通常为5px
  • 特定尺寸：以px、pt、cm、em记
outline-style（轮廓样式）
属性名作用
dotted点状轮廓
dashed虚线轮廓
solid实线轮廓
double双线轮廓
groove3D凹槽轮廓
ridge3D凸槽轮廓
inset3D凹边轮廓
outset3D凸边轮廓
none无轮廓
hidden隐藏轮廓
outline（简写）

outline：outline-width|outline-style|outline-color

顺序不重要

outline和border的区别

  • border可以应用于所有的HTML元素，而outline主要用于表单元素、超链接元素
  • 当元素获得焦点是会自动出现outline轮廓效果，当失去焦点时会自动消失，这是浏览器的默认行为
  • outline不影响元素的尺寸和位置，而border会影响

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>outline</title>
    <style>
      input {
        outline: 5px solid red;
      }
    </style>
  </head>
  <body>
    <input type="submit" />
  </body>
</html>

表现形式如下：

在这里插入图片描述

outline-offset（轮廓偏移）

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的

代码实现入下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>outline-offset</title>
    <style>
      input {
        position: relative;
        top: 50px;
        left: 50px;
        outline: 5px solid red;
        outline-offset: 10px;
      }
    </style>
  </head>
  <body>
    <input type="submit" />
  </body>
</html>

表现形式如下：

在这里插入图片描述

宽高设置

常用元素：

  • max-width：设置元素的最大宽度
  • max-height：设置元素的最大高度
  • min-width：设置元素的最小宽度
  • min-height：设置元素的最小高度

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>maxANDmin_widthANDheight</title>
    <style>
      img {
        max-width: 500px;
        max-height: 500px;
        min-width: 400px;
        min-height: 400px;
        background: pink;
      }
    </style>
  </head>
  <body>
    <img src="/图像/动漫/阿尼亚01.webp" alt="图像" title="阿尼亚" />
  </body>
</html>

表现形式如下：

在这里插入图片描述

溢出处理

overflow：元素溢出处理

常用取值：

取值说明
visible溢出时可见，显示在元素外（默认）
hidden溢出的部分不可见
scroll无论是否溢出，均出现滚动条
auto溢出时出现滚动条

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>overflow</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        float: left;
      }
      .div1 {
        overflow: visible;
      }
      .div2 {
        overflow: hidden;
      }
      .div3 {
        overflow: scroll;
      }
      .div4 {
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div class="div1"><img src="/图像/动漫/阿尼亚01(小).PNG" alt="" /></div>
    <div class="div2"><img src="/图像/动漫/阿尼亚01(小).PNG" alt="" /></div>
    <div class="div3"><img src="/图像/动漫/阿尼亚01(小).PNG" alt="" /></div>
    <div class="div4"><img src="/图像/动漫/阿尼亚01(小).PNG" alt="" /></div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

光标设置

cursor：设置光标的形象

常用属性：

  • default：（默认）箭头
  • pointer：手形，光标移动到超链接上默认显示
  • move：表示可移动
  • text：表示文本
  • wait：表示程序正忙，需要等待
  • help：表示帮助
透视景深

perspective写给父级，作用于子孙后代

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>transform:translateZ</title>
    <style>
      body {
        perspective: 500px;
      }
      div {
        width: 200px;
        height: 200px;
        background: pink;
        transition: all 2s linear;
        margin: 100px auto;
      }
      div:hover {
        transform: translateZ(200px);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
盒子阴影

box-shadow该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色

格式：

box-shadow: h-shadow v-shadow blur spread color inset;
x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 |内侧阴影

位置固定，可以省略部分，可以设置多个阴影

属性描述
h-shadow必需的。水平阴影的位置。允许负值
v-shadow必需的。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影的大小
color可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset可选。从外层的阴影（开始时）改变阴影内侧阴影

**注意：**参数inset只能设置在第一或者最后，其他位置无效

阴影方向

正数为左下，负数相反

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>box-shadow</title>
    <style>
      div {
        margin: 20px;
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .box1 {
        box-shadow: 10px 10px blue;
      }
      .box2 {
        box-shadow: 10px -10px blue;
      }
      .box3 {
        box-shadow: -10px 10px blue;
      }
      .box4 {
        box-shadow: -10px -10px blue;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

模糊距离

如果不写该参数或者该参数为0则阴影完全实心，没有模糊效果，并且该值越大阴影越模糊

不能为负数，为负数则没有阴影

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>box-shadow</title>
    <style>
      div {
        margin: 20px;
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .box1 {
        box-shadow: 10px 10px 5px blue;
      }
      .box2 {
        box-shadow: 10px -10px 0px blue;
      }
      .box3 {
        box-shadow: -10px 10px -5px blue;
      }
      .box4 {
        box-shadow: -10px -10px 10px blue;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

阴影大小
  • 默认值0会让阴影变得得和元素的大小一样（默认）
  • 正值会在元素的四个方向延伸阴影
  • 负值会使阴影变得比元素本身尺寸还要小

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>box-shadow</title>
    <style>
      div {
        margin: 20px;
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .box1 {
        box-shadow: 10px 10px 5px 20px blue;
      }
      .box2 {
        box-shadow: 10px -10px 0px 0px blue;
      }
      .box3 {
        box-shadow: 0px 0px 10px -1px blue;
      }
      .box4 {
        box-shadow: -10px -10px 10px -5px blue;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

inset（内侧阴影）

**注意：**参数inset只能设置在第一或者最后，其他位置无效

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>box-shadow</title>
    <style>
      div {
        margin: 20px;
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .box1 {
        box-shadow: 10px 10px 5px 10px blue;
      }
      .box2 {
        box-shadow: 10px -10px 0px inset 0px blue;
      }
      .box3 {
        box-shadow: inset 0px 0px 10px -1px blue;
      }
      .box4 {
        box-shadow: -10px -10px 10px -5px blue inset;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

text-shadow（文本阴影）

格式：

box-shadow: h-shadow v-shadow blur color

​ x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色

text-shadow可以设置多个阴影

代码实现如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>text-shadow</title>
    <style>
      div {
        height: 600px;
        line-height: 600px;
        background-color: black;
        font-size: 120px;
        color: white;
        text-align: center;
        text-shadow: 0 0 10px red, 0 0 20px red, 0 0 30px red, 0 0 40px red;
      }
    </style>
  </head>
  <body>
    <div>我会发光</div>
  </body>
</html>

表现形式如下：

在这里插入图片描述

我要伽利顿
关注
  • 24
    点赞
  • 踩
  • 43
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS详细介绍
m0_67238428的博客
05-19 1942
本文介绍了css的各种基础知识，适合初学者进行学习。
CSS介绍
jcf52的博客
03-23 2653
一.css 介绍 层叠样式表，是一种样式表语言，用来描述HTML和XML文档的呈现。 随着HTML的发展，为了满足页面设计者的要求，HTML添加了很多显示功能，但是随着这些功能的增加，使得HTML越来越杂乱 HTML 页面也越来越臃肿，CSS便随之诞生 CSS 用于简化HTML标签，把关于样式部分的内容提取出来，进行单独的控制，使结构与样式分离开发。 CSS 是以HTML为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，和HTML 类似 CSS也不是真正的编程语言，甚至不是标
CSS 概述
Dailyblue的专栏
03-29 1109
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，CSS 文件扩展名为 .css。
CSS | CSS语言 | CSS基础 | CSS语言基础
Vin Cente
12-13 1191
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 一、CSS语言介绍 CSS是Cascadi..
html+css简单介绍与使用
07-14
综上所述，"html+css简单介绍与使用"这个主题覆盖了HTML的基本结构和标签，CSS的样式定义以及JavaScript的基础和交互性。通过这些文件的学习，你可以掌握创建静态网页的基本技能，并为进一步学习动态网页开发打下...
简单蓝色介绍CSS网页模板
01-14
【简单蓝色介绍CSS网页模板】是一个适用于初学者和快速原型设计的网页模板，它强调了简洁的设计风格和蓝色调的视觉效果。这个模板基于CSS（层叠样式表）技术，用于控制网页的布局和样式，使得网页看起来既专业又美观...
简单介绍CSS hack的使用
01-19
css hack 是个很有争议的东西，一开始我也很讨厌，因为我觉得可以饶过 css hack，通过另外的方法解决问题。但是，随着工作中的不断实践，改变了我的观点，css hack 虽然不能通过 w3c 标准认证，但适当是使用很有可能...
介绍如何优雅的写css
10-20
CSS（Cascading Style Sheets）是前端开发中必备的技能之一，基于互联网上全面的资料和简单易懂的语法，CSS非常易于学习，但其知识点广泛且分散，很难做到精通。在我们日常开发中，常常忽视了CSS代码的质量，很容易...
CSS基础之CSS简介，面试必备知识点
最新发布
2401_84002448的博客
04-03 797
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件一个人可以走的很快，但一群人才能走的更远。
【CSS】CSS简介，CSS基础选择器详解
专注于前后端学习
03-02 831
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称,也称之为 CSS 样式表或级联样式表。 CSS 也是一种标记语言 CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。
css 的介绍
THE ORDER
02-02 895
1. css 的定义 css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。 没有使用css的效果图 使用css的效果图 2. css 的作用 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。 控制页面布局, 比如: 设置浮动、定位等样式。 3. css 的基本语法 选择器{ 样式规则 } 样式规则： 属性名1：属性值1; 属性名2：属性值2; 属性名3：属性值3; … 选择器:是用来选择标签的，选出来以后给标签加样式。 代码示例: div{ width
CSS 简介
XWenXiang的博客
04-27 3178
文章目录CSS 简介CSS 选择器标签选择器id 选择器class 选择器通用选择器 CSS 简介 CSS也叫做层叠样式表，它是一种定义样式结构如字体、颜色、位置等的语言，对 HTML 代码进行美化。 CSS 代码位置: 1. CSS样式代码可以独立一个文件存放，通过link标签链接使用。 2. 或者可以在HTML文件中head的style标签内部直接编写css代码 3. 在HTML文件中body的标签内部使用style属性来编写（不推荐） CSS 语法结构 选择器 {属性名1:属性值1;属性名2:属
CSS简介
Cameles的博客
05-14 925
css 1、简介 css：层叠样式表 层叠：一层一层 样式表：很多的属性和属性值 使页面显示效果更加好 css将页面内容和显示样式进行分离，提高了显示功能 2、css和html的结合方式（四种结合方式） （1）在每个html标签上面都有一个属性style，使其结合 &lt;div style="background-c...
CSS基本介绍
Science Explorer
08-30 388
一、什么是CSS CSS （Cascading Style Sheets，层叠样式表）是用来控制网页在浏览器中的显示外观的声明式语言。浏览器会根据 CSS 的样式定义将其选定的元素显示为恰当的形式。 CSS 与 HTML 和 JavaScript 并称 Web 三大核心技术。 CSS 不区分大小写（但在某些选择器上会区分大小写） 二、注释 CSS中的注释以 /* 开始并以 */ 结束...
简单介绍html和css3
05-22
HTML（Hypertext Markup Language）是一种用于创建网页的标准标记语言。它主要用于描述一个网页的结构和内容，通常由一系列的标签和属性组成，这些标签和属性可以用来定义页面中的文本、图像、链接、表格等各种元素。HTML5 是 HTML 的最新版本，它增加了许多新的元素和属性，使得网页的结构和样式更加丰富和灵活。 CSS3（Cascading Style Sheets）是一种用于描述网页样式的语言。它通过为 HTML 元素添加样式来控制网页中的布局、颜色、字体等方面的外观。CSS3 引入了许多新的特性，如圆角、渐变、阴影、动画等，使得网页设计更加美观和富有创意。同时，CSS3 还支持响应式布局，使得网页可以适应不同的设备和屏幕尺寸，提高用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值