2023寒假前端学习汇总

盒模型边框

边框样式

1. solid--实线

2. dashed--虚线

3. dotted--点线

表格的细线边框

border-collapse：collapse

• 合并相邻边框

盒模型内边距

速写属性

• 四个值就顺时针

• 三个值就上下中间夹左右

内边距

• 如果盒子本身没有指定width和height属性，则此时padding不会撑开盒子大小

盒模型外边距

块级元素水平居中

• 定宽，左右外边距设置为auto

行级或行块级元素水平居中

• 需要给父元素添加text-align:center这个属性

外边距合并

• 使用margin定义块级元素的垂直外边距时，可能会出现外边距的合并

嵌套块元素垂直 外边距的塌陷

• 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方法

1. 设置父元素边框

2. 设置父元素的上内边距

3. 可以为父元素添加overflow：hidden（此时父元素创建bfc,隔绝内部和外部）

盒子阴影

• css3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影

shadow属性值

1. h-shadow--必需，水平阴影的位置，允许负值

2. v-shadow--必需，垂直阴影的位置，允许负值

3. blur--可选，模糊距离

4. spread--可选。阴影尺寸

5. color--可选，阴影颜色

6. inset--可选，将外部阴影（outset）改为内部阴影

注意

• 默认值是外阴影（outside），但是不可以写这个单词，否则导致阴影无效

• 盒子阴影不占用空间，不会影响其他盒子的排列

• 半透明的值： rgba(0,0,0,0.3)

文字阴影

在css3中，我们可以使用text-shadow属性将阴影用于文本

text-shadow属性值

1. h-shadow--必需，水平阴影的位置，允许负值

2. v-shadow--必需，垂直阴影的位置，允许负值

3. blur--可选，模糊距离

4. color--可选，阴影颜色

滤镜

filter CSS属性将模糊或颜色偏移等图形效果应用于元素

语法规则

• filter：函数(); 例如：filter:blur(5px); blur模糊处理，数值越大越模糊

calc函数

calc() 此CSS函数让你在声明CSS属性值时执行一些计算

语法规则

• width:calc(100%-80px)
  括号里可以进行四则运算

过渡

CSS3新增，当元素从一种样式过渡到另一种样式时为元素添加效果

过渡动画：时从一个状态渐渐过渡到另一个状态

语法规则

• transition:要过渡的属性 花费的时间 运动曲线 何时开始

1. 属性：想要变化的CSS属性，width，background-color，padding等，如果时所有属性都要变化过渡，写一个all就行

2. 花费时间：单位是秒（必须写单位），比如0.5s

3. 运动曲线：默认是easy(可以省略)

4. 何时开始：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s
   谁做过渡给谁加

移动端基础

• 移动端浏览器我们主要针对wenkit内核进行兼容

• 我们现在开发的移动端主要针对手机端开发

• 现在移动端碎片化严重，分辨率和屏幕尺寸大小不一

• 学会用谷歌浏览器模拟手机页面以及调试

视口

视口（viewport）就是浏览器显示页面内容的屏幕区域，视口分为布局视口，视觉视口和理想视口

meta视口标签

• width--宽度设置的是viewport宽度，也可以设置device-width特殊值

• initial--初始缩放比，大于0的数字

• maximun-scale--最大缩放比，大于0的数字

• minimum-scale--最小缩放比，小于0的数字

• user-scalable--用户是否可以缩放，yes or no;

布局视口 layout viewport

• 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

• IOS,ANDROID基本上都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般可以默认通过手动缩放网页

视觉视口 visual viewport

• 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。

• 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度

理想视口 ideal viewport

• 为了使网站在移动端有最理想的浏览个阅读宽度而设定的

• 理想视口，对设备来讲是最理想的视口尺寸

• 需要手动添加meta视口标签通知浏览器操作

• meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就有多宽

二倍图

• 对于一张50*50px的图片，在手机retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊

• 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

• 通常使用二倍图

• 背景图片，注意缩放问题

背景缩放 background-size

• 单位： 长度|百分比|cover|contain

• cover把背景图扩展至足够大，以使背景图像完全覆盖背景区域

• contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

移动端特殊样式

• 点击高亮我们需要清楚 设置为transparent 完成透明：-webkit-tap-highlight-color:transparent

• 在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式：-webkit-appearance:none;

