前端工作笔记(一)

HTML+CSS+移动Web 前端笔记

置顶板块:VS code快捷键(持续更新)

  1. !(英文)+Tab(生成骨架结构)
  2. ./ 或 ../ (出现路径)
  3. CTRL+/(注释:非常重要,养成书写的习惯)
  4. CTRL+回车(自动跳到下一行)
  5. lorem+Tab(随机段落文字)
  6. 标签.类名(生成带类名的标签)
  7. CTRL+Alt+上或下(选择一列光标,也可用鼠标滚轮选择)
  8. Alt+单击(选择不连续的多个光标)
  9. bd+Tab(快速生成边框)
  10. 首字母+像素大小+Tab(快速生成内边距或外边距)
  11. ul>li*n(快速生成n个li标签的无序列表)
  12. dl>dt+dd*n(快速生成1个dt标签,n个dd标签的自定义列表)
  13. table>tr*n>td*n(快速生成n行n列的表格)
  14. CTRL+Shift+L(同时选中多个匹配项进行编辑)

置顶板块:类名单词积累(持续更新)

  1. 头部:header
  2. 底部:footer
  3. 入口:entry
  4. 侧边栏:aside
  5. 快捷菜单:shortcut
  6. 导航:nav
  7. 主导航:main-nav
  8. 宣传服务:services
  9. 版权信息:copyright
  10. 网站大图标:logo
  11. 搜索:search
  12. 购物车:cart
  13. 轮播图:banner
  14. 遮罩层:mask
  15. 商品分类:category
  16. 左按钮:prev
  17. 右按钮:next
  18. 轮播指示器(小圆点):indicator
  19. 联系方式:contact
  20. 订单:orders
  21. 支付:pay
  22. 用户信息:user_msg
  23. 位置:location
  24. 面板:pannle
  25. 商品:goods
  26. 图片:pic
  27. 信息:info
  28. 统计:count
  29. 价格:price
  30. 活动:item
  31. 文字区域:txt
  32. 活动状态:active
  33. 登陆:login
  34. 下载:download
  35. 切换栏:tab
  36. 退出:logout

置顶板块:零碎知识补充随手记(持续更新)

  1. 字符实体(即空格): 
  2. css行内式样式与id选择器一般不使用,仅配合JavaScript时才会用到
  3. 光标样式:cursor:pointer(小手效果)
  4. 圆角可以给多个方向设置:左上,右上,右下,左下
  5. 轮播图要用img实现,不能使用背景图片
  6. overflow:hidden:超出部分隐藏
  7. caniuse.com官网,可以检测所用技术是否兼容(也可以在VS code中鼠标悬停在代码上,点击MDN Reference检测)
  8. swiper官网(框架模板)
  9. layui官网(专做轮播图的框架)
  10. 文字一定不要给宽高
  11. text-decoration: line-through;删除线

Ps切图(抠图)及测量

一、普通抠图

  1. 印屏幕:键盘 PrtSc SysRq

  2. 打开Ps,CTRL+N 新建图层并 CTRL+V 粘贴

  3. 选框工具,利用“添加到选区”和“从选区减去”选中所需要切的图

  4. CTRL+C 拷贝并 CTRL+N新建图层(此时新建的图层宽度和高度就是上一步选区的尺寸),选择背景内容为“透明”

  5. CTRL+V 粘贴并保存,保存方式选择web开发所需要的安全方式(Ctrl+Shift+Alt+S)

  6. 保存格式选择GIF(较小的icon图标)或者PNG-24(较大的图片)

    补充:利用谷歌浏览器获取图片(打开网页,按F12进入开发者模式)

二、psd专业切图

  1. 点击选择工具,勾选“自动选择”,方式为“图层”
  2. 点击需要切图的部位,自动定位到该图层
  3. 右击图层,“转换为智能对象”
  4. 选择选框工具,将要切的图层圈起来
  5. CTRL+C 拷贝并 CTRL+N新建图层(此时新建的图层宽度和高度就是上一步选区的尺寸),选择背景内容为“透明”
  6. CTRL+V 粘贴并保存,保存方式选择web开发所需要的安全方式(Ctrl+Shift+Alt+S)
  7. 保存格式选择GIF(较小的icon图标)或者PNG-24(较大的图片)

三、测量

  1. 利用选框工具,精准框选需要测量的部分
  2. 按F8,选择信息面板,查看宽度或高度数值

注:若是.psd格式图片可以用像素大厨直接测量

