# CSS

# 弹性布局

Flex 布局教程:语法篇

Flex 布局教程:实例篇

Flexbox 布局的最简单表单

# 网格布局

CSS Grid 网格布局教程

# 选择器

CSS选择器笔记

.clearfix:before,.clearfix:after {
  display: table;
  content: " "
}
.clearfix:after { clear: both }

# 影响事件的 css 属性

pointer-events: 指定元素会不会成为 event.target 对象, 设置为 none 有点击穿透效果

touch-action:

参考

# BFC

IFC、GFC、FFC

link 与 @import 的区别

如何居中一个浮动元素

浮动元素容器的clearing问题

# Module

CSS Modules 用法教程

CSS in JS 简介

# 变量

CSS 变量教程

# 响应式

响应式图像教程

CSS 框架 Bulma 教程

自适应网页设计

最佳网页宽度及其实现

# 技巧

CSS使用技巧

CSS 定位详解

CSS 的空格处理

# 动画

CSS动画简介

主要考:==animation== 用法

  • animation-name 规定需要绑定到选择器的 keyframe 名称。
  • animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
  • animation-timing-function 规定动画的速度曲线。
  • animation-delay 规定在动画开始之前的延迟。
  • animation-iteration-count 规定动画应该播放的次数。
  • animation-direction 规定是否应该轮流反向播放动画。

CSS3常用功能的写法

谈谈 CSS 关键字 initial、inherit 和 unset

CSS 的灵感 - ChokCoco

# 实践

# 左右定宽, 中间自适应三栏布局

┌────┬─────────┬────┐
│ 左 │    中   │ 右 │
│    │         │    │
└────┴─────────┴────┘
  1. float: 左右 float 且定宽, 中间利用 margin 居中
  • 缺点: 要记得清除浮动, 三列无法自动同高
  1. position: 左右绝对定位且定宽, 中间设置左右 border 与左右同宽
  • 缺点: 左右无法高度不能影响父元素, 三列无法自动同高
  1. table: 容器表现为 table 且宽度百分百, 左中右表现为 table-cell, 左右设置定宽
  • 兼容性好, 三列自动同高
  1. flex: 容器表现为 flex, 中间 flex: 1, 左右定宽
  • 优点: 三列自动同高, 简洁
  • 缺点: PC 端 IE 兼容性不好
  1. grid: 容器 display: grid; grid-template-columns: 300px auto 300px;
  • 优点: 三列自动同高, 简洁
  • 缺点: 兼容性不好

demo

# 上下定高, 中间自适应三栏布局

┌────────────┐
├────────────┤
│            │
│            │
├────────────┤
└────────────┘
  1. margin: 中间元素高度百分百, 设置 margin: -50px 0; pading: 50px 0; box-sizing: border-box, 上面元素设置相对定位或 translateZ (提高层级)防止被遮挡
  2. position: 容器相对定位, 中间元素高度百分百, 设置 pading: 50px 0; box-sizing: border-box, 上下元素绝对定位
  3. table: 容器表现为 table 且宽度百分百, 上中下表现为 table-row
  • 以上三种兼容性好
  1. flex: 容器 display: flex; flex-direction: column, 中间 flex 1;
  2. grid: 容器表现为 display: grid; grid-template-rows: 50px auto 50px;

demo

# 水平垂直居中布局

┌──────┐
│ ┌──┐ │
│ └──┘ │
└──────┘
  1. flex: 容器 display: flex; align-items: center; justify-content: center
  2. grid: 容器 display: grid; place-items: center center
  3. position: 容器相对定位, inner 绝对定位 top: 0; right: 0; bottom: 0; left: 0; margin: auto
  • 兼容性好, 但是内部盒子要声明高度
  1. position + transform or margin: 容器相对定位, inner 绝对定位 top: 50%; right: 50%; transform: translate3d(-50%, -50%, 0);
  2. vertical: 容器字体居中, 插入伪类空白节点(行内块), 无宽度, 高度百分百 vertical-align: middle, inner (行内块) vertical-align: middle
  • 兼容性好, 但是标签换行有空格字符, 水平方向不完全居中
  1. table: 容器 display: table, 子容器 display: table; vertical-align: middle, inner 设置 margin: 0 auto
  • 要多消耗一个标签

