wtw's Frontend

道阻且长,行则将至💪🏻

0%

think of css

发表于 更新于 分类于

css

水平居中

对于父子关系的布局，如何让子元素居中就是一个课题~

text-align + inline-block

1
2
3
4
5
6
7
  .parent {
    text-align: center;
}

.children {
    display: inline-block;
}

absolute + transform(translate)

1
2
3
4
5
6
7
8
9
  .parent {
    position: relative;
}

.children {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

table + margin

1
2
3
4
5
6
7
  .parent {
    display: table;
    margin: 0 auto;
}

.children {
}

flex + justify-content

1
2
3
4
5
6
7
  .parent {
    display: flex;
    justify-content: center;
}

.children {
}

垂直居中

table-cell + vertical-align

1
2
3
4
5
6
7
8
  .parent {
    display: table-cell;
    vertical-align: middle;
    height: 100px;
}

.children {
}

absolute + transform(translate)

1
2
3
4
5
6
7
8
9
10
  .parent {
    position: relative;
    height: 100px;
}

.children {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

flex + align-items

1
2
3
4
5
6
7
  .parent {
    display: flex;
    align-items: center;
}

.children {
}

水平垂直居中

flex

1
2
3
4
5
6
7
8
  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

.children {
}

absolute + transform(translate)

1
2
3
4
5
6
7
8
9
10
  .parent {
    position: relative;
}

.children {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

BFC

分类

  • 浮动元素 float,除了 none 以外的情况
  • 定位元素 position(absolute、fixed)
  • display(inline-block、table-caption、table-cell)
  • overflow(auto、hidden、scroll)

特性

  • BFC 会形成一个独立的容器,容器内的元素不受容器外元素的影响
  • BFC 的高度计算会联同浮动元素的高度
  • BFC 的区域不会与浮动元素的区域重叠

flex

分类

  • flex-grow: 设置元素的扩展比例
  • flex-shrink: 设置元素的收缩比例
  • flex-basis: 设置元素的初始值

重绘和回流

区别

  • 回流是由于页面 DOM 结构发生变化导致的,而重绘则是页面上存在一些样式变化就会发生重绘,不一定是 DOM 结构发生变化导致的
  • 回流一定会导致重绘,而重绘不一定会导致回流

如何对重绘和回流优化?

  • 对于元素的移动操作,使用 transform 来去替代 top、left、right 和 bottom 操作,因为 css3 的整个操作是对于图层的组合来实现的,不会引发重绘与回流
  • 将多次样式的操作合并为一次
  • 利用 documentFragment 文档碎片
  • 将需要多次回流的元素,定位元素 position 设置为 absolute 或者 fixed,元素脱离了文档流,它的变化不会影响到其他元素
  • 使用 nodejs 对于数据结构实行聚合或者拆分,减少前端数据分析和操作,这样也可以减少重绘与回流

CSS 三角形

示例

1
2
3
4
5
6
7
8
.box {
    width: 0;
    height: 0;
    border-bottom: 50px solid gray;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}

CSS 梯形

示例

1
2
3
4
5
6
7
8
.box {
    width: 20px;
    height: 20px;
    border: 50px solid gray;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}

position

属性值

  • absolute: 绝对定位,是基于除了 static 以外的定位属性值的父元素定位
  • relative: 相对定位,会相对于当前元素位置定位
  • fixed: 绝对定位,是基于整个浏览器 web 页面定位
  • static: 默认值,不定位
  • inherit: 继承父元素的定位属性值
  • sticky: 绝对定位,基本是基于整个浏览器 web 页面定位,是 relative 与 fixed 的混合定位