前端工作笔记(一)
HTML+CSS+移动Web 前端笔记
置顶板块:VS code快捷键(持续更新)
- !(英文)+Tab(生成骨架结构)
- ./ 或 ../ (出现路径)
- CTRL+/(注释:非常重要,养成书写的习惯)
- CTRL+回车(自动跳到下一行)
- lorem+Tab(随机段落文字)
- 标签.类名(生成带类名的标签)
- CTRL+Alt+上或下(选择一列光标,也可用鼠标滚轮选择)
- Alt+单击(选择不连续的多个光标)
- bd+Tab(快速生成边框)
- 首字母+像素大小+Tab(快速生成内边距或外边距)
- ul>li*n(快速生成n个li标签的无序列表)
- dl>dt+dd*n(快速生成1个dt标签,n个dd标签的自定义列表)
- table>tr*n>td*n(快速生成n行n列的表格)
- CTRL+Shift+L(同时选中多个匹配项进行编辑)
置顶板块:类名单词积累(持续更新)
- 头部:header
- 底部:footer
- 入口:entry
- 侧边栏:aside
- 快捷菜单:shortcut
- 导航:nav
- 主导航:main-nav
- 宣传服务:services
- 版权信息:copyright
- 网站大图标:logo
- 搜索:search
- 购物车:cart
- 轮播图:banner
- 遮罩层:mask
- 商品分类:category
- 左按钮:prev
- 右按钮:next
- 轮播指示器(小圆点):indicator
- 联系方式:contact
- 订单:orders
- 支付:pay
- 用户信息:user_msg
- 位置:location
- 面板:pannle
- 商品:goods
- 图片:pic
- 信息:info
- 统计:count
- 价格:price
- 活动:item
- 文字区域:txt
- 活动状态:active
- 登陆:login
- 下载:download
- 切换栏:tab
- 退出:logout
置顶板块:零碎知识补充随手记(持续更新)
- 字符实体(即空格): ;
- css行内式样式与id选择器一般不使用,仅配合JavaScript时才会用到
- 光标样式:cursor:pointer(小手效果)
- 圆角可以给多个方向设置:左上,右上,右下,左下
- 轮播图要用img实现,不能使用背景图片
- overflow:hidden:超出部分隐藏
- caniuse.com官网,可以检测所用技术是否兼容(也可以在VS code中鼠标悬停在代码上,点击MDN Reference检测)
- swiper官网(框架模板)
- layui官网(专做轮播图的框架)
- 文字一定不要给宽高
- text-decoration: line-through;删除线
Ps切图(抠图)及测量
一、普通抠图
-
印屏幕:键盘 PrtSc SysRq
-
打开Ps,CTRL+N 新建图层并 CTRL+V 粘贴
-
选框工具,利用“添加到选区”和“从选区减去”选中所需要切的图
-
CTRL+C 拷贝并 CTRL+N新建图层(此时新建的图层宽度和高度就是上一步选区的尺寸),选择背景内容为“透明”
-
CTRL+V 粘贴并保存,保存方式选择web开发所需要的安全方式(Ctrl+Shift+Alt+S)
-
保存格式选择GIF(较小的icon图标)或者PNG-24(较大的图片)
补充:利用谷歌浏览器获取图片(打开网页,按F12进入开发者模式)
二、psd专业切图
- 点击选择工具,勾选“自动选择”,方式为“图层”
- 点击需要切图的部位,自动定位到该图层
- 右击图层,“转换为智能对象”
- 选择选框工具,将要切的图层圈起来
- CTRL+C 拷贝并 CTRL+N新建图层(此时新建的图层宽度和高度就是上一步选区的尺寸),选择背景内容为“透明”
- CTRL+V 粘贴并保存,保存方式选择web开发所需要的安全方式(Ctrl+Shift+Alt+S)
- 保存格式选择GIF(较小的icon图标)或者PNG-24(较大的图片)
三、测量
- 利用选框工具,精准框选需要测量的部分
- 按F8,选择信息面板,查看宽度或高度数值
注:若是.psd格式图片可以用像素大厨直接测量
目录规范
- 项目文件夹不建议使用中文
- images存放固定素材
- uploads存放非固定素材
- css文件夹单独存放css文件(js、less同理)
- lib文件夹存放字体图标、框架等
SEO三大标签
title(骨架结构自带):标题
description(VS code直接meta:desc):描述
keywords(VS code直接meta:kw):关键词
网站标题图标引入
VS code直接link:favicon即可
注意:图标文件要放在index.html同级目录(根目录)
外部样式链接(.css文件)
格式:
<link href="common.css" rel="stylesheet"/>
VS code直接link+Tab键即可
注意:base.css文件要第一个引入
注:common.css 用于公共部分重复使用,如头部和脚部,始终不变的位置
注意:检测文件引入有没有成功(包括js文件等),谷歌浏览器右击检查,再点击network-css,选择All,刷新查看
页面初始化
注意:啥也别管,先写上,如果是项目的话直接引用base.css文件(base文件不要全局设置line-height:1;安全起见单独给标签设置)
-
*{ margin:0px; padding:0px; } //消除页面的初始边距
-
body{ line-height:1(此处没px); } //消除文本的初始间隙
关于版心(居中显示)
.container{
width:1240px;
margin:0 auto;
}
注意:版心是一个公共类名,可直接拿来用,取名不一定叫container,且版心只设置了宽,未设置高,后面模块拿来用需单独设置高。
补充:在HTML代码中,如果通栏嵌套一个盒子,盒子是版心,不知道如何取类名,可以使用版心的类名,但是css中给这个盒子设置样式时,一定要把路径写完整(使用后代选择器),否则会和版心的css样式起冲突(版心的代码是不能更改的)
HTML标签
一、独占一行(块级)
h系列标签,p标签,div,列表标签(如li或dd)等(可使用VS code快捷键bd+Tab快速生成边框或者开发者工具验证)
注意:独占一行的标签即使设置了宽高,仍然是独占一行显示,除非给它设置行内块(不建议行内块,可给父元素设置display:flex)
注意:li标签和dd标签都可包含任意内容
易混淆:li标签的小圆点用list-style: none; 消除
尤其注意:h1标签一般用于logo,加重权限,可优化搜索引擎
尤其注意:h标签里面不能嵌套h标签,否则会一刀切,被浏览器解析成两个分开的h标签(p标签同理,并且p标签不能嵌套h标签)
尤其注意:重要导航都用ul li(常用于布局,偶尔用于列表),网页底部导航常使用dl dt dd自定义列表,轮播指示器一般使用ol li
注意:ul或者h等标签本身就是独占一行的块元素,只不过是有语义的盒子,因此外面无需再嵌套div,除非它存在兄弟关系
二、非独占一行(行内)
文本格式化标签:strong(加粗)和em(倾斜)
面试题:什么是标签的语义化?答:在合适的地方用合适的标签,起到见名知意的作用
img标签:alt,图片显示不出会提示文字;title(大部分标签都可使用,鼠标悬停时会显示文字)
注意:尽量只设置图片的宽或者高,图片会自动的等比缩放,不要两个一起设置,否则会比例失衡
注意:一般img的width设为100%,大小由父盒子的宽高决定
a标签:target=“name名”,指定区域跳转链接;target=“_blank”,新窗口跳转链接
易混淆:a标签的下划线用text-decoration: none; 消除
注意:a标签可以包含任意标签(如果想让某个标签,哪怕是个宽、高很大的块标签,如果要让它实现跳转功能,直接在外面嵌套一个a标签)
注意:a标签有自己的颜色,无法通过继承改变颜色,需单独设置
span标签:无语义
注意:span的唯一作用(布局),给需要的文本套上一层span,单独设置样式,如< span class=”竖杠“ > |< /span >
注意:涉及到可以更新的数据,必须单独用标签存放,如span,i,em等
音频标签和视频标签(audio和video):都需要加controls才会显示播放控件,video在谷歌浏览器中想要自动播放,需要和静音搭配使用(即autoplay+muted)
注意:实际开发中,为了考虑兼容性,只写一个音频标签或者视频标签,控件样式的效果用JavaScript完成。
三、尤其注意特殊的几个标签
img、input、button严格意义上来说是行内块元素,不仅一行可以显示多个,而且可以设置宽高
关于表格的知识点
table标签里面:tr代表行,td代表项(即一行里面的每一项)
注意:th替换td(表头单元格,强调居中)
caption:表格标题(写在table标签里面第一行)
rowspan:跨行合并(即上下);colspan:跨列合并(即左右)
表格边框合并:给table标签设置css样式
table{
border-collapse:collapse;
}
关于表单的知识
一、input标签(type属性值决定类型):
文本框:text;密码框:password
注意:placeholder可在文本框或密码框中提示信息(占位符)
注意:input框里面的占位符可以通过内边距padding移动,使用input::placeholder选择器给占位符设置颜色
注意:文本框和密码框是自带边框的,需要设置box-sizing: border-box;自动内减
单选框:radio
注意:单选框的name名必须一致,才能实现单选的效果
多选框:checkbox
注意:单选框和多选框设置checked表示默认选中
尤其注意:label标签包裹【选框(单选框和多选框)和文字】,可以实现文字和选框的绑定,方便用户勾选,提升用户体验
文件选择:file(设置multiple可选择多个文件,提升用户体验)
日期:date(后期会使用JavaScript统一浏览器显示效果)
提交按钮:submit;重置按钮:reset;
注意:提交按钮和重置按钮的功能需要配合form标签才能实现功能
普通按钮:button(默认无功能,需配合JavaScript实现功能)
注意:实际开发中使用< button type=" "> < /button >双标签,优点是可以包含图片或文字等
尤其重要:1、表单提交会以“name的属性值=value的属性值”方式提交(如sex=男);2、文本框和密码框不需要写value,value值的内容由用户键盘输入
额外补充:form 表单域中的 action 是跳转到即将访问的页面地址
二、表单其余标签知识点
select中的option标签,设置selected表示默认选中
注意:下拉菜单标签一般不用(弃用),会利用另一种方法实现以保证浏览器显示效果统一
textarea:文本域(rows高,cols宽),常用于评论区
关于选择器需要注意的点
注:标签选择器一般不单独使用,只配合其它选择器复合使用
重要:类名选择器+hover伪类选择器+类名选择器叠加实现效果,如弹出菜单:
.father .a:hover .nav{
display: block;
}
注意:只有互相嵌套的标签可以使用:hover
注意:悬停在一个盒子上,使得这个盒子的伪元素发生变化,写法需注意,如下:
.box:hover::before{
background-color: pink;
}
注意:一个标签可以同时拥有多个类名,即属性叠加,以空格隔开,如加入公共类container(版心):
<div class="xtx-main-nav container"> </div>
尤其重要:结构伪类选择器如 a(此处为目标标签):nth-child(2)【此处的2不是指从a开始数第2个,而是从a的父元素里面第一个元素开始数起的第2个】
注意:实际开发中,常用后代选择器,尤其注意,有类名写类名
color和background-color的区别(易混淆)
易混淆:color针对文字,background-color针对背景
font字体样式需要注意的地方
font-style=normal:(针对: em 设置不倾斜)
font-weight=400(无单位,针对: h1~h6 和 strong设置不加粗)
font-size=16px(有单位)
面试题:谷歌浏览器默认字体大小是多少?所有元素都是吗?谷歌浏览器默认最小支持多少px的字体?
答:谷歌浏览器默认字体大小是16px, h标签除外,因为h标签有自己的大小,谷歌浏览器默认最小支持到12px字体大小,,小于12px无效。
font-family(一般加在body上,统一效果)
面试题:font属性连写的顺序是什么?哪些属性可以省略?答:swsf(稍微舒服),前两个可以省略。
注意:单独写和连写都存在时,当心覆盖问题(连写容易出现问题,建议单独写,或者单独写法写在连写的后面)
text-indent需要注意的地方(偶尔使用)
text-indent仅对行内块、行内元素(非独占一行,如strong标签,em标签)、以及文字有效,且必须给它们的父元素(父元素必须独占一行)设置
【简单记忆:父元素必须独占一行,子元素必须是行内块或行内元素,给父元素设置】
text-align需要注意的地方(重点)
text-align仅对行内块、行内元素(非独占一行,如img标签,a标签)、以及文字有效,且必须给它们的父元素(父元素必须独占一行)设置
【简单记忆:父元素必须独占一行,子元素必须是行内块或行内元素,给父元素设置】
特别注意:text-align有继承效果,安全起见不要给最外层大盒子设置,否则内容会全部居中(或居左、居右)
大盒子(块元素)的居中及居右方式
独占一行(非行内块、行内元素)的块元素,一般使用 margin:0 auto 进行居中(前提条件:要有宽)
margin-left:auto; 盒子居右(尤其注意:flex中也可使用,如给第二个盒子使用,这样第二个和第三个盒子都能居右显示)
尤其重要:margin-left:auto; 较为特殊,仅块元素(行内元素、行内块不可以)可以使用
尤其注意:由于 auto 仅对块元素有效,因此,margin-left:auto; 可使盒子(块元素)居右,margin:0 auto;可使盒子(块元素)水平居中,但如果想让盒子水平垂直居中,即 margin:auto auto ;即便是块元素,垂直方向却无效果,可采取给父盒子设置 display:flex,便能使盒子水平垂直居中
补充知识:一般行内元素想要居右,设置float:right;然后通过margin-right:固定值;与右边隔出少许距离即可
深入理解 margin 外边距
margin 外边距,顾名思义就是给盒子的外边设置某个方向的边距,好似一面墙,厚度由设置的大小决定,而且看不见,不能错误的把margin理解成具有定位功能的方位属性,它并不像position里面的right值,使盒子居右显示,margin-right仅仅是让盒子的右侧有了一定的厚度,并不能移动盒子的位置
补充知识:margin-right:0;常用于消除横排导航栏最后一个导航项多出的右外边距
关于行高 line-height 的问题
行高 line-height 是指文字在一行里面所占用的位置,仅对文字(且单行文本)有效,若要强制垂直居中(注意有px),行高应与盒子高度保持一致
补充:清除文字上下两端间隙使用line-height:1(注意没px)【建议不要全局设置,安全起见单独给标签设置】
注意:有文字的盒子,高度可以不写,用行高撑开
注意:行高不能写%的形式,否则无效
background的常用样式
一、单一样式
background-color: red; //背景颜色
background-image: url(image/icon.jpg); //背景图片
background-repeat: no-repeat; //不平铺 background-repeat: repeat-x; //关于x轴平铺
background-position: 100px 100px; //定位,分别对应x轴,y轴
background-attachment:fixed; //背景固定
二、复合样式
background:red url(image/icon.jpg) no-repeat 100px 100px fixed;
注意:单独写和连写都存在时,当心覆盖问题,单独写法写在连写的后面
注意:背景图片的大小用background-size设置(注意与img标签区分,img是直接通过width和height设置大小),cover属性值表示占满父盒子
注意:正常情况,盒子没有高度,设置背景颜色或者背景图片是看不到的,body比较特殊,默认高度是0,但设置背景颜色或背景图片是可以看到的,不过无法设置背景图片缩放,图片会消失,因为body高度是0,此时让body和视口高度一样,有两种解决办法:
- 给body'设置height:100%;并给html设置height:100%;(单独给body设置无效)
- 给body设置height:100vh;
透明遮罩层
另起一个盒子通过定位(注意是定位),覆盖于另一个盒子之上,取背景颜色(注意是背景颜色)的透明度在0-1之间,如下:
background-color:rgba(0,0,0,0.3)
渐变透明遮罩层
另起一个盒子通过定位(注意是定位),覆盖于另一个盒子之上,并设置如下代码:
background-image: linear-gradient(
transparent,
rgba(0,0,0,0.8)
);
透明属性opacity
与透明遮罩层的区别在于,opacity能让整个盒子里的内容全部透明
雪碧图的使用方法
- 盒子大小设为icon图标大小
- 背景图片设为雪碧图
- 像素大厨选中坐标(左上角)
- background-position:x y(x,y取负值)
注意:position的位置使用%形式,参考的是父元素,如position:right 0,移动的距离等于父盒子的宽度
精灵图精准定位:http://www.spritecow.com/
图片边框的使用
四行代码,直接写即可,缺一不可:
border-style:solid;
border-image-source:url(图片边框的路径);
border-image-slice:数值 数值 数值 数值;(注意不带单位,且按照上右下左的方向测量想要保留的距离)
border-image-width:数值px 数值px 数值px 数值px;(尤其注意,数字与上面保持一致,但是要加单位)
显示模式(常规知识)
display:block(把非独占一行的行内元素,转换为独占一行的块元素,可以设置宽高)
display:inline-block(把多个块元素在一行显示,简称行内块)
注意:行内块有缝隙,不建议使用,且会出现诸多问题
显示模式转换在实际开发中的使用
尤其重要:模式转换只给a标签使用
- 竖排导航:display:block
- 横排导航:display:flex(给父元素设置,统一所有子元素的显示模式,仅对子元素有效,隔代无效)
尤其注意:正常情况,重要导航都使用ul li标签,横排导航一般给li标签设置浮动,a标签设置display:block(或者给li标签设置display:flex)
无脑简单办法:横排导航无脑给li标签设置float: left; display: flex;
关于a标签导航布局时的方法(单独总结)
一、导航父盒子不设置宽的情况
默认由内容撑开,给li设置margin-right,最后一个margin-right设置为0,如果导航之间有竖杠,用左右外边距撑开
二、导航父盒子设置宽用弹性布局
基础布局:详见《显示模式转换在实际开发中的使用》
尤其重要:可利用justify-content: space-between;水平方向平均分配空间,(必须搭配display:flex,都是给父元素设置)
尤其注意:平均分配应该给ul加,因为ul有多个li,如果给li加,li一般里面只有一个a,平均分配不了
注意:导航之间的竖杠可以用li包裹,然后平均分配
注意:底部横杠采取:边框+内边距(因为边框和内容的距离一定是用内边距)
注意:有些布局中导航a标签不应该设置宽,而是采取左右padding优化导航显示效果(购物车小图标同理)
进阶(增加图标):使用伪元素
使用条件:伪元素必加 content=‘无内容 ‘;且默认是行内元素
①图标+a标签:(转为行内块+vertical-align:middle,之后再使用margin微调)
②图形层叠(子绝父相直接脱离标准流)
注意:如果让一个子元素的前面或者后面增加图标,使用伪元素时,必须给它的父元素设置,通常这个子元素是行内块元素,但如果这个子元素不是行内块元素,并且伪元素也需要转变成行内块,因为两者都需要转换显示模式,便可给父元素直接设置display:flex,两者同时转换)
尤其注意:只有双标签可以塞伪元素,不能给单标签设置,如input
侧边导航栏(竖排导航)居右的小箭头写法
此模块比较特殊,虽然是 “ 图标+a标签 ” 的情况,考虑使用伪元素,但并不能通过 “ 转为行内块+margin调距 ” 的方式实现,因为竖排导航的每一行字数不同,统一设置 margin-left:固定值; 会使小箭头的位置全部错乱,margin-left:auto;更是仅对块元素有效,而 margin-right 也并不是具有定位功能的方位属性,不能使得箭头居右,此时使用伪元素,需考虑子绝父相脱离标准流,最后通过设置 right 值,使全部的小箭头居右显示
关于logo大图标的写法
- h1的宽高和logo一致
- 把a标签转成块元素,并让宽高和h1保持一致
- 把logo图片作为背景图片放入a标签
- 设置a标签内容的文字大小为0(font-size:0;)
关于盒子布局时的方法(单独总结)
面试题:什么是百分比布局?答:百分比布局,又叫流式布局,宽度使用百分比,自适应,高度固定(目前已淘汰)
一、弹性布局
-
必须搭配display:flex
注意:flex里的子元素如果不设高,默认高度和父盒子一样
注意:默认主轴方向为水平方向,侧轴方向为垂直方向,可通过flex-direction:column;更改主轴方向为垂直方向
-
justify-content: space-between;主轴方向平均分配空间(两边贴齐)
-
justify-content: space-around;主轴方向平均分配空间(两边有缝隙)
-
justify-content: space-evenly;主轴方向平均分配空间(距离相等)
-
align-content: space-between;侧轴方向平均分配空间
注意:侧轴方向其余同理
-
align-items: center;侧轴垂直居中(单行使用)
-
flex-wrap: wrap;换行显示
注意:换行之后,垂直方向有空隙,因为侧轴方向没有任何代码控制
-
align-content: center;侧轴垂直居中(换行后使用)
-
align-self:给某个子元素单独设置,控制侧轴方向对齐方式(注意:属性应写在子元素自己身上)
-
flex:1(注意:给子元素设置):主轴方向剩余空间所占份数(如:三个盒子分别设置flex:1,表示三个盒子各占一份空间)
注意:常给大盒子中的某一个子盒子不设置宽,但使用flex:1;(不算严格意义上的移动适配,但能实现宽缩放的效果)
-
flex-shrink: 0(注意:给子元素设置):使当前子元素不受 flex 影响,可以单独设置宽高等
二、margin的使用
注意:如果父盒子有两个上下布局的盒子,只给第一个盒子同时设置上下margin,没必要给上面的盒子设置margin-top,又给下面的盒子设置margin-top
注意:通常来说,有多个相同的模块呈现上下布局,之间会有缝隙,习惯性的给盒子设置一个margin-bottom
面试:写一个页面需要多长时间?答:难度等级不同需要的时间也不同
三、padding的使用
盒子里面的内容一般会与四周有些距离,习惯性的给盒子设置上、下、左、右内边距
继承的常见用法
文字类如font,行高,color(不考虑text-系列,继承会出现问题,不使用)都有继承效果,可以省事给父元素设置,不用单独设置
注意:h标签有自己的font-size,无法通过继承改变文字大小,需单独设置
注意:height有类似继承的效果,父元素设置了高度,子元素可以直接设置height:100%;但隔代元素设置height:100%;是无效的
再次注意:a标签有自己的颜色,无法通过继承改变颜色,需单独设置(HTML标签里提到过)
补充:行高有撑开盒子的效果,所以,可以不设高度,直接设置行高(建议开发熟练后使用)
选择器优先级
面试题:选择器优先级从高到低的顺序是什么?答:!important > 行内 > id > 类 > 标签 > * > 继承
权重叠加计算公式:先判断能否直接选中标签(只要是继承优先级最低,直接pass),再通过权重公式计算(行内样式个数,id选择器个数,类选择器个数,标签选择器个数),最后进行比较
注意两种情况:全是继承(优先最近);权重相同(层叠覆盖)
设置边框border和内边距padding造成的问题
盒子的宽高,其实是内容区域的大小,不包含边框和内边距,所以在设置边框和内边距后,盒子的大小必然会被撑大,因为border和padding是框在盒子外面的,是占像素的,因此测量时可以将边框、内边距、内容区域视为三部分(通过手动内减)
即:盒子的宽高应手动减去border边框或padding内边距设定的像素大小,使得保证视觉显示范围的整体大小不变
简单方法(自动内减):box-sizing:border-box
注意:自动内减一般进行全局设置,写在通配符里,以base.css文件引入
关于margin和padding的注意点
一、塌陷问题
嵌套的两个盒子,子元素设置margin-top,会带着父元素一起下移,解决办法:给父元素设置overflow:hidden(不建议设置overflow:hidden,会带来一些问题)
其余方法:padding代替margin,但是一定要设置box-sizing:border-box
最优办法:给父元素设置display:flex
注意:当去掉边框后,内容会跑掉,基本断定是塌陷问题
二、垂直方向外边距合并现象
垂直方向的两个盒子,分别使用上下外边距,会出现外边距合并问题,最终距离为两者最大值,解决办法:只给其中一个盒子设置margin即可
三、行内元素的margin和padding垂直方向无效
不会影响别的元素,但可以设置(如a标签的下边框使用内边距)
四、padding在a标签导航中的实际应用
实际开发中,a标签的字数不一致但是每个a标签的缝隙距离一致,这里的a标签导航的宽度不应该写死,而是由内容撑开,再设置一个左右内边距
关于浮动的知识点
浮动只影响后面的元素(垂直分布的盒子,浮动的会飘到天上,后面没有浮动的盒子按标准流依次排队,顶替前面的空位,浮动的盒子在天上会覆盖下面的盒子),不影响前面的元素(浮动的盒子的前面一个盒子是独占一行的,因此无法飘在前面的盒子之上,除非给前面的盒子设置为行内块display:inline-block,但是却不能覆盖它),行内元素浮动后,会脱标,可以直接设置宽高
注意:浮动元素下方的盒子会被层叠,此时有三种较优的解决办法(清除浮动)
- 给浮动元素的父亲设置适当的高度,一般与浮动元素的高度一致(只适用于无需撑开内容的情况,新闻列表等高度不应该写死)
原因:浮动的元素脱标,如果父元素没有设置高度,会造成父元素高度为0
-
给父元素加overflow:hidden
-
实际开发中最优方法:以base.css文件引入,通过类名调用
.clearfix::after{
content: '';
display: block;
clear: both;
}
关于定位的知识点
相对定位:占位置,参考自己位置移动
使用场景:通常适用于小范围移动,如鼠标悬停时盒子上移
绝对定位:脱标,不占位置,参考祖先元素(最近的、有定位的)移动
注意:开发中常使用“子绝父相”(如果父有定位,直接子绝)
子绝父相使用场景:弹出菜单(配合显示与隐藏效果),透明遮罩层,搜索框里的放大镜图标,购物车右上角的商品件数【层叠的场景都用定位】
尤其注意:父相不能以input或者伪元素为参考
注意:定位会脱标,默认由内容撑开,必须设置宽高(缺一不可),否则无法显示样式,如背景色
重要:定位元素居中方式
-
先让子元素往右移动父元素的一半,left:50%;
-
再让子元素往左移动自己的一半,transform:translateX(-50%);【注意是X轴】
-
垂直居中在原有基础上同理,top:50%,transform:translateY(-50%)【注意是Y轴】
-
连写: transform:translate(-50%,-50%)【注意有逗号】
尤其注意:块元素的垂直居中方式便可利用定位来实现
固定定位:脱标,不占位置
注意:使用固定定位的div标签,可以写在任意位置,因为它参考的是浏览器左上角视口移动
注意:实际开发中为了优化使用固定定位的侧边导航栏,会参考屏幕的中心线进行移动,如 left: calc(50% + 650px);【calc:让css可以计算】
注意:定位元素受overflow:hidden;(超出部分隐藏)管辖
拓展:z-index: 1;增加定位等级,数字越高,等级越高,处于上层
关于显示和隐藏(重要)
显示隐藏必须配合定位实现(因为脱标的元素显示或者隐藏不会影响布局)
显示和隐藏没有过渡效果(可以通过高度从无到有达到显示隐藏并且有过渡的效果)
垂直对齐方式解决的问题
原因:针对行内块(尤其注意img、input、button),都是它们的基线对齐引起的问题,因此vertical-align被称为行内块垂直对齐方式
面试题:img在没有高度的盒子内,底部有缝隙,如何解决?答:设置vertical-align: 非baseline都可以,或者父盒子写高度
尤其重要:input框外面一般会套一个类名为search的div,并且div的宽高和input的宽高保持一致,但是会出现顶部出现缝隙的问题,导致input框整体下沉,脱离div的范围,此时应该给input框设置vertical-align: top;(或者给父元素div设置display:flex;)
注意:input框常和button同时出现,button会和input以基线对齐,此时应该给button设置vertical-align: top;(或者给父元素div设置display:flex;)
注意:vertical只给元素本身设置
简单办法:基本都可以通过给父元素设置display:flex;来解决
过渡动画
transition过渡要给需要过渡的元素(本身)设置,常取值为all和数字+s(秒),也可给每个属性单独设置
字体图标
iconfont 阿里巴巴矢量图标库,上传需SVG格式文件
注意:字体图标的本质是字体,可以设置字体样式、修改颜色等
注意:font-size要给字体图标加,父级无法继承
iconfont字体图标的使用:
- 引入iconfont.css
- span 或 i 标签调用类名,iconfont类名必加,再调用图标类名,单独设置样式需单独取类名
注意:在移动端,如果使用字体图标需要点击跳转,一般会设置宽高为44*44的激活区域
平面转换
- 移动:transform:translate(x,y)
注意:x,y中的取值如果是百分比,参考的是盒子本身(注意是本身),占位置,且能覆盖,效果等同于相对定位,可以完全代替相对定位
补充记忆:在所学的css属性当中,涉及多个参数,有括号用逗号隔开,没有括号用空格隔开
- 旋转:transform:rotate(数字+deg)
注意:改变旋转中心轴,transform-origin: left(或right、center);
注意:两者叠加需先移动后旋转,此处涉及到多重转换的写法,如下:
transform: translateX(100px) rotate(360deg);
注意:transform属于复合属性,单独写会因为层叠性导致样式无效
注意:菱形的实现以及圆圈旋转动画,都是依靠 transform:rotate 来完成
- 缩放:transform: scale(数字)【注意无单位】
注意:缩放一般配合遮罩层实现悬停效果
空间转换(开发极少使用)
关于Z轴:视线到屏幕的距离是Z轴的正值,Z轴不使用百分比
透视属性(视距):perspective(给body设置),取值建议800-1200px,近大远小的效果,视距越大,物体越远
立体呈现:transform-style: preserve-3d;(给父元素设置)开辟3d空间,让子级元素呈现3D效果
立方体的搭建步骤:
- 给一个有宽高的父盒子,再给六个同样宽高的子盒子,全部定位到父盒子上
- body设置perspective:800-1200px,父盒子设置transform-style: preserve-3d;
- 选择两个子盒子,分别沿Z轴正值、负值各拉所需距离的一半
- 其余盒子先旋转再移动
注意:不管盒子如何旋转,盒子面朝的方向永远是Z轴
动画
一、定义动画:
@keyframes 自定义动画名称 {
from{
初始样式,一般不写,from可直接省略
}
to{
此处只写样式,不能写选择器,如下:
transform:rotate3d(1,1,0,360deg);//沿斜轴旋转
}
}
注意:from to只有两个状态,与过渡的区别是,过渡是让两个不同的状态通过hover伪类选择器进行切换,然后模拟出动画的效果
注意,动画若想使用多个状态,可使用百分比替换from to,同理,0% {初始样式,一般不写,可直接省略}
二、使用动画:
animation:动画名称 动画时长(这两个基础属性必写)
其它属性:
- 速度曲线(步长):匀速linear
- 延迟时间(动画时长和延迟时间都存在时,第一个时间是动画时长,第二个时间是延迟时间)
- 重复次数:infinite无限重复
- 动画运动方向:alternate反向播放
- 执行完毕时状态:forwards停留在结束位置(注意与重复次数和动画方向冲突)
- 单独多出来一个属性:animation-play-state: paused;(配合hover实现鼠标触碰暂停的效果)
注意:想要哪个盒子使用动画,就在哪个盒子的样式里加入使用动画的代码,同理,哪个盒子的动画想要暂停,选择器就要选择到哪个盒子上
注意:多组动画的使用,中间用逗号隔开,如下:
animation:动画名称1 各个属性,动画名称2 各个属性
三、逐帧动画(配合精灵图)
前提条件:一张很宽的的精灵图,上面排布着多张小图(如人物走路的连贯图片)
- 设置父盒子宽高是一张小图的宽高,背景图为精灵图
- 定义动画,通过background-position(精灵图肯定是通过position移动)向左移动位置(注意是负值,且移动距离就是精灵图的宽度)
- 给父盒子使用动画,添加速度曲线steps(N),N与精灵图上小图个数相同,并添加无限重复效果
- 给父盒子设置溢出部分隐藏
四、列表滚动效果
- 给定一个父盒子,用来展示列表滚动,列表用ul li盒子表示,li可以放文字,也可以放img标签等
- 计算出父盒子的宽度或者高度可以容纳N个li盒子,并将前N个li盒子补充到末尾
- 给ul设置flex,并定义动画,使整个ul通过transform: translateX;向左移动(注意是负值,且移动距离就是初始li的宽度或高度,不包含末尾补充的li盒子)
- 给ul使用动画,添加速度曲线为匀速,重复次数为无限
- 给父盒子设置溢出部分隐藏
移动端页面
无版心,开发以iPhone 6 7 8为准,且无论是pc端还是移动端,开发屏幕参考的都是逻辑分辨率(即物理分辨率除以缩放比例)
注意:移动端页面的底部或者头部涉及到固定定位(固定定位宽度为100%),body需要设置上下内边距,以免内容被固定定位区域覆盖
一、关于二倍图
实际开发中,为了使图片不失真,UI会基于开发屏幕尺寸设计两倍的交互稿,此时测量应将像素大厨切换成2X(这样做是告诉系统,这是一张二倍图,系统便会显示出正确的开发尺寸,如750的交互稿,切换成2x,显示为375)
二、REM适配
REM(相对单位)参考根标签(即html)的font-size大小
面试题:REM移动适配的原理是什么?
答:REM的宽高是固定不能改变的,但由于REM参考的是html的font-size大小,所以可以通过媒体标签,给不同的宽度设定不同的font-size大小(html)
@media(width:375px){ //注意:千万不能加分号
html{
font-size: 37.5px; //注意:行业习惯规定font-size为屏幕宽度的十分之一
}
}
REM适配步骤:
注意:使用REM适配,交互稿就无需关心是几倍图,步骤1可以体现
-
确定开发尺寸(参考交互稿的尺寸,一般情况主流交互稿为750,开发尺寸选375(即像素大厨选2x),但是选750也没问题,因为REM可以进行适配)
-
引入flexible.js文件(js文件默认的font-size就是屏幕宽度的1/10)
-
选择插件px to rem的扩展设置,设定根字号(Root Font Size)为确定好的开发尺寸的十分之一即可(如果开发尺寸确定为375,根字号设为37.5)
-
检测是否设置成功(如根字号为37.5,CSS中书写37.5px,看是否提示1rem)
-
正常测量交互稿并转换成rem单位,并且书写代码时,所有涉及到px的都要转成rem(注意是所有)
注意:一旦确定好开发尺寸,因为插件已经设置好了相应的根字号,必须按确定好的开发尺寸测量,不能再更改
-
只要涉及文字,必须设置font-size并转换成rem(尤其重要)
注意:文字不要设置宽高
三、VW/VH适配
VW/VH(相对单位)参考视口宽和高的大小(规定1vw=视口宽度的1/100,如375的开发尺寸,1vw=3.75px)
注意:一般只使用VW适配,VH不用,只针对body高度使用设置height:100vh;其它情况不要使用
VW适配步骤:
-
确定开发尺寸(任意尺寸都行,参考交互稿的尺寸,可以是1x,也可以是2x)
-
选择插件px2vw的扩展设置,设定design width的值为开发尺寸的宽(切记要重启VS code)
-
检测是否设置成功(如开发尺寸为375,CSS中书写375px,看是否提示100vw)
-
正常测量交互稿并转换成vw单位,并且书写代码时,所有涉及到px的都要转成rem(注意是所有)
注意:一旦确定好开发尺寸,因为插件已经设置好了相应的屏幕宽度,必须按确定好的开发尺寸测量,不能再更改
-
只要涉及文字,必须设置font-size并转换成rem(尤其重要)
注意:文字不要设置宽高
四、移动适配中多倍精灵图的使用
-
确定好适配方法及开发尺寸后,测量交互稿盒子大小
-
测量精灵图中单个小图标的大小(注意:必须原稿测量,即像素大厨中只能选1x,不能选2x)
-
对比盒子和精灵图单个小图标的大小,得出倍数
-
盒子引入背景图,position的坐标除以倍数,background-size为原稿的宽高除以倍数(切记为原稿)
注意:background-size不能设置100%,因为参考父盒子,会将整个精灵图都缩放成父盒子大小
五、多倍img、多倍背景图的使用(非精灵图)
注意:pc端、移动端通用
- 测量交互稿盒子大小
- 放img标签或者以background引入背景图
- 给img设置width:100%;或者给background-size设置100% 100%;
六、LESS语法
-
在less语法里面写&,就不会生成后代(相当于没有空格),可以配合写伪类元素或者伪类选择器(简单记忆:只要第一个字符是冒号,就加&)
-
less变量的定义和使用:
//定义: @变量名:变量值; //使用: 属性:@变量名
-
导出指定路径:
//out:../css/
-
禁止导出:
//out:false
-
引入其它less文件
@import './xxx.less(文件路径)';
尤其注意:less 中引入其它 less 文件,末尾必须要有分号,否则报错
七、利用Live Server对移动页面进行手机调试
- 让手机和电脑在同一局域网下
- 使用 Live Serve 运行移动端页面
- Ctrl + ~(或者cmd)输入ipconfig,复制 IPv4地址
- 在打开的 Live Server页面地址栏处,将冒号前面的地址替换成IPv4的地址,刷新页面看能否正常运行
- 若页面能正常运行,将该地址完整的使用手机浏览,即可进行调试
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?