复杂选择器权重计算

层叠性-复杂选择器权重计算

层叠性是指多种CSS样式的叠加，也是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。

定义CSS样式时，经常出现两个或更多规则应用在同一元素上：

  • 选择器相同，则执行层叠性
  • 选择器不同，就会出现优先级的问题，就会涉及CSS权重计算。

下面详解介绍CSS层叠性权重计算方法。

1) 权重计算公式

值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

关于 CSS 权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity (特殊性)

标签选择器 计算权重公式
继承或者 * 0,0,0,0
每个元素（标签选择器） 0,0,0,1
每个类，伪类 0,0,1,0
每个ID 0,1,0,0
每个行内样式 style=”” 1,0,0,0
每个!important重要的 ∞ 无穷大

2) 权重叠加

我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。

就是一个简单的加法计算：

div ul li ——> 0,0,0,3

.nav ul li ——> 0,0,1,2

a:hover —–—> 0,0,1,1

.nav a ——> 0,0,1,1

注意：

数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

3) 继承的权重是0

这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中。

  • 如果选中了，那么以上面的公式来计权重。谁大听谁的。
  • 如果没有选中，那么权重是0，因为继承的权重为0。

CSS书写规范

文件引用规范

  1. CSS 文件或样式在 head 标签中引用。页面的渲染需要 CSS，所以尽量早的让 CSS 文件加载出来。
  2. JS 文件要放在 body 标签尾部。页面里加载和运行 JS 都会阻塞页面的渲染过程，所以把 JS 放在尾部可以加快首屏显示的速度，但对整个页面完成加载的时间没什么影响。
  3. 使用压缩后的文件。线上使用的静态文件，尽量都是压缩好的，CSS 使用 .min.css 形式，JS 使用 .min.js 形式，这样可以减少文件的体积，从而减少下载的时间。
  4. 减少 import 方式引用 css 文件。import 方式引入的 CSS 文件要等原 CSS 文件加载并解析后才会去请求，会拖慢 CSS 文件的加载速度。

选择器的书写规范

一、选择器命名规范

  • 选择器都用小写字母。
  • 选择器的命名要使用英语，这是编程的通用语言。
  • 选择器的名字尽量简短，但要有实际意义，不能为了文件的体积而忽略代码的可读性。
  • 逗号后要有空格，一般在选择器的逗号后面加一个空格，这样不至于看起来拥挤。
  • 使用-分割，如果有需要多个单词的选择器，几个单词中间用-分隔，比如 page-wrap、btn-small 等。

二、选择器使用规范

  • CSS 的属性中需要引号的地方使用单引号，HTML 中的属性使用双引号。
  • CSS 选择器在使用的时候，要把样式限定在某个 HTML 区域里生效。这样可以防止不同区域的元素互相影响
  • 选择器合并。有相同样式的多个选择器，使用分组选择器，可以减小文件的体积。
  • 尽量不使用通配选择器或标签选择器。这两种选择器效率比较低，尽量使用类选择器来代替，只有在需要改变元素默认属性的时候再使用。
  • 最右侧的选择器尽量精确。选择器中最后一位的选择器尽量使用类选择器这种比较精确的选择器，因为选择器的读取是由右至左，最右边的选择器会先去遍历，如果最后使用了标签选择器，那么查找样式的消耗就会增多。
  • 选择器的嵌套不宜太长。选择器在读取的时候都是一层层的去查找的，所以使用太长的选择器也会增加查找的消耗。
  • 在可以的情况下用子代选择器代替后代选择器。子代选择器只需要做一层的查找，而后代选择器需要一直查找到根节点，所以子代选择器的效率会更高一点。
  • 使用样式继承。对于可以继承的样式，尽量在父节点加入样式，而不要给每一个子节点都加样式。

HTML5页面渲染机制

