前端开发_CSS

CSS定义

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）

书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。

示例：

<body><title>CSS 初体验</title><style>/* 选择器 { } */p {/* CSS 属性 */color: red;}</style><p>体验 CSS</p>
</body>

在这里插入图片描述

CSS引入方式

  • 一般：CSS代码写在style标签中

  • 开发：CSS代码卸载单独的CSS文件中(.css)

    在HTML中使用link标签引入

    <link rel="stylesheet" href="./my.css">

  • 行内：配合JavaScript使用

    CSS写在标签的style属性值里

    <div style="color: red; font-size:20px;">这是 div 标签</div>

选择器

作用：查找标签，设置样式

基础选择器：

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器

标签选择器

使用标签名作为选择器 → 选中同名标签设置相同的样式。

例如：p, h1, div, a, img…

<!-- 使用p作为选择器 --><style>p {color: red;}</style>

标签选择器无法差异化同名标签的显示效果。

类选择器

查找标签，差异化设置标签的显示效果。

步骤：

  • 定义类选择器 → .类名
  • 使用类选择器 → 标签添加 class="类名“

示例：

	<style>/* 定义类选择器 */.red {color: red;}</style><!-- 使用类选择器 --><div class="red">这是 div 标签</div>

类名自定义，不要用纯数字或中文，尽量用英文命名

一个类选择器可以供多个标签使用

一个标签可以使用多个类名，类名之间用空格隔开

	<style>/* 定义类选择器 */.red {color: red;}</style><style>.size50 {font-size: 50px;}</style><!-- 使用类选择器 --><div class="red size50">这是 div 标签</div>

id选择器

查找标签，差异化设置标签的显示效果。

id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式

步骤：

  • 定义 id 选择器 → #id名
  • 使用 id 选择器 → 标签添加 id= “id名”
	<style>/* 定义 id 选择器 */#red {color: red;}</style><!-- 使用 id 选择器 --><div id="red">这是 div 标签</div>

同一个 id 选择器在一个页面只能使用一次

通配符选择器

查找页面所有标签，设置相同样式。

*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

* {
color: red;
}

通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距

复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成。

作用：更准确、更高效的选择目标元素（标签）。

后代选择器

后代选择器：选中某元素的后代元素。

选择器写法：父选择器 子选择器 { CSS 属性}，父子选择器之间用空格隔开。

<style>
div span {color: red;
}
</style>
<span> span 标签</span>
<div><span>这是 div 的儿子 span</span >
</div>

子代选择器

子代选择器：选中某元素的子代元素（最近的子级）。

选择器写法：父选择器 > 子选择器 { CSS 属性}，父子选择器之间用 > 隔开。

<style>div > span {color: red;}
</style>
<div><span>这是 div 里面的 span</span><p><span>这是 div 里面的 p 里面的 span</span></p>
</div>

在这里插入图片描述

并集选择器

并集选择器：选中多组标签设置相同的样式。

选择器写法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用 , 隔开。

<style>div,p,span {color: red;}
</style>
<div> div 标签</div>
<p>p 标签</p>
<span>span 标签</span>

交集选择器

交集选择器：选中同时满足多个条件的元素

选择器写法：选择器1选择器2 { CSS 属性}，选择器之间连写，没有任何符号。

<style>p.box {color: red;}
</style>
<p class="box">p 标签，使用了类选择器 box</p>
<p>p 标签</p>
<div class="box">div 标签，使用了类选择器 box</div>

如果交集选择器中有标签选择器，标签选择器必须书写在最前面

伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。

鼠标悬停状态：选择器:hover { CSS 属性 }

<style>a:hover {color: red;}.box:hover {color: green;}
</style>
<a href="#">a 标签</a>
<div class="box">div 标签</div>

超链接一共有四个状态

选择器作用
:link访问前
:visited访问后
:hover鼠标悬停
:active点击时(激活)

如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写

结构伪类选择器

作用：根据元素的结构关系查找元素。

选择器说明
E:first-child查找第一个元素
E:last-child查找最后一个元素
E:nth-child(N)查找第N个E元素(第一个元素N值为1)

示例：查找第一个li元素

li:first-child {background-color: green;
}

:nth-child(公式)

根据元素的结构关系查找多个元素。

功能公式
偶数标签2n
奇数标签2n+1;2n-1
找到5的倍数的标签5n
找到第五个以后的标签n+5
找到第五个以前的标签-n+5

