2020年5月15日总结

codercy
125 阅读10分钟

一、考拉品牌展示

  • 热门品牌的布局
  • 热门品牌的左侧部分
  • 热门品牌的item
  • 热门品牌item的动画效果
  • 清除浮动
    • 要么给父元素设置固定的高度
    • 要么clear-fix清除浮动
      • 在父元素写

二、HTML5相关的标签

1.1.HTML5-CSS3的概念

  • HTML5是定义HTML标准的最新的版本，该术语通过两个不同的概念来表现

    • 狭义的HTML5说的是HTML新的元素和属性
    • 广义的HTML5说的是HTML5新的标准，包括最新的HTML元素+CSS新特性+JavaScript

  • CSS3目前并不存在真正意义上的CSS3，只是对某些Module Level 3的统称

    • 关于某些Level 3是否已经成为标准，还是要多查阅文档
    • 另外可以通过caniuse查看浏览器的兼容性问题

1.2.语义化元素

  • 在HTML5之前，我们的网站分布层级通常包括哪些部分呢？

    • header、nav、main、footer

  • HTML5新增了语义化的元素：

    • <header>：头部元素
    • <nav>：导航元素
    • <section>：定义文档某个区域的元素
    • <article>：内容元素
    • <aside>：侧边栏元素
    • <footer>：尾部元素

1.3.媒体元素 - video

  • HTML5增加了对媒体类型的支持(在HTML5之前是通过flash或者其他插件实现的)

    • 音频：<audio>
    • 视频：<video>

  • HTML<video>元素用于在HTML或者XHTML文档种嵌入媒体播放器，用于支持文档内的视频播放

  • <video>元素常见属性：

    • src：媒体的来源
    • controls：增加控制工具栏
    • autoplay：自动播放，但是存在兼容性问题
    • muted：静音，增加后不静音并且自动播放会生效
    • loop：循环播放

  • <source>元素

    • 如果存在兼容性问题，可以将多个视频格式的数据源放到source元素种
    • src：通过src指定数据的来源

1.4.媒体元素 - audio

  • HTML<audio>元素用于在文档中表示音频内容

  • <audio>元素常见属性

    • src：媒体的来源
    • controls：增加控制工具栏
    • autoplay：自动播放，但是存在兼容性问题
    • muted：静音
    • loop：循环播放

  • <source>元素

    • 如果存在兼容性问题，可以将多个视频格式的数据源放到source元素种
    • src：通过src指定数据的来源

1.5.input元素扩展

  • HTML5对input也进行了扩展

    • placeholder：输入框的占位文字
    • multiple：多个值
    • autofocus：最多输入的内容

  • 另外对于input的type值也有很多扩展

    • date
    • time
    • number
    • tel
    • color
    • email
    • 等等...

三、网络字体

3.1.网络字体

  • @font-face可以让网页支持网络字体(Web Font)，不再局限于系统自带的字体

  • 常见的字体种类：

    • TrueType字体：拓展名是.ttf
    • OpenType字体：拓展名是.ttf、.otf，建立在TrueType字体之上
    • Embedded OpenType字体：拓展名是.eot，OpenType字体的压缩版
    • SVG字体：拓展名是.svg，.svgz
    • web开放字体：拓展名是.woff，建立在TrueType字体之上

  • 并不是所有的浏览器都支持以上字体，使用时要多加测试

3.2.字体图标

  • 字体图标的好处
    • 放大不会失真
    • 可以任意切换颜色
    • 用到很多个图标时，文件相对图片较小

四、动画其他相关的内容

4.1.关键帧动画

  • 关键帧动画使用@keyframes来定义多个变化状态，并且使用animation-name来声明匹配

    • 使用@keyframes创建一个规则
    • @keyframes中使用百分比定义各个阶段的样式
    • 通过animation将动画添加到属性上

  • animation属性：

    • 动画名称
    • 动画时间
    • 动画速率

4.2.3D动画

  • CSS实现3D(兼容性不好)

    • transform-style：preservce-3d
    • perspective

  • JS实现3D的库

    • three.js

五、flex布局