页面的加载和渲染全过程

  • HTML的加载：输入URL后，最先拿到下载HTML文件，下载完进行解析。
  • 其他静态资源加载：HTML 在解析的过程中，如果发现 HTML 文本里面夹杂的一些外部的资源链接，比如 CSS、JS 和图片等时，会立即启用别的线程下载这些静态资源。当遇到 JS 文件的时候，HTML 的解析会停下来，等 JS 文件下载结束并且执行完，HTML 的解析工作再接着来。
  • DOM树构建
  • CSSOM树构建
  • 渲染树构建：根据DOM树CSSOM树构建渲染树
  • 布局计算：渲染树构建完成以后，确定所有元素的位置关系和需要应用的样式。
  • 渲染：布局计算完成以后，浏览器在页面上渲染元素。

DOM树的构建

  • 将HTML里每个标签都解析成 DOM 节点（每个标签的属性、值和上下文关系等都在这个文档对象里）
  • 然后使用深度遍历的方法把这些对象构造成一棵树。
  • DOM 树描述的是HTML标签的层级关系

CSSOM树的构建

  • 构建方式与DOM树类似
  • CSSOM树描述的是选择器之间的层级关系。

渲染树的构建

渲染树是对DOM树和CSSOM树的结合，得到一个可以知道每个节点会应用什么样式的数据结构。这个结合的过程大体上是遍历整个 DOM 树，然后在 CSSOM 树里查询到匹配的样式。

  • 渲染树的根是HTML节点

  • 渲染树和DOM树的结构并不完全一致：渲染树里会把所有不可见的元素忽略掉，所以如果是 DOM 树中的节点有 “display: none;” 属性的节点以及它的子节点，最终都不会出现在渲染树中。但是具有 “visibility: hidden;” 样式的元素会出现在渲染树中，因为具有这个样式的元素是需要占位的，只不过不需要显示出来。

  • 样式优先级关系：内联样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器 > 继承样式 > 浏览器默认样式

“今天，妈妈死了，或许是昨天，我搞不清”

“今天，妈妈死了。也许是昨天，我搞不清”。
这句话正是出自于小说《局外人》的开头，也成为了《局外人》这部小说的经典名句。
对于亲人，默尔索不记得母亲离世的时间，是因为是人就会要去死，而母亲也只是到了时间，没有什么好哭泣的，面对上司，他告假，无所谓上司的脸色，“反正不是我的错”，而在法庭上，面对一而再，再而三的询问，他仍然坚持自己的答案，而法官坚持将默尔索没有因为母亲离世的悲伤作为罪证，指责默尔索冷漠，送他上了断头台，这看似荒谬的逻辑背后，加缪其实是在阐述一个个人与社会，个人与公众的关系问题。在所谓社会习俗面前，人其实连哭与不哭，悲不悲伤的自由都没有了。
主人公默尔索毫不关心这些发生在自己身上的事，俨然一个局外人，实际上默尔索是极致清醒的，他不关心世俗道德，也不会被其捆绑，他追求的是自己本身的欲求，但因为他追求的是不被世俗允许的，超过世俗规范的，因此不被理解，甚至被推上断头台。

移动端APP UI设计入门

设计规范750*1334两倍率

界面布局规范设计

边距 w20

状态栏 w40

主导航 w88

底栏 w88

标准色规范设计

产品标准色分为主色、辅助色、点缀色

主色：主视觉，重点突出的颜色，决定产品色调，超过三种杂乱

辅助色：与主色搭配的颜色，是产品颜色搭配更加完美协调，主元素，辅元素、次要元素、分割元素（分两种）（颜色逐渐变淡）

点缀色：点亮画面，起到强调、引导浏览作用，建议一种，偏暖色，可设置同为主色，（颜色逐渐变淡）分三种按369分类，3字体，6分割线，9背景分割（不建议使用369，缺乏个性）

文本规范设计

标题类

主元素 展示标题（问吧分类列表页问题）：大-字号40 加粗|行距50 小-字号36 加粗|行距50
主元素 主标题（问吧分类的java标题）：大-字号32 加粗 小-字号28 中等
辅元素 副标题：大-字号30 加粗 小-字号24 中等

文本类

主元素： 主文本（问吧详情页用户发表的文本）：字号 36 中等|行距58
辅元素： 辅文本（详情页阐述）：字号 30 中等|行距48
次要元素： 次要文本（浏览数点赞数）：字号24 中等

