m0_49553751的博客

原创 Bootstrap

Bootstrap是前端UI框架，提供了大量编写好的CSS样式。

原创 JavaScript中基本数据类型

声明一个变量未赋值就是未定义类型。

原创 JavaScript常量的基本使用

【代码】JavaScript常量的基本使用。

原创 变量拓展-数组

数组（Array）-一种将一组数据存储在单个变量名下的优雅方式。let 数组名 = [数据1，数据2，...，数据n]

原创 JavaScript变量

是计算机存储数据的容器变量的作用用来存储数据变量的基本使用变量的声明语法：let 变量名声明变量由两部分构成：声明关键字、变量名变量赋值在变量名之后跟上一个 "="，然后是数值更新变量变量赋值后，还可以通过简单地给它一个不同的值来更新它注意：let 不允许多次声明一个变量变量赋值后，还可以通过简单地给它一个不同的值来更新它语法：多个变量中间用逗号隔开说明：看上去代码长度更短，但是并不推荐这样。为了更好的可读性，请一行只声明一个变量。

原创 JavaScript输入输出语法

目标：能写出常见JavaScript输入输出语法。

原创 JavaScript介绍+作用+组成+书写位置+注释+结束符

是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

原创 常用软件-js

原创 Bootstrap-全局样式、组件

Tables · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网 (bootcss.com)

原创 响应式页面媒体查询

min-width（从小到大）max-width（从大到小）max-width:最大宽度。min-width:最小宽度。

原创 VW适配方案

混用，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。1vw=1/100视口宽度。1vh=1/100视口高度。问题：开发中，vw和vh。

原创 less-导入-导出-禁止导出

作用：导入less公共样式文件语法：导入：@import "文件路径"；提示：如果是less文件可以省略后缀。

原创 less-变量

使用变量：CSS属性：@变量名；作用：存储数据，方便使用和修改。定义变量：@变量名：数据；概念：容器，存储数据。

原创 less-嵌套

作用：快捷生成后代选择器。

原创 less-运算

加、减、乘直接书写计算表达式 除法需要添加小括号或者 .

原创 less简介+注释

注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

原创 移动适配效果-rem+媒体查询

目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10。

原创 web适配方案

2.等比适配：宽高等比缩放。

原创 Web端-视口+二倍图

显示HTML网页的区域，用来约束HTML尺寸。

原创 HTML+CSS空间转换

像素单位取值；百分比（参照盒子自身尺寸计算结果）电脑是平面的，默认情况下无法观察Z轴的平移效果3d 写法小括号里必须逗号隔开三个数。

原创 平面转换-transform

属性：background-image： linear-gradient(渐变方向，颜色1 终点位置，颜色2 终点位置，....);单独设置X或Y轴移动距离：translateX()或translateY()transform:scale(X轴缩放倍数，Y轴缩放倍数)；通常，只为scale(设置一个值，表示X轴和Y轴等比列缩放)属性：transform:translate(X轴移动距离，Y轴移动距离)；取值：像素单位数值、百分比（参照盒子自身尺寸计算结果）、正负均可。取值：渐变方向：可选。

原创 SEO三大标签+Favicon图标

搜索引擎优化，提升网站百度搜索排名。

原创 光标类型cursor

原创 透明度opacity

作用：设置整个元素的透明度（包含背景和内容）0：完全透明（元素不可见）属性名：opacity。0-1之间小数：半透明。

原创 过渡transition

作用：可以为一个元素在不同状态间切换添加过渡效果。属性名：transition (复合属性)属性值：过渡的属性 花费时间（s）

原创 垂直对齐方式vertical-align

浏览器默认将行内块当文字处理，所以文字底部有空白。

原创 字体图标+使用

icon-xxx:图标对应的类名（打开iconfont文件夹里的.html文件）iconfont:字体图标基本样式（字体名，字体大小等等）使用时要注意选择器的优先级，如果要调整字号大小，选择器的优先级要高于iconfont类。引入字体样式表（iconfont.css）作用：在网页中添加简单的、颜色单一的图标。字体图标：展示的是图标，本质是字体。标签使用字体图标类名。

原创 CSS精灵

也叫CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position精准的定位出背景图片的位置。取负数坐标为background-position属性值（向左上移动图片位置）添加background-position属性，改变背景图位置。使用PxCook测量小图片左上角坐标。优点：减少服务器被请求次数，减少服务器的压力，创建盒子，盒子尺寸与小图尺寸相同。设置盒子背景图为精灵图。

原创 HTML+CSS定位

作用：灵活的改变盒子在网页中的位置实现：position:relative特点： 1. 改变位置的参照物是 自己原来的位置 2. 不脱标，占位 3. 标签显示模式特点 不变position:absolute使用场景：子级绝对定位，父级相对定位（子绝父相）特点： 1.脱标，不占位置 2. 参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器可视区改位置 3. 显示模式特点改变：宽高生效（具备了行内块的特点）实现步骤：固定定位pos

原创 处理行内块和行内垂直方向对齐方式 +更改placehider属性文字样式 +背景透明 +去掉表单控件的焦点框

专门用来处理行内块和行内垂直方向对齐方式。

原创 Flex布局

设置方式：给父元素设置display：flex,子元素可以自动挤压或拉伸。

原创 HTML+CSS浮动、清除浮动

left:左对齐right：右对齐。

原创 综合案例-新闻列表

内容：li标签前面的图片起装饰作用，图片作为背景即可，如图。分析：分两块：标题+内容。

原创 综合案例-产品卡片

CSS书写顺序：盒子模型-文字样式-圆角、阴影等修饰属性（提高浏览器渲染的效率）1.写案例前清空标签的默认样式。

原创 盒子模型-圆角+阴影

默认是外阴影，内阴影需要添加inset。x轴偏移量和y轴偏移量必须书写。

原创 行内元素-内外边距问题

场景：行内元素添加margin和padding,无法改变元素垂直位置。解决方法：给行内元素添加line-height可以改变垂直位置。

原创 外边距问题

场景：垂直排列的兄弟元素，上下margin会合并现象：取两个margin的较大值。

原创 盒子模型-元素溢出

scroll:溢出滚动（无论是否溢出，都显示滚动条位置）auto:溢出滚动（溢出才显示滚动条位置）hidden:溢出隐藏。

原创 HTML+CSS清除默认样式

清除标签默认的样式，比如：默认的内外边距。

原创 HTML+CSS版心居中

属性： margin: 0 auto;