CSS 知识总结 Note-FrontEnd-6

浪里淘沙的小法师
254 阅读8分钟

在之前学过的 CSS 知识汇总，新增 CSS 动画知识，新增知识包括动画原理、浏览器渲染原理、transform 属性、transiton 过渡、animation 动画。

一、CCS的发明

李爵士的挪威同事赖先生在 1994 提出 CSS 概念，CSS 的牛 X 之处在于层叠样式表。

二、层叠样式

  1. 样式层叠 -- 可以多次对同一选择器进行样式声明
  2. 选择器层叠 -- 可以用不同选择器对同一个元素进行样式声明
  3. 文件层叠 -- 可以用多个文件进行层叠

这些特性使得CSS极度灵活，后来的 Vue 和 React 为了防止自己的样式被层叠想了很多办法

三、三种文档流元素

  1. inline 流动方向：从左到右，到达最右才会换行

    inline 宽度：内部 inline 元素的和，不能用 width 指定

    inline 高度：由 line-height 间接确定，跟 height 无关，也跟 padding 无关

  2. block 流动方向：从上到下，每一个都是另起一行

    block 宽度：默认自动计算宽度，可用 width 指定

    block 高度：由内部文档流元素决定，可以设 height

  3. inline-block 流动方向：也是从左到右，到达最后不会把自己分成两块

    inline-block 宽度：结合前两者特点，可用 width

    inline-block 高度：跟block类似，可以设置 height

四、overflow 溢出

当内容的宽度或高度大于容器的，会溢出，有四种方式处理。

  1. overflow: visible; -- 默认方式，什么都不管
  2. overflow: hidden; -- 隐藏溢出部分
  3. overflow: scroll; -- 设置使用滚动条，但即使内容不超出高度，还是会显示滚动条
  4. overflow: auto; -- 当内容没有超出高度，不显示滚动条；当内容超出高度，才显示滚动条

float 和 position: absolute / fixed 可以让元素脱离文档流

五、两种盒模型

  1. content-box 内容盒 -- 内容就是盒子的边界

    width = 内容宽度

  2. border-box 边框盒 -- 边框才是盒子的边界

    width = 内容宽度 + padding + border

border-box 更好用

六、margin 合并

margin 的合并要求的前提是它们之间什么都没有，有兄弟 margin 合并和父子 margin 合并。

  1. 兄弟合并

    兄弟合并是符合预期的，可以用 inline-block 消除。

  2. 父子合并 父子合并可以用 padding / border 挡住或者用 overflow: hidden 挡住

七、基本单位

  1. 长度单位：

    px -- 像素

    em -- 相对自身 font-size 的倍数

    百分数

    整数

  2. 颜色：

    十六进制 #FF6600 或者 #F60

    RGBA 颜色 rgb(0,0,0) 或者 rgba(0,0,0,1)

    hsl 颜色 hsl(360,100%,100%)，hsl(360,100%,100%,0.5)

八、布局分类

布局主要分成三类：

  1. 固定宽度布局 -- 一般宽度为 960 / 1000 / 1024 px
  2. 不固定宽度布局 -- 主要靠文档流的原理来布局，一般在手机上用
  3. 响应式布局 -- 意思就是 PC 上固定宽度，手机上不固定宽度，也就是一种混合布局

九、布局思路

  1. 从大到小 -- 先定下大局，然后完善每个部分的小布局
  2. 从小到大 -- 先完成小布局，然后组合成大布局
需要兼容 IE 9吗？
	yes → 使用 float 布局
		左浮两个，固定宽度，不要响应式
			给父元素添加 clearfix！！！
	no → 只兼容最新浏览器吗？
		yes → 用 grid 布局
		no → 用 flex 布局
必要时候采用 负margin

十、float 布局

  1. 子元素加 float: left 和 width
  2. 在父元素加 .clearfix

有经验者会留一些空间或者最后一个不设 width，或设一个最大 width

不需要做响应式，因为手机上没有 IE，而这个布局是专门为 IE 准备的

  1. 用 float 做两栏布局（如顶部条）-- 左浮、右浮、clearfix
  2. 用 float 做三栏布局（如内容区）-- 左浮，左浮，左浮，clearfix

推荐使用以下方式做上下居中，因为这就不会改变上下的 margin

margin-left: 0 auto;
margin-right: 0 auto;
  1. 用 float 做四栏布局（如导航）-- 左浮，左浮，左浮，clearfix
  2. 用 float 做平均布局（如产品展示）-- 左浮，左浮，左浮，clearfix，此外还要再加一层，这一层里有一个负 margin

margin: 负数，这个不要理解为移动，理解为把宽度偷偷变宽，不告诉它爸爸

十一、flex 布局

1. flex container 的样式

  1. 让一个元素变成 flex 容器
.container{
    display: flex; /* or inline-flex */
}
  1. 改变 items 流动方向（主轴）
