前端开发_CSS

Rainbow_1991

已于 2023-12-04 23:54:28 修改

阅读量323

点赞数

分类专栏：前端开发文章标签： css 前端

于 2023-12-04 22:57:22 首次发布

本文链接：https://blog.csdn.net/qq_57689612/article/details/134795963

版权

前端开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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-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
宽度	width	w
宽度500px	width:500px	w500
背景色	background-color	bgc
多个属性	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 精确的定位出背景图片的位置。

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

实现步骤：

创建盒子，盒子尺寸与小图尺寸相同
设置盒子背景图为精灵图
添加 background-position 属性，改变背景图位置
- 使用 PxCook 测量小图片左上角坐标
- 取负数坐标为 background-position 属性值（向左上移动图片位置）

字体图标

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

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

优点：

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

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

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

在这里插入图片描述

使用字体：

引入字体样式表

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

标签使用字体图标类名
```
<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	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

定位

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

实现：

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

属性名：

left
right
top
bottom

属性值：

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

相对定位

position: relative

特点：

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

绝对定位

position: absolute

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

特点：

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

定位居中

实现步骤：

绝对定位
水平、垂直边偏移为 50%
子级向左、上移动自身尺寸的一半
- 左、上的外边距为 –尺寸的一半
- 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">

Rainbow_1991

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发_CSS

前端CSS介绍：定义、引入方式、选择器基本属性、文字书写、图片属性、背景属性盒子模型、定位、Flex布局等
复制链接

扫一扫

专栏目录

前端开发_CSS

CSS定义

CSS引入方式

选择器

标签选择器

类选择器

id选择器

通配符选择器

复合选择器

后代选择器

子代选择器

并集选择器

交集选择器

伪类选择器

结构伪类选择器

伪元素选择器

基本属性

文字控制属性

字体大小

字体粗细

字体倾斜

行高

字体族

复合属性

文本缩进

文本对齐方式

图片对齐方式

文本修饰线

颜色

CSS特性

继承性

层叠性

优先级

Emmet写法

背景属性

背景图

背景图平铺方式

背景图位置

背景图缩放

背景图固定

背景复合属性

CSS精灵

字体图标

显示模式

转换显示模式

PxCook

盒子模型

边框线

内边距

尺寸计算

外边距

清除默认样式

元素溢出

行内元素-内外边距问题

圆角

阴影

标准流

浮动

清除浮动

Flex布局

组成

主轴对齐方式

侧轴对齐方式

修改主轴方向

弹性伸缩比

弹性盒子换行

行对齐方式

定位

相对定位

绝对定位

定位居中

固定定位

堆叠层级

修饰属性

垂直对齐方式

过渡transition

透明度opacity

光标类型cursor

SEO

Favicon图标