• 禁用长按页面时的弹出菜单：img，a{-webkit-tough-callout:none;}

流式布局（百分比布局）

• 流式布局也就是百分比布局，也成为非固定像素布局

• 通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容像两侧填充（核心）

• 流式布局方式是移动web开发使用比较常见的布局方式

二倍精灵图做法

• 在firework里面把精灵图等比例缩放为原来的一半

• 之后根据大小测量坐标

• 注意代码里面background-size也要写：精灵图原来宽度的一半

响应式布局

• 能够兼容PC Piad 移动端的布局

响应式开发的原理

• 就是通过媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同设备的目的

设备划分

• 超小屏幕(手机)： <768px

• 小屏设备(平板)： 768px~992px

• 中等屏幕(桌面显示器) 992px~1200px

• 宽屏设备(大桌面显示器) >1200px

响应式开发布局容器

• 响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果（与rem类似）
  原理：在不同屏幕下，通过媒体查询来改变布局容器的大小，在间接控制子级元素大小的变化，从而实现不同屏幕下的不同布局和样式

常见的响应式尺寸划分

• 超小屏幕(手机)： 设置宽度为100%

• 小屏设备(平板)： 设置宽度为750px

• 中等屏幕(桌面显示器) 设置宽度为970px

• 宽屏设备(大桌面显示器) 设置宽度为1170px

Bootstrap 前端开发框架

• Bootstrap 是目前最受欢迎的前端框架，基于html,css,javascript，简洁灵活，使得Web开发更加快捷

• 中文官网：http://boot.css.com/

• 推荐：http://bootstrap.css88.com/

布局容器

Bootstrap需要为页面内容和栅格系统包裹一个container容器，Bootstrap预先定义好了这个类

1. container类--响应式布局的容器（固定宽度）

2. container-fluid类

• 流式布局容器 百分百宽度

• 占据全部视口（viewport）的容器

• 适合于单独做移动端开发

Bootstrap 栅格系统

栅格系统英文为"grid systems",网格系统，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局

Bootstrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动划分为最多12项

栅格系统选项参数

栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局，内容放入这些创建好的布局中

列数：12；

1. col-xs-： 屏幕<768px

2. col-sm-：屏幕>=768px

3. col-md-：屏幕>=992px

4. col-lg-：屏幕>=1200px

• 行必须放到container布局容器里面

• 我们实现列的平均划分，需要给列添加类前缀

• xs-extra small:超小；sm-small:小；md-medium：中等;lg-large：大；

• 列大于12，多余的列所在的元素将作为一个整体另起一行排列

• 列小于12，则会出现空白

• 每一列默认有左右15px的padding

• 可以同时为一列指定多个设备的类名，以便划分不同份数 例如：class="col-md-4 col-sm-6"

列嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分为若干小列。我们可以通过添加一个新的row元素和一系列col-sm-元素到已经存在的col-sm-的元素内

注意：在列嵌套中最好添加一个新的row元素，可以去掉父元素的padding，并且自动将子元素的高度变成与父元素一样高

列偏移

使用col-md-offset- 类可以实现将列向右偏移，这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin）

列排序

通过使用col-push- 和 col-md-pull- 类就可以很容易改变列（column）的顺序

响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具可以方便的针对不同设备展示或隐藏页面内容

类名：hidden-xs 在超小屏下隐藏，其余屏可见

类名：hidden-sm 在小屏下隐藏，其余屏可见

类名：hidden-md 在中屏下隐藏，其余屏可见

类名：hidden-lg 在大屏下隐藏，其余屏可见

与之相反的是 visible，显示某个页面的内容

转换

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果

转换可以简单理解为变形

具体规则

• 移动：translate

• 旋转：rotate

• 缩放：scale

2D转换

2D转换是改变标签在二维平面上的位置和形状的一种技术

2D转换之移动translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似于定位

