Web 坐标整理

坐标分类

  1. 文档坐标

  2. 窗口坐标

scroll

Element.scrollTop: 设置或获得一个元素距离他容器顶部的像素距离, 当一个元素的容器没有产生垂直方向的滚动条, 则他的 scrollTop 的值默认为0

获得滚动距离
var intElementScrollTop = someElement.scrollTop;

scrollTop可以被设置为任何整数, 但是一下情况会报错:
1. 如果一个元素不能被滚动(没有溢出容器或本身不可滚动)的时候设置其 scrollTop 为 0;

  1. 设置 scrollTop 的值小于 0, scrollTop 被设为 0

  2. 如果设置了超出这个容器可以滚动的值, scrollTop 会被设为最大值

其实就是溢出距离

Element.scrollHeight: 计量元素内容高度的只读属性, 包括 overflow 样式属性导致的视图中不可见内容

没有垂直滚动条的情况下, scrollHeight 值与元素视图填充所有内容所需要的最小值 clientHeight 相同, 包括元素的 padding, 但不包括 margin

其实就是溢出元素的本身高度

!()[https://developer.mozilla.org/@api/deki/files/840/=ScrollHeight.png]

判断元素是否滚动到底部

element.scrollHeight - element.scrollTop === element.clientHeight

clientTop

Element.clientTop: 一个元素顶部边框的宽度, 不包括顶部外边距或内边距, 只读属性

clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 来计算

其实就是可视区域高度

mouseEvent.clientX: 只读属性, 事件发生时应用客户端区域的水平坐标, 与页面无关

mouseEvent.x 是 mouseEvent.clientX 的别名

window

window.innerHeight: 浏览器窗口的视口( viewport ) 高度, 如果存在滚动条, 则要包括在内, 只读属性

window.outerHeight: 整个浏览器窗口的高度

offset

mouseEvent.offsetX: read-only property provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node

page

event.PageX: read-only property returns the horizontal coordinate of the event relative to the whole document

文档坐标

screen

mouseEvent.screenX: read-only property provides the horizontal coordinate of the mouse pointer in the global(screen) coordinate.

Simple CheetSheet of Flex

Flex

Parent
  1. display: flex

  2. flex-direction: row | row-reverse | column | column-reverse

  3. flex-wrap: nowrap | wrap | wrap-reverse

  4. flex-flow: <flex-direction> || <flex-wrap>

  5. justify-content: flex-start | flex-end | center | space-between | space-around

  6. align-items: flex-start | flex-end | center | stretch | baseline (single row)

  7. align-content: flex-start | flex-end | center | stretch | space-between | space-around (multi-row)

Children(flex-item)
  1. order: <integer>

  2. flex-grow: <number>(0 default)

  3. flex-shrink: <number>(0 default)

  4. flex-basis: <length> | auto (auto default)

  1. flex: none || <flex-grow><flex-shrink><flex-basis>

  2. align-self: auto | flex-start | flex-end | center | stretch | baseline

notice: float, clear, vertical-align are unavailable in flex item

Flex 属性详解

  1. display: flex|inline-flex; (修饰Flex Container, 也就是 Flex Item的父级元素)
    该属性修饰的元素, 其子元素将变成 flex 文档流, 称为 Flex Item

注意: CSS 的 columns 在 FlexContainer 上没有作用; float, clear, vertical-align 在 FlexItem 上没有作用

  1. flex-direction: row|row-reverse|column|column-reverse(修饰 Flex Container)
    用于定义main-axis, 从而定义 flex 文档流方向

  2. flex-wrap: nowrap|wrap|wrap-reverse; (修饰 Flex Container)
    nowrap: 单行显示; wrap: 多行显示; wrap-reverse: 逆向多行显示

  3. flex-flow: <’flex-direction’>||<’flex-wrap’>; (修饰 Flex Container)
    这个是 flex-direction 和 flex-wrap 的缩写, 同时定义主轴和侧轴的文档流向

  4. justify-content:flex-start|flex-end|center|space-between|space-around; (修饰 Flex Container)
    定义主轴线上 Flex Item 的对齐方式

flex-start: 向起始位置对齐; flex-end: 向结束位置对齐; center: 向中间靠拢; space-between: 首位 item 位于边界, 所有 items 均匀分布; space-around: 首位 item 距离边界1space, 所有 item 之间距离2space

  1. align-item: flex-start|flex-end|center|baseline|stretch; (修饰 Flex Container)
    定义 item 在侧轴方向的对齐方式

  1. align-content: flex-start|flex-end|center|space-between|space-around|stretch(default); (修饰 Flex Container)
    校准 item 在 container 中的对齐方式, 类似于 justify-content, 本属性在单行的容器中没有效果

  1. order: ; (修饰 Flex Item)
    手动指定显示顺序

  2. flex-grow: ; (修饰 Flex Item)
    定义 Item 的扩张能力, 接受一个不带单位的值作为一个比例, 主要用来决 Item 对 Container 剩余空间的利用

  3. flex-shrink: ; (修饰 Flex Item)
    定义 Item 的收缩能力

  4. flex-basis: |auto(default); (修饰 Flex Item)
    设置伸缩基准, 剩余的空间按照比例伸缩

  5. flex: none|[<’flex-grow’><’flex-shrink’>? || <’flex-basis’>]; (修饰 Flex Item)
    flex-grow, flex-shrink, flex-basis 的缩写; 其中, 第二个和第三个参数是可选参数. 默认值是0 1 auto

  6. align-self: auto|flex-start|flex-end|center|baseline|stretch; (修饰 Flex Item)
    用于覆盖单个 Item 的对齐方式.

增强页面渲染性能

3D transform 启用 GPU 加速

例如 transform3D, scaleZ 等可以开启浏览器硬件加速

实际上并不需要 Z 轴的动画

will-change

当我们的某些行为触发页面进行大面积绘制的时候, 浏览器往往是没有准备的, 只能被动使用 CPU 去计算与重绘. 而will-change会在真正行为触发之前通知浏览器, 以开启 GPU 准备重绘.

该属性语法:

will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: trasnform; // or some
will-change: opacity; // or some
will-change: left,top; // or some

will-change:inherit;
will-change:initial;
will-change: unset;
`</pre>

其中 auto 是用来重置的

scroll-position 是通知滚动

contents 是通知内容动画

### 注意事项

`will-change` 虽然可以加速, 但一定要适度使用. 频繁使用 GPU 显然会导致性能(电量)消耗

不要直接写在默认状态中, 因为`will-change`会一直挂着:

<pre>`.will-change{
  will-change: transform;
  transition: transform .3s;
}
.will-change:hover{
  transform: scale(1.5);
}
`</pre>

可以让父元素 hover 的时候声明`will-change`, 这样, 移出的时候回自动`remove`, 触发返回基本上是有效元素范围

<pre>`.will-change-parent:hover .will-change{
  will-change:transform;
}
.will-change{
  transition:transform .3s
}
.will-change:hover{
  transform:scale(1.5)
}

如果使用 JS 添加will-change一定要及时 remove

Clip-Path, Polygon 图形构建

clip-path 的前身是 SVG, 支持二维坐标

polygon 的作用是根据二维点坐标, 依次连线, 最后闭合形成遮罩区域

clip-path:polygon 生成三角形的过程非常简单

.path{
  clip-path: polygon(5px, 10px, 16px, 3px, 16px, 17px);
}

polygon 对点的数目没有限制, 所以可以生成各种几何图案

clip-path 还可以用 transition 过渡或者 animation 动画, 很好的弥补了 CSS3 的 transform 变换的不足

polygon 动画有一个重要前提, 那就是坐标的数目在变化前后必须一样. 这样就浏览器就能实现连续动画.

CSS 动画之硬件加速

触发硬件加速的 CSS 属性

  • transform
  • opacity
  • filter

硬件加速的工作原理

浏览器解析得到 DOM 树后, 与 CSS 形成渲染树, 渲染树上有大量的渲染元素, 每一个渲染元素都被分到一个图层中, 每个图层被加载到 GPU 形成渲染文理.

然而, transform 等 CSS 属性不会触发 GPU 的 repaint, 这些使用 transform 属性的图层都会有独立合成器进行处理.

比如某个元素具有 transform 属性, 那么会为他创建一个新的复合图层, 可以被 GPU 直接用来执行 transform 操作.

一般浏览器会在以下几种情况下创建一个独立的复合图层:

  • 3D 或 transform
  • &lt;video&lt;canvas&gt;标签
  • CSS Filters
  • 元素覆盖时(比如 z-index)

3D 和 2D 的transform 区别在于, 浏览器在页面渲染前为 3D 动画创建独立的复合图层, 而在运行期间为 2D 动画创建独立复合图层. 2D transform 在动画开始和结束的时候依旧出现了初始化和删除的 repaint.

强制使用 GPU 渲染

为了避免 2D transform 动画的两次 repaint, 我们可以硬编码一些样式来解决这个问题

.solution1{
  transform: translateZ(0);
}

.solution2{
  transform: rotateZ(360deg)
}

这段代码让浏览器执行3Dtransform, 进而创建一个独立的复合涂层

硬件加速缺点

  1. 内存, 如果 GPU 加载了大量文理, 容易发生内存问题
  2. 使用 GUP 渲染会影响字体的抗锯齿效果, 因为 GPU 和 CPU 渲染机制不同. 即使最终硬件加速停止了, 文本还是会在动画期间显得模糊.

Display:table-Cell

display:table-cell 属性简述

display:table-cell 属性让标签元素鞥一表格单元格的形式呈现, 类似于 td 标签.
table-cellfloat, position:absolute 不兼容.
table-cell元素可以设置 width, height, padding, 但是不能设置 margin, 和 td 标签一致.

display:table-cell 与大小不固定元素的垂直居中

display:table-cell 与两栏自适应布局

display:table-cell 等高布局

table 表格中的单元格最大的特点之一就是同一行列表元素都是登高的, 所以等高布局可以借助 table-cell 实现.
匿名表格元素创建规则:CSS2中创建表格元素, 其依赖元素(比如 tr 之于 td, table 之于 tr) 会被模拟出来, 从而使得表格模型能够正常工作. 所有的表格元素都会自动在自身周围生成需要的匿名 table 对象, 使其符合 table/inline-table, table-row, table-cell 的三层嵌套关系.
要实现等高布局, 所有的 table-cell 元素一定要留一个用来包裹的标签, CSS 代码如下:
`
.list_row{display:table-row}
.list_cell{display:table-cell;width:30%,padding:1.6%; background-color:#F5F5F5;}
.list_center{background-color:#F0F3F9;}//用于和旁边的 cell 区分

理解伪元素:Before 和 :After

本篇中的”伪元素”特指”:before”和”:after”

语法和浏览器支持

早起的伪元素是使用一个冒号声明的”:”, 在 CSS3中修订后伪元素的声明使用两个冒号”::”, 但是为了目前的兼容性考虑(IE8), 建议使用”:”声明.

伪元素会在内容元素的前后插入额外的元素, 技术上等同于

&lt;p&gt;
&lt;span&gt;:before&lt;/span&gt;
This is the main content.
&lt;span&gt;:after&lt;/span&gt;

当然, 这些元素无法在文档的源码中找到

高性能 CSS

HTML 和 CSS 本身的性能问题并不突出, 在提高可读性和可维护性的前提下, 如果能让代码运行和解析的速度更快, 则是锦上添花.

使用高效的 CSS 选择器

首先要知道浏览器如何解析 CSS
以 .nav ul.list li div{} 为例
浏览器遍历 div, 然后从遍历结果中寻找父集为 li 的对象, 依次进行选择器搜索. 所以如果选择器层级过多, 会导致性能低下.
解决方法: 令第一次匹配时的数量最少, 并让整体的匹配查找次数更少.
具体做法:

  • 避免使用通配符
  • 避免使用标签选择器和单个属性选择器作为关键选择器
  • 不要在 id 选择器前加标签名
  • 不要设定过多层级, 降低 CSS 和 DOM 结构的耦合度

CSS 相关的图片处理

  • 不给图片设置尺寸: 有时候同一张图会在页面不同低昂多次使用, 比如缩略图, 正常图, 大图等. 如果图片的原始尺寸与实际需求不同, 在使用时通过缩放会给 CPU 带来额外的计算过程, 增加了图片在浏览器中的渲染时间. 网络传输过程也会占用更多带宽, 增加下载时间. 最佳做法是为需要的部分单独做一套图片, 初始页面加载时就能更快显示.
  • 使用雪碧图, 利用 css 进行背景定位, 好处是减少请求次数, 提高图片的整体的加载速度; 缺点是需要精确计算位置(现在有一些工具可用), 维护过程复杂, 要换图片比较复杂

    *   在后期使用 CSS Sprite 技术, 因为在开发的时候会比较频繁修改图片
    
    • 合理组织图片
    • 控制雪碧图的尺寸, 推荐长宽相乘不超过2500, 大小不超过200kb
    • 合理控制背景图单元之间的距离及背景图的位置
    • 借助相关工具

减少 CSS 代码量

  • 定义简洁的 CSS 规则
  • 合并相同的定义
  • 删除无效的定义

其他途径

  • 避免使用@ import
  • 避免使用 IE 浏览器独有的样式
  • 避免使用 CSS 表达式: 动态设置 CSS 属性, 可以通过 js 修改

兼容性查询

  • caniuse.com
  • css3 click chart
  • css contents and browsers compatibility

BFC 基本概念

Box: CSS 布局的基本单位

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

  • block-level: display:block的 block, list-item, table 元素会形成 block-level box, 并参与 Block formatting context.
  • inline-level box: display:inline的 inline-block, inline-table 元素会形成 inline-level box, 并参与 inline formatting context;
  • run-in box: CSS3才有, 略;

Formatting Context

Formatting Context 是 W3C CSS2.1规范中的一个概念, 是页面中的一块渲染区域, 并有一套渲染规则, 决定了其子元素如何定位, 以及其他元素的关系和相互作用. 最常见的的 Formatting Context 有 Block Formatting Context(BFC) 和 Inline Formatting Context(IFC).
CSS2.1中只有 BFC 和 IFC, 在 CSS3中添加了 GFC 和 FFC

BFC 的定义

BFC 直译为”块级格式上下文”, 是一个独立的渲染区域, 只有 Block-level Box 可以参与, 他规定了内部的 Block-level Box 如何布局, 并且与这个区域外部毫不相干.

BFC 布局规则

  • 内部的 Box 会在垂直方向依次排列
  • Box 垂直方向的距离由 margin 决定, 属于同一个 BFC 的两个相邻的 Box 的 margin 会发生坍塌
  • BFC 内部不会发生 float box 重叠
  • BFC 就是页面上的一个隔离的独立容器, 容器内的子元素不会影响到外部的元素, 反之亦然
  • 计算 BFC 高度的时候, 浮动元素也参与计算(使用 border 消除父元素坍塌的原理)
  • BFC 内部每一个 Box 的左外边缘(margin-left)会碰触容器的左边缘(border-left)(如果是从右向左的格式, 则是碰触右边缘)

BFC 的通俗理解

BFC 容器是一个独立的箱子, 里面的元素的布局不受外部元素影响.
我们往往利用这个特性来消除浮动元素对其他非浮动的兄弟元素及其子元素带来的影响.
并且在一个 BFC 容器中, 块盒和行盒都会沿其父元素的边框排列

BFC 成因

  • float 属性不为 None;
  • position 为 Absolute 或 Fixed
  • display 为 inline-block, table-cell, table-caption, flex, inline-flex
  • overflow 不是 visible

BFC 的作用与原理

自适应两栏布局

CSS 外边距合并

外边距合并的意思是两个垂直排列的块的外边距可能发生(坍塌)合并, 仅保留较大的边距.

情况一:

两元素上下排列

情况二:

两元素是父子关系, 若此时父元素没有设定 border, margin(或者宽度为0), 他们的上下边距也会发生合并.

情况三:

自身是一个有上下外边距的空元素, 如果没有 border 和 margin, 自身的上下外边距也会合并

如果这个空元素还与另一个元素垂直排列, 会继续发生合并

对象

只有普通文档流中的块元素会发生外边距合并, 如果是浮动块, 或者是绝对定位块, 他的外边距是不会合并的.

Mix-Blend-Mode之 Multiply, Screen, Difference

语法

mix-blend-mode: &lt;mode&gt;

normal: 默认值, 正常

multiply: 正片叠底 - 查看对应像素的颜色信息, 并将基色和混合色复合, 结果色总是比较暗的颜色, 任何颜色与黑色正片叠底都产生黑色, 任何颜色与白色正片叠底都保持不变. 正片就是常见的幻灯片, 正片叠底的效果就是把基色和混合色的图像都做成幻灯片, 把他们叠放在一起, 凑近亮处显示的效果, 由于两张幻灯片都有内容, 所以重叠起来的图像比单张要暗

screen: 滤色 - 滤色原理和显示器成像原理相同, 将两副幻灯片分别放在不同投影仪上, 打向同一个屏幕, 由于光线的叠加效应, 得到的是一个更明亮的图像. 基色的反相与混合色的反相相乘, 得到的结果除以255后再反相.

overlay: 叠加

lighten: 变量

darken: 变暗

color-dodge: 颜色减淡

color-blur: 颜色加深

hard-light: 强光

soft-light: 柔光

difference: 差值 - 混合色与基色相减后取绝对值

exclusion: 排除

hue: 色相

saturation: 饱和度

color: 颜色

luminosity: 亮度

Distinction Between 'Nth-Child' and 'Nth-of-Type'

In HTML

&lt;p&gt;0&lt;/p&gt;
&lt;div&gt;1&lt;/div&gt;
&lt;div&gt;2&lt;/div&gt;
&lt;p&gt;3&lt;/p&gt;
&lt;div&gt;4&lt;/div&gt;
&lt;div&gt;5&lt;/div&gt;
&lt;div&gt;6&lt;/div&gt;

The Selector div:nth-child(3) will choose the 3rd element from all elements in the level where div is, then check if the 3rd element is a ‘div’. In this case, the 3rd element is a ‘div’, so it works(&lt;div&gt;2&lt;/div&gt;), but Selector div:nth-child(4) will select the 4st element which is ‘p’ (&lt;p&gt;3&lt;/p&gt;), it’s not a ‘div’, so it doesn’t work.

However, the Selector div:nth-of-type(3) will choose the 3rd ‘div’ from all ‘div’s in the level where div is, so it choose the &lt;div&gt;4&lt;/div&gt;.

CSS3: Border-Image

基本语法

border-image: none|&lt;image&gt;[&lt;slice&gt;|&lt;width&gt;|&lt;repeat&gt;]
  • border-image-source: url("…");
  • border-image-slice:[&lt;number&gt;|&lt;percentage]

    *   用于分解引入的图片, px 是默认单位, 如果用 number 则一定不能加上 px
    
    • percentage 是相对于引入的 image 而言的, 例如 image 的大小为300 x 240, 若设定 slice: 25%, 30%, 15%, 20%, 等于截取了图片外侧的60px, 90px, 36px, 60px 的部分作为边框
    • 示例图
    • 实际上 CSS3 将该图片划分成9个部分, 再根据 width 和 repeat 进行处理后拼接成边框
    • 四个角不会受到 repeat 的影响而产生变形, 四个边会受到 repeat 的影响而变形.
  • border-image-width: [&lt;length&gt;|&lt;percentage&gt;|&lt;number&gt;|auto]

    *   border-image-width 就是 border-width, 用于设置边框宽度
    
    • 如果 slice 截取的宽度正好等于 width, 那么不会发生变形
  • border-image-repeat: [stretch|repeat|round]

    *   指定四条边的排列方式
    
    • 最多接受两个参数, 第一个水平方向, 第二个垂直方向
    • round -> 平铺
    • round 会压缩或伸展 sliced-block, 保证平铺过程中其完整性
    • repeat -> 重复
    • repeat 不会改变 sliced-block 的完整性, 从中间开始向两边排列
    • stretch
    • 拉伸

CSS3: Filter

英语原文: MDN:filter

总结

Filter 属性用于实现”模糊”, “锐化”, “颜色替换”等图像渲染效果.

Filter 通常用于调整图像, 背景, 边框的呈现.

语法

filter: url("filter.svg#filter-id");
filter:blur(5px);
filter:brightness(.4);
filter:contrast(200%);
filter:drop-shadow(16px 16px 20px blue);
filter:grayscale(50%);
filter:hue-rotate(90deg);
filter:invert(75%);
filter:opacity(25%);
filter:saturate(30%);
filter:sepia(60%);

/*Apply multiple filters*/
filter: contrast(75%) brightness(3%);

/*Global Values*/
filter: inherit;
filter:initial;
filter:unset;
`</pre>

### 设置一种函数

<pre>`filter: &lt;filter-function&gt; [&lt;filter-function&gt;]* | none
`</pre>

### 给 SVG 元素 <filter> 引用滤镜

<pre>`filter: url(svg-url#element-id)
`</pre>

### 实例

<pre>`.mydiv{filter:grayscale(50%)}
/*gray all images by 50% and blur by 10px*/
img{
  filter: grayscale(.5) blur(10px);
}
`</pre>

#### 通过 url 函数引入一个 SVG 资源

<pre>`.target{filter:url(#c1):}
.mydiv{filter:url(commonfilters.xml#large-blur)}
`</pre>

### 函数

参数可以传入百分数或小数, 34%和.34效果相同

<pre>`url(): 接受一个 XML 文件, 该文件设置一个 SVG 滤镜, 并通过锚点确定一个具体的滤镜元素
filter: url(resource.svg#c1)
`</pre>

<pre>`blur(): 接收 radius 值为图像设置高斯模糊, radius 为标准差(px), 默认为0, 不接收百分比
`</pre>

<pre>`brightness(): 给图片应用一种线性惩罚, 使其看起来更亮或更暗, 0%对应全黑, 100%对应原图, 超过100%更亮, 默认为1;
`</pre>

<pre>`contrast(): 调整图像对比度, 0对应全黑, 1对应原图, 大于1则应用更低的对比度
`</pre>

<pre>`drop-shadow(): 给图像设置一个阴影效果, 阴影是合成在图像下方的, 可以设置模糊度, 可以用特定颜色画出遮罩图的偏移版本. 函数能接受&lt;shadow&gt;(在 CSS3 背景中定义)类型的值, 除了 inset 关键字不可使用, 与 box-shadow 属性很相似.

不过通过滤镜, 一些浏览器会提供硬件加速

参数如下:

&lt;offset-x&gt;和&lt;offset-y&gt; (不可省略)

&lt;blur-radius&gt;(可选)

&lt;spread-radius&gt;(可选)

&lt;color&gt;(可选)
`</pre>

<pre>`grayscale(): 将图像转为灰度图像, 1对应完全灰度图像, 0对应原图
`</pre>

<pre>`hue-rotate(): 给图像应用色相旋转, "angle" 设定图像会被调整的色环角度, 默认为0, 对应无变化.
`</pre>

<pre>`invert(): 翻转输入图像, 即反相, 1对应完全反相, 0对应原图
`</pre>

<pre>`opacity(): 转换图像的透明程度, 0对应完全透明, 1对应原图

和 CSS3 的 opacity 功能相似, 但是一些浏览器会提供硬件加速
`</pre>

<pre>`saturate(): 修改图像饱和度, 0对应完全不饱和, 1对应原图
`</pre>

<pre>`sepia(): 将图像转为深褐色, 1对应完全深褐色, 0对应原图

复合函数

filter: contrast(175%) brightness(3%);

Box-Shadow小用法

box-shadow 常规用法

基础语法

box-shadow 属性向边框添加一个或多个阴影;

box-shadow: (inset) x-offset, y-offset, blur, spread color;

模拟多边框

div{
  width: 100px;
  height: 100px;
  margin: 100px;
  border:5px solid ;
  box-shadow: inset 0 0 0 5px #ccc,
    0 0 0 5px #333;
}
`</pre>

要注意: box-shadow 毕竟不是实际边框, 不占据实际空间, 也不属于 `box-sizing`范围

### 模拟半透明遮罩层

<pre>`#foo{
  width:200px;
  height:200px;
  background:#FFF;
  box-shadow:0 0 0 1920px rgba(0,0,0,.5);
}
`</pre>

### 多重 box-shadow 绘制简图案

<pre>`&lt;div class="bg"&gt;
  &lt;div class="cloud"&gt;&lt;/div&gt;
&lt;/div&gt;

.bg{
  width: 100%;
  height: 100px;
  padding: 10px;
  background-color: #00bcd4;
}
.cloud{
  width: 50px;
  height: 50px;
  margin: 20px auto;
  background-color: #FFF;
  border-radius:50%;
  box-shadow:80px 10px 0 10px #FFF,
    50px 0 0 20px #FFF, 10px -10px #FFF, -10px 10px 0 10px #FFF;
}
`</pre>

### 多重 shadow 实现立体感

<pre>`&lt;div&gt;Solid&lt;/div&gt;

div{
  width: 200px;
  line-height: 68px;
  font-size: 48px;
  text-align: center;
  color:rgba(0,0,0,.3);
  text-shadow: 1px 1px 0 rgba(0,0,0,.55),
    2px 1.5px 0 rgba(0,0,0,.25),
    3px 2px 0 rgba(0,0,0,.2),
    4px 2.5px 0 rgba(0,0,0,.15),
    5px 3px 0 rgba(0,0,0,.1);
}

优化 HTML 结构

语义化命名

  • 语义化的 HTML 能够直接表示出某个 Tag 的业务功能;
  • 语义化的 CSS 可以提高样式的抽象程度, 方便复用;

模块化

  • 提高代码复用程度;
  • 使业务逻辑更加清晰;

选择一个好的命名约定

遵循单一职责原则

SRP 原则即每个模块或者类应当只承担系统中的某一个单一功能, 并且该功能应当完整封装起来. 比如 CSS 组织结构中的 Carousel, NavigationBar 等, 要做成独立的 CSS Component.

滚动视差效果







# Hello World

原理是将图片放在bg:before, 然后为 container 设置 perspective:1px 和 preserve-3d, 并蛇者 overflow:auto(要避免 x-index 则使用 overflow-y:scroll), 然后将 bg:before 向 Z 轴移动-1px, 形成前后空间



/HTML/
div.container
div.bg
h1{…}
p{…}
/CSS/
.container{
overflow-y:scroll;
overflow-x:hidden;
perspective:1px;
transform-style:preserve-3d;
color:yellow;
text-align:center;
}
.bg{
width: 100vw;
height: 40vh;
position:relative;
}
h1{
padding:100px;
}
.bg:before{
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content:””;
display:block;
background: url(“http://7xu8mu.com1.z0.glb.clouddn.com/katong_1.jpg");
background-size:cover;
z-index: -1;
transform:translateZ(-1px) scale(2);
}

Card Style - 1

![barbarian](http://7xu8mu.com1.z0.glb.clouddn.com/wp-content/uploads/barbarian.png)
Level 5
The Barbarian
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio! Provident iure architecto atque sequi alias! Tempore alias doloremque tempora, quod enim nulla quia, saepe accusantium eius minus quisquam architecto.
`
    /*HTML*/
    div.wrapper
        div.clash-card.barbarian
            div.clash-card__image.clash-card_image--barbarian
                img.src
            div.cash-card__level.clash-card__level--barbarian{Level 5}
            div.clash-card__unit-name{The Barbarian}
            div.clash-card__unit-description{...}
            div.clash-card__unit-stats.clash-card__unit-stats--barbarian.clearfix
                div.one-third
                    div.stat{20s}
                    div.stat-value{Training}
                div.one-third
                    div.stat{16}
                    div.stat-value{Speed}
                div.one-third.no-border
                    div.stat{150}
                    div.stat-value{Cost}
    /*CSS*/
    

`

Accordion With jQuery







### Item1


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio in error ipsa facere, veritatis fuga incidunt tempore perferendis placeat. Dolore iste laborum porro possimus officia ratione rerum cumque itaque ullam.


### Item2


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio in error ipsa facere, veritatis fuga incidunt tempore perferendis placeat. Dolore iste laborum porro possimus officia ratione rerum cumque itaque ullam.


### Item3


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio in error ipsa facere, veritatis fuga incidunt tempore perferendis placeat. Dolore iste laborum porro possimus officia ratione rerum cumque itaque ullam.


/HTML/
section.accordion
div.item
h3{Item1}
p{Lorem}
div.item
h3{Item2}
p{Lorem}
div.item
h3{Item3}
p{Lorem}
/CSS/
body{
background-color: #f6704b;
}
{
margin:0;
padding: 0;
}
.accordion{
margin:50px auto;
width: 380px;
background-color: #ccc;
cursor:pointer;
}
.accordion .item{
height:100px;
}
.accordion .item h3{
display:inline-block;
vertical-align:middle;
height: 100%;
padding-left: 50px;
font-size: 20px;
font-weight: 400;
}
.accordion .item h3:before{
content:””;
display:inline-block;
vertical-align:middle;
height: 100%;
}
.accordion .item:first-of-type{
background-color: #620808;
color:#f4ce74;
}
.accordion .item:nth-of-type(2){
background-color: #a53f3f;
color:#ffe9c1;
}
.accordion .item:nth-of-type(3){
background-color: #f4ce74;
color:#620808;
}
.accordion p{
font-family:arial;
font-size: 18px;
font-weight: 400;
padding: 15px;
display:none;
box-shadow: inset 0 3px 7px rgba(0,0,0,.2);
}
.accordion p:first-of-type{
background-color: #620808;
color:#f4ce74;
}
.accordion p:nth-of-type(2){
background-color: #a53f3f;
color:#ffe9c1;
}
.accordion p:nth-of-type(3){
background-color: #f4ce74;
color:#620808;
}
/
jQuery*/
(function($) {
‘use strict’;
$(“.item”).on(“click”,function(){
$(this).next().slideToggle(100);
$(“p”).not($(this).next()).slideUp(‘fast’);
});
}(jQuery));





Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×