CSS 基础

子柒s2025-07-24 22:08

标题目录

基本概念

  • CSS（Cascading Style Sheet）级联样式表，用来控制页面布局与页面样式
  • 可以修改颜色、大小、位置、层级、动画等等
  • CSS3 中多种颜色模式/阴影/边框圆角/渐变/动画/过渡/响应式/弹性布局/多列布局都是 CSS3 的新特性

CSS 的三种位置

行内样式

写在 HTML 元素的开始标签里，只对当前行生效

特点：只能给一个元素使用，复用性差

复制代码 
<h4 style="color:red;">我是标题</h4>

内部样式

写在 head 标签中的 style 标签里，对当前页面所有元素生效

特点：随着当前页面加载而加载，加载速度快，首页常用

复制代码 
<head>
  <style>
     /* 标签名选择器 */
     h1 {
          color:red;
        }
  </style>
</head>

外部样式

写在独立的.css 文件中，在html 文件中引入外部的.css 文件

  • rel：必写属性，表示引入文件是什么类型 stylesheet 样式表

  • href：要引入 CSS 文件的路径
    特点：可以被多个页面共享，复用性强，常用于二三级页面

    <html> <head> <link rel="stylesheet" href="01.css"> </head> </html>

优先级

  • 渲染同一个元素，样式不同会叠加生效,比如背景色和文字颜色会同时生效
  • 如果渲染的样式相同，按照如下优先级排序：
    !important > 行内样式>（内部样式=外部样式）>浏览器自带的样式
  • 内部样式与外部样式优先级一样，后写的样式会把之前的样式覆盖掉

选择器

  • 标签名选择器：选中指定标签的所有元素，写法： 标签名 { CSS 样式 }

  • 类选择器：选中指定的一类元素，写法： .class值 { CSS 样式 }

  • id 选择器：选中指定的一个元素，写法： #id值 { CSS 样式 }

  • 伪类选择器：

    • 选中超链接未被访问时时的状态，写法：a:link{ CSS 样式 }
    • 选中超链接已被访问时的状态，写法：a:visited{ CSS 样式 }
    • 选中元素的悬停状态（非超链接独有），写法： div:hover{ CSS 样式 }
    • 选中超链接激活时的状态，写法：a:active{ CSS 样式 }
    • 注意：a 标签伪类的顺序： :link :visited :hover :active

  • 并列选择器：选中满足所有选择器条件的元素,是"与"的关系，写法： #d1:hover { CSS 样式 }

  • 群组选择器：选中多种不同的元素,是"或"的关系，，写法： #id 值，.class 值，标签名{ CSS 样式 }

  • 通用选择器：选中所有元素，写法： *{ CSS 样式 }

  • 后代选择器：选中祖先元素中包含的所有后代元素，写法： div span{ CSS 样式 }

  • 子代选择器：选中父元素中下的直接子元素，写法： div>span{ CSS 样式 }

    <head> <meta charset="UTF-8"> <title>02_CSS选择器</title> <style> /* 1.标签名选择器:选中此标签名对应的所有元素 */ h4 { color: red; }
    复制代码 
          /* 2.id选择器:选中指定id值的唯一一个元素 */
      #d1 {
          width: 100px;
          height: 100px;
          background-color: aqua;
      }
      /* 3.类选择器  */
      .msg {
          color: white;
      }
      .error {
          background-color: red;
      }
      .success {
          background-color: green;
      }
      /* 4.伪类选择器:选中元素的某种状态 */
      a:link { /* 超链接未被访问过的状态 */
          color: gray;
      }
      a:visited { /* 超链接已经被访问过的状态 */
          color: green;
      }
      a:hover { /* 元素悬停的状态 */
          color: orange;
      }
      a:active { /* 超链接激活时的状态 */
          color: red;
      }
      /* 5.并列选择器:必须紧挨在一起写,表示同时满足两个选择器条件才会生效,是"与"的关系 */
      #d1:hover {/* 元素悬停的状态 */
          background-color: yellow;
      }
      /* 6.群组选择器:用逗号隔开,只要满足其中一个选择器的条件就会生效,是"或"的关系 */
      h4,#d1,.error {
          border: 5px solid black;
      }
      /*7.后代选择器:选中包含在此元素中的所有后代元素(子 孙 重孙...)*/
      #d2 span {
          background-color: purple;
      }
      /*8.子代选择器:选中当前元素的直接子元素,不会继续向下选择 */
      #d2>div>p>span {
          color: white;
      }
  </style>
    </head>

