跳至主要內容

CSS

HeChuangJun约 7807 字大约 26 分钟

CSS介绍

  • cascacing style sheet层叠样式表
  • 用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
  • 样式：给HTML标签添加需要显示的效果，通常存储在样式表中
  • 层叠：使用不同的添加方式給同一个HTML标签添加样式，最后所有的样式叠在一起共同作用于该标签

CSS使用

3.png
3.png
/*css注释*/
选择器{ //选择器区分大小写，用于查找标签，设置样式
	属性1: 属性值; //属性和属性值不区分大小写，
	属性2: 属性值; //如果属性值中间由多个单词组成且中间包含空格，则必须加上英文双引号
}

CSS选择器

基础选择器
类与id选择器命名用英文字母、数字、连接符(-)、下划线(_)，数字不能打头。(连接符、下划线打头后面要跟字母)

  • 标签选择器：对同名html标签设置相同样式，无法差异化同名标签的显示效果
/* html标签名{} */ p { color: red; } <p>这是标签选择器</p>
  • 类选择器：查找标签，差异化设置标签的显示效果。对一个元素定义单独样式或对多个元素设置相同的样式。一个类名可作用于多个标签，一个标签可有多个类名(用空格隔开)
/* .类名{} */ .red { color: red; } <div class="red">这是类选择器</div>
  • id选择器：查找标签，差异化设置标签的显示效果。一般配合js用，很少设置CSS样式，对一个元素单独设置样式。一个id只作用于一个标签，一个标签只有一个id
/* #id{} */ #red { color: red; } <div id="red">这是 div 标签</div>
  • 通配符选择器：给所有标签设置相同样式。用于清除标签的默认样式，如标签默认的外边距、内边距
* { margin: 0; padding: 0;}

复合选择器：由两个或多个基础选择器通过不同的方式组合而成，作用：更准确、更高效的选择目标标签

  • 后代选择器：选中某元素的后代元素。任意层级 父选择器 子选择器 {}，选择器之间空格隔开
div span { color: red; }<div><span>红色</span ></div>
  • 子代选择器：选中某元素的子代元素（最近子级） 父选择器>子选择器 {}，父子选择器用>隔开
div > span { color: red; }
<div> <span>红色</span> <p><span>黑色</span></p> </div>
  • 并集选择器：选中多组标签设置相同的样式 选择器1,选择器2,…,选择器N {}，用,隔开
div,p {color: red;} <div>红色</div> <p>红色</p>
  • 伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。选择器:hover {} 超链接伪类:link 访问前、:visited 访问后、:hover 鼠标悬停、:active 点击时(激活)超链接设置以上四个状态，要按LVHA顺序
a:hover { color: red;} .box:hover {color: green;} 
<a href="#">鼠标悬停红色</a> <div class="box">鼠标悬停绿色</div>
  • 结构伪类选择器：根据元素的结构关系查找元素 E:first-child、E:last-child、E:nth-child(N) 找第一个\最后一个\第N 公式个E元素(第一个元素N值为1) 偶、奇数标签、5的倍数、第5个以后、前的标签2n、2n+1;2n-1、5n、n+5、-n+5、n从0开始
  • 伪元素选择器：创建伪元素摆放装饰性的内容。E::before、E::after在E元素里最前、后面添加伪元素
    必须设置内容content: ""属性，如果没有内容，则引号留空，默认是行内显示模式，权重和标签选择器相同
div::before {content: "before 伪元素 如>|";} div::after {content: "after 伪元素如>|";}
  • 交集选择器(了解)：选中同时满足多个条件的元素。选择器1选择器2 {}，选择器间不隔开
/* 有标签选择器则写在最前面 */p.box {color: red;} <p class="box">红色</p>

CSS特性

化简代码 / 定位问题，并解决问题

  • 继承性：子级默认继承父级的文字控制属性（下面的font-size到color），如果标签有默认文字样式会继承失败。 a标签的颜色、标题的字体大小。
    字体属性：font-family, font-size, font-weight, font-style, line-height
    文本属性：color, text-align, text-indent, text-transform, letter-spacing, word-spacing
    其他：visibility, cursor, quotes

  • 层叠性
    相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性
    不同的属性会叠加：不同的 CSS 属性都生效
    选择器类型相同则遵循层叠性，否则按选择器优先级判断。

  • 优先级
    权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
    规则：选择器优先级高的样式生效。
    公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
    （选中标签的范围越大，优先级越低）

