当前位置：首页 > article >正文

定位，CSS高级技巧，修饰属性（定位，css精灵，字体图标）

article 2025/1/7 22:04:27

定位:

相对定位(还要加上边偏移属性）
position:relative
top:100px
1.改变位置的参照物是自己原来的位置
2.不脱标，占位
3.标签显示模式特点不变

绝对定位（还要加上边偏移属性）
position:absolute(子级绝对定位，父级相对定位）
1.脱标，不占位
2.参照物：先找最近的已经定位的祖先元素，如果所有祖先元素都没有定位，参照浏览器可视区该位置
3.显示模式特点改变：宽高生效（具备了行内块特点）

固定定位(还要加上边偏移属性）
position:fixed
1.脱标，不占位
2.改变位置参照物是浏览器窗口
3.显示模式特点具备行内块特点

定位居中：
left:50%就是盒子最左边出现在窗口中间，

top:50%就是盒子最上边出现在窗口中间，

现在就是整个盒子是出现在右下的框中

margin写法居中

transform:translate（-50%，-50%）
很方便：50%就是子级宽高的一半

固定定位：position:fixed

堆叠层级 z-index：

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

CSS高级技巧

向图片左上角坐标移动截图整个小图片

京东案例：CSS精灵

清除默认样式，将整个盒子设置宽高并且版心居中

ul 中包含 li，所有的 li 是在一行显示，所以要设置 flex ，因为 li 中包含了图片和文字，两者也是要在一行显示，所以使用了 flex

设置整体的 h5 标签中的图片为第一个 ”多“，然后分别差异化设置第二三四个 li 中的 h5 中的图片位置

设置 li 中的 p 标签内容居中显示

字体图标

下载字体

在项目中下载的最全

将字体文件放到具体要使用的代码的文件中

字体使用

打开下载的字体文件夹，将 index.html示例文件用浏览器打开

字体的第二个类就从 font class中选取，第一个类一定是 iconfont

将图标的类引入之后，还可以通过类选择器改变字体图标样式

当使用类选择器改变字体图标样式时，类选择器中的font-size样式会覆盖 iconfont.css中的样式，所以显示出来的是类选择器中的样式。
如果是使用标签选择器 span，那么因为类选择器优先级高，所以就会显示 iconfont.css中的样式，所以标签选择器中的字体图标样式就不会生效

字体图标 - 上传矢量图

垂直对齐方式 vertical-align：

行内和行内块标签默认是基线对齐，所以图片和文字内容一上一下

浏览器打开确实能看到图片下面有空白间距，并且文字也没有垂直居中

，谁占的高度最大就给谁加上vertical-align，显然是img，所以给img加上 vertical-align ：middle能实现垂直居中 ,空白间距没有了，文字也实现了居中对齐

顶对齐（最高内容的顶部）

底对齐（最高内容的底部）

转显示模式：也能间接去掉图片底下的空白，转为块级

之所以图片下边出现空白键距，是因为浏览器将行内块，行内标签当作文字处理，一律按照基线对齐，转换显示模式之后就不能当作文字处理，也就不按照基线对齐了，所以也就不出现空白间距了

过渡transition：
复合属性：有多个值而且是空格隔开

是图片要进行放大，所以给 img 标签添加 transition 属性，而且是宽高都要变化，所以是 all , 花费时间是 1s

透明度opacity

opacity是设置背景和内容一起的透明度，如果仅仅想要设置背景的透明度，那么就使用 rgba的写法就可

光标类型 cursor

轮播图案例

图片：

因为图片中有三个点，所以是三张图片
清除默认样式，设置内减模式，防止padding和border将盒子撑大，去除 li 标签默认点样式
设置盒子 banner的宽高，居中显示，只留下一个盒子显示，其他盒子隐藏起来（溢出隐藏）
设置图片宽度和圆角效果，并去掉图片底部的空白间距
如果 li 一行排列压根实现不了左右滑动效果，所以先设置一行显示，给其父级设置 flex

图片中的箭头：

因为点击该箭头是能实现图片转换，所以使用超链接 a ，并且是左右两个 a 链接
使用字绝父相，使得 a标签具有行内块的特点宽高生效，并将左右两个箭头分别垂直居中
在超链接中嵌套 i 标签引入字体图标类
因为只有鼠标滑到图片才能显示出左右箭头，所以一开始将左右箭头 display:none隐藏，然后鼠标滑到 banner上时左右两个箭头显示为块级元素