前端学习笔记 | CSS高级技巧

一、定位

注：需要同时设置定位模式和边偏移才生效。

1、定位模式

• 相对定位-position:relative
  • 特点：（1）灵活改变盒子在网页中的位置，改变位置的参照物是自己原来的位置（2）不脱标，占位（3）标签显示模式特点不变
• 绝对定位-position:abusolute(子级绝对定位，父级相对定位-子绝父相)
  • 特点：（1）脱标，不占位（2）参照物先找祖先元素，如果祖先没有定位，则参照浏览器可视区域位置（3）显示模式改变：宽高生效（行内块）
• 固定定位-position:fixed
  • 特点：（1）脱标，不占位（2）参照物是浏览器窗口（3）显示模式改变（行内块）

2、边偏移：设置盒子的位置

• left：数字+px
• right：数字+px
• top：数字+px
• bottom：数字+px

3、【应用】定位居中

• 实现步骤：
  • （1）绝对定位
  • （2）水平、垂直边偏移50%(此时元素左上角出现在网页最中间)
  • （3）transform:translate(-50%,-50%) 实现居中33

 二、堆叠顺序 z-index

默认标签书写效果-后来者居上

z-index：整数 值越大显示顺序越靠上

三、CSS精灵 background-positiom

CSS Sprites是图片处理方式，可把小图整合一张图片再用background-positiom精确的定位出背景图片的位置。 

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

• 实现步骤
  • （1）创建盒子，盒子尺寸与小图一致
  • （2）设置盒子背景图为精灵图(精灵图就是把所有小图放在一张图上，如下图)
  • （3）添加background-position属性，改变背景图位置

四、字体图标

字体图标：展示的是图标，本质是字体——作用是在网页中添加简单的、颜色单一的小图标。

引用步骤：

（1）在字体图标中将喜欢的图标添加至购物车，然后添加至项目，下载。iconfont-阿里巴巴矢量图标库

（2）在VScode中引用下载中包含的iconfont.css

（3）挑选相应图标并获取字体编码，应用于页面



上传图标：可实现自定义svg上传至iconfont网站然后生成字体图标，从而进行引用。

五、 垂直对齐方式 vertical-align

图文对齐方式

vertical-align:

• baseline（默认） 基线对齐-行内块默认当字处理
• middle 应用：图和字在同一行，需要将图片和字居中对齐
• top 顶端对齐
• bottom 底端对齐

处理图片下面的空白

• 除了用vertical-align
• 还可以将图片显示模式转为block

六、过渡属性 transition

图文从一个状过渡到另一个状态，一般跟hover属性配合使用

transition：过渡属性 过渡时间  （设置给元素本身）

• all （过渡属性）宽高都变

 七、透明度 opacity

opacity：0-1

八、光标类型 custor

变换鼠标指针样式

custor：

• defult （默认）小箭头
• pointer 小手-提示可以点击
• text 工字形-提示可以编辑
• move 十字光标-提示可以移动

九、轮播图

ul嵌套li，用flex布局，父级overflow:hidden

子绝父相

默认display:none，再用hover设置display:block

十、小兔鲜儿项目

1、建立目录文件

css文件夹（base.css、common.css、index.css）、images文件夹、uploads文件夹、index.html

2、SEO搜索引擎优化

（1）竞争排名（氪金）

（2）将网页制作成html后缀

（3）标签语义化

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

3、Favion图标

网页图标.ico，放在根目录，用link:favicon快捷提示

4、关于input标签

浏览器优先生效input标签的默认宽度，所以flex:1 不生效

5、相对定位

子绝父相应用场景

• right：定位右对齐，但如果文字多了，向左撑开，可能压盖住其他的内容
• left 定位右对齐：文字多了，向右撑开

十一、项目中写HTML和CSS流程

1、根据设计稿确定整体框架

        有几个大盒子/板块

2、盒子大小及盒子中所有标签的组成

        将一整块所有的标签剖分添加到HTML中，再完善细节

3、浮动/定位的确定

        确定好标签的位置

4、标签的间距

5、字体样式

        先确定字体大小，再调整居中和位置等属性

6、文字内容