公式中的n取值从 0 开始

伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。

选择器说明
E::before在E元素里面最前面添加一个伪元素
E::after在E元素里面最后面添加一个伪元素
  • 必须设置content: ""属性，用来设置伪元素内容，如果没有内容，引号留空即可
  • 伪元素默认是行内显示模式
  • 权重和标签选择器相同
div::before {content: "before 伪元素";
}
div::after {content: "after 伪元素";
}

基本属性

属性名作用
color颜色
width宽度
height高度
background-color背景色

例子：使用合适的选择器画盒子

	<style>#red {background-color: red;width: 100px;height: 100px;}</style><style>#orange {background-color: orange;width: 200px;height: 200px;}</style><div id="red"></div><div id="orange"></div>

在这里插入图片描述

文字控制属性

描述属性
字体大小font-size
字体粗细font-weight
字体倾斜font-style
行高line-height
字体族(字体样式)font-family
字体复合属性font
文本缩进text-indent
文本对齐text-align
修饰线text-decoration

字体大小

属性名：font-size

属性值：文字尺寸，PC 端网页最常用的单位 px

谷歌浏览器默认字号是16px

字体粗细

属性名：font-weight

属性值：

  • 数字(开发用)：
    • 正常：400
    • 加粗：700
  • 关键字：
    • 正常：normal
    • 加粗：bold

字体倾斜

作用：清除文字默认的倾斜效果/添加文字倾斜效果

属性名：font-style

属性值：

  • 正常：normal
  • 倾斜：italic

行高

作用：设置多行文本的间距

属性名：line-height

属性值：

  • 数字+px：固定行高
  • 数字：当前标签font-szie属性值的倍数

行高：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。

字体族

属性名：font-family

属性值：字体名

示例：

font-family: 楷体;

font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找

font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体

复合属性

div {/* font: 是否倾斜 是否加粗 字号/行高 字体; */font: italic 700 30px/2 楷体;
}

复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。

font: 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）

字号和字体值必须书写，否则 font 属性不生效

文本缩进

属性名：text-indent

属性值：

  • 数字 + px
  • 数字 + em（推荐：1em = 当前标签的字号大小）

文本对齐方式

属性名：text-align

属性值：

  • left：左对齐：默认
  • center：居中对齐
  • right：右对齐

图片对齐方式

text-align本质是控制内容的对齐方式，如果想要对图片进行对齐，属性要设置给内容的父级。

<style>div {text-align: center;}
</style>
<div><img src="./images/1.jpg" alt="">
</div>

文本修饰线

属性名： text-decoration

属性值：

  • none：无
  • underline：下划线
  • line-through：删除线
  • overline：上划线

颜色

属性名：color

颜色表示方式属性值说明适用场景
颜色关键字颜色英文单词red、green、blue…学习测试
rgb表示法rgb(r,g,b)gb表示红绿蓝三原色，取值：0-255了解
rgba表示法rgba(r,g,b,a)a表示透明度，取值0-1开发使用
十六进制表示法#RRGGBB#000，#ffcc00，简写：#000，#fc0开发使用

只要属性值为颜色，都可以使用上述四种颜色表示方式，例如：背景色

CSS特性

  • 继承性
  • 层叠性
  • 优先级

继承性

子级默认继承父级的文字控制属性。

如果标签有默认文字样式会继承失败。

层叠性

相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性

不同的属性会叠加：不同的 CSS 属性都生效

选择器类型相同则遵循层叠性，否则按选择器优先级判断。

优先级

优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

规则：选择器优先级高的样式生效。

公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

（选中标签的范围越大，优先级越低）

如果是复合选择器，则需要权重叠加计算。

公式：（每一级之间不存在进位）行内样式, id选择器个数, 类选择器个数, 标签选择器个数

规则：

  • 从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
  • !important 权重最高
  • 继承权重最低

Emmet写法

Emmet写法：代码的简写方式，输入缩写 VS Code 会自动生成对应的代码。

HTML：

说明标签结构Emmet
类选择器<div class="box"></div>标签名.类名
id选择器<div id="box"></div>标签名#id名
同级标签<div></div><p></p>div+p
父子级标签<div><p></p></div>div>p
多个相同标签<span>1</span><span>2</span>span*2
有内容的标签<div>内容</div>div{内容}

CSS：

说明CSS属性Emmet
宽度widthw
宽度500pxwidth:500pxw500
背景色background-colorbgc
多个属性width: 200px;height: 100px;background-color: #fff;w200+h100+bgc

