SZ 博客

变量

1
2
3
4
5
6
7

$nav-color: # F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
  border: 1px solid $highlight-color;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

@mixin rounded-corners($normal) { // 混合器 引用这个变量重用大段代码
  -moz-border-radius: $normal;
  -webkit-border-radius: $normal;
  border-radius: $normal;
}
notice {
  background-color: green;
  border: 2px solid # 00aa00;
  @include rounded-corners(5px);
}
===============================================================
.notice {
  background-color: green;
  border: 2px solid # 00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

提示

1. 变量作用域为块级
2. 中划线 与 下划线 不敏感 例：$link-color与$link_color指向同一个变量
3. $nav-color: # F90; !default 如果这个变量接下来被声明赋值了，那就用它声明的值，否则就用这个默认值。

嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# content {
  article {
    h1 { color: # 333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: # EEE }
  a {
    color: blue;
  &:hover { color: red }   // 父选择器  
  }
  h1, h2, h3 {margin-bottom: .8em} // 群组选择器嵌套
  ~ article { border-top: 1px dashed # ccc } // 选择所有跟在content后的同层article元素
  > section { background: # eee } // 子组合选择器 只会选择content下紧跟着的子元素
  dl > {
    dt { color: # 333 }
    dd { color: # 555 }
  }
  nav + & { margin-top: 0 }
}

nav { 
  border: { // 嵌套属性
  style: solid;
  width: 1px;
  color: # ccc;
  }
}

编译后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# content article h1 { color: # 333 }
# content article p { margin-bottom: 1.4em }
# content aside { background-color: # EEE }
# content a { color: blue; }
# content a:hover { color: red; }
# content h1 { margin-bottom: .8em }
# content h2 { margin-bottom: .8em }
# content h3 { margin-bottom: .8em }
# content ~ article { border-top: 1px dashed # ccc }
# content > footer { background: # eee }
# content dl > dt { color: # 333 }
# content dl > dd { color: # 555 }
nav + # content { margin-top: 0 
nav {
  border-style: solid;
  border-width: 1px;
  border-color: # ccc;
}

导入

css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 嵌套导入
aside {
  background: blue;
  color: white;
}
// blue-theme.scss

===========================================
.blue-theme {@import "blue-theme"}
===========================================
.blue-theme {
  aside {
    background: blue;
    color: # fff;
  }
}

提示

但在下列三种情况下会生成原生的CSS@import，尽管这会造成浏览器解析css时的额外下载：

• 被导入文件的名字以.css结尾；
• 被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；
• 被导入文件的名字是CSS的url()值。

注释

1
2
3
4

body {
  color: # 333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

参考

https://www.sass.hk/

CSS 选择器

1. 标签选择器(如：body,div,p,ul,li)
2. 类选择器(如：class=”head”,class=”head_logo”)
3. ID选择器(如：id=”name”,id=”name_txt”)
4. 全局选择器(如：*号)
5. 组合选择器(如：.head .head_logo,注意两选择器用空格键分开)
6. 后代选择器 (如：# head .nav ul li 从父集到子孙集的选择器)
7. 群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
8. 继承选择器(如：div p,注意两选择器用空格键分开)
9. 伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)
10. 字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)
11. 子选择器 (如：div>p ,带大于号>)
12. CSS 相邻兄弟选择器器 (如：h1+p,带加号+)

static 默认

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中。

目的

为了防止某些开销较大，会被多次相应的函数频繁执行。

二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)

共同点:当二者都没有子元素时,二者的行为是一致的,但是二者内部都包含子元素时,行为就不同了.

mouseover与mouseenter

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

mouseout与mouseleave

不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

参考 & 引用

https://blog.csdn.net/lplife/article/details/80436623
https://www.jb51.net/article/73228.htm

块级元素(block element)

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。

• 结构化块状元素： 这类元素用于构造文档的结构，没有语义上的含义，仅仅划分出了文档的组织方式，并没有体现文档的内容。
• 终端块状元素： 这类元素用于从结构转向内容，拥有语义上的含义，能够表明内容的性质。终端块状元素属于结构的终点，它们不能再包含其他块级元素，只能包含文本或行级元素。
• 多目标块状元素： 多目标指的是可以自由的扩展或嵌套文档的结构，以可以终端的形式出现。当多目标块状元素以结构化的方式使用时就含有结构化的内涵，以终端的形式使用就含有语义的内涵。

常见的块级元素:
|||
| —- | —- |
| div | 主要用来进行框架布局 |
| h1～h6| 用来设置不同级别的标题 |
| p | 创建段落，会自动在其前后创建一些空白。 |
| hr | 用来创建分隔先 |
| ol | 创建有序列表。 |
| ul| 创建无序列表。 |

区别

• 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
• 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
• 所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)
• 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
• 区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

在html设计制作中，css有四种引入方式。

方式一： 内联样式

内联样式，也叫行内样式，指的是直接在 HTML 标签中的 style 属性中添加 CSS。
示例：

1

<div style="display: none;background:red"></div>

这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

方式二： 嵌入样式

嵌入方式指的是在 HTML 头部中的

src、href、link的区别是什么？

1、使用的地方不同

使用的地方不同，src(source)(源)一般用于表示图片源，js源(img、script、iframe)。href(Hypertext Reference)(超文本引用)一般在标签(a、link)中使用，表示跳转地址。link一般用于引入css(相较于@import为并行加载)。

2、做用区别

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系

src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。

3、定义区别

href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。src 表示来源地址，在 img、script、iframe 等元素上。
src 的内容，是页面必不可少的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引用和引入。

参考 & 引用

https://www.cnblogs.com/bbcfive/p/10065035.html
https://github.com/haizlin/fe-interview/issues/250

快速排序算法通过多次比较和交换来实现排序，其排序流程如下：

1. 首先设定一个分界值，通过该分界值将数组分成左右两部分。
2. 将大于或等于分界值的数据集中到数组右边，小于分界值的数据集中到数组的左边。此时，左边部分中各元素都小于或等于分界值，而右边部分中各元素都大于或等于分界值。
3. 然后，左边和右边的数据可以独立排序。对于左侧的数组数据，又可以取一个分界值，将该部分数据分成左右两部分，同样在左边放置较小值，右边放置较大值。右侧的数组数据也可以做类似处理。
4. 重复上述过程，可以看出，这是一个递归定义。通过递归将左侧部分排好序后，再递归排好右侧部分的顺序。当左、右两个部分各数据排序完成后，整个数组的排序也就完成了。

随着大数据、物联网、人工智能、云计算等技术的兴起，可视化越来越受到人们的关注，而暑期学校也已经成为业界学习、了解可视化的重要途径。
此次特别峰会分为四场，分别为概述与前景篇、科学可视化和交互篇、可视化成长篇、可视化跨界篇，诸位讲者将分别从不同维度为大家带来可视化领域的精彩分享。
文章顺序按讲者出场顺序。标题为 “讲者-单位-标题” 的表述方式