• 语法： 1.transform: translate(x,y）;
  2.transfromX:translate(x);
  3. transformY: translate(y);

• 重点：1. 定义D转换中的移动，沿着x和y轴移动元素
  2. translate最大的优点：不会影响到其他元素的位置
  3. translate中百分比单位是相对于自身元素的高度或宽度。
  4. 对行内标签没有效果

2D转换之旋转rotate

2D旋转是让元素在2维平面内顺时针旋转或者逆时针旋转

• 语法： transfrom: rotate(度数)

• 重点： 1. rotate里面跟度数，单位是deg，比如transform:rotate(45deg)
  2. 角度为正时，顺时针 为负时，为逆时针
  3. 默认旋转的中心点是元素的中心点

2D转换中心点transform-origin

我们可以设置转换的中心点（默认值是元素的中心）

• 语法： transfrom-origin: x y;

• 重点： 1. 注意后面的参数x和y用空格隔开
  2. x y默认的中心点是元素的中心点（50% 50%）
  3. 还可以给x y设置像素值或方位名词（top bottom left right center）

2D转换之缩放scale

缩放，只要给元素添加上这个属性就能控制它放大还是缩小

• 语法： transform：scale（x,y）;

• 注意： 1. x和y用逗号隔开
  2. transform：scale（1，1）：宽高都放大了一倍，等于不变
  3. transform：scale（2）：只写一个参数，第二个参数与第一个参数一样，放大两倍
  4. scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放，不影响其他盒子

2D转换之综合写法

注意

1. 语法： transform: translate() rotate() scale()...等

2. 其顺序会影响转换的效果（先旋转会改变坐标轴方向）

3. 当我们同时有位移和其他属性时，记得将位移放到最前面

动画

动画是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

相比较过渡，动画可以实现更多变换，更多控制，连续自动播放等效果

动画的基本使用

制作动画分为两步：

1. 先定义动画

2. 在使用动画

定义动画

1. 用Keyframes 定义动画（类似定义类选择器）

• 语法： @keyframes 动画名称{
  0%{
  width：100px;
  }
  100%{

width:200px

}

}

• 动画序列: 1. 0%是动画的开始，100%是动画的完成，这样的规则叫做动画序列
  2. 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
  3. 动画是使元素从一种样式逐渐变化为另一种样式的效果，可以任意改变样式任意多次
  4. 请用百分比来规定变化发生的时间，或用关键词“from”和“to”,等同于 0 %和 1 00%

使用动画

1. animation-name: 动画名称 （调用动画）

2. animation-duration: 持续时间：

动画的常用属性

• animation-name (规定@keyframes动画的名称)

• animation-duration （规定动画完成一个周期所花费的时间）

• animation-timing-function (规定动画完成曲线 默认是“easy” 匀速“linear ”)

• animation-delay (规定动画何时开始，默认是0)

• animation-iteration-count (规定动画被播放的次数，默认是1 ，infinite是无限次)

• animation-direction （规定动画是否在下一周期逆向播放，默认是“normal” ,"alternate"逆播放）

• animation-play-state (规定动画是否正在运行或暂停 默认是“running” 暂停“paused”)

• animation-fill-mode (规定动画结束后的状态，保持是“forwards” 回到起点“backwards”)

动画属性简写

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态

• 暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用

速度曲线细节

animation-timing-function: 规定动画的速度曲线

• linear 动画匀速改变

• ease 动画从低速开始，然后加快，在结束前变慢

• ease-in 动画以低速开始

• ease-out 动画以低速结束

• ease-in-out 动画以低速开始和结束

• steps 指定了时间函数中的间隔数量（步长）

3D转换

• 特点: 1.近大远小 2.物体后面的遮挡不可见

3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，z轴方向

• transform:translateX(100PX) : 仅仅在x轴上移动

• transform:translateY(100px) : 仅仅在y轴上移动

• transform:translateZ(100px) : 仅仅在z轴上移动（tanslateZ一般用px单位）

• transform：translate3d(x,y,z) :x,y,z不能省略

透视 perspective

如果想要在网页上产生3D效果需要透视，透视也称为视距，就是眼睛到屏幕的距离。透视的单位是像素

注意

• 透视写在被观察元素的父盒子上

• z轴数值（正数）越大，我们看到的物体就越大

3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着 x,y,z轴或自定义轴进行旋转

语法：

• transform：rotateX（45deg）

• transform：rotateY（45deg）

• transform：rotateZ（45deg）

X轴旋转方向-左手准则

• 左手的大拇指指向X轴的正方向

• 四指弯曲的方向就是该元素沿着x轴旋转的方向

Y轴旋转方向-左手法则

• 左手指向Y轴正方向

• 四指弯曲的方向就是该元素沿着Y轴旋转的方向

注意

• xyz是表示旋转轴的矢量，标示你是否希望沿着该轴旋转，最后一个标示旋转的角度

3D呈现 transform-style（重要）

• 作用：

1. 控制子元素是否开启三维立体环境

2. transform-style:flat（默认值） 子元素不开启3d立体空间

3. transform-style：preserve-3d 子元素开启立体空间

4. 代码写给父级，但是影响的是子盒子

flex布局体验

传统布局与flex布局

传统布局： -兼容性好

-布局繁琐

-不能在移动端很好的布局

flex弹性布局： -操作方便，布局简单，在移动端应用广泛

-pc端浏览器支持情况较差

-ie 11或更低版本不支持或仅部分支持

建议

1. 如果是pc端布局，还是推荐传统布局

2. 如果是移动端或者不考虑兼容性问题的PC端页面布局，使用flex布局

flex布局原理

flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

• 当我们为父盒子设为flex布局以后，子元素的float、clear、和vertical-align属性将失效

• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

• 采用flex布局的元素，称为flex容器，它的所有子元素自动成为容器成员，称为项目，子容器可以横向排列也可以纵向排列

总结flex布局原理

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex布局父项常见属性

• flex-direction：设置主轴方向

• justify-content：设置主轴上的子元素排列方式

• flex-wrap；设置子元素是否换行

• align-content：设置侧轴上的子元素的排列方式（多行）

• align-items：设置侧轴上的子元素排列方式（单行）

• flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

flex-diretion设置主轴的方向

在flex布局中，分为主轴和侧轴两个方向

• 默认主轴方向就是x轴方向，水平向右

• 默认侧轴方向就是y轴方向，垂直向下

属性值

flex-direction属性决定主轴的方向（主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，而我们的子元素是跟着主轴来排列的）

属性值：

• row： 默认值，从左到右

• row-recerse：从右到左

• column：从上到下

• column-reverse：从下到上

justify-content 设置主轴上的子元素排列方式

注意： 1. justify-content属性定义了项目在主轴上的对齐方式

2. 注意使用这个属性之前一定要确定好主轴是哪个

属性值

• flex-start：默认值，从头开始，如果主轴是x轴，则从左到右

• flex-end：从尾部开始排列

• center：在主轴居中对齐（如果主轴是x轴，则水平居中）

• space-around：平分剩余空间

• space-between：先两边贴边 在平分剩余空间

flex-wrap 设置子元素是否换行

flex布局中默认情况下，子元素不换行，若装不开，会缩小子元素的宽度放到父元素里

属性值

• nowrap：默认值，不换行

• wrap:换行

align-items 设置侧轴上子元素的排列方式（单行）

该属性是控制子项在侧轴上的排列方式 在子项为单项的时候使用

属性值

• flex-start：默认值，从头开始，如果主轴是y轴，则从上到下

• flex-end：从下到上

• center：在侧轴居中对齐（如果主轴是y轴，则垂直居中）

• stretch：拉伸

align-content 设置侧轴上的子元素的排列方式（多行）

align-content的属性值

• flex-start：默认值，在侧轴的头部开始排列

• flex-end：在侧轴的尾部开始排列

• center：在侧轴中间显示

• space-around：子项在侧轴平分剩余空间

• space-between：子项现在侧轴两边贴边，在平分剩余空间

• stretch：设置子项元素高度平分父元素高度

align-items和align-contnent的区别

• align-items 适用于单行情况下，只有上下对齐、居中对齐和拉伸

• align-content 适用于多行情况，单行无效，可以设置上下、居中对齐，拉伸以及平均分配剩余空间等属性值

flex-flow：flex-direction flex-wrap；

flex布局子项常见属性

flex属性

flex属性定义子项目分配 剩余空间，用flex来表示占多少份数

• 语法：flex：

align-self 控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

• 语法： span:nth-child(2){
  align-items:flex-end;
  }

order属性

数值越小，排列越靠前，默认为0. 和z-index不同

背景线变

语法

background：linear-gradient(起始方向，颜色1，颜色2，....)

background：-webkit-linear-gradient(left,red,blue)

background：-webkit-linear-gradient(left,top,red)

注意：

背景渐变必须添加私有前缀

起始方向可以是：方位名词 或 度数，默认是top

rem基础

rem单位

rem（root em）是一个相对单位，类似于em，em是父元素字体大小

不同的是rem的基准是相对于HTML元素的字体大小

比如，根元素设置font-size=12px;非根元素设置width:2rem；则换成px表示就是24px。

rem的优点：可以通过修改html里面的文字大小来改变页面中元素的大小达到整体控制的效果

媒体查询

媒体查询（media query）是CSS3的新语法

作用：

1. 使用@media查询，可以针对不同的媒体类型定义不同的样式

2. @media可以针对不同的屏幕大小尺寸设置不同的样式

3. 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

4. 目前针对很多苹果手机，Android手机，平板等设备都会用到多媒体查询

media语法规范

@media mediatype and|not|only (meida feature){

CSS-Code;

}

• 用@media开头 注意@符号

• mediatype 媒体类型

• 关键字 and not only

• media feature 媒体特性 必须有小括号包含

注意：screen和and不能省略

mediatype 查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

属性值：

1. all--用于所有设备

2. print--用于打印机和打印预览

3. scree--用于电脑屏幕，平板电脑，智能手机等

关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件

• and:可以将多个媒体特性连接到一起，相当于“且”的意思

• not:排除某个媒体类型，相当于“非”，可以省略

• only：指定某个特定的媒体类型，可以省略

媒体特性

每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个，注意他们要加小括号包含

属性值：

• width---定义输出设备中页面可见区域的宽度

• min-width---定义输出设备中页面最小可见区域宽度

• max-width---定义输出设备中页面最大可见区域宽度

媒体查询+rem实现元素大小动态变化

媒体查询+rem 就可以实现不同设备宽度，实现页面大小的动态变化

媒体查询之引入外部资源

通过引入外部资源，可以实现在不同屏幕尺寸下的不同css样式

Less基础

可以很好的解决css的弊端

Less介绍

Less（Leaner Style Sheets）是一门CSS扩展语言，也成为CSS扩展器。

作为CSS的一种形式扩展，它并没有减少CSS的功能，而是在现有的CSS上语法上为CSS加入了程序式语言的特性

它在CSS的语法基础上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，降低了维护成本（Less中文地址：http://less.cn/）

常见的CSS预处理器：Sass,Less,Stylus

Less 变量

变量是无固定的值，在CSS中的一些颜色和数值等经常使用

• 语法： @变量名：值；

变量名规范

1. 必须有@为前提

2. 不能包含特殊字符

3. 不能以数字开头

4. 大小写敏感

Less 编译

本质上，Less包含一套自定义的语法以及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器编译生成对应的CSS文件

安装easy less插件可以自动将less转化为相应的css文件

Less 嵌套

1. less嵌套，子元素的样式直接写到父元素的样式里面。

2. 当遇见伪类或伪元素选择器时，我们内层选择器的前面需要加&符号，如果不加此符号，则当成后代来看

less 运算

任何数字、颜色或者变量都可以参加运算，less提供了四则运算

注意：

• 运算符左右两侧要有空格隔开

• 两个数参与运算，若只有一个数有单位，则最后的结果就以这个单位为准

• 两个数参与运算，若两个数都有单位，则以第一个数的单位为准

rem适配方案

rem实际开发适配方案

原理：

1. 按照设计稿与设备宽度比例，动态计算并设置HTML根标签的font-size大小（媒体查询）

2. CSS中，设计稿元素的宽高相对位置等取值，按照同等比例换算为rem单位的值

技术方案：

一：

• less

• 媒体查询

• rem

二.

• flexible.js

• rem

rem实际开发适配方案一

动态设置html标签font-size大小：

1. 假设设计稿时750px

2. 假设我们把屏幕划分成为15等份（划分标准不一样）

3. 每一份作为HTML字体大小，这里就是50px

4. 那么在320px设备的时候，字体大小为320/15，也就是21.33px

5. 用我们页面元素的大小除以不同的html字体大小就会发现他们的比例还是相同的

元素大小取值方法：

6. 最后的公式：页面元素的rem值= 页面元素值（px）/(屏幕宽度/划分的份数)

7. 屏幕宽度/划分的份数值 就是html font-size的大小

8. 或者：页面元素的rem值=页面元素值（px）/html font-size 字体大小

问题：

9. 页面布局文字能否随着屏幕大小变化而变化

10. 流式布局和flex布局主要针对于宽度布局，那高度布局如何设置

11. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放