背景属性

描述属性
背景色background-color
背景图background-image
背景图平铺方式background-repeat
背景图位置background-position
背景图缩放background-size
背景图固定background-attachment
背景复合属性background

背景图

网页中，使用背景图实现装饰性的图片效果。

属性名：background-image（bgi）

属性值：url(背景图 URL)

div {width: 400px;height: 400px;background-image: url(./images/1.png);
}

背景图默认有平铺（复制）效果。

背景图平铺方式

属性名：background-repeat（bgr）

属性值：

属性值效果
no-repeat不平铺
repeat平铺(默认效果)
repeat-x水平方向平铺
repeat-y垂直方向平铺
div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;
}

背景图位置

属性名：background-position（bgp）

属性值：水平方向位置 垂直方向位置

关键字效果
left左侧
right右侧
center居中
top顶部
bottom底部

或是使用坐标：数字 + px，正负都可以

  • 水平：正数向右；负数向左

  • 垂直：正数向下；负数向上

div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;background-position: center bottom;background-position: 50px -100px;background-position: 50px center;
}

关键字取值方式写法，可以颠倒取值顺序

可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中

背景图缩放

作用：设置背景图大小

属性名：background-size（bgz）

常用属性值：

  • 关键字

    • cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见

    • contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白

  • 百分比：根据盒子尺寸计算图片大小

  • 数字 + 单位（例如：px）

div {width: 500px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;background-size: cover;background-size: contain;
}

工作中，图片比例与盒子比例相同，使用 cover 或 contain 缩放背景图效果相同。

背景图固定

作用：背景不会随着元素的内容滚动。

属性名：background-attachment（bga）

属性值：fixed

背景复合属性

属性名：background（bg）

属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）

div {width: 400px;height: 400px;background: pink url(./images/1.png) no-repeat right 	center/cover;
}

CSS精灵

CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再

background-position 精确的定位出背景图片的位置。

优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度

实现步骤：

  1. 创建盒子，盒子尺寸与小图尺寸相同

  2. 设置盒子背景图为精灵图

  3. 添加 background-position 属性，改变背景图位置

    • 使用 PxCook 测量小图片左上角坐标

    • 取负数坐标为 background-position 属性值（向左上移动图片位置）

字体图标

字体图标：展示的是图标，本质是字体

作用：在网页中添加简单的、颜色单一的小图标

优点：

  • 灵活性：灵活地修改样式，例如：尺寸、颜色等
  • 轻量级：体积小、渲染快、降低服务器请求次数
  • 兼容性：几乎兼容所有主流浏览器
  • 使用方便：先下载再使用

下载地址：阿里巴巴矢量图标库

下载步骤：登录 → 素材库 → 官方图标库 → 进入图标库 → 选图标，加入购物车 → 购物车，添加至项目，确定 → 下载至本地→解压

在这里插入图片描述

使用字体：

  1. 引入字体样式表

    <link rel="stylesheet" href="./iconfont/iconfont.css">

  2. 标签使用字体图标类名

    <span class="iconfont icon-xxx"></span>

    1. iconfont：字体图标基本样式（字体名，字体大小等）

    2. icon-xxx：图标对应的类名

      在下载的压缩包中找到demo_index.html可查看图标对应的类名

显示模式

显示模式：标签（元素）的显示方式。

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。

  • 块级元素

    • 独占一行
    • 宽度默认是父级的100%
    • 添加宽高属性生效

  • 行内元素

    • 一行可以显示多个
    • 设置宽高属性不生效
    • 宽高尺寸由内容撑开

  • 行内块元素

    • 一行可以显示多个
    • 设置宽高属性生效
    • 宽高尺寸也可以由内容撑开

转换显示模式

属性名：display

属性值：

属性值效果
block块
inline-block行内块
inline行内

PxCook

PxCook（像素大厨） 是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别

能够测量网页元素尺寸及颜色

盒子模型

作用：布局网页，摆放盒子和内容

盒子模型重要组成部分：

  • 内容区域 – width & height
  • 内边距 – padding（出现在内容与盒子边缘之间）
  • 边框线 – border
  • 外边距 – margin（出现在盒子外面）

在这里插入图片描述

div {margin: 50px;border: 5px solid brown;padding: 20px;width: 200px;height: 200px;background-color: pink;
}

边框线

属性名：border（bd）