常用值

  1. px：像素，屏幕上最小的一个发光点
  2. viewport 视口 用来展示页面内容的完整窗口
    • height: 100vh；100% viewport height 撑满全屏高
    • width: 100vw； 100% viewport width 撑满全屏宽
  3. 颜色表示法：
    • 单词表示，如：red
    • 十六进制表示法，如：color：#0000FF；
      • 前两位表示红色，中间两位表示绿色，最后两位表示蓝色
    • 简写的十六进制表示法，如：color：#00F；
      • 三种颜色两位数字都相同，才可以简写
    • rgb（red,green,blue）表示法，如：color：rgb（0,0,255）；
      • 值的范围是 0～255
    • rgba（red,green, blue,alpha）表示法，如：color：rgba（0,0,255,0.5）；
      • 不透明度，0 表示完全透明，1 表示完全不透明

字体处理

color： 设置文字颜色

font-size ：设置文字的大小

  • 谷歌浏览器默认字体大小 16px，最小 12px，低于 12px 也以 12px 显示

font-family："幼圆"； 设置文字字体

  • 执行顺序是从前向后执行的
  • 字体名称要使用引号包裹
  • 商用字体要考虑到版权问题
  • 尽量少用奇怪的字体，因为客户可能会没有
    （字体文件在电脑 C 盘的"Fonts"文件夹中
    打开"计算机"->C 盘-> "Windows"-> "Fonts"即可看到所有已安装的字体）

text-decoration ：设置文本修饰线

  • underline 下划线
  • none 去掉所有修饰线
  • line-through 添加一条删除线

line-height：设置文本行高

  • 称为行间距，指的是行与行文本之间的距离
  • 如果需要单行文字在元素内垂直居中，可以让行高为元素的高度即可

text-align ：设置块级元素内文本的水平对齐方式

  • 对齐方式：left 左对齐 / center 居中对齐 / right 右对齐

text-shadow: 20px 20px 5px red;

  • 文本阴影：X 轴偏移量 Y 轴偏移量 羽化值 阴影颜色

font-weight：字重（字体粗细），可取值：

  • normal 400 正常体
  • lighter 300 细体
  • bold 600 粗体

font-style：italic; 文字倾斜效果

元素的显示模式

  • 块级元素：display:block；
    • 排列方式：按照书写的顺序，从上往下依次排列
    • 特点：独占一行，还可以设置宽高
    • 常见标签：div h1～h6 p form table ul ol li...
  • 行内元素：display:inline；
    • 排列方式：按照书写顺序从左往右依次排列
    • 特点：共占一行，不能设置宽高
    • 常见标签：span a i b s...
  • 行内块元素：display:inline-block；
    • 排列方式：按照书写顺序从左往右依次排列
    • 特点：共占一行，可以修改宽高
    • 常见标签：input button
  • 元素消失：display:none；
    • 特点：元素使用此方式消失后，不再占据页面(文档流)的布局空间

盒子模型

一个 HTML 元素，需要占用页面的布局空间，这个空间由以下几个部分组成：

  • content 内容区域 元素本身的大小
  • padding 内间距 元素内容与边框之间的距离
  • border 元素的边框
  • margin 外间距 元素与元素之间的距离
    涉及到四个方向 left 左 right 右 top 上 bottom 下