目录规范

  1. 项目文件夹不建议使用中文
  2. images存放固定素材
  3. uploads存放非固定素材
  4. css文件夹单独存放css文件(js、less同理)
  5. 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;安全起见单独给标签设置)

  1. *{
        margin:0px;
        padding:0px;
    }
    //消除页面的初始边距
    
  2. 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和视口高度一样,有两种解决办法:

  1. 给body'设置height:100%;并给html设置height:100%;(单独给body设置无效)
  2. 给body设置height:100vh;

透明遮罩层

另起一个盒子通过定位(注意是定位),覆盖于另一个盒子之上,取背景颜色(注意是背景颜色)的透明度在0-1之间,如下:

background-color:rgba(0000.3

渐变透明遮罩层

另起一个盒子通过定位(注意是定位),覆盖于另一个盒子之上,并设置如下代码:

background-image: linear-gradient(
                transparent,
                rgba(0,0,0,0.8)
            );

透明属性opacity

与透明遮罩层的区别在于,opacity能让整个盒子里的内容全部透明

雪碧图的使用方法

  1. 盒子大小设为icon图标大小
  2. 背景图片设为雪碧图
  3. 像素大厨选中坐标(左上角)
  4. 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标签使用

  1. 竖排导航:display:block
  2. 横排导航: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大图标的写法

  1. h1的宽高和logo一致
  2. 把a标签转成块元素,并让宽高和h1保持一致
  3. 把logo图片作为背景图片放入a标签
  4. 设置a标签内容的文字大小为0(font-size:0;)

关于盒子布局时的方法(单独总结)

面试题:什么是百分比布局?答:百分比布局,又叫流式布局,宽度使用百分比,自适应,高度固定(目前已淘汰)

一、弹性布局

  1. 必须搭配display:flex

    注意:flex里的子元素如果不设高,默认高度和父盒子一样

    注意:默认主轴方向为水平方向,侧轴方向为垂直方向,可通过flex-direction:column;更改主轴方向为垂直方向

  2. justify-content: space-between;主轴方向平均分配空间(两边贴齐)

  3. justify-content: space-around;主轴方向平均分配空间(两边有缝隙)

  4. justify-content: space-evenly;主轴方向平均分配空间(距离相等)

  5. align-content: space-between;侧轴方向平均分配空间

    注意:侧轴方向其余同理

  6. align-items: center;侧轴垂直居中(单行使用)

  7. flex-wrap: wrap;换行显示

    注意:换行之后,垂直方向有空隙,因为侧轴方向没有任何代码控制

  8. align-content: center;侧轴垂直居中(换行后使用)

  9. align-self:给某个子元素单独设置,控制侧轴方向对齐方式(注意:属性应写在子元素自己身上)

  10. flex:1(注意:给子元素设置):主轴方向剩余空间所占份数(如:三个盒子分别设置flex:1,表示三个盒子各占一份空间)

    注意:常给大盒子中的某一个子盒子不设置宽,但使用flex:1;(不算严格意义上的移动适配,但能实现宽缩放的效果)

  11. 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,但是却不能覆盖它),行内元素浮动后,会脱标,可以直接设置宽高

注意:浮动元素下方的盒子会被层叠,此时有三种较优的解决办法(清除浮动)

  1. 给浮动元素的父亲设置适当的高度,一般与浮动元素的高度一致(只适用于无需撑开内容的情况,新闻列表等高度不应该写死)

原因:浮动的元素脱标,如果父元素没有设置高度,会造成父元素高度为0

  1. 给父元素加overflow:hidden

  2. 实际开发中最优方法:以base.css文件引入,通过类名调用

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

关于定位的知识点

相对定位:占位置,参考自己位置移动

使用场景:通常适用于小范围移动,如鼠标悬停时盒子上移

绝对定位:脱标,不占位置,参考祖先元素(最近的、有定位的)移动

注意:开发中常使用“子绝父相”(如果父有定位,直接子绝)

子绝父相使用场景:弹出菜单(配合显示与隐藏效果),透明遮罩层,搜索框里的放大镜图标,购物车右上角的商品件数【层叠的场景都用定位】

尤其注意:父相不能以input或者伪元素为参考

注意:定位会脱标,默认由内容撑开,必须设置宽高(缺一不可),否则无法显示样式,如背景色

