一、定位
注:需要同时设置定位模式和边偏移才生效。
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
<link rel="stylesheet" href="../iconfont/iconfont.css">
(3)挑选相应图标并获取字体编码,应用于页面
<span class="iconfont"></span>
上传图标:可实现自定义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快捷提示
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
4、关于input标签
浏览器优先生效input标签的默认宽度,所以flex:1 不生效
5、相对定位
子绝父相应用场景
- right:定位右对齐,但如果文字多了,向左撑开,可能压盖住其他的内容
- left 定位右对齐:文字多了,向右撑开
十一、项目中写HTML和CSS流程
1、根据设计稿确定整体框架
有几个大盒子/板块
2、盒子大小及盒子中所有标签的组成
将一整块所有的标签剖分添加到HTML中,再完善细节
3、浮动/定位的确定
确定好标签的位置
4、标签的间距
5、字体样式
先确定字体大小,再调整居中和位置等属性
6、文字内容