属性值：边框线粗细 线条样式 颜色（不区分顺序）

常用线条样式：

属性值线条样式
solid实线
dashed虚线
dotted点线
div {border: 5px solid brown;width: 200px;height: 200px;background-color: pink;
}

设置单方向边框线

属性名：border-方位名词（bd+方位名词首字母，例如，bdl）

属性值：边框线粗细 线条样式 颜色（不区分顺序）

div {border-top: 2px solid red;border-right: 3px dashed green;border-bottom: 4px dotted blue;border-left: 5px solid orange;width: 200px;height: 200px;background-color: pink;
}

内边距

作用：设置 内容 与 盒子边缘 之间的距离。

属性名：padding / padding-方位名词

div {/* 四个方向 内边距相同 */padding: 30px;/* 单独设置一个方向内边距 */padding-top: 10px;padding-right: 20px;padding-bottom: 40px;padding-left: 80px;width: 200px;height: 200px;background-color: pink;
}

padding 多值写法

取值个数示例含义
一个值padding: 10px四个方向均为10px
四个值padding: 10px 20px 40px 80px顺序：上;右;下;左
三个值padding: 10px 40px 80px顺序：上;左右;下
两个值padding: 10px 80px顺序：上下;左右

从上开始顺时针赋值，当前方向没有数值则与对面取值相同。

尺寸计算

  • 默认情况：

    盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

  • 结论：给盒子加 border/padding 会撑大盒子

外边距

作用：拉开两个盒子之间的距离

属性名：margin

提示：与 padding 属性值写法、含义相同

技巧：版心居中 – 左右 margin 值 为 auto（盒子要有宽度）

合并现象

场景：垂直排列的兄弟元素，上下 margin 会合并

现象：取两个 margin 中的较大值生效

塌陷问题

场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题

现象：导致父级一起向下移动

解决方法：

  • 取消子级margin，父级设置padding
  • 父级设置 overflow: hidden
  • 父级设置 border-top

清除默认样式

清除标签默认的样式，比如：默认的内外边距

/* 清除默认内外边距 */
* {margin: 0;padding: 0;box-sizing: border-box;
}
/* 清除列表项目符号 */
li {list-style: none;
}

元素溢出

作用：控制溢出元素的内容的显示方式。

属性名：overflow

属性值：

属性值效果
hidden溢出隐藏
scroll溢出滚动（无论是否溢出，都显示滚动条位置）
auto溢出滚动（溢出才显示滚动条位置）

行内元素-内外边距问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置

解决方法：给行内元素添加 line-height 可以改变垂直位置

span {/* margin 和 padding 属性，无法改变垂直位置 */margin: 50px;padding: 20px;/* 行高可以改变垂直位置 */line-height: 100px;
}

圆角

作用：设置元素的外边框为圆角。

属性名：border-radius

属性值：数字+px / 百分比

属性值是圆角半径

取值个数示例含义
一个值border-radius: 10px四个角均为10px
四个值border-radius: 10px 20px 40px 80px顺序：左上;右上;右下;左下
三个值border-radius: 10px 40px 80px顺序：左上;右上+左下;右下
两个值border-radius: 10px 80px顺序：左上+右下;右上+左下

从左上角开始顺时针赋值，当前角没有数值则与对角取值相同。

常见应用：

正圆形状：给正方形盒子设置圆角属性值为 宽高的一半 / 50%

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

胶囊形状：给长方形盒子设置圆角属性值为 盒子高度的一半

div {width: 200px;height: 80px;background-color: orange;border-radius: 40px;
}

阴影

作用：给元素设置阴影效果

属性名：box-shadow

属性值：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影

  • X 轴偏移量 和 Y 轴偏移量 必须书写
  • 默认是外阴影，内阴影需要添加 inset
div {width: 200px;height: 80px;background-color: orange;box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}

标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

浮动

作用：让块元素水平排列。

属性名：float

属性值

  • left：左对齐
  • right：右对齐

特点：

  • 浮动后的盒子顶对齐
  • 浮动后的盒子具备行内块特点
  • 父级宽度不够，浮动的子级会换行
  • 浮动后的盒子脱标，不占用标准流的位置

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

  • 额外标签法

    在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both

  • 单伪元素法

    .clearfix::after {content: "";display: block;clear: both;
}

  • 双伪元素法（推荐）

    .clearfix::before,
.clearfix::after {content: "";display: table;
}
.clearfix::after {clear: both;
}

  • overflow

    父元素添加 CSS 属性 overflow: hidden