重要:定位元素居中方式

  1. 先让子元素往右移动父元素的一半,left:50%;

  2. 再让子元素往左移动自己的一半,transform:translateX(-50%);【注意是X轴】

  3. 垂直居中在原有基础上同理,top:50%,transform:translateY(-50%)【注意是Y轴】

  4. 连写: 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字体图标的使用:

  1. 引入iconfont.css
  2. span 或 i 标签调用类名,iconfont类名必加,再调用图标类名,单独设置样式需单独取类名

注意:在移动端,如果使用字体图标需要点击跳转,一般会设置宽高为44*44的激活区域

平面转换

  1. 移动:transform:translate(x,y)

注意:x,y中的取值如果是百分比,参考的是盒子本身(注意是本身),占位置,且能覆盖,效果等同于相对定位,可以完全代替相对定位

补充记忆:在所学的css属性当中,涉及多个参数,有括号用逗号隔开,没有括号用空格隔开

  1. 旋转:transform:rotate(数字+deg)

注意:改变旋转中心轴,transform-origin: left(或right、center);

注意:两者叠加需先移动后旋转,此处涉及到多重转换的写法,如下:

transform: translateX(100px) rotate(360deg);

注意:transform属于复合属性,单独写会因为层叠性导致样式无效

注意:菱形的实现以及圆圈旋转动画,都是依靠 transform:rotate 来完成

  1. 缩放:transform: scale(数字)【注意无单位】

注意:缩放一般配合遮罩层实现悬停效果

空间转换(开发极少使用)

关于Z轴:视线到屏幕的距离是Z轴的正值,Z轴不使用百分比

透视属性(视距):perspective(给body设置),取值建议800-1200px,近大远小的效果,视距越大,物体越远

立体呈现:transform-style: preserve-3d;(给父元素设置)开辟3d空间,让子级元素呈现3D效果

立方体的搭建步骤:

  1. 给一个有宽高的父盒子,再给六个同样宽高的子盒子,全部定位到父盒子上
  2. body设置perspective:800-1200px,父盒子设置transform-style: preserve-3d;
  3. 选择两个子盒子,分别沿Z轴正值、负值各拉所需距离的一半
  4. 其余盒子先旋转再移动

注意:不管盒子如何旋转,盒子面朝的方向永远是Z轴

动画

一、定义动画:

@keyframes 自定义动画名称 {
            from{
                初始样式,一般不写,from可直接省略
            }
            to{
                此处只写样式,不能写选择器,如下:
                transform:rotate3d(1,1,0,360deg);//沿斜轴旋转
            }
        }

注意:from to只有两个状态,与过渡的区别是,过渡是让两个不同的状态通过hover伪类选择器进行切换,然后模拟出动画的效果

注意,动画若想使用多个状态,可使用百分比替换from to,同理,0% {初始样式,一般不写,可直接省略}

二、使用动画:

animation:动画名称 动画时长(这两个基础属性必写)

其它属性:

  1. 速度曲线(步长):匀速linear
  2. 延迟时间(动画时长和延迟时间都存在时,第一个时间是动画时长,第二个时间是延迟时间)
  3. 重复次数:infinite无限重复
  4. 动画运动方向:alternate反向播放
  5. 执行完毕时状态:forwards停留在结束位置(注意与重复次数和动画方向冲突)
  6. 单独多出来一个属性:animation-play-state: paused;(配合hover实现鼠标触碰暂停的效果)

注意:想要哪个盒子使用动画,就在哪个盒子的样式里加入使用动画的代码,同理,哪个盒子的动画想要暂停,选择器就要选择到哪个盒子上

注意:多组动画的使用,中间用逗号隔开,如下:

animation:动画名称1 各个属性,动画名称2 各个属性

三、逐帧动画(配合精灵图)

前提条件:一张很宽的的精灵图,上面排布着多张小图(如人物走路的连贯图片)

  1. 设置父盒子宽高是一张小图的宽高,背景图为精灵图
  2. 定义动画,通过background-position(精灵图肯定是通过position移动)向左移动位置(注意是负值,且移动距离就是精灵图的宽度)
  3. 给父盒子使用动画,添加速度曲线steps(N),N与精灵图上小图个数相同,并添加无限重复效果
  4. 给父盒子设置溢出部分隐藏

