Web前端 CSS3 CheckList(三)

发布于:2023-01-09 ⋅ 阅读:(350) ⋅ 点赞:(0)

一、CSS动画

1.过渡

过渡 (transition) :通过过渡可以指定一个属性发生变化的方式。通过过渡可以创建一些非常好的效果,提升用户的体验。

属性 描述
transition-property 指定要执行过渡的属性,多个属性间逗号隔开,如果所有属性都需要过渡,则用 all 关键字。大部分属性都支持过渡,注意过渡必须从一个有效值向另一个有效值进行
transition-duration 指定过渡效果的持续时间,单位 s 和 ms,可以分别指定,用逗号隔开
transition-timing-function

过渡的时序函数,指定过渡的执行方式。1.ease 默认值,慢速开始,先加速,再减速 2.linear 匀速运动 3.ease-in 加速运动 4.ease-out 减速运动 5.ease-in-out 先加速后减速 6.cubic-bezier() 来指定时序函数 https://cubic-bezier.com 7.stes 分步执行过渡效果 可以指定一个第二个值: end (默认值)在时间结束时执行过渡 start 在时间开始时执行过渡

transition-delay 过渡效果的延迟,等待一段时间后再执行过渡
transition 可以同时设置过渡相关的所有属性,只有一个要求,如果要写延迟,则两个时间中第一个写持续时间第二个写延迟时间

2.动画

动画:动画和过渡类似,都是可以实现一些动态的效果,不同的是过渡需要在某个属性发生变化时才会触发,动画可以自动触发动态效果。

关键帧:设置动画效果,必须要先设置一个关键帧,关键帧设置了动画执行的每一个步骤。

@keyframes test { /* 设置一个名字为 test 的关键帧 */
    /* from 表示动画的开始位置,也可以使用 0% */
    from { margin-left: 0;}
    /* to 表示动画的结束位置,也可以使用 100% */
    to { margin-left: 700px;}
}
    /* 可以在 0% 到 100% 间再任意设置多个关键帧 */
属性 描述
animation-name 要对当前元素生效的关键帧的名字
animation-duration 动画的执行时间
animation-timing-function 动画的时序函数
animation-iteration-count 动画执行的次数 可选值:代表次数的数值 / infinite 无限执行
animation-delay 动画的延时
animation-direction 指定动画运行的方向 可选值:1.normal 默认值 从 from 向 to 运行 每次都是这样 2.reverse 从 to 向 from 运行 每次都是这样 3.alternate 从 from 向 to 运行 重复执行动画时反向执行 4.alternate-reverse 从 to 向 from 运行 重复执行动画时反向执行。

3.变形

变形:变形就是指通过 CSS 来改变元素的形状或位置,变形不会影响到页面的布局。transform 用来设置元素的变形效果。

平移 translateX()沿着 x 轴方向平移,translateY()沿着 y 轴方向平移,translateZ()沿着 z 轴方向平移。平移元素的百分比是相对于自身计算的。z 轴平移,调整元素在 z 轴的位置,正常情况就是调整元素和人眼之间的距离,距离越大,元素离人越近。z 轴平移属于立体效果,默认情况下网页不支持透视,如果需要看见效果必须要设置网页的视距。
旋转 rolateX()rolateY()rolateZ()通过旋转可以使元素沿着 x y 或 z 旋转指定的角度 单位有 deg turn。旋转可以设置 backface-visibility 属性决定是否显示背面 visible / hidden
缩放 scaleX()水平方向的缩放 scaleY()垂直方向的缩放 scale()双方向的缩放 transform-origin 用于设置变形的原点,默认值 center

二、less简介

