CSS 部分知识总结

罗呱呱
128 阅读10分钟

CSS布局

要兼容IE 9 —— float布局

只兼容最新浏览器 —— grid布局

不需要兼容IE,又不需要只兼容最新浏览器 —— flex布局

float 布局

float布局全局样式

一般全局样式，每个项目都加

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.clearfix:after{
    content: '';
    display:block;
    clear:both;
}
ol,ul{
    list-style:none;
}

.clearfix 可以使父元素包裹住浮动的子元素

浮动就会脱离文档流

本人认为：无论父元素有没有设置适合的height，浮动的子元素都会脱离文档流，

而设置了适合的height，只不过是让浮动的子元素表面是在里面而已，其实不算是父元素实际占有的内容（文档流）

.clearfix 可以使的父元素包裹住浮动的子元素，像文档流一样（但不是文档流），一样让浮动的子元素撑开，但是如果有文档流的子元素在里面，则会被浮动元素覆盖，谁覆盖谁（z-index:xxx;） 的问题了

经验之谈

  1. 有经验者会留一些空间或者最后一个不设 width
  2. 不需要做响应式，因为手机上没有 IE，而这个布局是专门为 IE 准备的
  3. IE 6/7 存在双倍 margin bug，解决办法有两个(别人设置margin-left为10px，ie就会20px)
  • 针对 IE 6/7 把 margin 减半
  • 再加一个 display: inline-block
  1. 一定要用好负margin
  2. margin:0 auto; 还不如 margin-left:auto; margin-right:auto;
  3. 手机上sb才会用float
  4. float的局限性，不灵活，要自己计算元素的宽度
  5. img的background-color突破boder，使得不好看，可以写vertical-align:middle; 或者vertical-align: top; 也行，img就不会突破boder

ps：如下图一样，本来每个div设置了margin-right，然后可以让父元素包裹刚好里面，结果因为最后一个元素还有多一个margin-right，就会挤到下面，再加一个div使得他的margin-right变成负的，这样元素就不会挤到下面来

<div class="table clearfix">
    <div class="father">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    </div>
    </div>
  </div>

.clearfix:after{
    content: '';
    display:block;
    clear:both;
}
.table{
  background-color: red;
  outline: 1px solid green;
  width:500px;
}
.father{
  margin-right:-5px;
}
.son{
  width:96px;
  height: 96px;
  background-color: blue;
  float: left;
  border: 1px solid pink;
  margin-right:5px;
  margin-top:10px;
}

flex 布局

让一个元素变成 flex 容器

.container{
    display:flex;
}

改变item流动方向（主轴方向）

.container{
   flex-direction: row | row-reverse | column | column-reverse
}

row从左到右

row-reverse从右到左

column从上到下

column-reverse从下到上

item换行

.container{
   flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap 不换行

wrap 换行zhu

wrap-reverse ？

主轴对其方式

.container{
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
}

margin-left:auto;相当于space-between的效果

次轴对齐

.container{
    align-items: flex-start | flex-end | center | stretch | baseline
}

多行内容

.container{
    align-content: flex-start | flex-end | center | stretch | space-between | space-around
}

item 的样式

.item{
    order: 1 | 2 | 3
}

flex-shrink 控制如何变瘦

一般写 flex-shrink: 0 防止变瘦，默认是 1

flex-basis 控制基准宽度

默认 auto

flex: flex-grow flex-shrink flex-basis

经验之谈

  1. 永远不要把 width 和 height 写死，除非特殊说明
  2. 用 min-width / max-width / min-height / max-height
  3. flex 可以基本满足所有需求
  4. flex 和 margin-xxx: auto 配合有意外的效果

Grid布局

Grid适合二维布局

成为Grid容器

.container {
  display: grid | inline-grid;
}
  • grid – 生成块级网格
  • inline-grid – 生成内联级网格

行和列

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
      
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}
  • grid-template-columns 代表列数和列宽，后面有多少个参数就有多少列，而每个参数则是每列的列宽。
  • grid-template-rows 代表行数和行宽，后面有多少个参数就有多少行，而每个参数则是每列的行宽。
  • <track-size> – 可以是长度、百分比或网格中可用空间的一部分（使用 fr 单位）
  • <line-name> - 您选择的任意名称
  • repeat(x,y [aabb]) repeat()可以进行多行（多列）定义，较方便。x代表个数，y代表宽度，aabb则是对其命名。
  • fr 代表将宽度先计算带有数值的范围，在进行均分，所有fr前面的数字加起来为分母，每个fr的宽度是自己的数字除以分母。

也可以对每列和每行进行命名

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

item

.item { 
  grid-column-start: 2; 
  grid-column-end: five; 
  grid-row-start: row1-start; 
  grid-row-end: 3; 
}

grid-column-start 子元素从第几列开始分布。

grid-column-end 子元素到第几列结束。

grid-row-start 子元素从第几行开始分布。

grid-row-start 子元素到第几行结束。

grid-column-end: span x 子元素可以从列的start起，跨越x个单位的宽度。

grid-row-end: span x 子元素可以从行的start起，跨越x个单位的宽度。

grid-column-start: span x 反之亦然，要设置end的。

分区

通过引用 grid-area 属性指定的网格区域的名称来定义网格模板。重复网格区域的名称会导致内容跨越这些单元格。

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}
​
.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

这将创建一个四列宽、三行高的网格。

整个顶行将由 标题 区域组成。

中间行将由两个 主要 区域、一个空单元格和一个 侧边栏 区域组成。

后一行是所有的 页脚。