外间距（margin）

  • 外间距的写法：

    • margin-bottom：50px；设置单侧外间距（top上 / right右 / bottom下/ left左）
    • margin：10px；四个方向都是 10px
    • margin：10px 20px；上下 10px 左右 20px
    • margin：10px 20px 30px；上 10px 左右 20px 下 30px
    • margin：10px 20px 30px 40px；上 10px 右 20px 下 30px 左 40px
    • margin： 0 auto；上下 0 左右居中
      块级元素左右外间距计算成等值，能实现水平居中效果

  • 规律：按照 上右下左 顺时针 依次赋值 没有的找对门

  • 外间距指的元素外部与其它元素之间的距离

    • 块级与行内块元素四个方向的外间距均生效
    • 行内元素的左右外间距可以用，上下外间距不生效
    • 父子贴边问题：给父元素加 BFC 结界 overflow:hidden；
      第 1 个子元素的上外间距与最后 1 个子元素的下外间距都会包裹在父元素范围之内
    • 相邻兄弟间在垂直方向上如果有重叠的外间距，取最大值显示

边框（border）

设置边框：border：1px solid #000； 粗细 线型 颜色

设置某一个方向的边框：border-top: 1px solid #000； 设置上边框的粗细 线型 颜色

去掉边框： border:none； 或者 border:0；

线型：solid 单实线 dashed 虚线 dotted 点状线 double 双实线...

边框圆角： border-radius: 100px；

  • 数值越大，角越圆
  • 边框圆角为正方形高度的一半，可以切圆形
  • 边框圆角为长方形高度的一半，可以切胶囊型

内间距（padding）

  • 内间距的写法：

    • padding-top: 50px; 设置单侧内间距（top 上/right 右/bottom 下/left 左）
    • padding:10px; 四个方向都是 10px
    • padding:10px 20px; 上下 10px 左右 20px
    • padding:10px 20px 30px; 上 10px 左右 20px 下 30px
    • padding:10px 20px 30px 40px; 上 10px 右 20px 下 30px 左 40px

  • 规律：按照 上右下左 顺时针 依次赋值 没有的找对门

  • 内间距指的是元素内容与边框之间的距离

    • 块级与行内块元素的四个方向的内间距均生效
    • 行内元素的左右内间距正常生效，但上下内间距不生效

  • 内间距使用场景

    让元素内部距离外层父级元素的边有点距离，主要为了美化，如：

    • 输入框的文字不要贴边显示
    • 文本卡片内容不要贴边显示

切换盒子模型计算方案

  • box-sizing: border-box;边框盒子
  • 效果：加内间距与边框都不会让元素变大，都算在元素设置的 width 与 height 中

浮动

  • float:left; 左浮动，向父级元素的左侧边界靠拢
  • float:right; 右浮动，向父级元素右侧边界靠拢

浮动特点：

  1. 浮动布局可以让元素横向排列
  2. 浮动后的元素会释放原有的布局空间且不再支撑父元素的高度
  3. 如果一个父元素中所有的子元素都浮动了，父元素会高度坍塌（失高）

解决方案：给父元素设置 overflow:hidden；

会根据子元素浮动后的实际高度给父元素自动填充高度，解决失高问题

页面版心

版心指的是一般在页面中固定宽度且居中，用来显示页面主要内容的一块区域

复制代码 
.center 或 .container {
	width: 1000px;
	margin: 0 auto;
}

定位

静态定位（默认值） position:static

就是默认的布局，元素根据默认的显示模式排列(块级元素竖着排，行内/行内块元素横着排)

  • 使用其他定位属性后，可以让元素通过 top/bottom/left/right 四个属性移动
  • 层级 z-index：使用定位后，元素发生重叠时可以调整层级
    1. z-index 的值越大，层级越高，值大的元素会覆盖值小的元素
    2. 值为整数值，没有任何单位
    3. 默认值是 auto，可以看作是层级 0，z-index 还可以取负值

注意：静态定位不能使用上述属性

相对定位 position:relative

移动参照物：元素自己原来的位置

  1. 不会释放布局空间，还可以支撑父元素，不影响父级
  2. 与外间距 margin 的区别：margin 会影响其他元素，相对定位不会挤开兄弟元素，但可能会遮盖
  3. 常用于需要微调元素位置时使用

绝对定位 position:absolute

移动参照物：离自己最近的使用了非静态定位属性的上层元素

（会一路向上找，终点是 html 根元素）

  1. 绝对定位的元素会释放布局空间
  2. 小技巧：（子绝父相）子元素使用绝对定位，父级设置相对定位后可以变成子元素移动的参照物

固定定位 position:fixed

