web前端进阶学习总结

CSS伪类

伪元素的写法

1. 一般会使用absolute绝对定位来确定其位置
2. 也可以将行内元素转换成块元素或者行内块元素 ```css / before / 选择器::before{ / 使用空白符号占位 / content: ‘’; }

/ after / 选择器::after{ / 使用空白符号占位 / content: ‘’; }

<a name="nWvpc"></a>
### 清除浮动-最常用方法
** 哪个盒子的子元素有浮动，就在哪个盒子上添加清除浮动**
```css
/*在父元素中添加类名clearfix*/
.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

flex布局

justify-content的六个有效值

常用的是 center space-between

align-items的五个有效值

一般使用 center ,让项目在垂直方向上居中

flex-wrap 定义换行

flex-direction的四个有效值

注意：改变了主轴方向后，flex-direction：column；justify-content控制垂直方向而align-items控制水平方向

CSS美化

overflow-决定超出盒子的内容如何显示

单行文本超出省略的css代码

/*强制不换行*/
white-space:nowrap;
/*隐藏超出部分*/
overflow:hidden;
/*用省略号表示剩余内容*/
text-overflow:ellipsis;

WebKit内核浏览器实现多行文本超出省略

• 记得去掉 white-space:nowrap; 让文本可以换行。

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

  SCSS

  变量

  变量需要在使用之前定义，如果变量类型为字符串，一般不需要加引号，但是如果字符串中含有双斜杠，就需要用英文的单引号或双引号包裹，因为在SASS中，双斜杠是注释。

1. 变量的写法

   $width:10px;
   /*有引号的写法*/
   $position: "absolute";
   $mainTxtColor: '#333';
   

   使用变量：

   #main {
   width: $width;
   position: $position;
   color: $mainTxtColor;
   }
   

   编译成css:

   #main {
   width: 10px;
   position: absolute;
   color: #333;
   }
   

2. 定义类似数组的变量

   $animals: puppy kitty chick;
   

3. 进行一下简单的计算

sass支持在使用变量的时候进行简单的四则运算

$width: 10px;

#main {
  width: $width / 2;
}

这样如果我们想要固定宽高比为 `width:height=1:4 ,无论width的值为多少，宽高比都不变。

$width: 10px;

#main {
  width: $width / 2;
  height: $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;
}

编译成CSS

.icon-mail {
  background-image: url("/icons/mail.svg");
  position: absolute;
  top: 0;
  left: 0;
}

嵌套

嵌套是SASS为了解决CSS选择器过长而导致混乱的问题，css的选择器过长可读性和可维护性都会很差，所以需要嵌套。嵌套的功能避免了重复输入父选择器，令复杂的CSS结构更易于管理，安全性、可读性、可维护性都有很大的提升，如下例子：

父选择器 &

有时候需要使用嵌套外层的父选择器，例如：

或者

复用-mixin/include

无参数混合

mixin/include可实现代码的复用。在CSS中通过复用类名实现代码的复用，如

.square {
  width: 100px;
  height: 100px;
}

<div class="user-avatar square">...</div>
<div class="admin-avatar square">...</div>

使用sass的mixin/include实现复用，下面的代码中，定义了一个可复用的代码块，取名为square，主要作用是把元素设置成宽高1：1的正方形，通过使用关键词@include应用这个样式。
混合的使用方法：
@mixin:定义可复用的样式
@include：应用可复用的样式

@mixin square {
  width: 100px;
  height: 100px;
}
//应用
.user-avatar {
  @include square;
}
.admin-avatar {
  @include square;
}

有参数混合

给定义的复用代码块传入参数，增加其可用性，分为两个点：

1. 参数无默认值

   @mixin square($size){
   width:$size;
   height:$size;
   }
   //应用
   .avatar{
   @include square(100px);
   }
   

   编译结果：

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

2. 参数有默认值 ```css @mixin square($size: 100px) { width: $size; height: $size; }

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

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

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

媒体查询 “@media”

媒体查询：仅当满足特定条件，使用对应的属性。
基础语法：

screen：如果你的网页不考虑用户打印的话可以去掉“screen and”。

条件
最大宽度： max-width
最小宽度： min-width

断点

响应式页面：

用两个点（900px和1080px）把浏览器分为三段，这两个点就是断点。
根据W3school 的推荐和主流设备屏幕宽度，总结典型的断点如下：

需要注意：
由于css中越靠后的样式优先级越高，所以

1. 媒体查询用 max-width 表示条件的时候，大的断点放上面。
2. 用 min-width 表示条件的时候，小的断点放上面。

这是为了防止类似下面的这种情况发生：