零基础学CSS3

一麻袋神秘开心

993人浏览 · 2025-09-24 15:07:53

一麻袋神秘开心 · 2025-09-24 15:07:53 发布

CSS概念

CSS（Cascading Style Sheets）是层叠样式表，又叫级联样式表，简称样式表。

文件后缀名为.css

CSS用于HTML文档中元素样式的定义。

为什么需要CSS

目的是让网页具有美观一致的页面

语法

CSS规则由两个主要部分构成：选择器和一条或多条声明。

选择器通常是您需要改变样式的HTML元素，每条声明由一个属性和一个值组成

属性是希望设置的样式属性。每个属性有一个值，属性和值被冒号分开

在刚开始学习过程中，我们可以不单独建css文件，继续在html写样式。

在head里添加<style>标签，用来写css样式

<!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>
      h3{
        color: red;
      }
    </style>
</head>
<body>
  <h3>这是h3标签</h3>
</body>
</html>

引入方式

内联样式（行内样式）

需要再相关的标签内使用样式属性，style属性可以包含任何CSS属性。

注意：缺乏整体性和规范性，不利于维护，维护成本高

<p style="background-color: aqua;font-size: 20px;width:30%">CSS</p>

内部样式

当单个文档需要特殊样式是，就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表。

注意：单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面中容易混乱。

<!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>
      p{
         background-color: aqua;
         font-size: 20px;
         width:30%;
      }
    </style>
</head>
<body>
  <p>CSS</p>
  <p>HTML</p>
  <p>JavaScript</p>
</body>
</html>

外部样式（推荐）

当样式需要应用于很多页面时，外部样式表将是理想的选择，在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在文档的头部

新建一个以.css结尾的文件（如test.css），在需要添加样式的html文件里的头部标签下链接css样式(href里是引入文件地址)：

p{
    width: 30%;
    height: 100px;
    background-color: red;
    margin: 0 auto;
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    color: white;
    margin-bottom: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./test.css">
</head>
<body>
  <p>CSS</p>
  <p>HTML</p>
  <p>JavaScript</p>
</body>
</html>

选择器

全局选择器

可以与任何元素匹配，优先级最低，一般做样式初始化

*{
    margin: 0;
    padding: 0;
}

元素选择器

html文档里的元素，p、b、div、a、img、body等。

标签选择器，选择的是页面上所有类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”

例：

想让“学完前端，学java”这句话中的“前端”变成红色字体，我们可以用<span>标签把“前端”两个字围起来，然后给<span>标签加一个标签选择器

<!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>
      p{
          color: blue;
          font-size: 20px;
      }
        span{
            color: red;
        }

    </style>
</head>
<body>
<p>学完<span>前端</span>，学java</p>
</body>
</html>

注意：

所有的标签都可以是选择器，比如ul、li、dt、dl、input、div等
无论标签藏得多深，一定能够被选择上
选择的所有，而不是一个

类选择器

规定用圆点 . 来定义，针对想要的所有标签使用

<!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>
      p{
          color: blue;
          font-size: 20px;
      }
      .content{
        color: red;
      }


    </style>
</head>
<body>
  <p>我emo了</p>
  <p>我很好</p>
  <p class="content">我要上岸</p>
</body>
</html>

特点

类选择器可以被多种标签使用

类名不能以数字开头

同一个标签可以使用多个类选择器，用空格隔开

<!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>
      p{
          color: blue;
          font-size: 20px;
      }
      .content{
        background-color: aqua;
        text-align: center;

      }
      .title{
        color: red;
      }


    </style>
</head>
<body>
  <p>我emo了</p>
  <p>我很好</p>
  <h3 class="content title">我要上岸</h3>
</body>
</html>

id选择器

针对某一个特定的标签使用，只能使用一次，css中的 id 选择器以 # 来定义

注意：

id是唯一的
id不能以数字开头

<!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>
      #title{
        color: red;
      }

    </style>
</head>
<body>

  <h3 id="title">我要上岸</h3>
