CSS3高级
@ 姜波 | 星期四,七月 25 日,2019 年 | 6 分钟阅读 | 更新于 星期四,七月 25 日,2019 年

CSS3核心高级技巧

早期的双飞翼布局+CSS HACK

  • position
  • float
  • 负边距
  • 等高
  • 盒子模型
  • 清除浮动

基于移动端的PX与REM转换兼容方案

  • different size different DPR
  • 目前的设计稿 一般是 640 750 1125,一般要先均分成 100份,(兼容vh,vm) 750/10 = 75px。div宽是 240px*120px css的书写改为3.2rem * 1.6rem。 配合响应 式修改html根的大小。
  • 字体不建议使用rem的,data-dpr属性动态设置字体大小。 屏幕变大放更多的文字,或者屏幕更大放更多的字。
  • 神奇的padding/margin-top等比例缩放间距

弹性盒模型与Reset的选择

  • flex模型
  • *的杀伤力太大
  • Reset.css 重置 Normalize.css修复 Neat.css融合
  • html{box-sizing: border-box;} ,:before,*:after{box-sizing: inherit;}

自制的ICON-FONT与常用字体排版

  • no-image时代 不超过纯色为2的图像
  • 宋体非宋体 黑体非黑体 WIndows下的宋体叫中易宋体 SimSun,Mac是华文宋体STSong。WIndows下的黑体叫中易黑 体SimHei,Mac是华文黑体STHeiti。
  • 不要只写中文字体名,保证西文字体在中文字体前面。Mac- >Linux->Windows
  • 切忌不要直接使用设计师PSD的设计font-family,关键时刻再 去启动font-face(typo.css 、 Entry.css 、Type.css )
  • font-family: sans-serif;系统默认,字体多个单词组成加引号。
  • CSS ICON http://cssicon.space/#/
  • 有关设计的JS underline.js\responsify.js\typedetail.com\cssicon.space\designresearch.space

CSS代码检测与团队项目规范

  • 不要使用多个class选择元素,如a.foo.boo,这在ie6及以下不能正确解析
  • 移除空的css规则,如a{}
  • 正确的使用显示属性,如display:inline不要和width,height,float,margin,padding同时使用,display:inline-block不要和float 同时使用等
  • 避免过多的浮动,当浮动次数超过十次时,会显示警告
  • 避免使用过多的字号,当字号声明超过十种时,显示警告
  • 避免使用过多web字体,当使用超过五次时,显示警告
  • 避免使用id作为样式选择器
  • 标题元素只定义一次
  • 使用width:100%时要小心
  • 属性值为0时不要写单位
  • 各浏览器专属的css属性要有规范,例如.foo{-moz-border-radius:5px;border-radius:5px}
  • 避免使用看起来像正则表达式的css3选择器
  • 遵守盒模型规则
  • hint.css

CSS绘制特殊图形 高级技巧

  • border && border-radius 造就万千可能

  • after && before 任何一个HTML元素都可以创造 3个可以供我们操作的视觉元素,即三个矩形。

  • box-shadow是可以定义为任意颜色的,并且同一 个元素可以投射出不同的box-shadow。 Image text

    • 神奇borders构建的三角形

      Image text

BFC

  • Box: CSS布局的基本单位
 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类 型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容 器),因此Box内的元素会以不同的方式渲染。

  • block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;

  • inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;

  • Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲 染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他 元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

  • 哪些元素会生成BFC

    • 根元素

    • float属性不为none

    • position为absolute或fixed

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

    • overflow不为visible

  • BFC布局规则

    • 每个元素的margin box的左边, 与包含块border box的左边 相接触(对于从左往右的格式化,否则相反)。即使存在浮动 也是如此。
    • BFC的区域不会与float box重叠

IFC

  • “内联格式化上下文”,IFC的line box(线框)高度由其包含行内元素中最高的实际高度计算而来(不 受到竖直方向的padding/margin影响)

FFC

  • “自适应格式化上下文”,display值 为flex或者inline-flex的元素将会生成自适应容器(flex container)

GFC

  • “网格布局格式化上下文”, 当为一个元素设置display值为grid的时候,此元素将会获得一个独立 的渲染区域,我们可以通过在网格容器(grid container)上定义网格 定义行(grid definition rows)和网格定义列(grid definition columns) 属性各在网格项目(grid item)上定义网格行(grid row)和网格列 (grid columns)为每一个网格项目(grid item)定义位置和空间。

CSS矩阵探秘

矩阵数学概念

  • 在数学中,矩阵(Matrix)是一个 按照长方阵列排列的复数或实数集合, 最早来自于方程组的系数及常数所构成 的方阵
  • 由 m × n 个数amn排成的m行n列 的数表称为m行n列的矩阵,简称m × n矩阵。这m×n 个数称为矩阵A的元 素,简称为元

矩阵乘法

  • 矩阵第m行与第n列交叉位置的那个值,等于第一个矩阵第m行与第二个矩阵第n 列,对应位置的每个值的乘积之和。线性代数是向量计算的基础,很多重要的数学模 型都要用到向量计算

CSS中矩阵应用

  • matrix() 元素2D平面的移动变换(transform),2D变换矩阵为3*3

  • matrix3d() 是3D变换,3D变换则是4*4的矩阵

  • transform: matrix(1, 0, 0, 1, 30, 30); /* a=1, b=0, c=0, d=1, e=30, f=30 */

    Image text

    x坐标就是ax+cy+e = 10+00+30 =30,

    y坐标就是bx+dy+f = 00+10+30 =30.

  • 矩阵变形css3演示http://www.css88.com/tool/css3Preview/Transform-Matrix.html

  • transform: matrix(x,x,x,x, 水平偏移距离, 垂直偏移距离);

  • matrix(sx, 0, 0, sy, 0, 0); 等同于scale(sx, sy);

  • Image text

//单位圆等到等式
x`=cos(β+α)*r
y`=sin(β+α)*r
z`=z
//已知
r=√(x^2+y^2)
//和差化积公式
sin(β+α)=sin(β)cos(α)+cos(β)sin(α)
cos(β+α)=cos(β)cos(α)-sin(β)sin(α)
//正弦余弦定义
cos(α)=x/r
sin(α)=y/r
//代入
x`=(cos(β)*x/r-sin(β)*y/r)*r=cos(β)*x-sin(β)*y
y`=(sin(β)*x/r+cos(β)*y/r)*r=sin(β)*x+cos(β)*y
//猜想旋转矩阵
|x`| |cos(β),-sin(β)| |x|
|y`|=|sin(β), cos(β)|*|y|
  • 拉伸(skew) matrix(1,tan(θy),tan(θx),1,0,0) x' = x+ytan(θx)+0 = x+ytan(θx) y' = xtan(θy)+y+0 = xtan(θy)+y
  • Image text
  • translate3d(tx,ty,tz)等价于matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,tx,ty,tz,1)
  • scale3d(sx,sy,sz)等价于matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1)
  • http://wow.techbrood.com/fiddle/25741

更多矩阵应用场景

  • SVG

    transform=“matrix(a b c d e f)”

  • Canvas

    context.transform(2,0,0,2,150,150);

  • WebGL

    矩阵在3D渲染中不可缺少,坐标变换有模型变换,视图变换,投影变换等多种。

  • CSS 3D

    transform: matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)

快速提高生产能力

css
保存为图片

公众号

Image text

QQ

Image text

微信

Image text

微信打赏

Image text

社交链接