Flex布局

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸

组成

组成部分：

  • 弹性容器
  • 弹性盒子
  • 主轴：默认在水平方向
  • 侧轴 / 交叉轴：默认在垂直方向

在这里插入图片描述

描述属性
创建flex容器display: flex
主轴对齐方式justify-content
侧轴对齐方式align-items
某个弹性盒子侧轴对齐方式align-self
修改主轴方向flex-direction
弹性伸缩比flex
弹性盒子换行flex-wrap
行对齐方式align-content

主轴对齐方式

属性名：justify-content

属性值效果
flex-start默认值，弹性盒子从起点开始依次排列
flex-end弹性盒子从重点开始依次排列
center弹性盒子沿主轴居中排列
space-between弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

侧轴对齐方式

属性名

• align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）

• align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

属性值效果
stretch弹性盒子沿着侧轴线被拉伸至铺满容器
（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center弹性盒子沿侧轴居中排列
flex-start弹性盒子从起点开始依次排列
flex-end弹性盒子从终点开始依次排列

修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向

属性名：flex-direction

属性值效果
row水平方向，从左向右（默认）
column垂直方向，从上向下
row-reverse水平方向，从右向左
column-reverse垂直方向，从下向上

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

属性名：flex-wrap

属性值：

  • wrap：换行
  • nowrap：不换行（默认）

行对齐方式

属性名：align-content

属性值效果
flex-start默认值，弹性盒子从起点开始依次排列
flex-end弹性盒子从重点开始依次排列
center弹性盒子沿主轴居中排列
space-between弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

定位

灵活的改变盒子在网页中的位置

实现：

  1. 定位模式：position
  2. 边偏移：设置盒子的位置

属性名：

  • left
  • right
  • top
  • bottom

属性值：

  • 百分比
  • 示例：top: 50%，从父标签顶部开始，向下移动父标签高度50%
  • 示例：right: 30%，从父标签右部开始，向左移动父标签宽度30%

相对定位

position: relative

特点：

  • 不脱标，占用自己原来位置
  • 显示模式特点保持不变
  • 设置边偏移则相对自己原来位置移动

绝对定位

position: absolute

使用场景：子级绝对定位，父级相对定位（子绝父相）

特点：

  • 脱标，不占位
  • 显示模式具备行内块特点
  • 设置边偏移则相对最近的已经定位的祖先元素改变位置
  • 如果祖先元素都未定位，则相对浏览器可视区改变位置

定位居中

实现步骤：

  1. 绝对定位
  2. 水平、垂直边偏移为 50%
  3. 子级向左、上移动自身尺寸的一半
    • 左、上的外边距为 –尺寸的一半
    • transform: translate(-50%, -50%)

固定定位

position: fixed

场景：元素的位置在网页滚动时不会改变

特点：

  • 脱标，不占位
  • 显示模式具备行内块特点
  • 设置边偏移相对浏览器窗口改变位置

堆叠层级

堆叠层级 z-index

默认效果：按照标签书写顺序，后来者居上

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

属性名：z-index

属性值：整数数字（默认值为0，取值越大，层级越高）

修饰属性

垂直对齐方式

属性名：vertical-align

属性值：

属性值效果
baseline基线对齐(默认)
top顶部对齐
middle居中对齐
bottom底部对齐

过渡transition

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名：transition（复合属性）

属性值：过渡的属性 花费时间 (s)

提示：

  • 过渡的属性可以是具体的 CSS 属性
  • 也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）
  • transition 设置给元素本身

示例：

img {width: 200px;height: 200px;transition: all 1s;
}
img:hover {width: 500px;height: 500px;
}

透明度opacity

作用：设置整个元素的透明度（包含背景和内容）

属性名：opacity

属性值：0 – 1

  • 0：完全透明（元素不可见）
  • 1：不透明
  • 0-1之间小数：半透明

光标类型cursor

作用：鼠标悬停在元素上时指针显示样式

属性名：cursor

属性值效果
default默认值，通常是箭头
pointer小手效果，提示用户可以点击
text工字形，提示用户可以选择文字
move十字光标，提示用户可以移动

SEO

SEO：搜索引擎优化，提升网站百度搜索排名

网页头部 SEO 标签：

  • title：网页标题标签
  • description：网页描述
  • keywords：网页关键词

示例：

在这里插入图片描述

Favicon图标