叠加计算规则
复合选择器需要权重叠加计算。
公式：（每一级之间不存在进位）
(行内样式，id选择器个数，类选择器个数，标签选择器个数)
从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
!important 权重最高
继承权重最低

CSS样式

CSS样式描述属性值
width宽度10px
height高度10px
font-size字体大小30px 谷歌浏览器默认字号16px
font-weight字体粗细1-900整百
normal正常、bold加粗、bolder更粗，lighter细线
font-style字体倾斜italic斜体 normal正常
font-family字体族"楷体","Microsoft YaHei"
字体名用逗号隔开，从左向右依次查找
建议最后设置一个字体族名，使用无衬线字体
font复合属性italic 700 30px/2 楷体;
是否倾斜 是否加粗 字号/行高 字体
属性值用空格隔开，有序，字号和字体值必须
用于设置网页文字公共样式
text-indent文本缩进数字 + px/em推荐：1em=当前标签的字号大小
line-height行高从文字的最顶/底端量到下一行文字的最顶/底端
10px 或 数字（当前标签font-size属性值的倍数）
让inline-block元素（button、span）的文本垂直居中
让div内的单行文本垂直居中（line-height = height）
vertical-align 失效时
适用于 table 单元格文本居中
text-align文本对齐方式center内容（包括图片文字）居中对齐
left左对齐 right右对齐
控制内容的对齐方式，属性要设置给内容的父级
text-decoration文本修饰线none无，去掉超链接下划线
underline下划线 line-through删除线overline上划线
color文字颜色参考下图颜色定义
background-color盒子背景色red
background-image背景图片默认平铺(复制)效果 url(../aaa/love.jpg)
Background-repeat平铺方式no-repeat不平铺 repeat平铺默认
repeat-x repeat-y 水平 垂直方向平铺
Background-position背景图位置left左侧 right右侧 center居中 top顶部 bottom底部
坐标 水平：正数向右；负数向左
垂直：正数向下；负数向上
center bottom; 50px -100px; 50px center;
关键字取值方式写法，可以颠倒取值顺序;
可以只写一个关键字，另一个方向默认为居中；
数字只写一个值表示水平方向，垂直方向为居中
background-size背景图缩放cover等比例缩放背景图片以完全覆盖背景区
背景图可能部分看不见(截掉)
contain等比例缩放背景图片以完全装入背景区
可能背景区部分空白
百分比：根据盒子尺寸计算图片大小 数字+单位px
图片比例与盒子比例相同
使用cover或contain缩放背景图效果相同
background-attachment背景图固定fixed背景不会随着元素的内容滚动。
background复合属性pink url(./images/1.png) no-repeat right center/cover;
背景色 背景图 平铺方式 位置/缩放
背景图固定（属性值空格隔开，不分顺序）
cursor光标类型鼠标悬停在元素上时指针显示样式
default默认，箭头
pointer小手效果，提示用户可以点击
text工字型，提示用户可以选择文字
move十字光标，提示用户可以移动
opacity元素透明度包含背景和内容
0 – 1
0：完全透明（元素不可见）
1：不透明 默认 0-1之间小数：半透明
vertical-align垂直对齐方式baseline、top、middle、bottom
基线(默认)、顶部、居中、底部对齐
img a等行内标签当做文字，文字默认基线对齐
导致img下方有基线到底部的一小片空白
使得图片和文字不居中
给图片或高度高的元素加属性
vertical-align:middle，或者给图片加display:block
transition过渡（渐变）为一个元素在不同状态之间切换的时候添加过渡效果
过渡的属性 花费时间 (s)
具体的CSS属性
all（两个属性值不同的所有属性都产生过渡效果）
设置给元素本身，不是:hover上
父元素添加hover和最终效果
子元素加transition和初始状态
transform平面转换
2D转换		为元素添加动态效果，与过渡配合使用
改变盒子在平面内的形态
多重转换以第1种转换方式坐标轴为准转换形态
旋转会改变网页元素的坐标轴向
先写旋转则后面的转换效果的轴向
以旋转后的轴向为准，会影响转换结果
平移transform:translate(X轴, Y轴移动距离);
像素单位数值或百分比（参照盒子自身尺寸计算）
正(右下)负(左上)均可
translate()只写一个值表示沿着X轴移动
translateX/Y()单独设置X或Y轴移动距离：
常用于定位居中
旋转transform:rotate(旋转角度);
角度单位:deg.取值正负均可
取值为正，顺时针旋转
取值为负，逆时针旋转
改变转换原点默认转换原点是盒子中心点
transform-origin: 水平原点位置 垂直原点位置;
方位名词（left、top、right、bottom、center）
像素单位数值
百分比
时钟、风车、轮播
缩放transform: scale(缩放倍数);常用
transform: scale(X轴, Y轴缩放倍数);
取值大于\小于1表示放大\缩小
倾斜transform: skew();角度度数 deg
渐变多个颜色逐渐变化的效果，常用于设置盒子背景
线性渐变
background-image: linear-gradient
(渐变方向,颜色1 终点位置,颜色2 终点位置,);
渐变方向：可选
to方位名词 to right
或 角度度数 45deg
终点位置：可选 百分比 80%
background-image: linear-gradient
(transparent,rgba(0, 0, 0, 0.6));