5.1.认识flex布局

  • flex布局是目前web开发中使用最多的布局方案

    • flex布局(Flexible布局，弹性布局)
    • 目前特别在移动端使用最多，目前PC端也使用越来越多了

  • 两个重要概念

    • 开启flex布局的元素叫flex container
    • flex container里面的直接子元素叫做flex items

  • 设置display属性为flex或者inline-flex可以成为flex container

    • flex：flex container以block-level形式存在
    • inline-flex：flex container以inline-level形式存在

5.2.flex布局模型

  • 主轴和交叉轴

  • flex相关的属性

    • 应用在flex container上的CSS属性

      • flex-flow
      • flex-direction
      • flex-wrap
      • justify-content
      • align-items
      • align-content

    • 应用在flex items上的CSS属性

      • flex
      • flex-grow
      • flex-basis
      • flex-shrink
      • order
      • align-self

5.3.flex container属性

  • flex-direction
    • flex items默认都是沿着main axis(主轴)从main start开始往main end方向排布
    • flex-direction决定了main axis的方向，有4个取值
      • row(默认值)：从左向右
      • row-reverse：从右向左
      • column：从上到下
      • column-reverse：从下到上

5.4.justify-content

  • justify-content决定了flex items在main axis上的对齐方式

    • flex-start(默认值)：与main start对齐

    • flex-end：与main end对齐

    • center：居中对齐

    • space-between：

      • flex items之间的距离相等
      • 与main start、main end两端对齐

    • space-evenly：

      • flex items之间的距离相等
      • 与main start、main end之间的距离等于flex items之间的距离

    • space-around：

      • flex items之间的距离相等
      • 与main start、main end之间的距离等于flex items之间的距离的一半

5.5.align-items

  • align-items决定了flex items在cross axis上的对齐方式
    • normal：在弹性布局中，效果和stretch一样
    • stretch：当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
    • flex-start：与cross start对齐
    • flex-end：与cross end对齐
    • center：居中对齐
    • baseline：与基准线对齐

5.6.flex-wrap

  • flex-wrap决定flex container是单行还是多行
    • nowrap(默认)：单行
    • wrap：多行
    • wrap-reverse：多行(对比wrap，cross start与cross end相反)

5.7.flex-flow

  • 是flex-derection ||flex-wrap的简写
    • 可以省略，顺序任意

5.8.align-content

  • align-content决定了多行flex items在cross axis上的对齐方式，用法与justify-content相似

    • stretch(默认值)：与align-items的stretch类似

    • flex-start：与cross start对齐

    • flex-end：与cross end对齐

    • center：居中对齐

    • space-between

      • flex items之间的距离相等
      • 与cross start、cross end两端对齐

    • space-around

      • flex items之间的距离相等
      • flex items与cross start、cross end距离等于flex items之间的距离的一半

    • space-evenly

      • flex items之间的距离相等
      • flex items与cross start、cross end距离等于flex items之间的距离

5.9.order

  • order决定了flex items的排布顺序
    • 可以设置任意正数(正整数、负整数、0)，值越小就越排在前面
    • 默认值是0

5.10.align-self

  • flex items可以通过align-self覆盖flex container设置的align-items
    • auto(默认值)：遵从flex container的align-items设置
    • stretch、flex-start、flex-end、center、baseline，效果跟align-items一致

5.11.flex-grow

  • flex-grow决定了flex-items如何扩展

    • 可以设置任意非负数字(正小数、正整数、0)，默认值是0
    • 当flex container在main axis方向上有剩余的size时，flex-grow属性才会有效

  • 如果用所有flex items的flex-grow总和sum超过1，每个flex item扩展的size为

    • flex container的剩余size*flex-grow/sum

  • 如果所有flex items的flex-grow总和不超过1，每个flex item扩展的size为

    • lex container的剩余size*flex-grow

  • flex items扩展的最终size不能超过max-height/min-height