</body>
</html>

合并选择器

语法：选择器1,选择器2...{}

作用：提取共同的样式，减少重复代码

<!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>
      p,h3{
        color: red;
        font-size: 30px;
      }

    </style>
</head>
<body>
  <p>我爱学习</p>
  <h3>我要上岸</h3>
</body>
</html>

选择器优先级

!important > 行内 > id选择器 > 类选择器 > 元素选择器 > 继承（通用）

先比较级别，级别一样比较各级别选择器出现的次数

当两个选择器权重一样时，以最后出现的为准

同权重依照就近原则

字体属性

color

规定文本颜色

      p{
        color: red;/*单词形式 */
        color: rgb(255,0,0);/*rgb形式 */
        color: #ff0000;/*十六进制形式 */
        color: rgba(255,0,0,0.5);/*rgba形式 最后一个值是设置透明度的 */
      }

font-size

设置文本大小。

不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落

注意：Chrome浏览器接受的最小字体是12px.

font-weight

值	描述
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100-900	定义由细到粗 400等同默认，而700等同于bold

font-style

指定文本的字体样式

值	描述
normal	默认值
italic	定义斜体字

font-family

指定一个元素的字体。

注意:

每个值用逗号隔开

如果字体名称包含空格，必须加上引号

      p{
        font-family: Geneva, Verdana, sans-serif;
        font-size: 40px;
      }

背景属性

属性	描述
background-color	设置背景颜色
background-image	背景图片
background-position	背景图片显示位置
background-repeat	背景图片如何填充
background-size	背景图片大小属性

background-color

.box{
        background-color: aquamarine;
        width: 200px;
        height: 200px;
      }

background-image

元素背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下background-image属性放在元素的左上角，如果图像不够大的话会在垂直方向平铺图像，如果图像超出元素大小从图像左上方显示元素大小的那部分。

.box{
        background-image: url(./meitu.png);
        width: 200px;
        height: 200px;
      }

图片只显示了整张图片的左上角(以左上角为基准)。

background-repeat

设置如何平铺背景图像。

值	说明
repeat	默认值
repeat-x	只向水平方向平铺
repeat-y	只向垂直方向平铺
no-repeat	不平铺

.box{
        background-image: url(./meitu.png);
        width: 1200px;
        height: 400px;
        background-repeat:repeat;
      }

repeat会在自适应大小下重复，原图的宽度小于1200px，图片会根据宽度自动补齐

background-size

设置图像的大小

值	说明
length	设置背景图片宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
percentage	计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
cover	保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
contain	保持图片纵横比并将图片缩放成适合背景定位区域的最小大小

.box{
        background-image: url(./meitu.png);
        width: 800px;
        height: 400px;
        background-repeat:repeat;
        background-size: contain;
      }

background-position

该属性设置背景图像的起始位置，其默认值：0% 0%

值	说明
left top	左上角
left center	左中
left bottom	左下
right top	右上角
right center	右中
right bottom	右下
center top	中上
center center	中中
center bottom	中下
x% y%	第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%,右下角是100% 100%，如果只指定了一个值，其他值默认为50% 0% 0%
xpos ypos	单位是像素

.box{
        background-image: url(./meitu.png);
        width: 800px;
        height: 800px;
        background-position: center center;
      }

文本属性

text-align

指定元素文本的水平对齐方式

值	描述
left	文本居左排列，默认值
right	把文本排列到右边
center	把文本放在居中位置

<style>
    .box{
        text-align: center;
      }

</style>


<body>
  <div class="box">失败乃成功之母</div>

text-decoration

规定添加到文本的修饰，下划线、上划线、删除线等

值	描述
underline	定义下划线
overline	定义上划线
line-through	定义删除线

div{
        text-decoration: line-through;
      }

text-transform

控制文本的大小写

值	描述
captialize	定义每个单词开头大写
uppercase	定义全部大写字母
lowercase	定义全部小写字母

 <style>
   div{
     text-transform: capitalize;
   }

 </style>


  <div>hello world</div>

