前端进阶

第一章 CSS伪类

伪元素就是利用css代码在标签内部的前面，或者后面添加一个行内元素。

/* before */
选择器::before{          //选择器内部的前面添加一个行内元素
  /* 使用空白符号占位 */
  content: '';
}

/* after */     
选择器::after{          //选择器内部的后面添加一个行内元素
  /* 使用空白符号占位 */
  content: '';
}

清楚浮动：哪个盒子的子元素有浮动，就在哪个盒子上添加清除浮动

.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

事件伪类：
hover 鼠标移动上去

li:hover{
    background-color: #47A0FC;
    color: white;
}

active 点住鼠标不松开

ul>li:active{
    /* 要改变的效果 */
    color: black;
}

hover一定要在active之前，否则不会生效
focus 获取焦点后

列表伪类：
1 匹配其父元素中的第一个子元素:first-child
2 匹配父元素中最后一个子元素 :last-child
3 匹配父元素中的第 n 个子元素 :nth-child()
列表伪类的适用条件是，同一级别，相同元素

第二章 css装饰

cursor（光标）：使箭头图标发生变化
下面列出了6中cursor情况

cursor: pointer;
cursor: default;
cursor: text;
cursor: move;
cursor: grab;
cursor: zoom-out;

box-shadow 盒子阴影
示例

div{
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11);
}

文字阴影：text-shadow
示例

span{
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11);
}

第三章 flex布局

flex（弹性布局） 布局有强大的空间分布和对齐能力，而且得到了所有浏览器的支持。
它最显著的效果就是把原本从上到下排列的块状元素变成水平排列。
注意点：设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素称为 Flex 项目（flex item），简称”项目”
如图

1 调整水平方向的分布 justify-content(设置在容器上)的6个值：

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

如图

2 调整垂直方向上的分布 align-items(设置在容器上)的5个值

align-items: flex-start | flex-end | center | baseline | stretch;

如图

flex-wrap:当一行的项目排不下时，使用此属性时项目换行，有三个值。

flex-wrap: nowrap | wrap | wrap-reverse

如果不允许项目压缩、放大可以在项目上设置 flex: none
项目自动充满剩余空间 flex: 1

两栏自适应布局：两栏自适应布局指的是一栏固定宽度，另一栏随浏览器宽度的变化自动调节自己的宽度。利用flex: none和flex: 1实现。

flex布局中的主轴和交叉轴： 主轴：水平，从左到右； 交叉轴：垂直，从上到下；
如图

改变容器中主轴和交叉轴的方向 flex-direction

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

1.row：即默认值，主轴为水平方向，起点在左端。
2.row-reverse：主轴为水平方向，起点在右端。
3.column：主轴为垂直方向，起点在上沿。
4.column-reverse：主轴为垂直方向，起点在下沿。

第四章 css高级美化

单行文本溢出省略：
1 强制不换行 white-space: nowrap
2 元素内容溢出 overflow
overflow 属性决定超出盒子的内容怎么显示，它有 5 个有效值

值             描述
visible        这是默认值，从父元素继承overflow属性的值
hidden         内容会被修剪，并且超出的内容不可见
inherit        内容不会被修剪，会呈现在元素框之外
scroll         内容会被修剪，浏览器会显示滚动条以便查看超出的内容
auto           由浏览器定夺，如果内容被修剪，就会显示滚动条

3 文本溢出省略 text-overflow 它有两个值
clip：默认值，表示在内容区域的极限处截断文本，可以简单的理解成超出部分被一刀切掉了
ellipsis：表示用一个省略号 (“…”)来表示被截断的文本。

多行文本溢出省略

/* 隐藏超出部分 */
overflow : hidden;
/* 文本超出就用省略号 */
text-overflow: ellipsis;
/* 把对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* WebKit内核的浏览器的私有属性，设置文本超出2行就用省略号 */
-webkit-line-clamp: 2;
/* WebKit内核的浏览器的私有属性，设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

第五章 css预处理器

什么是SASS？
Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能，并且完全兼容 CSS 语法。
我们现在都编写后缀名为.scss的样式文件。

变量 ：以美元符号”$”开头，赋值方法与 CSS 属性的写法一样

$width: 10px;

#main {
  width: $width;
}
编译之后
#main {
  width: 10px;
}

 width: $width / 2;  //还可以进行计算

插值法：#{}插值几乎可以在Sass样式表的任何地方使用

$name: "mail";
$top-or-bottom: "top";
$left-or-right: "left";

.icon-#{$name} {
  background-image: url("/icons/#{$name}.svg");
  position: absolute;
  #{$top-or-bottom}: 0;
  #{$left-or-right}: 0;
}

编译后的结果
.icon-mail {
  background-image: url("/icons/mail.svg");
  position: absolute;
  top: 0;
  left: 0;
}

嵌套: Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器
如图

父选择器&: 可以用 & 代表嵌套规则外层的父选择器

复用：
无参数混合
1”@mixin“：定义可复用的样式
2”@include“：应用可复用的样式
例如

@mixin square {
  width: 100px;
  height: 100px;
}

// 应用：
.user-avatar {
  @include square;
}
.admin-avatar {
  @include square;
}

有参数混合
参数无默认值：

@mixin square($size) {
  width: $size;
  height: $size;
}

// 应用
.avatar {
  @include square(100px);
}

编译
.avatar {
  width: 100px;
  height: 100px;
}

参数有默认值

@mixin square($size: 100px) {
  width: $size;
  height: $size;
}

// 不传参数就会使用默认的值 100px
.avatar {
  @include square;
}

// 传入参数就会使用传入的值 200px
.avatar-200 {
  @include square($size: 200px);
}

编译
/* 不传参数就会使用默认的值 100px */
.avatar {
  width: 100px;
  height: 100px;
}
/* 传入参数就会使用传入的值 200px */
.avatar-200 {
  width: 200px;
  height: 200px;
}

第六章 响应式

什么是响应式网页设计？ 一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。
响应式布局主要通过规定特定的宽度范围使用特定的布局来实现在不同的设备上应用不同的布局。

什么是媒体查询？ 媒体查询是CSS3中引入的一种CSS技术。仅当满足特定条件时，它才使用对应的CSS属性块。
基础用法图

如果网页不打印，可以去掉screen and
条件：最大宽度（max-width）

条件：最小宽度（min-width）

逻辑操作符 and

断点：

两个点（900px 和 1080px）就是我们所说的断点（break points）
我们来看看典型的断点：

范围             适用于
<=600            超小型设备（手机，600像素及以下
600～768          小型设备（纵向平板电脑和大型手机，600像素及以上）
768～992          中型设备（横向平板电脑，768像素及以上）
992～1200         大型设备（笔记本电脑/台式机，768像素及以上）
>=1200            超大型设备（大型笔记本电脑和台式机，1200像素及以上）

为了防止冲突的媒体查询条件；
媒体查询用 max-width 表示条件的时候，大的断点放上面。
反过来，用 min-width 表示条件的时候，小的断点放上面。