demo

postcss

  • css单行和多行截断 做移动端适配的时候需要设置什么? 详细说一下viewport?
  • 假设两台电脑之间同步画板怎么实现
  • 移动端点击穿透?

BFC(Block formatting contexts):块级格式上下文 页面上的一个隔离的渲染区域,那么他是如何产生的呢? 可以触发BFC

# 哪些元素会生成BFC?

  • 根元素

  • float属性不为none

  • position为absolute或fixed

  • display为inline-block, table-cell, table-caption, flex, inline-flex

  • overflow不为visible

  • 元素float不为none、

  • position 非 static relative、overflow 非visible、display:table-cell/ inline-block/table-caption ;BFC有什么作用呢?比如说实现多栏布局’

IFC(Inline formatting contexts):内联格式上下文 IFC的line box(线框)高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的padding/margin影响)IFC中的line box一般左右都贴紧整个IFC,但是会因为float元素而扰乱。float元素会位于IFC与与line box之间,使得line box宽度缩短。 同个ifc下的多个line box高度会不同 IFC中时不可能有块级元素的,当插入块级元素时(如p中插入div)会产生两个匿名块与div分隔开,即产生两个IFC,每个IFC对外表现为块级元素,与div垂直排列。 那么IFC一般有什么用呢? 水平居中:当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中。 垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。

GFC(GrideLayout formatting contexts):网格布局格式化上下文 当为一个元素设置display值为grid的时候,此元素将会获得一个独立的渲染区域,我们可以通过在网格容器(grid container)上定义网格定义行(grid definition rows)和网格定义列(grid definition columns)属性各在网格项目(grid item)上定义网格行(grid row)和网格列(grid columns)为每一个网格项目(grid item)定义位置和空间。那么GFC有什么用呢,和table又有什么区别呢?首先同样是一个二维的表格,但GridLayout会有更加丰富的属性来控制行列,控制对齐以及更为精细的渲染语义和控制。

FFC(Flex formatting contexts):自适应格式上下文 display值为flex或者inline-flex的元素将会生成自适应容器(flex container),可惜这个牛逼的属性只有谷歌和火狐支持,不过在移动端也足够了,至少safari和chrome还是OK的,毕竟这俩在移动端才是王道。Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素,而设置为 inline-flex 的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说,Flexbox 定义了伸缩容器内伸缩项目该如何布局。

什么建议使用 link 方式加载 CSS,而不是使用 @import 方式)

flaot 优点

  • 图文混排, 文字环绕
  • 开启 BFC 的一种方式
  • 元素紧密排列,不会有空格字符

# 预处理器

source --> [parser] ---> AST(类 CSS) ---> [interpreter] ---> [纯 CSS] ---> [translator] ---> CSS

# POST-CSS

作用:

  • 压缩 clean-css
  • 美观 CSS-comb
  • 兼容性前缀 autofrefixer
  • 前后通吃

CSS-next 面向未来 CSS-Grace 修复过去

1px 重绘回流 Sass/Less 居中/常见布局 层叠上下文 2.触发条件 一个HTML元素要创建BFC,则满足下列的任意一个或多个条件即可: 下列方式会创建块格式化上下文:

根元素() 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 absolute 或 fixed) 行内块元素(元素的 display 为 inline-block) 表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值) 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值) 匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table) overflow 值不为 visible 的块元素 -弹性元素(display为 flex 或 inline-flex元素的直接子元素) 网格元素(display为 grid 或 inline-grid 元素的直接子元素) 等等

3.BFC渲染规则

(1)BFC垂直方向边距重叠

(2)BFC的区域不会与浮动元素的box重叠

(3)BFC是一个独立的容器,外面的元素不会影响里面的元素

(4)计算BFC高度的时候浮动元素也会参与计算

#4.应用场景

CSS 选择符是从右到左进行匹配的