text-indent

规定文本块中首行文本的缩进

div{
        text-indent: 2em;
      }

2em 相当于首行缩进两字符。

负值是允许的，如果值是负数，将第一行左缩进。

表格属性

表格边框

指定css表格边框，使用border属性

<!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>
      table,td{
        border: 1px solid black;
      
      }

    </style>
</head>
<body>
  <table>
    <tr>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
    </tr>
    <tr>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
    </tr>
    <tr>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
    </tr>
  </table>
 </body>
</html>

solid 是指实线

折叠边框

border-collapse 属性设置表格的表框是否被折叠成一个单一的边框或隔开

      table,td{
        border: 1px solid black;
        border-collapse: collapse; /* 合并边框 */
      }

表格宽度和高度

      table,td{
        border: 1px solid black;
        border-collapse: collapse; /* 合并边框 */
      }
      table{
        width: 50%;
        height: 200px;
      }

表格文字对齐

表格中的文本对齐和垂直对齐属性

text-align 属性设置水平对齐方式，向左向右或中心

垂直对齐属性：vertical-align: bottom;/* 基于底部对齐*/

      table,td{
        border: 1px solid black;
        border-collapse: collapse; /* 合并边框 */
      }
      td{
        padding: 10px;
        vertical-align: bottom;
        height: 50px;
      }

表格填充

如果在表的内容中控制空格之间的边框，应使用 td 和 th 元素的填充属性

      table,td{
        border: 1px solid black;
        border-collapse: collapse; /* 合并边框 */
      }
      td{
        padding: 10px;
      }

表格颜色

下面的例子指定边框的颜色和td元素的文本和背景颜色

      table,td{
        border: 1px solid black;
        border-collapse: collapse; /* 合并边框 */
      }
      td{
        color:blueviolet;
        background-color: azure;
      }

关系选择器

后代选择器

定义

选择所有被E元素包含的F元素，中间用空格隔开（也就是对E下面的F选择器进行设置）

语法

E F{}

<!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>
      ul li{
        color: blue;
      }

    </style>
</head>
<body>
  <ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <ol>
      <li>列表1</li>
      <li>列表2</li>
      <li>列表3</li>
    </ol>
  </ul>
 </body>
</html>

自带选择器

定义

选择所有作为E元素的直接子元素，对更深一层的元素不起作用，用>表示

语法

E>F{ }

ul>li{
        color: blue;
      }

相邻兄弟选择器

定义

选择紧跟E后面的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择

语法

E+F{ }

<style>
      div+p{
        color: blue;
      }

</style>
</head>
<body>
  <div>知识</div>
  <p>力量</p>
  <h1>智慧</h1>
</body>

通用兄弟选择器

定义

选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能乡下选择

语法

E~F{ }

  <style>
      div~p{
        color: blue;
      }

  </style>

<body>
  <div>知识</div>
  <p>力量</p>
  <p>权利</p>
  <h1>智慧</h1>
  <p>金钱</p>
 </body>

CSS盒子模型

概念

所有HTML元素可以看做盒子，在CSS中，“box model”这一术语是用来设计和布局时使用

CSS盒模型本质上是一个盒子，封装周围的HTML，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容

外边距（margin）：清除边框外的区域，外边距是透明的
边框（border）：围绕在内边距和内容外的边框
内边距（padding）：清除内容周围的区域，内边距是透明的
内容：盒子的内容，显示文本和图像

如果把盒子模型看作是一个生活的快递，那么内容等同于买的实物，内边距就相当于快递盒子里的泡沫，边框等于快递盒子，外边距相当于两个快递盒子之间的距离。

弹性盒子模型

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示，从左到右:

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
 
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>
 
</body>
</html>

父元素上的属性

display属性

display-flex 开启弹性盒（属性设置后子元素默认水平排列）

flex-direction属性

定义

指定了弹性子元素在父容器中的位置