控件规范设计

分割元素

一级分割线：大板块区分 颜色：分割元素1

二级分割线：小板块区分 颜色：分割元素2

分割背景：H 20 颜色:比12更淡的

按钮

圆角矩形：大*圆角：8 W560 * H88|颜色：主色|文本:34

​ 小*圆角：4 W140 * H56|颜色:主色|文本:24

空心圆角矩形：同上

系统图标

大图标：44*44

中图标：36*36

小图标：24*24

导航图标

圆形

大（首页导航）：96*96

小（分页导航）：72*72

头像

圆形

大（用户中心）：112*112

小（用户评论）：72*72

标签

大小：80*28

圆角：13.5

文本：20

悬浮操作按钮

缩略图

间距：10

4：3 3图

大小：232*174

16:9 2图

大小：350*196

1：1 1图

大小：710*398

1图左右结构

大小：320*240

列表

搜索框

750*88

文本框：500*60 圆角29.5

圆形搜索图标：36*36

输入文本：24

Git分支

1.分支概述

（1）什么是分支

  • 在版本控制过程中，同时推进多个任务，为每个任务，我们就可以创建每个任务的单独分支
  • 使用分支意味着程序员可以把自己的工作从开发主线上分离开来，开发自己分支的时候，不会影响主线分支的运行
  • 对于初学者而言，分支可以简单理解为副本，一个分支就是一个单独的副本

（2）分支的好处

  • 同时并行推进多个功能开发，提高开发效率。
  • 各个分支在开发过程中，如果某一个分支开发失败，不会对其他分支有任何影响。失败的分支删除重新开始即可

2.分支操作

（1）常用分支命令

*在哪个分支就意味着处于哪个分支上

命令 说明
git branch -v 查看分支
git branch <分支名> 建立分支
git checkout <分支名> 切换分支
git merge <分支名> 把指定的分支合并到当前分支上
git branch -b<分支名><基于哪个分支GIT> 建立分支并切换到该分支上
git branch -d/D <分支名> 删除分支，用d报错改用D

（2）存在冲突矛盾下的合并分支

合并分支时，两个分支在同一个文件的同一个位置有两套完全不同的修改。
有两套完全不同的修改。 Git无法替我们决定使用哪一个。必须 人为决定新代码内容。
解决方案：使用vim修改文件内容，保证修改后行数和原来一样，删除特殊符号，然后添加到暂存区，最后提交（引号后不要带文件名）

Git基础

常见指令

命令 说明
git reflog 查看历史记录
cat <文件名> 查看文件内容
vim 修改文件
git cat-file -t+<id号> 查看文件类型 注意空格
git log -n数字 查看最近n个日志
git commit -u 提交所有文件
git commit -am’’ 将工作区的东西一起加入版本历史
git log -graph 查看合并分支图
mkdir <文件夹名> 创建文件夹
echo ‘内容’ > <文件夹名/文件名> 增添文件夹内文件内容
pwd 查看所在目录

1. 建Git仓库

1.把已有的项目代码纳入git管理cd项目代码所在文件夹路径git init

2.新建项目直接用gi管理cd某个文件夹

git init +项目名称

cd +项目名称

2. 配置用户信息

（1） 配置global用户信息

git config -global user.name’名称’
git config -global user.email ‘邮箱’

（2） 配置local用户信息

git config -local user.name ‘名称’
git config -local user. email ‘邮箱’

（3） 查看文件所配置的用户信息

git config -local -ist

git config -global -list

3. 添加新文件到版本历史

git commit -m’理由’

git commit -u (将所有归git管的文件- -起提交)

git commit -am (将工作区的东西- -起加入版本历史中)

am=add+m

4. 看状况

git status

5. 看版本演变历史