径向渐变
给按钮添加高光效果
background-image: radial-gradient
(半径 at 圆心位置,颜色1 终点位置(s),);
半径可以是2条，则为椭圆
圆心位置取值：像素单位数值 / 百分比 / 方位名词
(50px 20px at center center,red,pink);
空间转换
3D转换		从坐标轴角度定义的XYZ三条坐标轴构成空间
Z轴位置与视线方向相同
平移transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();
取值（正负均可）
像素单位数值
百分比（参照盒子自身尺寸计算结果）
默认Z轴平移没有效果
视距指定观察者与Z=0平面的距离
为元素添加透视效果(近大远小、近实远虚)
perspective: 视距;
添加给父级，800-1200
父盒子X轴旋转后变梯形
空间旋转transform: rotateZ/X/Y(值);
rotate3d(x, y, z角度度数)
用来设置自定义旋转轴的位置及旋转的角度
x，y，z 取值为0-1之间的数字
左手法则
根据旋转方向确定取值正负
左手握住旋转轴,拇指指向正值方向,
其他四个手指弯曲方向为旋转正值方向
立体呈现设置元素的子元素是位于3D空间中还是平面中
transform-style
flat子级处于平面中
preserve-3d子级处于3D空间
呈现立体图形步骤
1. 父元素添加transform-style: preserve-3d；
2. 子级定位(父相子绝)
3. 调整子盒子的位置（位移或旋转）
空间内，转换元素都有自已独立的坐标轴，互不干扰
translateZ(高度一半)+rotateX(90deg)垂直效果
空间缩放transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();
animation动画过渡：实现两个状态间的变化过程
动画：实现多个状态间的变化过程
动画过程可控（重复播放、最终画面、是否暂停）
实现步骤
1. 定义动画
@keyframes 动画名称 { from {} to {}}
或 @keyframes 动画名称{ 0% {} 10% {}... 100% {}}
2. animation:动画名称 动画时长 速度曲线 延迟时间
重复次数 动画方向 执行完毕时状态
animation: change 1s forwards;
动画名称和动画时长必须赋值,取值无序
有两个时间值则表示动画时长和延迟时间
animation拆分动画名称animation-name
动画时长animation-duration
延迟时间animation-delay
动画执行
完毕时状态		animation-fill-mode
forwards：最后一帧状态
backwards：第一帧状态
速度曲线animation-timing-function:
steps(步数,start/end)：
时间函数，逐帧(步)动画。
ease：默认值，动画先慢后快再慢
linear：匀速。
ease-in：动画开始时慢，后续加速。
ease-out：动画开始时快，结束时慢。
ease-in-out：动画开始和结束都慢，中间快。
重复次数animation-iteration-count:infinite为无限循环
动画执行方向animation-direction alternate反向
暂停动画animation-play-state
paused暂停，通常配合:hover使用
多组动画animation:动画1，动画2，动画N
animation:
run 1s steps(12) infinite,
move 3s linear forwards;
当动画的开始状态样式跟盒子默认样式相同
可以省略动画开始状态的代码
@keyframes move {
/* 0% { transform: translate(0);} */
100% { transform: translate(800px); }
}
css6.png
css6.png
img { width: 200px;height: 200px;transition: all 1s;}
img:hover { width: 500px;height: 500px; }
<img src="./images/huawei.jpg" alt="">
color.png
color.png