语法

flex-direction : row | row-reverse | column | column-reverse

row : 横向从左到右排列（左对齐），默认的排列方式
row-reverse : 反转横向排列（右对齐，从后往前排，最后一项排在最前面）
column ：纵向排列
column-reverse ：翻转纵向排列，从后往前排，最后一项排在最上面

<style>
  .flex-container {
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
    flex-direction: column;

}
 
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>

<body>
 
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>
 
</body>

justify-content属性

定义

内容对齐属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线对齐

语法

justify-content ：flex-start | flex-end | center

flex-start ：弹性项目向行头紧挨着填充，这个是默认值，第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放
flex-end ：弹性项目向行尾紧挨着填充，第一个弹性项的main-end外边距边线被放置在该行的main-end的边线，而后续弹性项依次平齐摆放
center ：弹性项目居中紧挨着填充。如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出

<head>
<style>
  .flex-container {
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
    justify-content: flex-end;
}
 
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>
 
</body>

align-items属性

定义

设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

语法

align-items ： flex-start | flex-end | center

flex-start ：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
flex-end ：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
center ：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）

<head>
<style>
  .flex-container {
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
    flex-direction: row;
    justify-content: center;/*水平方向居中*/
    align-items: center;/*垂直方向居中*/
}
 
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>
 
</body>

flex-wrap 属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

语法

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

各个值解析:

nowrap - 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。

<head>
<style>
  .flex-container {
    display: flex;
    width: 200px;
    height: 500px;
    background-color: lightgrey;
    flex-direction: row;
    justify-content: center;/*水平方向居中*/
    align-items: center;/*垂直方向居中*/
    flex-wrap: wrap;
}
 
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>
 
</body>

align-content 属性

定义

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

语法

align-content: flex-start | flex-end | center | space-between | space-around | stretch

各个值解析:

stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

<head>
<style>
  .flex-container {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: lightgrey;
    flex-direction: row;
    justify-content: center;/*水平方向居中*/
    align-items: center;/*垂直方向居中*/
    flex-wrap: wrap;
    align-content: space-between;
}
 
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>
 
</body>

子元素上的属性

排序

语法

order:

各个值解析：

<integer>:用整数值来定义排列顺序，数值小的排在前面。可以为负值

order 属性设置弹性容器内弹性子元素的属性

对齐

设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。

以下实例在第一个弹性子元素上设置了 margin-right: auto; 。它将剩余的空间放置在元素的右侧：

<head>
<style>
.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: 10px;
}
 
.item1:first-child {
    margin-right: auto;
}
</style>
</head>
<body>
 
<div class="flex-item">
  <div class="item1">flex item 1</div>
  <div class="item2">flex item 2</div>
  <div class="item3">flex item 3</div> 
</div>
 
</body>

align-self

定义

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

语法

align-self: auto | flex-start | flex-end | center | baseline | stretch

各个值解析:

auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

<!DOCTYPE html>
<html>
<head>
<style>
.flex-item {
    background-color: cornflowerblue;
    width: 300px;
    min-height: 300px;
    margin: 10px;
    display: flex;
}
 
.item1 {
    align-self: flex-start;
    background-color: rebeccapurple;
}
.item2 {
    align-self: flex-end;
    background-color: blue;
}
 
.item3 {
    align-self: center;
    background-color: chartreuse;
}
 
</style>
</head>
<body>
 
<div class="flex-item">
  <div class="item1">flex item 1</div>
  <div class="item2">flex item 2</div>
  <div class="item3">flex item 3</div> 
</div>
 
</body>
</html>

flex-grow/flex

定义

flex 属性用于指定弹性子元素如何分配空间。

语法

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

各个值解析:

auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none：计算值为 0 0 auto
inherit：从父元素继承
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值