git log (可显文件的id号以及 配置用户信息的优先级) (看当前分支的演变历git log –oneline (可查看commit列表)

git log -n数字(表示最近的几个commit) (也可同时再加–oneline)

git log -all (可查看所有分支)

git log -all –graph (可查看演进)

6. 拷贝文件

cp .文件夹名文件名文件类型

例如: cp ../0-material/index.html.01 index.html

若直接拷贝文件夹到当前路径: cp -r ./0-materialimages

7. 加入文件进入git管理(进入暂存区)

1.git add +文件名

2.git add . (加入整个文件夹)

8. 文件重命名

1.mv文件名改后的文件名会造成原文件的删除和新文件的添入。

2.先将新文件加入: git add新文件名

3.然后删除旧文件: git rm旧文件名

4.最后git status:查看状态，可以发现git已经自动识别为将文件重命名为新文件名

  • 如果想撤销记录，可以使用: git reset - -hard (但很危险，因为这样会撤销暂存区工作路径上所有变更，然而输入git I不会破坏git的历史)

快速改名方法: 1.git mv 文件名 变更后的文件名

2.git commit -m’注释’

9. gitk

概念：gitk是git图形化的界面软件版本,查看历史版本

10. 分离头指针

概念：在Git中branch是指向commit，而HEAD指向branch。所谓的分离头指针状态就是HEAD不再指向分支，而是直接指向某个commit。

java基础排序方法

选择排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class pxXuanZe{
    public static void main(String[] args){
        int[] arr={2,3,5,6,1,4};                  //对该数组进行排序
        for(int i=0;i<arr.length-1;i++){          //遍历数组角标为0到最大长度减一的数          
            for(int j=i+1;j<arr.length;j++){	  //遍历角标i后面的数
                if(arr[i]>arr[j]){				  //比较大小，如果前者比后者大则交换两个角标对应的值
                    int temp=arr[i];
                    arr[i]=arr[j];
                    arr[j]=temp;
                }
            }
        }
        for(int i=0;i<arr.length;i++){
            System.out.print(arr[i]+" ");           //打印排序后的值
        }
    }
}

冒泡排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class pxMaoPao{
    public static void main(String[] args){
        int[] arr={2,1,5,3,4,6};                  //对该数组进行排序
        for(int i=0;i<arr.length-1;i++){		  //遍历数组角标为0到最大长度减一的数
            for(int j=0;j<arr.length-i-1;j++){	  //遍历的数每次循环减少一个
                if(arr[j]<arr[j+1]){			  //比较大小 大的在后面
                    int temp=arr[j];
                    arr[j]=arr[j+1];
                    arr[j+1]=temp;
                }
            }
        }
        for(int i=0;i<arr.length;i++){
            System.out.print(arr[i]+" ");	//打印
        }
    }
}

插入排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class pxChaRu{
    public static void main(String[] args){		
        int[] arr={1,5,4,3,2,6};
        for(int i=1;i<arr.length;i++){	//遍历i从1到最大长度-1
            int e=arr[i];				//创建e等于角标为i的数
            int j=i-1;					//j表示角标
            while(j>=0&&arr[j]>e){		//当角标j大于等于0且j角标的数字大于大于i角标的数字
                arr[j+1]=arr[j];		//交换j和j+1角标对于 的数字（即将所有大于该数字的数后移）
                j--;
            }
            arr[j+1]=e;      			//循环结束后将e的值给角标j+1位置
        }
        for(int i=0;i<arr.length;i++){
            System.out.print(arr[i]+" ");
        }
    }
}

PS学习

一、移动工具

（1）快捷键的使用

Tab：收起收回面板
Shift+Tab：只收右边面板
F全屏模式 F沉浸 F回来 Tab复原
鼠标左键+Shift：同时选中多个文件
T：文本打字

Ctrl+enter：确认文字

xxxxxxxxxx System.out.println();//参数为空，表示换行java

Shift+ctrl+n：新建图层

Crtl+T：调整图片大小及角度

（2）关于图层

栅格化图层！！!

选中图层再看属性

右击关闭右边页面不需要的窗口，可以隐藏窗口

图层左边的眼睛可隐藏图层

选中几个图层可合并

图层的顺序会影响到画面的覆盖

描边：选中图层双击，点击F(x)设置大小颜色

建立组：选中图层，单击右下文件夹图标，可建立组

（3）矩形工具的使用

圆角的设置：框选后在属性中更改弧度，敲回车可实现四角同步

选中矩形或其他可以在上方选择对齐方式

二 画板工具

（1）画板工具的使用

建立画板：1.在新建文档时勾选画板2.选择画板工具建立画板
可以通过画板上下左右加号实现复制画板

（2）关于图层

混合模式：点击图层类型下方的正常，在下拉框里选择模式

三、选框工具

（1）选框工具的使用（矩形、椭圆）

使用矩形选框工具选中内容，可移动选中内容及复制
恢复：按M+空白处单击
取消选择：右击选择取消选择
调整选区大小角度：右击选择变换选区
内容识别填充：可以去除选区中文字或图案而不影响背景
仿制图章：模仿背景色（先采样再使用图章）
正圆：shift+使用椭圆选框工具
填充圆形或矩形：Alt+Delete
选中选区如果显示相反选取，可右击选择反向

（2）快捷键

Alt +(-/+):实现画面的缩放

四、 套索工具

（1）套索工具

套索工具可以随意选中选区，移动复制选区（与选框工具类似）
多边形套索工具：不停点击使选区趋近图片形状
磁性套索工具:自动贴合选区，不贴合的点可以通过将鼠标移至点上，按Delete键进行删除
图像中间需要镂空的地方可以点击“从选区减去”然后通过选中选区，去除选区

（2）其他Tips

魔术橡皮擦：调整容差可以擦除图片边框
混合模式：正片叠底（可以使图片透过背景）

五、快速选择工具

（1）快速选择工具的使用

容差值大允许相近的颜色范围大
对象选择工具抠图王者，可以直接抠去
快速选择工具也可

  • 快捷键：
    选区增加：Shift
    选区减少：Alt
    将选区复制到图层：Ctrl+J

（2）其他Tips

同时选中两个图层可以一起移动
同一个组可以一起设置效果

六、裁剪工具和图框工具

（1）裁剪工具

透视裁剪工具：使用工具需要剪裁的画面的四个点点击，敲enter完成裁剪(见6-2)
使用扭曲，调节透明度，可以使书皮更贴合书本（见6-3）

（2）画框工具

画框上覆盖图片,可以调整画框图片大小
画框：在属性可以增加描边效果
两个都选中可以Alt复制，调整大小
除了固定的矩形圆形画框，可以通过形状工具，增添形状，右击将形状转变成画框

（3）其他Tips

标尺：Ctrl+R
自由变换:按Shift 旋转
复制旋转相同角度的图形：Ctrl+Shift+Alt+T

七、实践

（1）扩展选区制作不规则图形的底色

1.在选择菜单中选择载入选区
2.在选择中选中扩展，调大扩展量
3.在两个图层中添加图层，填充颜色，Ctrl+D删除选区

（2）使用选择并遮住长发模特换背景

1.使用快速选择工具选中长发模特
2.点击选择并遮住，将视图模式调成黑底
3.使用调整边缘画笔，涂抹长发模特，将视图模式调整成黑白，检查轮廓
4.点击添加图层下方的图层蒙版，加入背景和点缀元素

（3）使用渐变工具制作果汁广告

1.快捷键G调出油漆桶工具，加入背景色
2.使用渐变工具，在上方选择三个阶段的渐变色
3.选择渐变方向中的径向渐变，选择反向从右下往左上脱直线
4.置入水花素材，混合模式选择变暗
5.添加果汁和文本广告词

（4）使用矩形选框工具制作照片拼图

1.填充背景色
2.快捷键H唤出抓手工具，可移动画布
3.标尺拉出留白区域
4.置入图片，使用矩形选框选择反向去除留白部分或使用图层蒙版
5.最后在视图菜单中取消显示额外内容

（5）使用填充与描边制作剪贴画人像

1.置入图像，添加背景图层，使用吸管工具吸取气球颜色并填充背景
2.使用多边形套索套出轮廓，新建图层，使用吸管吸取文字颜色填充选区

（6）使用椭圆选框工具制作人像海报

1.用吸管吸取颜色填充已框选的圆形选框

2.调整图像透明度，用椭圆选框进行裁剪

3.Ctrl+Shift+I选择反向

Ctrl+D取消选区