显示模式（非常重要）

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

  • 块级标签/元素：独占一行，添加宽高属性生效，宽度默认是父级的100%。使a标签可以有宽高，一般都要设置，除非最近父级元素已经display:flex如，hn,div,ul,ol
  • 行内标签/元素：一行可以显示多个，设置宽高属性不生效，宽高尺寸由内容撑开，如a，span，strong、em、b、i，img（li嵌套a的时候设置block）
  • 行内块元素：一行可以显示多个 设置宽高属性生效 宽高尺寸可以由内容撑开，如button，input，textarea，select，label
    div自动换行方法 flex布局和浮动和行内块inline-block
    属性：display block块级、inline-block行内块、inline行内

盒子模型、外边距问题

f6.png
f6.png

布局网页，摆放盒子和内容，组成
内容区域width & height
内边距padding（在内容与盒子边缘之间）padding或padding-top/right/bottom/left 内边距 设置内容与盒子边缘间的距离
边框线border或border-top/right/bottom/left 边框线 边框线粗细 线条样式 颜色（不区分顺序）1px solid black; solid实线、none无边、double双线、dashed虚线 dotted点线
外边距margin（在盒子外面）拉开两个盒子之间的距离，margin:0 auto;版心居中 边距自动居中，盒子必须有宽度或者高度

默认情况：盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸
结论：给盒子加 border / padding 会撑大盒子，margin不会撑大盒子
解决：手动减法，减掉 border / padding 的尺寸 或者 內减模式：box-sizing: border-box
padding-right+border-right:1px solid #fff+:li:last:child a 可以做 1 |2 |3 |效果

margin、padding、border-radius多值写法，可为px、em、ex、%
一个值10px; 四个方向内边距均为10px、两个值10px 80px; 上下:10px;左右:80px
三个值10px 40px 80px; 上:10px;左右:40px;下:80px
四个值10px 20px 40px 80px; 上:10px;右:20px;下:40px;左:80px
从上(左上角)开始顺时针赋值，当前方向(角)没有数值则与对面(角)取值相同。

overflow或overflow-x：控制溢出元素的内容的显示方式。hidden、scroll、auto溢出隐藏、滚动(无论是否溢出，都显示滚动条位置)、滚动(溢出才显示滚动条位置)

border-radius：设置元素的外边框为圆角。圆角半径 数字+px / 百分比
正圆、胶囊形状：给正、长方形盒子（宽高相等）设置圆角属性值为 宽高的一半 / 50%、盒子高度的一半

box-shadow给元素设置阴影效果 X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;X轴、Y轴偏移量必须写、默认外阴影，内阴影要加inset

外边距问题
合并现象：垂直排列的兄弟元素，上下 margin 会合并。取两个 margin 中的较大值生效

.one { width: 100px;height: 100px;background-color: brown;margin-bottom: 80px;}
.two { width: 100px;height: 100px;background-color: orange;margin-top: 50px;}
<div class="one">one</div><div class="two">two</div>

外边距塌陷，父子级的标签，子级的添加上外边距会产生塌陷问题，导致父级一起向下移动 取两个margin的较大值生效。3种解决方法：1.取消子级margin，父级设置padding（推荐）、2.父级设置 overflow: hidden、3.父级设置 border-top 1px solid #000;

.father { width: 300px;height: 300px;background-color: pink;
  /* padding-top: 50px;
  box-sizing: border-box; */
  /* 溢出隐藏 */
  /* overflow: hidden; */
  /* border-top: 1px solid #000;*/
}
.son { width: 100px; height: 100px;background-color: orange;margin-top: 50px;}
<div class="father"><div class="son">son</div></div>

