Web前端笔记-6、CSS基础-定位、高级技巧、CSS修饰属性

定位

布局页面：标准流、flex布局、定位

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

实现：

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

加了定位的盒子margin: 0 auto;是失效的。

相对定位

position: relative po

特点：

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

拓展：很少单独使用相对定位，一般是与其他定位方式（绝对定位）配合使用

绝对定位-子绝父相

position: absolute poa

一个盒子压在了另一个盒子上边，就找绝对定位。

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

特点：

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

绝对定位-盒子定位居中水平垂直居中

加了定位的盒子margin: 0 auto;是失效的。

实现步骤：

假设子盒子宽高都为200px。

1. 绝对定位
2. 水平、垂直边偏移为 50% (left:50%; top: 50%;)
3. 子级向左、上移动自身尺寸的一半(margin-left: -100px; margin-top: -100px;)或者(transform: traslate(-50%,-50%);)

固定定位

position:fixed

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

特点：

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

固定定位如果要通栏，需要指定宽度为100%，因为有行内块特点，不指定宽度就只能靠内容撑开。注意：脱标后下面的盒子给个margin-top才不会被遮挡。

粘性定位

sticky

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位

注意：须指定 top,right,bottom 或left 四个值其中之一

定位的堆叠层级 z-index

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

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

默认层级：z-index: auto 标签在后即在上。

指定层级：z-index: 1; 指定一个整数，谁的数字大谁在上面，层级越高。

高级技巧

CSS精灵

CSS精灵，也叫CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position 精确的定位出背景图片的位置。

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

实现步骤：

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

字体图标

本质是个字。font的那一套都能用。

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

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

优点

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

iconfont 图标库：https://www.iconfont.cn/

引入下载的css <link rel="stylesheet" href="iconfont.css">，挑选图标获取类名<i class="iconfont icon-shouji"></i>

CSS修饰属性

垂直对齐方式 vertical-align

行内块元素默认和文字的基线对齐。

去除图片底层有空白缝隙的问题，如何解决？

1. 图片的垂直对齐方式：只要不是baseline即可。
2. 将图片转为块级元素：display: block;

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

过渡 transition

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

属性名：transition（复合属性）

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

提示：

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

透明度 opacity

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

属性名：opacity

属性值：0-1

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

不如bgc: rgba()，这样只是盒子背景透明，内容不透明。

光标类型 cursor

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

属性名：cursor

属性值

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

表格样式

合并相邻的两个边框。

table, tr, td {
  border: 1px solid #eee;
  border-collapse: collapse;
}

轮播图

定位、字体图标、flex布局

导航栏是li>a，轮播图是ul>li>a>img

所有的图片在一行上，点一下ul就动。

overflow: hidden;

渐变色

.order tr:nth-child(1) {
  background-image: linear-gradient(to right，#f46e33, #f057a5);
}