interview - CSS fundamental CSS 基础

CSS

BFC (Block Formatting Context) 块级格式化上下文

触发条件

根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML 表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML 表格标题默认属性)
具有 overflow 且值不是 visible 的块元素
弹性盒（flex 或 inline-flex）
display: flow-root
column-span: all

Box Model 盒模型

box model 盒模型: 页面在渲染时，DOM 元素所采用的布局模型，一个元素占用的空间大小由几个部分组成，内容 (content)、内边距 (padding)，边框 (border) 和外边距 (margin)。

box-sizing

border-box vs content-box, 前者的 width / height 属性数值内含了 border + padding

selector 优先级

!important > inline style

> id (ID selector)

> class = :hover (伪类) (class selector)

> tag = ::before(伪元素) (element selector)

> * (universal selector) = + > ~ (空格) || (关系选择符) = :not() (否定伪类)

> inherit > initial

核心属性

display

block, inline*, flex, grid, none
table*, contents, initial, inherit, run-in, list-item

flex 布局

容器 (加粗为默认值)

justify-content: flex-start | flex-end | center | space-between | space-around; 主轴对齐
align-items: flex-start | flex-end | center | baseline | stretch; 次轴对齐
flex-direction: row
flex-wrap: no-wrap
flex-flow: "flex-direction" | "flex-wrap"
align-content: 多轴线对齐, 同 justify-content, 单轴时无效

子元素

order: 0
flex-grow: 0; 放大比例, 默认不放大
flex-shrink: 1; 缩小比例, 默认空间不足时缩小
flex-basis: | auto; 在分配多余空间前占据的主轴方向空间
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ], 后两个可选
align-self: 可覆盖 align-items 属性, 默认继承容器属性

position

static
relative, fixed, sticky

各种边界奇葩现象，margin 上下的合并
flex 布局: align-items, justify-content, flex, flex-grow,
伪元素，状态元素
pre-css (sass, stylus, 或 jss) + post-css

清除浮动 .clearfix, clear:both, (同容器相邻元素) overflow: hidden (同容器内)

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }

文本溢出
CSS 图形

特殊属性

pointer-events

边界情况

上下 margin 合并: display: static 时相邻块元素的上下边框会合并

动画 CSS3

transform 变形

transform-origin

transition 过渡动画：

transition-property：属性名称
transition-duration: 间隔时间
transition-timing-function: 动画曲线
transition-delay: 延迟

animation 关键帧动画：

animation-name：动画名称
animation-duration: 间隔时间
animation-timing-function: 动画曲线
animation-delay: 延迟
animation-iteration-count：动画次数
animation-direction: 方向
animation-fill-mode: 禁止模式

有趣属性

attr()

attr() 用来获取选择到的元素的某一HTML属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。

<p data-unit="°C">90</p>
<style>
  [data-unit]:after {
    content: attr(data-unit);
    color: red
  }
</style>

效果

currentColor

color的属性值。它返回当前的标签所继承的文字颜色。

<style>
  .outside{
    width:200px; height:200px;
    color: blue;
    background-color: yellow;
  }
  .inside{
    width:100px; height:100px;box-sizing: border-box;
    color:red;
    background-color: pink;
    border: 10px solid currentColor;
  }
</style>
<div class="outside">
  <div class="inside"></div>
</div>

效果

#### user-select 控制选取能否被选择. (可以禁止用户选中内容) 效果

you cannot select me

::selection

应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。

效果

select me to see

性能

降低性能

高斯模糊

filter: blur(10px)

增加性能

https://juejin.im/post/5da52531518825094e373372

开启GPU 加速, 新建渲染层 (render layer), 避免 reflow & repaint

gpu 过程

获取 DOM 并将其分割成多个层 (renderLayer)
将每个层栅格化，并独立的绘制进位图中
将这些位图作为纹理上传至 GPU
复合多个层来生成最终的屏幕图像 (最后的 layer)

可以通过 chrome 浏览器上的 more tools 的 rendering 查看 renderLayer，黄色栅格代表开启了 GPU 加速的元素，蓝色栅格可以看作是比层第一级的 renderLayer

transform: translateZ(0);
/* OR */
will-change: transform;
/* 使浏览器可以在元素属性真正发生变化之前, 提前做好对应的优化准备工作 */

CSS 基础