行内元素–内外边距问题：行内元素添加 margin 和 padding，无法改变元素垂直位置，解决方法：给行内元素添加 line-height 可以改变垂直位置

span { margin: 50px;padding: 20px;line-height: 100px; }
<span>span标签</span>
<span>span标签</span>

CSS布局

标准流：文档流，指的是标签在页面中默认的排布规则，
浮动（了解）：float让块元素水平排列。实现图文混排效果：left：左对齐、right：右对齐 none：无
浮动后的盒子顶对齐、具备行内块特点、脱标，不占用标准流的位置
父级宽度不够，浮动的子级会换行，缩小margin解决
浮动的标签可能覆盖不浮动标签，浮动不会互相覆盖。浮动框碰到浮动框按顺序排列，
浮动元素高度不同，向下移动时可能被其它浮动元素"卡住"
f4.png
清除浮动：浮动不再占用原文档流的位置
如果父级 没有高度，浮动子级无法撑开父级高度（可能导致页面布局错乱）就是2个同级元素，其中一个元素没有高度，它的子元素又是浮动的，那么子元素和另一个元素可能叠一起

4种解决方法

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

.father { margin: 10px auto;width: 1200px;/* height: 300px; */background-color: pink; }
.left { float: left;width: 200px;height: 300px;background-color: skyblue; }
.right { float: right;width: 950px;height: 300px;background-color: orange; }
.bottom { height: 100px;background-color: brown;}
.clearfix { clear: both; }
<div class="father">
  <div class="left"></div>
  <div class="right"></div>
  <!-- 父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both -->
  <div class="clearfix"></div>
</div>
<div class="bottom"></div>

单伪元素法：父级元素添加 after 伪元素

.clearx::after { content: ""; display: block;clear: both; }
<div class="father clearx"></div>

双伪元素法(推荐)：after 和 before 伪元素 before 解决外边距塌陷问题after 清除浮动

.clearx::before,
.clearx::after {
  content: "";
  display: table;
}
.clearx::after {
  clear: both;
}
<div class="father clearx"></div>

overfow法：会检查父子元素高度，所以撑起盒子，父元素添加 CSS 属性overflow: hidden

.father { margin:10px auto;width:1200px;
/* height:300px; */background-color:pink;overflow:hidden;}

Flex布局：弹性布局，浏览器提倡，适合结构化布局，提供了强大的空间分布和对齐能力。不脱标
给父元素设置 display: flex，子元素可以自动挤压(不超过父盒子)或拉伸(不声明宽高等于父盒子尺寸，表现为占满高度) （例如三个div分成了三行，用了flex使三个div成一行）
组成部分：弹性容器+弹性盒子
主轴：默认在水平方向、侧轴 / 交叉轴：默认在垂直方向 2者成"十"字
flex1.png

justify-content主轴对齐方式
flex-start默认值、flex-end、center弹性盒子从起点、终点开始依次排列、沿主轴居中排列，不加间隙
父级剩余的尺寸分配成间距
space-between弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间√弹性盒子之间的间距相等[1.2.3]或[1.2] .表示空白间距√
space-around弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧。弹性盒子之间的间距是两端间距的2倍√[.1..2..3.]√
space-evenly弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等各个间距都相等√[.1.2.3.]√