5.12.flex-shrink

  • flex-shrink决定了flex items如何收缩

    • 可以设置任意非负数字(正小数、正整数、0)，默认值是1
    • 当flex items在main axis方向上超过了flex container的size，flex-shrink属性才会有效

  • 如果所有flex items的flex-shrink总和超过1，每个flex item的收缩size为

    • flex items超出flex container的size*收缩比例/所有flex items的收缩比例之和

  • 如果所有flex items的flex-shrink总和sum不超过1，每个flex item收缩的size为

    • flex items超出flex container的size * sum * 收缩比例/所有flex items的收缩比例之和
    • 收缩比例 = flex-shrink * flex item的base size
    • base size就是flex item放入flex container之前的size

  • flex items收缩后的最终size不能小于min-width\min-height

5.13.flex-basis

  • flex-basis用来设置flex items在main axis方向上的base size

    • auto(默认值)
    • 具体的宽度数值(100px)

  • 绝对flex items最终base size的因素，从优先级高到低

    • max-width\max-height\min-width\min-height
    • flex-basis
    • width\height
    • 内容本身的size

5.14.flex

  • flex是flex-grow||flex-shrink||flex-basis的缩写属性，可以指定1个，2个或3个值

  • 单值语法：值必须为以下其中之一

    • 一个无单位数(<number>)：它会被当作<flex-grow>的值
    • 一个有效的宽度(width)值：它会被当作<flex-basis>的值
    • 关键字none，auto或initial

  • 双值语法：第一个值必须为一个无单位数，并且它会被当作<flex-grow>的值

    • 第二个值必须为以下之一：
      • 一个无单位数：它会被当作<flex-shrink>的值
      • 一个有效的宽度值：它会被当作<flex-basis>的值

  • 三值语法：

    • 第一个值必须为一个无单位数，并且它会被当作<flex-grow>的值
    • 第二个值必须为一个无单位数，并且它会被当作<flex-shrink>的值
    • 第三个值必须为一个有效的宽度值，并且它会被当作<flex-basis>的值

六、浏览器私有前缀

七、移动端适配

7.1.视口大小

  • 视口大小：viewport
  • 移动端默认视口大小是980px，所有的元素在移动端没有设置视口的情况下都会被缩小
    • width：设置视口大小
    • initial-scale：设置缩放的比例

八、文字处理

8.1.CSS属性 - text-overflow

  • white-space用于设置空白处理和换行规则
    • normal：合并所有连续的空白，允许单词超屏时自动换行
    • nowrap：合并所有连续的空白，不允许单词超屏时自动换行
  • text-overflow通常用来设置文字溢出的行为(处理部分不可见的内容)
    • clip：溢出的内容直接裁剪掉(字符可能会显示不完整)
    • ellipsis：溢出那行的结尾处用省略号表示
  • 注意：text-overflow生效的前提时overflow不为visible

8.2.不同的单位相对谁

  • px：像素

  • em：相对于父元素字体的大小

    • 2em：父元素(16px * 2 = 32px)

  • %：用在不同的场景相对的不一样

    • 在字体中，相对于父元素的字体大小

  • rem：root em，相对于html根元素的字体大小

8.3.rem适配

  • 设置内容大小的方式

    • 单位px：设置固定的css像素
    • 单位em：相对于父元素的字体大小
    • 单位rem：相对于根元素(html)的字体大小
    • 百分比：取决于应用的属性(比如字体的百分比相对于父元素的字体，宽度的百分比相对于父元素的宽度)

  • 移动端开发中，我们经常使用rem来进行适配

    • 比如一个盒子的大小100x100，在不同的手机屏幕上可能希望进行不同程度的缩放
    • 比如一段文字字体为20px，在不同的手机屏幕上可能希望进行不同程度的缩放

  • 问题一：动态设置html的font-size

    • 媒体查询
    • 通过js计算(最优方案)

  • 问题二：动态计算rem的值

    • 方法一：vscode插件

      • 插件：px to rem
      • 快捷键：alt + z

    • 方法二：利用postcss-pxtorem(最优方案)

    • 方法三：利用less、sass、stylus的计算能力

8.4.Less

  • 是一种CSS预处理器，对CSS进行了扩展
  • VSCode的Less插件：Easy LESS
  • Less学习：
    • Less变量的定义
    • Less代码编写格式
    • Less的加减乘除运算
avatar
文章
阅读
粉丝