移动参照物：html 根元素（浏览器窗口）

  1. 固定定位也会释放布局空间
  2. 我们可以利用固定定位实现页面固定广告与撑满全屏的效果

布局方式总结

| 浮动布局 float:left/right | 元素会释放布局空间 |
| 浮动布局 float:left/right |
| 浮动布局 float:left/right |
| 浮动布局 float:left/right |
|------------------------------------|-----------|
| 如果所有子元素都浮动，父元素会高度坍塌 |
| 浮动元素可以使用 margin 微调自己的位置 |
| 用途：可在页面中实现"两端对齐"或"横置"的效果 |
| 行内/行内块元素从左往右依次排列，一行放不下才换行 |
| 默认的静态定位元素都是紧密排列的，没有大的空隙和元素堆叠的现象 |
| 不会释放布局空间 |
| 可以使用 top bottom left right 调整自己的位置 |
| 可以使用 z-index 调整层级 |
| 用途：微调自己的位置，但不会挤开其它元素 |
| 用途：为使用绝对定位的后代元素提供定位参照物 |
| 会释放布局空间 |
| 可以使用 top bottom left right 调整自己的位置 |
| 可以使用 z-index 调整层级 |
| 用途：在页面上覆盖到其它元素上方的指定位置 |
| 会释放布局空间 |
| 可以使用 top bottom left right 调整自己的位置 |
| 可以使用 z-index 调整层级 |
| 用途：制作覆盖整个窗口的遮罩层、或制作页面固定广告 |

元素的放大与过渡

  • transform: scale(n)：变换(倍数) 变换至原来的n倍

    • n>1放大n倍
    • n=1 大小不变
    • 0<n<1缩小n倍
    • 0缩小到看不见

  • transform: rotate(720deg)：元素旋转，单位deg，正数顺时针转，多个值使用空格隔开

  • transition: ns：添加过渡，让变换有一点过渡时间，一瞬间完成变换太过太突兀

  • 注意：过渡要加给div，而不是悬停，否则离开 div 时没有过渡，效果不好

    div {
    width: 100px;
    height: 100px;
    background-color: #f00;
    margin: 100px auto 0;
    /* 过渡时间必须写在元素本身,否则不悬停时没有过渡效果 */
    transition: 2s;
    }
    div:hover {
    background-color: #0aa1ed;
    border-radius: 50px;
    transform:scale(2) rotate(720deg);
    }

溢出处理

元素溢出

如果内容超出了预设的区域，我们称之为"溢出"，溢出一般有以下几种处理方式

  • overflow: visible; 默认值 溢出可见
  • overflow: hidden; 溢出隐藏，超出部分裁掉 可解决父子贴边问题与父元素失高问题
  • overflow: scroll; 两个方向都有滚动条
  • overflow: auto; 自动给溢出的方向设置滚动条

溢出文本替换为省略号

  • white-space: nowrap; 强制不换行
  • overflow: hidden; 溢出隐藏
  • text-overflow: ellipsis;溢出文本替换为省略号

CSS属性总结表