四、列表滚动效果

  1. 给定一个父盒子,用来展示列表滚动,列表用ul li盒子表示,li可以放文字,也可以放img标签等
  2. 计算出父盒子的宽度或者高度可以容纳N个li盒子,并将前N个li盒子补充到末尾
  3. 给ul设置flex,并定义动画,使整个ul通过transform: translateX;向左移动(注意是负值,且移动距离就是初始li的宽度或高度,不包含末尾补充的li盒子)
  4. 给ul使用动画,添加速度曲线为匀速,重复次数为无限
  5. 给父盒子设置溢出部分隐藏

移动端页面

无版心,开发以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可以体现

  1. 确定开发尺寸(参考交互稿的尺寸,一般情况主流交互稿为750,开发尺寸选375(即像素大厨选2x),但是选750也没问题,因为REM可以进行适配)

  2. 引入flexible.js文件(js文件默认的font-size就是屏幕宽度的1/10)

  3. 选择插件px to rem的扩展设置,设定根字号(Root Font Size)为确定好的开发尺寸的十分之一即可(如果开发尺寸确定为375,根字号设为37.5)

  4. 检测是否设置成功(如根字号为37.5,CSS中书写37.5px,看是否提示1rem)

  5. 正常测量交互稿并转换成rem单位,并且书写代码时,所有涉及到px的都要转成rem(注意是所有)

    注意:一旦确定好开发尺寸,因为插件已经设置好了相应的根字号,必须按确定好的开发尺寸测量,不能再更改

  6. 只要涉及文字,必须设置font-size并转换成rem(尤其重要)

    注意:文字不要设置宽高

三、VW/VH适配

VW/VH(相对单位)参考视口宽和高的大小(规定1vw=视口宽度的1/100,如375的开发尺寸,1vw=3.75px)

注意:一般只使用VW适配,VH不用,只针对body高度使用设置height:100vh;其它情况不要使用

VW适配步骤:

  1. 确定开发尺寸(任意尺寸都行,参考交互稿的尺寸,可以是1x,也可以是2x)

  2. 选择插件px2vw的扩展设置,设定design width的值为开发尺寸的宽(切记要重启VS code)

  3. 检测是否设置成功(如开发尺寸为375,CSS中书写375px,看是否提示100vw)

  4. 正常测量交互稿并转换成vw单位,并且书写代码时,所有涉及到px的都要转成rem(注意是所有)

    注意:一旦确定好开发尺寸,因为插件已经设置好了相应的屏幕宽度,必须按确定好的开发尺寸测量,不能再更改

  5. 只要涉及文字,必须设置font-size并转换成rem(尤其重要)

    注意:文字不要设置宽高

四、移动适配中多倍精灵图的使用

  1. 确定好适配方法及开发尺寸后,测量交互稿盒子大小

  2. 测量精灵图中单个小图标的大小(注意:必须原稿测量,即像素大厨中只能选1x,不能选2x)

  3. 对比盒子和精灵图单个小图标的大小,得出倍数

  4. 盒子引入背景图,position的坐标除以倍数,background-size为原稿的宽高除以倍数(切记为原稿)

    注意:background-size不能设置100%,因为参考父盒子,会将整个精灵图都缩放成父盒子大小

五、多倍img、多倍背景图的使用(非精灵图)

注意:pc端、移动端通用

  1. 测量交互稿盒子大小
  2. 放img标签或者以background引入背景图
  3. 给img设置width:100%;或者给background-size设置100% 100%;

六、LESS语法

  1. 在less语法里面写&,就不会生成后代(相当于没有空格),可以配合写伪类元素或者伪类选择器(简单记忆:只要第一个字符是冒号,就加&)

  2. less变量的定义和使用:

    //定义:    @变量名:变量值;
    //使用:    属性:@变量名
    
  3. 导出指定路径:

    //out:../css/
    
  4. 禁止导出:

    //out:false
    
  5. 引入其它less文件

    @import './xxx.less(文件路径)';
    

尤其注意:less 中引入其它 less 文件,末尾必须要有分号,否则报错

七、利用Live Server对移动页面进行手机调试

  1. 让手机和电脑在同一局域网下
  2. 使用 Live Serve 运行移动端页面
  3. Ctrl + ~(或者cmd)输入ipconfig,复制 IPv4地址
  4. 在打开的 Live Server页面地址栏处,将冒号前面的地址替换成IPv4的地址,刷新页面看能否正常运行
  5. 若页面能正常运行,将该地址完整的使用手机浏览,即可进行调试
posted @   M-Coder  阅读(197)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
Live2D
欢迎阅读『前端工作笔记(一)』
点击右上角即可分享
微信分享提示