前端学习笔记 | 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

前端学习笔记 | CSS高级技巧_第1张图片

 二、堆叠顺序 z-index

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

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

三、CSS精灵 background-positiom

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

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

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

前端学习笔记 | CSS高级技巧_第2张图片

四、字体图标

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

引用步骤:

(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、文字内容

你可能感兴趣的:(前端,前端,学习,笔记)