分类 属性名 作用 属性值 备注
文本处理 color 字体颜色 red rgb rgba hex 单词 rgb rgba 16进制
文本处理 font-size 字体大小 16px 像素值
文本处理 text-decoration 文本修饰线 line-through 删除线
文本处理 text-decoration 文本修饰线 underline 下划线
文本处理 text-decoration 文本修饰线 none 去除所有修饰线
文本处理 line-height 行高 40px 像素值
文本处理 text-align 文本水平对齐方式 center 水平居中对齐
文本处理 text-align 文本水平对齐方式 left 水平左对齐
文本处理 text-align 文本水平对齐方式 right 水平右对齐
文本处理 font-family 字体型号 "微软雅黑","宋体","华文彩云" 从前往后依次取值，可以写多个值
文本处理 font-weight 字体字重 normal 400 正常体
文本处理 font-weight 字体字重 lighter 300 细体
文本处理 font-weight 字体字重 bold 600 粗体
文本处理 white-space 文本溢出换成省略号 nowrap 强制不换行
文本处理 overflow 文本溢出换成省略号 hidden 溢出部分隐藏
文本处理 text-overflow 文本溢出换成省略号 ellipsis 超出的文本替换成省略号
背景处理 background-color 背景颜色 red rgb rgba 单词 rgb rgba 16进制
背景处理 background-image 背景图 url(图片路径) 所在区域需要设置宽高
背景处理 background-image 渐变效果 linear-gradient(颜色1, 颜色2, 颜色3...) 只有颜色渐变
背景处理 background-image 渐变效果 linear-gradient(角度值, 颜色1, 颜色2...) 带角度的渐变
背景处理 background-size 背景图尺寸 600px 300px 100% 100% 像素值； 百分比值需注意图片失真问题
背景处理 background-position 背景图定位 left top 默认左上角 先说左右，再说上下 X轴:left左 center中 right右 Y轴:top上 center中 bottom下
背景处理 background-position 背景图定位 150px -50px 像素值 向右150px 向上50px
背景处理 background-repeat 背景图重复方式 repeat 默认值，x轴y轴都重复
背景处理 background-repeat 背景图重复方式 repeat-x 只允许x轴重复
背景处理 background-repeat 背景图重复方式 repeat-y 只允许y轴重复
背景处理 background-repeat 背景图重复方式 no-repeat 不允许重复
盒子模型 box-sizing 盒子模型计算方案 content-box 内容盒子(默认值)
盒子模型 box-sizing 盒子模型计算方案 border-box 边框盒子(怪异盒子)
盒子模型 padding 内间距 10px 上右下左四个方向都是10
盒子模型 padding 内间距 10px 20px 上下:10 左右:20
盒子模型 padding 内间距 10px 20px 30px 上10 左右20 下30
盒子模型 padding 内间距 10px 20px 30px 40px 上10 右20 下30 左 40
盒子模型 padding-top 内间距 10px 上内间距
盒子模型 padding-right 内间距 10px 右内间距
盒子模型 padding-bottom 内间距 10px 下内间距
盒子模型 padding-left 内间距 10px 左内间距
盒子模型 margin 外间距 10px 上右下左四个方向都是10
盒子模型 margin 外间距 10px 20px 上下:10 左右:20
盒子模型 margin 外间距 10px 20px 30px 上10 左右20 下30
盒子模型 margin 外间距 10px 20px 30px 40px 上10 右20 下30 左 40
盒子模型 margin-top 外间距 10px 上外间距
盒子模型 margin-right 外间距 10px 右外间距
盒子模型 margin-bottom 外间距 10px 下外间距
盒子模型 margin-left 外间距 10px 左外间距
盒子模型 border 四个方向的边框 1px solid #000 综合设置：粗细 线型 颜色
盒子模型 border-top 上边框 1px solid #000 综合设置：粗细 线型 颜色
盒子模型 border-right 右边框 1px solid #000 综合设置：粗细 线型 颜色
盒子模型 border-bottom 下边框 1px solid #000 综合设置：粗细 线型 颜色
盒子模型 border-left 左边框 1px solid #000 综合设置：粗细 线型 颜色
盒子模型 border-width 边框宽度 1px 设置四个方向边框的粗细
盒子模型 border-style 边框线型 solid单实线 dashed虚线 dotted点状 double双实线
盒子模型 border-color 边框颜色 red rgb rgba hex 单词 rgb rgba 16进制
盒子模型 border-{top}-{color} {上}边框的{颜色} 设置单个方向边框的单个属性:粗细 线型 颜色
大小处理 width 宽度 100px 100% 像素值 百分比
大小处理 height 高度 100px 101% 像素值 百分比
显示模式 display 块级元素 block 以块级元素的形式显示
显示模式 display 行内元素 inline 以行内元素的形式显示
显示模式 display 行内块元素 inline-block 以行内块元素的形式显示
显示模式 display 元素消失 none 元素消失并释放布局空间
隐藏与显示 background-color 背景色设为透明色 background-color: transparent 只影响背景颜色，不会释放布局空间
隐藏与显示 background-color 背景色设为透明色 background-color: rgba(0,0,0,0) 只影响背景颜色，不会释放布局空间
隐藏与显示 transform:scale(0) 设置缩放为0 -- 让元素缩小到看不见
隐藏与显示 opacity 透明度 0完全透明 1完全不透明 0.5半透明 所有内容一起透明，不释放布局空间
隐藏与显示 display 修改显示模式 none 元素消失并释放布局空间
溢出控制 overflow 控制溢出情况 visible 默认值，溢出可见
溢出控制 overflow 控制溢出情况 hidden 溢出隐藏，溢出的部分会被裁剪
溢出控制 overflow 控制溢出情况 scroll 无论是否需要，侧边与下边都有滚动条
溢出控制 overflow 控制溢出情况 auto 自动添加滚动条，需要的时候再加
修饰与美化 list-style 列表样式 none 去掉列表项前标识符
修饰与美化 border-radius 边框圆角 5px 或 10% 像素值或百分比，四个角弧度统一
修饰与美化 border-radius 边框圆角 10px 30px 左上右下 右上左下 对角线
修饰与美化 border-radius 边框圆角 10px 20px 30px 左上 右上左下 右下
修饰与美化 border-radius 边框圆角 10px 20px 30px 40px 从左上角开始顺时针给四个角设置
修饰与美化 box-shadow 元素阴影 值1: 5px 必写，阴影的X轴偏移量，默认向右移动
修饰与美化 box-shadow 元素阴影 值2: 5px 必写，阴影的Y轴偏移量，默认向下移动
修饰与美化 box-shadow 元素阴影 值3: 5px 羽化值，越大阴影越虚化，默认0，不许负值
修饰与美化 box-shadow 元素阴影 值4: 5px 扩展半径，越大阴影范围越大，默认0
修饰与美化 box-shadow 元素阴影 值5: #aaa 阴影颜色
浮动 float 左浮动 left 向父级元素的左侧边界靠拢
浮动 float 右浮动 right 向父级元素的右侧边界靠拢
定位 position 定位方式 static 静态定位(默认值)，原来的文档流布局
定位 position 定位方式 relative 相对定位，参照自己原来的位置
定位 position 定位方式 absolute 绝对定位，参照最近的非静态祖先元素
定位 position 定位方式 fixed 固定定位，参照根元素html
定位 z-index 调整层级 整数值，无单位，可以有负数 数字越大，层级越靠上
定位 top/right/bottom/left 移动方向 像素值 百分比 距离参照物移动的距离，负值反方向
过渡 transition 过渡简写属性 最简写执行时间就行，其他都可不写 执行时间在前，延迟时间在后，其他没顺序
变换 transform 旋转 rotate(30deg) 元素在二维平面,绕页面中心点旋转
变换 transform 缩放 scale() 同时负责X轴与Y轴的缩放
相关推荐
nlp研究牲9 分钟前
latex中既控制列内容位置又控制列宽，使用＞{\centering\arraybackslash}p{0.85cm}
服务器·前端·人工智能·算法·latex
前端拿破轮12 分钟前
HomeBrew创始人都写不出来的翻转二叉树到底怎么做？
前端·算法·typescript
长夜月19 分钟前
React 19 中的新特性
前端
星眠19 分钟前
学习低代码编辑器第三天
前端·面试
VillenK26 分钟前
vban2.0中table的使用
前端·vue.js
Dolphin_海豚30 分钟前
vapor 中的 ast 是如何被 transform 到 IR 的
前端·vue.js·源码
Jimmmmmmm1 小时前
pnpm如何避免幻影依赖：从node_modules演进史说起
前端
拾光拾趣录1 小时前
如何优雅地实现每 5 秒轮询请求？
前端·javascript
snowbitx1 小时前
Vue开发尝试一下
前端
前端缘梦1 小时前
JavaScript 高频面试题精讲：var、let、const 与类型系统全解析
前端·面试
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02全球最强模型Grok4，国内已可免费使用！（附教程）03vue数据变化但页面不变04【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致05KGG转MP3工具|非KGM文件|解密音频06ChatGPT Agent 完全使用指南：2025年7月最新功能详解07Cursor Claude 模型无法使用的解决方法08这次领先Cursor！体验了Trae 2.0 SOLO 模式，超酷！09Claude Code用不了？来试下Qwen3-Coder加持的Qwen Code吧10干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！