以下实例中，第一个弹性子元素占用了 2/4 的空间，其他两个各占 1/4 的空间:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-item {
    background-color: cornflowerblue;
    width: 500px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.item1 {
    background-color: rebeccapurple;
    width: 100px;
    height: 100px;
    flex:1
}
.item2 {
    background-color: blue;
    width: 100px;
    height: 100px;
    flex:2
}
 
.item3 {
    background-color: chartreuse;
    width: 100px;
    height: 100px;
    flex:1;
}
 
</style>
</head>
<body>
 
<div class="flex-item">
  <div class="item1">flex item 1</div>
  <div class="item2">flex item 2</div>
  <div class="item3">flex item 3</div> 
</div>
 
</body>
</html>

浮动

定义

float 属性定义元素在哪个方向浮动，任何元素都可以浮动

值	描述
left	元素向左浮动
right	元素向右浮动

原理

浮动以后使元素脱离了文档流
浮动只有左右浮动，没有上下浮动

元素向左浮动

脱离文档流之后，元素相当于在页面上增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象。

<!DOCTYPE html>
<html>
<head>
    <style>
        img{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

    <img src="./meitu.png" alt="">
    <img src="./meitu.png" alt="">
</body>
</html>

在上述没添加浮动是紧紧挨在一起的，下面添加浮动是紧挨的

语法： float:left;

元素向右浮动

<!DOCTYPE html>
<html>
<head>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgb(13, 26, 174);
            float: right;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>

</body>
</html>

所有元素向左浮动

当所有元素同时浮动的时候，会变成水平摆放，向左或者向右

<!DOCTYPE html>
<html>
<head>
    <style>
        div{
            width: 200px;
            height: 200px;
            float: left;
        }
        .box1{
            background-color: rgb(197, 194, 46);

        }
        .box2{
            background-color: rgb(13, 26, 174);
        }
        .box3{
            background-color: rgb(42, 184, 30);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

</body>
</html>

注意：

浮动可以让元素水平摆放，但是设置浮动要考虑盒子的宽度，宽度不够也会被挤到下一行

清除浮动

浮动副作用

当元素设置float浮动后，该元素就会脱离文档流并向左向右浮动

浮动元素会造成父元素高度坍塌

后续元素会受到影响

<head>
    <style>
        .container{
            width:500px;
            background-color:aqua;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin:10px
        }
        .bbb{
            background-color: chartreuse;
            width: 100px;
            height: 100px;
        }
        
        
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>

    </div>
        <div class="bbb"></div>

</body>

bbb 本应该是在 box 的下方一行的，但是设置浮动后，高度坍塌了，跑到了红色的后面

清除浮动方法

当父元素、出现坍塌时，对布局是不利的，我们必须清除副作用

解决方案如下：

父元素设置高度

受影响的元素增加clear属性

overflow清除浮动

伪对象方式

父元素设置高度

如果父元素高度坍塌，可以给父元素设置高度，撑开元素本身大小

.container{
            width: 500px;
            background-color: aqua;
            height: 500px;
        }

受影响的元素增加clear属性

如果bbb是在container里面发现利用父元素设置高度的方式还是无效，这就可以增加clear属性

<!DOCTYPE html>
<html>
<head>
    <style>
        .container{
            width: 500px;
            background-color: aqua;
            height: 300px;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin:10px
        }
        .bbb{
            background-color: chartreuse;
            width: 100px;
            height: 100px;
            clear: both;/* 无论是左浮动还是右浮动都清除 */
        }
        
        
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="bbb"></div>
    </div>


</body>
</html>

overflow清除浮动

如果父级有坍塌，并且同级元素也受到了影响，可以使用overflow清除浮动

这种情况下，父布局不能设置高度

父级标签样式里加：overflow:hidden;clear:both;

如果是同级元素，使用下述方法：

<!DOCTYPE html>
<html>
<head>
    <style>
        .container{
            width: 500px;
            background-color: aqua;
            overflow: hidden;
            clear:both;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin:10px
        }
        .bbb{
            background-color: chartreuse;
            width: 100px;
            height: 100px;
        }
        
        
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
        <div class="bbb"></div>


</body>
</html>

如果是子级元素，那就在刚刚的基础上，谁出现问题就给谁添加：clear:both;

<!DOCTYPE html>
<html>
<head>
    <style>
        .container{
            width: 500px;
            background-color: aqua;
            overflow: hidden;
            clear:both;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin:10px
        }
        .bbb{
            background-color: chartreuse;
            width: 100px;
            height: 100px;
            clear: both;
        }
        
        
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="bbb"></div>
    </div>

</body>
</html>

伪对象方式

如果父级有坍塌，并且同级元素也受到了影响，还可以使用伪对象方式处理

为父级标签添加伪类after，设置空的内容，并且使用clear:both;

这种情况下，父布局不能设置高度

下述是同级情况：

<!DOCTYPE html>
<html>
<head>
    <style>
        .container{
            width: 500px;
            background-color: aqua;
        }
        .container::after{
            content: "";
            display: block;
            clear: both;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin:10px
        }
        .bbb{
            background-color: chartreuse;
            width: 100px;
            height: 100px;
        }
        
        
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
        <div class="bbb"></div>

</body>
</html>

如果是子级情况（那就在刚刚的基础上，谁出现问题就给谁添加：clear:both;）：

<!DOCTYPE html>
<html>
<head>
    <style>
        .container{
            width: 500px;
            background-color: aqua;
        }
        .container::after{
            content: "";
            display: block;
            clear: both;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin:10px
        }
        .bbb{
            background-color: chartreuse;
            width: 100px;
            height: 100px;
            clear: both;
        }
        
        
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="bbb"></div>
    </div>

</body>
</html>

定位

定义

position属性指定了元素的定位类型

值	描述
relative	相对定位
absolute	绝对定位
fixed	固定定位

其中，绝对定位和固定定位会脱离文档流

设置定位后，可以使四个方向值进行调整：left、top、right、bottom

相对定位

<!DOCTYPE html>
<html>
<head>
    <style>
        .container{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: relative;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="container"></div>

</body>
</html>

这个时候你会发现，这个盒子就相对于浏览器上部和左部100px了

绝对定位

<!DOCTYPE html>
<html>
<head>
    <style>
        .container{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container"></div>
    <div class="box"></div>

</body>
</html>

有压盖就相当于脱离文档流

固定定位

<!DOCTYPE html>
<html>
<head>
    <style>
        .container{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: fixed;
            top: 100px;
            left: 100px;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;

        }
        h3{
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="container"></div>
    <div class="box"></div>
    <h3>哈哈哈哈哈哈哈哈哈</h3>
    <h3>哈哈哈哈哈哈哈哈哈</h3>
    <h3>哈哈哈哈哈哈哈哈哈</h3>
    <h3>哈哈哈哈哈哈哈哈哈</h3>


</body>
</html>

使用固定定位会使你在滑动滚动条时，它一直固定在页面上可视

温馨提示：

设置定位后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档

<!DOCTYPE html>
<html>
<head>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: relative;
            top: 100px;
            left: 100px;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            top: 50px;
            left: 50px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="container">
     <div class="box"></div>
    </div>


</body>
</html>

如果父级设置了相对定位，那么子级的定位是依据父级定位的

z-index

该属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总会处于堆叠顺序较低的元素的前面

<!DOCTYPE html>
<html>
<head>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: absolute;
            z-index: 1;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            top: 50px;
            left: 50px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="container"></div>
    <div class="box"></div>



</body>
</html>

CSS新特性

圆角

border-radius 属性

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

一个值： 四个圆角值相同

.container{
            width: 200px;
            height: 200px;
            background-color: aqua;
            border-radius: 50px;
        }

如果设置border-radius为50%，则为圆

CSS3 圆角属性

属性	描述
border-radius	所有四个边角 border---radius 属性的缩写
border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

阴影

CSS3 中的 box-shadow 属性被用来添加阴影

        .container{
            width: 200px;
            height: 200px;
            background-color: aqua;
            border-radius: 50px;
            box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
        }

.box {
  box-shadow: 0px 5px 5px 10px rgba(0, 0, 0, 0.3);
}
0：水平偏移0

5px：垂直偏移 5px。

5px：模糊半径 10px。

10px：扩散半径10。

rgba(0, 0, 0, 0.3)：不透明度为0.3的黑色阴影。

动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。

@keyframes 创建动画

@keyframes name {

         from | 0% {

样式

                }

percent{

                }

                to | 100% {

样式

                }

        }

name：动画名称，开发人员自己命名

percent：为百分比值，可以添加多个百分比值

animation 执行动画

animation: mymove duration timing-function delay iteration-count direction fill-mode;

值	描述
name	设置动画的名称
duration	设置动画的持续时间
timing-function	设置动画效果的速率
delay	设置动画的开始时间（延迟执行）
iteration-count	设置动画循坏次数，infinite为无限次循环
direction	设置动画播放的方向
animation-play-state	控制动画的播放状态：running代表播放，而paused代表停止播放

timing-function值	描述
ease	逐渐变慢（默认）
linear	匀速
ease-in	加速
ease-out	减速
ease-in-out	先加速后减速

direction	描述
normal	默认值为normal表示向前播放
alternate	动画播放在第偶数次向前播放，第奇数次向反方向播放

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes mymove {
            from {
                background-color: red;
            }
            to {
                 background-color: rgb(32, 204, 29);
            }
        }
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: mymove 3s linear 0s infinite alternate;
        }

    </style>
</head>
<body>
    <div></div>

</body>
</html>

切换背景颜色

        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div:hover {
            background-color: blue;
        }

移上去由红色变成蓝色。

过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性

指定效果的持续时间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximun-scale=1,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            transition: width 2s;
        }
        div:hover{
            width: 200px;
        }

    </style>
</head>
<body>
    <div></div>
</body>
</html>

鼠标移到div上时就会有2秒的宽度过渡效果了。

过渡属性

下表列出了所有的过渡属性:

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

呼吸效果

<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes mymove {
            0% {
                opacity: .2;
                box-shadow: 0 10px 20px rgba(227, 55, 55, 0.3) ;
            }
            50% {
                opacity: .5;
                box-shadow: 0 10px 20px rgba(6, 30, 125, 0.6) ;
            }
            100% {
                opacity: 1;
                box-shadow: 0 10px 20px rgba(9, 171, 104, 1) ;
                
            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 10px;
            animation: mymove 5s ease-in-out infinite alternate;
            box-shadow: 0 10px 20px rgba(9, 171, 104, 0.1) ;
        }

    </style>
</head>
<body>
    <div></div>

</body>
</html>

媒体查询

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想：取代了查找设备的类型，CSS3 根据设置自适应显示。

媒体查询可用于检测很多事情，例如：

viewport(视窗) 的宽度与高度
设备的宽度与高度
朝向 (智能手机横屏，竖屏) 。
分辨率

设置meta标签

使用设备的宽度作为视图宽度并禁止初始的缩放，在<head>标签里加入这个meta标签

<meta name="viewport" content="width=device-width,initial-scale=1,maximun-scale=1,user-scalable=no">

参数解释

width=device-width ：宽度等于当前设备的宽度
initial-scale ：初始的缩放比例（默认设置为1.0）
maximun-scale ：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable ：用户是否可以手动缩放（默认为no）

媒体查询语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximun-scale=1,user-scalable=no">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
        }
        @media screen and (max-width: 768px) {
            div {
                background-color: rgb(91, 38, 198);
            }
        }
        @media screen and (min-width: 768px) and (max-width: 996px){
           div {
                background-color: rgb(208, 129, 11);
            }
        }
        @media screen and (min-width: 996px) {
            div {
                background-color: lightgreen;
            }
        }

    </style>
</head>
<body>
    <div></div>
</body>
</html>

精灵图（雪碧图）

css Sprite也叫css精灵图、css雪碧图，是一种网页图片应用处理方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中区

优点

减少图片的字节
减少网页的http请求，从而大大的提高页面的性能

原理

通过background-image引入背景图片
通过background-position把背景图片移动到自己需要的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximun-scale=1,user-scalable=no">
    <title>Document</title>
    <style>
        span{
            display: block;
            width: 50px;
            height: 50px;
            background-image: url(./image.png);
            background-position: -20px 20px;/* 调整x,y位置 */

        }

    </style>
</head>
<body>
    <span></span>
</body>
</html>

字体图标

我们经常用图标，在使用时会遇到失真情况，而且图片数量很多页面就会加载越慢，所以，我们可以使用字体图标方式显示图标，既解决失真也解决图片占用资源。

常用字体图标库：阿里字体图标库

优点

轻量性：加载速度快，减少http请求
灵活性：可以利用css设置大小颜色
兼容性：网页字体支持所有现代浏览器，包括IE低版本

使用字体图标

注册账号并登录
选取图标或搜索图标
添加购物车
下载代码
选择 font-class 引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximun-scale=1,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        .home{
            font-size: 40px;
            color:aqua
        }

    </style>
</head>
<body>
    <span class="iconfont icon-icon-sousuo home"></span>
</body>
</html>

多列

CSS3 的多列属性:

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

属性描述

column-count 指定元素应该被分割的列数。

column-fill 指定如何填充列

column-gap 指定列与列之间的间隙

column-rule 所有 column-rule-* 属性的简写

column-rule-color 指定两列间边框的颜色

column-rule-style 指定两列间边框的样式

column-rule-width 指定两列间边框的厚度

column-span 指定元素要跨越多少列

column-width 指定列的宽度

columns column-width 与 column-count 的简写属性。

属性	描述
column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的宽度
columns	column-width 与 column-count 的简写属性。

创建多列

`column-count属性`指定了需要分割的列数（分割的是文本）

<!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>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            column-count: 3;
        }
    </style>
</head>
<body>
    <div>失败是成功之母！</div>
</body>
</html>

多列中列与列间的间隙

column-gap 属性指定了列与列间的间隙。

div{
            width: 100px;
            height: 100px;
            background-color: red;
            column-count: 3;
            column-gap: 40px;
        }

列边框

column-rule-style 属性指定了列与列间的边框样式

div{
            width: 100px;
            height: 100px;
            background-color: red;
            column-count: 3;
            column-gap: 40px;
            column-rule-style: solid;
        }

column-rule-width 属性指定了两列的边框厚度

column-rule-color 属性指定了两列的边框颜色

div{
            width: 100px;
            height: 100px;
            background-color: red;
            column-count: 3;
            column-gap: 40px;
            column-rule-style: solid;
            column-rule-width:10px;
            column-rule-color: blue;
        }

column-rule 属性是 column-rule-* 所有属性的简写。

div{
            width: 100px;
            height: 100px;
            background-color: red;
            column-count: 3;
            column-gap: 40px;
            column-rule: 2px solid #eee;
        }

码道开发者社区

码道开发者社区，聚焦华为云码道 CodeArts 代码智能体，沉淀 Agent、Skill、鸿蒙开发实战内容，供开发者查阅资料、交流技术、分享工程实践

更多推荐

AI 已经能直接改设计稿了:Windows部署Penpot，接入Codex MCP实测

码道开发者社区

【AI 业务流架构师】AI 业务流架构师方法论：Agentic AI 范式转移与业务编排思维

2026 年，Anthropic CEO Dario Amodei 在 Code with Claude 大会上的一个判断广为流传：一个人运营一家十亿美元级公司的概率是 70%–80%。这句话听起来像科幻小说的设定，但它背后是一个正在发生的结构性变化——AI 把"执行"的成本压到了历史低点，同时把"编排"的价值推到了前台。这意味着我们需要一套新的思考框架，来回答两个问题：一个人如何拥有一个公司的产