Favicon 图标：网页图标，出现在浏览器标题栏，增加网站辨识度。

图标：favicon.ico，一般存放到网站的根目录里面

<!-- link:favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/214852.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Vulnhub 靶场】【BuffEMR: 1.0.1】【简单 - 中等】【20210831】

【Vulnhub 靶场】【BuffEMR: 1.0.1】【简单 - 中等】【20210831】

1、环境介绍 靶场介绍&#xff1a;https://www.vulnhub.com/entry/buffemr-101,717/ 靶场下载&#xff1a;https://download.vulnhub.com/buffemr/BuffEMR-v1.0.1.ova 靶场难度&#xff1a;简单 - 中等 发布日期&#xff1a;2021年08月31日 文件大小&#xff1a;4.6 GB 靶场作…
阅读更多...
vue2使用wangeditor实现手写输入

vue2使用wangeditor实现手写输入

1.效果 2.实现 2.1&#xff1a;先看我上一篇&#xff0c;这篇就是在上一篇的基础上添加一个手写功能&#xff0c;导入注册就行了 vue2使用wangeditor实现数学公式富文本编辑器-CSDN博客 在components中添加myscriptMath.js svg也就是个显示的图标&#xff0c;可以替换为其…
阅读更多...
基于FPGA的温度控制系统设计（论文+源码）

基于FPGA的温度控制系统设计（论文+源码）

1.系统设计 本次基于FPGA的智能温度控制系统&#xff0c;以FPGA为控制核心&#xff0c;采用自顶向下的设计方法&#xff0c;按照模块化设计的思路分别实现各个模块&#xff0c;再加以整合实现整个系统&#xff0c;从而达到了温度控制的目的。系统以水箱为被控对象&#xff0c;…
阅读更多...
【算法系列篇】递归、搜索和回溯（二）

【算法系列篇】递归、搜索和回溯（二）

文章目录 前言1. 两两交换链表中的节点1.1 题目要求1.2 做题思路1.3 代码实现 2. Pow(X,N)2.1 题目要求2.2 做题思路2.3 代码实现 3. 计算布尔二叉树的值3.1 题目要求3.2 做题思路3.3 代码实现 4. 求根节点到叶结点数字之和4.1 题目要求4.2 做题思路4.3 代码实现 前言 前面为大…
阅读更多...
docker：部署java Springboot项目

docker：部署java Springboot项目

文章目录 1、打 jar 包1、创建Dockerfile3、创建镜像4、启动容器其他注意事项docker中jdk的版本命名举例&#xff1a;openjdk:11-ea-17-jre-slim举例&#xff1a;8u312-jre-nanoserver-1809 通过find找文件 1、打 jar 包 将项目打一个 jar 包&#xff0c;可以使用 IDEA 1、…
阅读更多...
xss 漏洞

xss 漏洞

xss 漏洞 1.1 漏洞简介1.2 漏洞影响范围1.3 漏洞详解1.3.1 漏洞原理、类型、影响、措施1.3.2 实例DVWA 靶场实验反射性 xss存储型xssDOM 型 XSS pikachu靶场实验反射 get 型 xss反射 post 型 xss xss 绕过 1.1 漏洞简介 XSS 的原理 跨站脚本攻击 XSS(Cross Site Scripting)&am…
阅读更多...
观海微电子----LVDS接口

观海微电子----LVDS接口

LVDS&#xff08;Low Voltage Differential Signaling&#xff0c;即低电压差分信号&#xff09; 常见于高清分辨率的屏幕&#xff0c;是TTL接口的升级版&#xff0c;LVDS接口是在TTL的技术上编码而成&#xff0c;使用低压差分信号来进行传输。 这种技术的核心是采用极…
阅读更多...
Vue混淆与还原

Vue混淆与还原

Vue混淆与还原 引言 Vue是一种流行的JavaScript框架&#xff0c;用于构建用户界面。它简单易用且功能强大&#xff0c;备受开发者喜爱。然而&#xff0c;在传输和存储过程中&#xff0c;我们需要保护Vue代码的安全性。混淆是一种有效的保护措施&#xff0c;可以加密和压缩代码…
阅读更多...
【VS Code开发】使用Live Server搭建MENJA小游戏并发布至公网远程访问

【VS Code开发】使用Live Server搭建MENJA小游戏并发布至公网远程访问

