前端工作笔记（一）

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. 字符实体（即空格）：&nbsp；
  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（0，0，0，0.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)  编辑  收藏  举报
相关博文：
· 前端工作笔记（四）
· 前端工作笔记（二）
· 学习前端相关
· 前端0基础笔记（2023最新版黑马前端教程笔记）
· HTML+CSS笔记
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
Live2D
欢迎阅读『前端工作笔记（一）』
点击右上角即可分享
微信分享提示