flex-direction: row; -- 所有 div 从左往右一字排开（默认）
flex-direction: row-reverse; -- 所有 div 从右往左一字排开
flex-direction: column; -- 所有 div 从上往下一字排开
flex-direction: column-reverse; -- 所有 div 从下往上一字排开
  1. 改变折行
 flex-wrap: nowrap; -- 不折行（默认）
 flex-wrap: wrap; -- 折行
 flex-wrap: wrap-reverse; -- 一般不用的
  1. 主轴对齐方式
.container{
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
  左靠（默认）、右靠、居中、把空间放在中间、把空间放在中间和两边、四个空隙是一样的（别理它）
}
  1. 次轴对齐
.container{
  align-items: flex-start | flex-end | center | stretch | baseline;
}
上靠、下靠、居中、一样高（默认）、最后一个别理它
  1. 多行内容
.container{
  align-content: flex-start | flex-end | center | stretch | space-between | space-around
}
跟主轴对齐方式类似

2. flex item 的属性

  1. order 控制位置
  2. flex-grow 控制如何变胖
  3. flex-shrink 控制如何变瘦
  4. flex-basis 控制基准宽度
  5. align-self 定制 align-items

十二、grid 布局

  1. 成为 container
.container{
    display: grid | inline-grid;
}
  1. 行和列
.container{
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

还有很多实践内容，grid 的概念理解很重要，上手就容易了，在此列举的内容不多。

十三、布局的重点内容

  1. display: flex
  2. flex-direction: row / column
  3. flex-wrap: wrap
  4. just-content: center / space-between
  5. aligh-items: center

十四、div 分层

布局和定位的区别：布局是屏幕上的，定位是垂直于屏幕的

一个 div 的分层：内联元素、浮动元素、块级子元素、border、background

浮动元素脱离文档流：其实就浮起来一点点

十五、position 属性

  1. static -- 默认值，待在文档流里

  2. relative -- 相对定位，升起来，但不脱离文档流

    用于做位移（很少用）

    用于给 absolute 元素做爸爸

    配合 z-index

  3. absolute -- 绝对定位，定位基准是祖先元素里的第一个非 static 元素

    脱离原来的位置，另起一层，比如对话框的关闭按钮

    鼠标提示

    配合 z-index

  4. fixed -- 固定定位，定位基准是 viewport（有诈）

    广告

    回到顶部按钮

    配合 z-index

  5. sticky -- 粘滞定位，结合相对定位和固定定位的特点

十六、层叠上下文

每个层叠上下文就是一个新的小世界（作用域），这个小世界里面的 z-index 跟外界无关，处在同一个小世界的 index 才能比较

MDN 文档有写，哪些不正交的属性可以创建它，需要记忆的有 z-index / flex / opacity / transform

十七、动画原理

  1. 定义：

    有许多静止的画面（帧）以一定的速度（如每秒 30 张）连续播放时肉眼因视觉残象产生错觉而误以为是活动的画面

  2. 概念：

    帧：每个静止的画面都叫做帧

    播放速度：每秒 24 帧（影视）或者每秒 30 帧（游戏）

十八、浏览器渲染原理

我们比较关注动画的性能，即要了解浏览器的渲染过程。更新样式大概有这么几步 JavaScript → Style → Layout → Paint → Composite。

怎么知道每个属性触发什么流程？网上查询，程序员喜欢分享

  1. 步骤（必经之路）

    根据 HTML 构建 HTML 树（DOM）

    根据 CSS 构建 CSS 树（CSSOM）

    将两棵树合并成一棵渲染树（render tree）

    Layout 布局（文档流、盒模型、计算大小和位置）

    Paint 绘制（把边框颜色、文字颜色、阴影等画出来）

    Compose 合成（根据层叠关系展示画面）

  2. 三棵树

    DOM、CSSOM、Render Tree

十九、transform 属性

四个常用功能：位移 -- translate、缩放 -- scale、旋转 -- rotate、倾斜 -- skew。一般都需要配合 transition 过渡，inline 元素不支持 transform，需要先变成 block。

具体效果说不清楚，自行搜索后去试一试。

二十、transiton 过渡

transion 能够选择过渡方式。

具体效果说不清楚，自行搜索后去试一试。

二十一、animation 动画

animation 做动画更加牛逼一点、高端一点、方便一点。先声明关键帧、再添加动画。

  1. @keyframes -- 添加关键帧
写法一：
@keyframes identifier{
    0% {top: 0; left: 0;}
    30% {top: 50px;}
    68%, 72% {left: 50px;}
    100% {top: 100px; left: 100%;}
}

写法二：
@keyframes slidein{
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(100%);
    }
}

  1. animation -- 动画参数 语法：animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名;

    具体效果说不清楚，自行搜索后去试一试。

「资料来源：©饥人谷」

avatar
文章
阅读
粉丝