文章目录 前言1. 编写MENJA小游戏2. 安装cpolar内网穿透3. 配置MENJA小游戏公网访问地址4. 实现公网访问MENJA小游戏5. 固定MENJA小游戏公网地址 前言 本篇教程&#xff0c;我们将通过VS Code实现远程开发MENJA小游戏&#xff0c;并通过cpolar内网穿透发布到公网&#xff0c;分…
阅读更多...
UDP多人群聊

UDP多人群聊

一&#xff0c;创建类 二&#xff0c;类 1&#xff0c;Liao类 import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.net.*; import java.io.IOException; import java.lang.String; public class Liao extends JFrame{ private static fi…
阅读更多...
Diffusion Models: A Comprehensive Survey of Methods and Applications

Diffusion Models: A Comprehensive Survey of Methods and Applications

摘要 扩散模型作为一个强大的新的深度生成模型系列出现&#xff0c;在许多应用中具有破纪录的性能&#xff0c;包括图像合成、视频生成和分子设计。在这项调查中&#xff0c;我们对迅速扩大的扩散模型的工作进行了概述&#xff0c;将研究分为三个关键领域&#xff1a;有效采样…
阅读更多...
基于SSM的教师上课系统

基于SSM的教师上课系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…
阅读更多...
2024年跨年倒计时代码祝福！

2024年跨年倒计时代码祝福！

首先&#xff0c;本代码借鉴了陈橘又青这位博主的代码参考 如有冒犯&#xff0c;请联系我删除 <!doctype html><html><head><meta charset"utf-8"><title>新年快乐</title><style>body{overflow: hidden;margin: 0;}h1{…
阅读更多...
C# UDP

C# UDP

UDP是一个无连接协议&#xff0c;传输数据之前源端和终端不建立连接&#xff0c;当它想传送时就简单地去抓取来自应用程序的数据&#xff0c;并尽可能快地把它扔到网络上。在发送端&#xff0c;UDP传送数据的速度仅仅是受应用程序生成数据的速度、计算机的能力和传输带宽的限制…
阅读更多...
【数据安全】金融行业数据安全保障措施汇总

【数据安全】金融行业数据安全保障措施汇总

数字化的今天&#xff0c;数据的价值不可估量&#xff0c;尤其是金融行业&#xff0c;数据不仅代表着企业的核心资产&#xff0c;还涉及到客户的隐私和信任。因此对于金融行业而言&#xff0c;保障数据安全至关重要。下面我们就来一起讨论为什么金融行业要保障数据安全&#xf…
阅读更多...
Android渲染-AHardwareBuffer

Android渲染-AHardwareBuffer

本文主要从应用的角度介绍android的native层AHardwareBuffer创建纹理以及保存渲染数据。 HardwareBuffer 要介绍native层的AHardwareBuffer&#xff0c;就需要先从Java层的HardwareBuffer说起。Android官方对于HardwareBuffer介绍如下&#xff1a; HardwareBuffer wraps a na…
阅读更多...
Java预科知识

Java预科知识

以下内容是根据狂神的Java说、chatgpt和csdn相关博客&#xff0c;结合自己的理解完成的。 Java了解 基于Java 开发了巨多的平台&#xff0c;系统&#xff0c;工具 构建工具&#xff1a; Ant, Maven, Jekins应用服务器&#xff1a;Tomcat, Jetty, Jboss, Websphere, weblogic…
阅读更多...
dell r720远程网络安装ubuntu20.04（无U盘）

dell r720远程网络安装ubuntu20.04（无U盘）

登陆后界面&#xff0c;在主界面上&#xff0c;我们就可以看到各个硬件组件的状态。在快速启动任务栏中&#xff0c;可以对系统电源进行操作&#xff0c;如开机、关机等。安装操作系统&#xff0c;在虚拟控制台预览处点击>启动 按照浏览器出现的提示确定安装控件等&#x…
阅读更多...
软件设计师——数据结构（一）

软件设计师——数据结构（一）

&#x1f4d1;前言 本文主要是【数据结构】——软件设计师——数据结构的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1f304…
阅读更多...
running小程序重要技术流程文档

running小程序重要技术流程文档

一、项目文件说明&#xff1a; &#xff08;注&#xff1a;getMyMoney无用已删除&#xff09; 二、重要文件介绍 1.reinfo.js&#xff1a;位于utils文件下&#xff0c;该文件封装有统一的请求URL&#xff0c;和请求API同意封装供页面调用&#xff1b;调用时候需要在页面上先…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023