less:less是一门 css 的预处理语言。less 是 css 的一个增强版,通过 less 可以编写更少的代码实现更强大的功能。less 的语法大体上和 css 一致,但是添加了许多对 css 的拓展。less 可以直接在父元素的大括号中为子元素添加样式。

  • less变量的语法:@变量名。使用变量时,如果是直接使用则以 @变量名 的形式使用即可。作为类名,或者是一部份值使用时必须以 @{变量名} 的形式使用。
  • 变量发生重名时,会优先使用比较近的变量。
  • height : $width 可以直接为 height 引用 width 的值
  • & 符用于表示外层的父元素
  • : extend () 对当前选择器扩展指定选择器的样式(选择器分组)
  • .类名 () 直接对指定的样式进行引用,这里就相当于将样式进行了复制
  • 使用类选择器时可以在选择器后边添加一个括号,这是我们实际上就创建了一个 mixins(专门用来给别的元素引用
  • 混合函数 在函数中可以直接设置变量
  • 在 less 中所有的数值都可以直接进行计算
  • 通过 @import "XXXX.less" 可以把多个 less 文件进行合并
.p1{ width: 100px; height: 200px;}
.p2:extend(.p1){ color: red;} //p2的样式为在p1的基础上扩展
.p3{ .p1();} //复制p1的样式到p3
.p4(){ width: 100px; height: 100px;} //创建一个只用于被引用的元素样式
.p5(@w,@h){  width: @w; height: @h;}
.p6{ .p5(200px,200px);} //调用混合函数,按顺序传递参数

三、CSS弹性盒

弹性盒 (flex): 是CSS中的又一种布局手段,它主要用来代替浮动完成页面的布局。flex 可以使元素具有弹性,让元素可以跟随页面大小的改变而改变。

弹性容器:要使用弹性盒,必须先讲一个元素设置为弹性容器。我们通过 display 来设置弹性容器。display:flex 设置为块级弹性容器 display:inline-flex 设置为行内的弹性容器。

弹性元素:弹性容器的直接子元素是弹性元素(弹性项)一个元素可以同时是弹性元素和弹性容器

弹性容器的属性 描述
flex-direction 指定容器中元素的排列方式。可选值:row 默认值,弹性元素在容器中水平排列(左向右 主轴)row-reverse 弹性元素在容器中反向水平排列(右向左)column 弹性元素纵向排列(自上向下)column-reverse 弹性元素方向纵向排列(自下向上)弹性元素的排列方向称为主轴,与主轴垂直方向的称为侧轴。
flex-wrap 设置弹性元素是否在弹性容器中自动换行。可选值:nowrap 默认值,元素不会自动换行 wrap 元素沿着辅轴方向自动换行 wrap-reverse 元素沿着辅轴反方向换行
flex-flow wrap 和 direction 的简写属性 可以同时设置两个属性
justify-content 如何分配主轴上的空白空间(主轴上的元素如何排列)可选值:flex-start 元素沿着主轴起边排列 flex-end 元素沿着主轴终边排列 center 元素居中排列 space-around 空白分布到元素两侧 space-between 空白均匀分布到元素间 space-evenly 空白分布到元素的单侧
align-content 辅轴空白空间的分布
align-items 元素在辅轴上如何对齐,元素间的关系。可选值:stretch 默认值,将元素的长度设置为相同的值 flex-start 元素不会拉伸,沿着辅轴起边对齐 flex-end 沿着辅轴的终边对齐 center 居中对齐 baseline 基线对齐
align-self 用来覆盖当前弹性元素上的 align-items 为当前元素单独设置
弹性元素的属性 描述
flex-grow 指定弹性元素的伸展的系数。当父元素有多余的空间时,子元素如何伸展。父元素的剩余空间,会按照比例进行分配。
flex-shrink 指定弹性元素的收缩系数。当父元素中的空间不足以容纳所有的子元素时,如何对子元素进行收缩。缩减多少是根据缩减系数和元素大小来计算的
flex-basis 指定的是元素在主轴上的基础长度。如果主轴是横向的,则该值指定的就是元素的宽度。如果主轴是纵向的,则该值指定的就是元素的高度。默认值是 auto,表示参考元素自身的高度或宽度。如果传递了一个具体的数值,则以该值为准。
flex 可以设置弹性元素所有的三个样式 flex:增长 缩减 基础 可选值:initial“flex:0 1 auto” / auto“flex:1 1 auto” / none“flex:0 0 auto”弹性元素没有弹性
order 决定弹性元素的排列顺序

 四、移动端页面

 1.像素

  • 屏幕是由一个一个发光的小点构成的,这一个个的小点就是像素
  • 分辨率:1920 × 1080 说的就是屏幕中小点的数量
  • 在前端开发中像素要分两种情况讨论:CSS 像素和物理像素
  • 物理像素:上述所说的小点点就属于物理像素
  • CSS 像素:编写网页时,我们所用的像素都是 CSS 像素
  • 浏览器在显示网页时,需要将 CSS 像素转换为物理像素然后再呈现。一个 CSS 像素最终由几个物理像素显示,由浏览器决定:默认情况下在pc端,一个 CSS 像素 = 一个物理像素

2.视口(viewport)

  • 视口就是屏幕中用来显示网页的区域
  • 可以通过查看视口的大小,来观察 CSS 像素 和物理像素的比值
  • 默认情况下:视口宽度 1920px(CSS像素)1920px(物理像素)此时像素比是 1:1
  • 放大两倍的情况:视口宽度 960px(CSS像素)1920px(物理像素)此时像素比是 1:2
  • 我们可以通过改变视口的大小,来改变 CSS 像素和物理像素的比值

3.手机像素

  • 在不同的屏幕下,单位像素的大小是不同的,像素越小屏幕会越清晰。
  • 智能手机的像素点远远小于计算机的像素点
  • 默认情况下,移动端的页面都会将视口设置为980像素(CSS像素)以确保pc端网页可以在移动端正常访问,但是如果网页的宽度超过了980,移动端的浏览器会自动对网页缩放以完整显示网页
  • https://material.io/resources/devices/
  • 所以基本大部分的pc端网站都可以在移动端中正常浏览,但是往往不会有一个很好的体验,为了解决这个问题,大部分网站都会专门为移动端设计网页
  • 每一款移动设备设计时,都会有一个最佳的像素比,一般我们只需要将像素比设置为该值就可以得到一个最佳效果。将像素比设置为最佳像素比的视口大小我们称其为完美视口
  • 将网页的视口设置为完美视口 <meta name="viewport" content="width=device-width,initial-scale=1.0">

4.vw单位 

  • 由于不同设备视口和像素比不同,所以在移动端开发时,就不能再用 px 来进行布局了
  • vx 表示的是视口的宽度(viewport width)
  • 100vw = 一个视口的宽度 1vw = 1%视口的宽度 vw 这个单位永远相当于视口宽度进行计算
  • 移动端网页设计图的宽度通常为 750px 1125px
  • 需要知晓设计图上元素在移动端的大小要换算 vw 单位
  • vw 适配方案:设置 html 根标签的 font-size 为 1px 所换算的 vw 的整数倍 然后通过 rem 单位换算来设置元素的大小

5.媒体查询 

  • 响应式布局:网页可以根据不同的设备或窗口大小呈现出不同的效果
  • 使用响应式布局,可以使一个网页适用于所有设备
  • 响应式布局的关键就是媒体查询。通过媒体查询可以为不同的设备,或设备不同状态来分别设置样式
  • 媒体查询语法:@media 查询规则 {} 媒体类型:all 所有设备 print 打印设备 screen 带屏幕的设备 speech 屏幕阅读器 可以使用逗号连接多个媒体类型
  • 可以在媒体类型前加 only 表示只有,这主要是为了兼容老版本浏览器
  • 媒体特性:width 视口的宽度 height 视口的高度 min-width 视口的最小宽度(视口大于指定宽度时生效)max-width 视口的最大宽度(视口小于指定宽度时生效)
  • 例:@media(max-width:500px){ body {background-color:#bfa } }
  • 多个媒体特性之间可以用 and 逗号 only not 连接
  • 样式切换的分界点,我们称其为断点,也就是网页的样式会在这个点时发生变化,一般常用断点:小于768 超小屏幕 max-width=768px 大于768 小屏幕 min-width=768px 大于992 中型屏幕 min-width=992px 大于1200 大屏幕 min-width=1200px

网站公告

今日签到

点亮在社区的每一天
去签到