.box { display: flex; justify-content: space-evenly;height: 300px;border: 1px solid #000; }
.box div { width: 200px;height: 100px;background-color: pink; }
<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

侧轴对齐方式
align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）父盒子
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）子盒子
stretch弹性盒子沿着侧轴线被拉伸至铺满容器(弹性盒子没有设置侧轴方向尺寸才能拉伸)
center弹性盒子沿侧轴居中排列
flex-start、flex-end弹性盒子从起点、终点开始依次排列

.box {
  display: flex;
  /* 弹性盒子在侧轴方向没有尺寸才能拉伸 */
  /* align-items: stretch; */
  height: 300px;
  border: 1px solid #000;
}
/* 第二个div，侧轴居中对齐 */
.box div:nth-child(2) { align-self: center;}
.box div {
  width: 200px;
  height: 100px;
  background-color: pink;
}
<div class="box"><div>1</div><div>2</div><div>3</div></div>

flex-direction修改主轴方向：主轴默认在水平方向，侧轴默认在垂直方向
row水平方向，从左向右(默认)、column垂直方向，从上向下√
row-reverse水平方向，从右向左、column-reverse垂直方向，从下向上

.box {
  display: flex;
  flex-direction: column;
  /* 主轴在垂直，视觉效果：垂直居中 */
  justify-content: center;
  /* 侧轴在水平，视觉效果：水平居中 */
  align-items: center;
  width: 150px;
  height: 120px;
  background-color: pink;
}
img { width: 32px; height: 32px; }
<div class="box">
  <img src="./images/1.png" alt="">
  <span>媒体</span>
</div>
css8.png
css8.png

弹性伸缩比flex：控制弹性盒子的主轴方向的尺寸。
整数数字，表示占用父级剩余尺寸的份数。(父级尺寸去掉子级已经声明尺寸)
遇到[12.3]、[1.23]或者搜索框直接flex:1，把剩余的东西全赋值给中间的2或者搜索框，（搜索框有时会优先使用默认宽度使flex:1失效，设置width:0解决）

/* 默认情况下，主轴方向尺寸是靠内容撑开；侧轴默认拉伸 */
.box { display: flex;flex-direction: column;height: 300px;border: 1px solid #000;}
.box div {
  /* height: 100px; */
  background-color: pink;
  border: 1px solid #000;
}
.box div:nth-child(1) { width: 200px;}
/* 2和3将剩余空间分为3分，比例1:2 */
.box div:nth-child(2) { flex: 1; }
.box div:nth-child(3) { flex: 2;}
<div class="box"><div>1</div><div>2</div><div>3</div></div>
css10.png
css10.png

弹性盒子换行flex-wrap：弹性盒子可以自动挤压(不够大，不会超过父盒子)或拉伸，默认情况下，所有弹性盒子都在一行显示。
wrap：换行、nowrap：不换行（默认）

.box {
  display: flex;
  /* 不挤压了，按space-between换行 */
  flex-wrap: wrap;
  justify-content: space-between;
  height: 300px;
  border: 1px solid #000;
}
.box div { width: 200px; height: 100px;background-color: pink;}
<div class="box">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
  <div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div>
</div>
css9.png
css9.png

行内对齐方式align-content
对单行弹性盒子模型无效
flex-start、flex-end默认值，弹性盒子从起点、终点开始依次排列
center弹性盒子沿主轴居中排列
space-between弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

.box {display: flex;flex-wrap: wrap;justify-content: space-between;
align-content: space-evenly;height: 400px;border: 1px solid #000;}
.box div { width: 200px; height: 100px;background-color: pink;}
<div class="box">
  <div>1</div><div>2</div><div>3</div><div>4</div>
  <div>5</div><div>6</div><div>7</div><div>8</div>
</div>

CSS定位

改变盒子在网页中的位置：实现标签叠在一起的效果，实现轮播图，图+文字一行的效果
定位模式：position + 边偏移：设置盒子的位置left、right、top、bottom

相对定位(不推荐) position: relative
不脱标，占用原来位置，原来位置变成空白；显示模式保持不变
设置边偏移则相对自己原来位置移动/改变位置的参照物是 自己原来的位置
很少单独使用，一般与其他定位方式配合使用

div { position: relative;top: 100px;left: 200px;}
<p>1</p><div><img src="./images/1.webp" alt=""></div>

绝对定位position: absolute
使用场景：子级绝对定位，父级相对定位（子绝父相）
脱标，不占位，显示模式具备行内块特点 宽高生效
设置边偏移则相对最近的已经定位的祖先元素改变位置
如果祖先元素都未定位，则相对浏览器可视区改变位置

* { margin: 0;padding: 0;}
img { width: 400px; }
.news { position: relative; margin: 100px auto;
width: 400px;height: 350px;background-color: #f8f8f8;}
.news span { position: absolute;top: 0;right: 0;
  /* display: block; */
  width: 92px;height: 32px;background-color: rgba(0,0,0,0.6);
  text-align: center;line-height: 32px;color: #fff;
}
<div class="news">
  <img src="./images/news.jpg" alt="">
  <span>展会活动</span>
  <h4>2222世界移动大会</h4>
</div>
css12.png
css12.png

定位居中 如登陆等弹窗居中提示
实现步骤：1. 绝对定位2. 水平、垂直边偏移为50% 3. 子级向左、上移动自身尺寸的一半.左、上的外边距为 –尺寸的一半 transform: translate(-50%, -50%) 推荐
top、left这些都是负数左边正数右边，相对于父盒子的左上角

img {
  position: absolute;
  left: 50%;
  top: 50%;/*相对最近的标签移动 */
  /* margin-left: -265px;margin-top: -127px; */
  /*移动元素不影响布局：50%就是自己宽高的一半 */
  transform: translate(-50%, -50%);
}
<img src="./images/login.webp" alt="">

固定定位 position: fixed
场景：元素的位置在网页滚动时不会改变
脱标，不占位，显示模式具备行内块特点
设置边偏移相对浏览器窗口改变位置

p {font-size: 500px;}
div { position: fixed;top: 0;right: 0;width: 500px; }
<p>1</p> <div><img src="./images/1.webp" alt=""></div> <p>1</p>

堆叠层级z-index

默认效果：按照标签书写顺序，后来者居上
作用：设置定位元素的层级顺序，改变定位元素的显示顺序
整数。默认0，越大层级越高

div { position: absolute;width: 200px;height: 200px;}
.box1 { background-color: pink; z-index: 1;}
.box2 { background-color: skyblue; left: 100px;top: 100px;z-index: 2;}
<div class="box1">box1</div>
<div class="box2">box2</div>

CSS精灵

CSS Sprites：把网页中背景图片整合到一张图片中，再background-position精确定位出背景图片的位置
优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度(一张图有abcdefg，只要g)
创建尺寸与小图尺寸相同、背景图为精灵图的盒子，添加background-position属性设置背景图位置（PxCook测量小图片左上角坐标。取负数坐标为background-position属性值（向左上移动图片位置）

div { width: 12px;height: 10px;
background-image: url(./images/abcd.jpg);background-position: -256px -276px; }
<div></div>

字体图标

在网页中添加简单的、颜色单一的小图标，本质是字体
下载字体：iconfont 图标库：https://www.iconfont.cn/open in new window
登录 → 素材库 → 官方图标库 → 进入图标库 → 选图标，加入购物车 → 购物车，添加至项目，确定 → 下载至本地
css4.png

使用字体：如果要调整字体大小，注意 选择器的优先级要高于 iconfont 类

<!-- 引入字体样式表（iconfont.css）
font-family:"iconfont";
src:url('iconfont.woff2?t=1675303337325') format('woff2'),
  url('iconfont.woff?t=1675383337325') format('woff'),
  url('iconfont.ttf?t=1675303337325') format('truetype')
} -->
<link rel="stylesheet" href="./iconfont/iconfont.css">

<!-- 2. 标签使用字体图标类名
iconfont：字体图标基本样式（字体名，字体大小等等）icon-xxx：图标对应的类名-->
<span class="iconfont icon-xxx"></span>

上传矢量图
css5.png
作用：项目特有的图标上传到 iconfont 图标库，生成字体
上传步骤：上传 → 上传图标 → 选择 svg 矢量图，打开 → 提交 → 系统审核

移动适配方案

rem，vw
相对单位
相对视口的尺寸计算结果
vw：viewport width
1vw = 1/100视口宽度
vh：viewport height
1vh = 1/100视口高度

vw 布局
确定设计稿对应的vw尺寸 （1/100视口宽度）
查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定 vw 尺寸 （1/100 视口宽度）
vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )

vh 布局
确定设计稿对应的vh尺寸 （1/100视口高度）
查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定 vh 尺寸 （1/100 视口高度）
vh单位的尺寸 = px 单位数值 / ( 1/100 视口高度 )

开发中，vw和vh不能混用
vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形