grid-area 属性接受4个由'/'分开的值：grid-row-start, grid-column-start, grid-row-end, 最后是grid-column-end。

间隙

指定网格线的大小。您可以将其视为设置列/行之间的间隙的宽度。

.container {
  /* standard */
  column-gap: <line-size>;
  row-gap: <line-size>;
​
  /* old */
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

white-space:nowrap 不换行

CSS定位

position

static 默认值，呆在文档流中

relative 相对定位，升起来，不脱离文档流，就是说原来的位置还是占有着

absolute 绝对定位，定位的基准是祖先中的非static，一般配合relative用

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

sticky 粘滞定位

ps：

  • 写了absolute和fixed，一定要补一个top或者left
  • sicky兼容性很差，用于面试装逼

position:relative

使用场景

  • 用于位移，较少用
  • 用于给absolute元素做父元素

配合z-index

z-index:auto 默认值，不创建层叠上下文

z-index: 0 / 1 / 2

z-index: -1 / -2

千万不要写z-index：9999

position:absolute

使用场景

脱离原来的位置，另起一层

经验

某些浏览器上不写top或者left会位置错乱

善用left：100%

善用left：50%；加负margin

position:fixed

使用场景

广告和回到顶部的按钮

配合z-index

经验

html5尽量不要用这个属性，很多问题

层叠上下文

比喻

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

哪些不正交的属性可以创建它

主要记忆的是 z-index / flex / opacity / tranform

CSS动画

浏览器渲染过程

步骤

  1. 根据HTML构建HTML树（DOM树）
  2. 根据CSS构建CSS树（CSSOM）
  3. 将两棵树合成一棵渲染树（render tree）
  4. Layout布局（文档流、盒模型、计算位置与大小）
  5. Paint绘制（边框颜色、文字颜色、阴影等画出来）
  6. Compose合成（根据层叠关系展示画面）

三种更新方式

  1. js/css > 样式(style) > 布局(Layout) > 绘制(Paint) > 合成(Compose)
  2. js/css > 样式(style) > 绘制(Paint) > 合成(Compose)
  3. js/css > 样式(style) > 合成(Compose)

如何更新样式

  • div.style.background = 'red' ——>方式二
  • div.style.display= 'none' ——> 方式一
  • div.classList.add= 'red' ——> 难说，取决于你怎么写这个class
  • div.remove() 直接删除节点 ——> 方式一
  • transform ——> 方式三

如果不清楚某一个样式的更新方式最好去

csstriggers.com 看看

CSS 动画优化

JS优化

使用requestAnimationFrame代替setTimeout或者setInterval

CSS优化

使用will-change或者tranlate

transform

translate 位移

scale 缩放

rotate 旋转

skew 侧斜

translate

常用写法
  • translateX () 向x轴方向移动
  • translateY () 向y轴方向移动
  • translate (,) => translate(x,y) 以x轴，y轴为基准移动
  • translateZ () 向z轴方向移动
  • translate3d (x,y,z)
经验

tranlate (-50%,-50%) 可以做到绝对定位元素的居中

scale

  • scaleX() 在x轴方向进行缩放
  • scaleY() 在y轴方向进行缩放
  • scale(,) 在x轴和y轴方向(对整体)进行缩放

totate

  • rotate() 以元素中间为定点，旋转一个度数
  • rotateX() 以元素的x轴为轴心，旋转一个度数
  • rotateY() 以元素的y轴为轴心，旋转一个度数
  • rotateZ() 以元素z轴为轴心，旋转一个度数
  • rotate3d(x,y,z,) 在 3D 空间之中，旋转有 3 个自由维度，描述了旋转轴。旋转轴由一组 [x, y, z] 矢量定义，并且通过变换源点传递。

skew

skew() 函数定义了一个元素在二维平Y面上的倾斜转换

  • skewX() 让元素以x轴倾斜一定度数
  • skewY() 让元素以y轴倾斜一定度数
  • skew() 让元素以x轴和y轴倾斜一定度数

transition 过渡

作用

补充中间帧

语法

  • transition: 属性名 时长 过渡方式 延迟 —— transition: left 200ms linear 1s
  • 可以用逗号分隔两个不同的属性 —— transition: left 200ms linear 1s, width 1s linear 3s
  • 可以用all代表所有属性
  • 过度方式有： linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | cubic-berzier | steps

注意

  1. display:none => block 没有办法过渡
  2. 一般把visibility:hidden （改为）=> visible
  3. 过渡要有起始
  4. 如果要多个关键点的话，使用animation

animation

animation: 动画名| 时长|过渡方式|延迟|次数|方向|填充模式|是否暂停 ;

时长:1s或者1000ms 过渡方式:跟transition 取值一样，如linear 次数:3或者2.4或者infinite 方向: reverse alternatealternate-reverse

填充模式: none | forwards | backwards | both 是否暂停:paused | running

animation 初始值

  • animation-name: none
  • animation-duration: 0s
  • animation-timing-function: ease
  • animation-delay: 0s
  • animation-iteration-count: 1
  • animation-direction: normal
  • animation-fill-mode: none
  • animation-play-state: running
  • animation-timeline : auto(这个暂时不说明，好像没)

一般用的最多就是前四个

animation中加一个forward可以停在最后一帧

@keyframes

关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或 waypoints）的样式来控制 CSS 动画序列中的中间步骤。和 转换 transition相比，关键帧 keyframes 可以控制动画序列的中间步骤。

@keyframes slidein {
  from {
    transform: translateX(0%); 
  }
​
  to {
    transform: translateX(100%);
  }
}
avatar
文章
阅读
粉丝