css样式汇编总结

掌握CSS的5个技巧

经验分享：划分页面机构的顺序：

• 自上而下，从左往右，以行作为一个单位
• 划分结构的依据：内容、颜色块、间距和边框

你离css大神只差这5个技巧和思维！

学习资源：

MDN

w3schools.com

hover.css官网

1. 样式调整

   业余时间经常到像mdn之类的文档网站上去查它们的用法，能长不少见识。

2. 布局调整：

   可以看其他的网站，从简单的开始练习；慢慢再去看不规则的网站，再用自己的方法实现出来

   慢慢就会形成一种思路：看到设计稿就能大体知道怎么实现网站布局了

   分析页面布局：自己先用HTML方块规划出来，忽略内部细节 导航、头部信息、内容区域、底部信息

   使用transform调整元素的位置，不会是元素脱离文档流。它们所占的空间会停留在原位。

   flot、position、flex、Grid、媒体查询@media、

3. 形状、特效的拆解与合并

   想理解前端页面和组件的特效，先去研究一下设计的基本原则和理论，不但能加快你的开发效率，

   而且能减少与设计师沟通的成本和时间，变相的减少加班…

   前端工程师要学习一点设计方便的知识：因为前端页面会有不规则的图形，动画效果等等。

4. 页面组件设计原则

   在设计组件时，首先分析设计稿中哪些组件大体相同，然后把它们的公共样式抽离出来，有特殊情况时通过组合class来覆盖已有的样式。另外在设计组件时，只关心组件盒子内部的区域，不要设置像外边距这样的属性，它们应该由包含这个组件的容器来设置。因为相同的组件在不同容器中的位置和间距可能不同。

   例如：按钮大小差不多，只是颜色有差异

   • 可以通过.button{控制大小}

   • 可以通过 .blue{} .green{}；控制颜色

5. CSS模块化学习

   • 通过选择器选择对应的HTML元素、应用样式
   • 设置元素外观，比如：颜色、背景、字体等
   • 调整元素的位置和与其他元素的间距
   • 安排一组元素或者整个页面的布局
   • 覆盖或继承已有样式

2D转换（变换）transform

2d移动( translate)是2d转换里面的一种功能，可以改变元素在页面中的位置，类似 定位

使用2d移动的步骤：

1. 给元素添加 转换属性 transform
2. 属性值为 translate(x,y) 如 transform:translate(50px,50px);

 div{
    transform: translate(50px,50px);
  }

小结

1. translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
2. translate类似定位，不会影响到其他元素的位置
3. 对行内标签没有效果

2d旋转 rotate

2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

使用步骤：

1. 给元素添加转换属性 transform
2. 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度

div{
      transform: rotate(0deg);
}

2d旋转有以下特点：

1. 角度为正时 顺时针 负时 为逆时针
2. 默认旋转的中心点是元素的中心点

转换中心 transform-origin 了解

该属性可以修改元素旋转的时候的中心点

1. transform-origin:50% 50%; 默认值 元素的中心位置 百分比是相对于自身的宽度和高度
2. transform-origin:top left; 左上角 和 transform-origin：0 0;相同
3. transform-origin:50px 50px; 距离左上角 50px 50px 的位置
4. transform-origin：0; 只写一个值的时候 第二个值默认为 50%;

2d缩放 scale

缩放，顾名思义，可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小

步骤：

1. 给元素添加转换属性 transform
2. 转换的属性值为 scale(宽的倍数,高的倍数) 如 宽变为两倍，高变为3倍 transform:scale(2,3)

div{
    transform:scale(2,3);
}

小结：

1. transform:scale(1,1) 放大一倍 相对于没有放大
2. transform:scale(2,2) 宽和高都放大了2倍
3. transform:scale(2) 只写一个参数 第二个参数则和第一个参数一样 相当于 scale(2,2)
4. transform:scale(0.5,0.5) 缩小
5. transform:scale(-2,-2) 反向放大2倍 很少用负数 容易让人产生误解

动画 animation

初学者容易对 动画 和 过渡 傻傻分不清楚

过渡 只能看到一次变化过程 如 宽度 1000px 变化到 100px

动画 可以设置变化的次数 甚至是无数次

1. 步骤

1. 在css中定义动画函数
2. 给目标元素调用动画函数

    /* 1 声明动画函数 */

    @keyframes ani_div {
      0%{
        width: 100px;
        background-color: red;
      }
      50%{
        width: 150px;
        background-color: green;
      }
      100%{
        width: 300px;
        height: 300px;
        background-color: yellow;
      }
    }

    div {
      width: 200px;
      height: 200px;
      background-color: aqua;
      margin: 100px auto;
      /* 2 调用动画 */
      animation-name: ani_div;
      /* 持续时间 */
      animation-duration: 2s;
    }

2. 语法1

1. 动画名

   设置要使用的动画名 animation-name:xxx;

2. 持续时间

   设置动画播放的持续时间 animation-duration:3s

3. 速度曲线

   和设置过渡的速度曲线一样 animation-timing-function:linear;

   • linear： 匀速
   • ease： 慢-快-慢 默认值
   • ease-in： 慢-快。
   • ease-out： 快-慢。
   • ease-in-out： 慢-快-慢。

4. 延迟时间

   animation-delay: 0s;

5. 循环次数

   设置动画播放的循环次数 animation-iteration-count: 2; infinite 为无限循环

6. 循环方向

   animation-direction

   如在动画中定义了 0%：红色 100%：黑色 那么 当属性值为

   1. normal 默认值 红 -> 黑
   2. reverse 反向运行 黑 -> 红
   3. alternate 正-反-正… 红 -> 黑 -> 红…
   4. alternate-reverse 反-正-反… 黑 -> 红 -> 黑 …
   5. 以上与循环次数有关

7. 动画等待或者结束的状态

   animation-fill-mode 设置动画在等待或者结束的时候的状态

   • forwards：动画结束后，元素样式停留在 100% 的样式
   • backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式
   • both： 同时设置了 forwards和backwards两个属性值

8. 暂停和播放

   animation-play-state 控制 播放 还是 暂停

   running 播放 paused 暂停

3. 复合写法

animation: name duration timing-function delay iteration-count direction fill-mode;

多个动画写法

用逗号分隔

animation:
name duration timing-function delay iteration-count direction fill-mode，
animation: name duration timing-function delay iteration-count direction fill-mode;

动画结束事件animationend

元素在动画结束之后，会自动触发的事件 animationend

    var div = document.querySelector("div");
    div.addEventListener("animationend", function () {
      console.log("div的动画结束之后，触发");
    })

4. 动画库animate.css

动画库animate.css官网

动画库animate.css中文

使用步骤

1. 引入css文件

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

2. 给元素添加对应的class

<h1 class="animated infinite bounce">快来看看我</h1>

简单解读：

animated 必须添加的class

infinite 无限播放

bounce 弹跳动画的效果，可以查官网自己选择喜欢的

css3兼容处理

css3涉及到较多的新属性，某些低版本（如ie8以及以下）的浏览器对css3的支持程度不够，因此需要做以下处理

添加对应的浏览器的前缀 常见前缀如下

• 谷歌 -webkit
• 火狐 -moz
• IE -ms

如对 border-radius 进行兼容性处理

      -webkit-border-radius: 30px 10px;
      -moz-border-radius: 30px 10px;
      -ms-border-radius: 30px 10px;
	  // border-radius 一定要放在最后
      border-radius: 30px 10px;

如果发现添加前缀也解决不了兼容性问题，那么就不要使用该css3属性

3D转换（变换）

3d移动 translate3d

3d移动在2d移动的基础上多加了一个可以移动的方向，就是z轴方向

语法：

1. transform:translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离
2. translform:translateX(100px) 仅仅是移动在x轴上移动
3. translform:translateY(100px) 仅仅是移动在Y轴上移动
4. translform:translateZ(100px) 仅仅是移动在Z轴上移动

注意:

因为z轴是垂直屏幕，由里指向外面，所以 默认是看不到元素在z轴的方向上移动，想要看到，可以使用下面的 视距 属性设置

视距 perspertive 了解

人在看物体时，有个规律，如 远的物体看起来小 近的物体看起来大

perspertive 就是用来设置 人 和 物体 的距离

如 我们想要看到 物体 在z轴上的移动 的 远大近小 效果时

1. 设置物体的 translateZ 一般大于 0 如 transform:translateZ(100px)
2. 设置 人和物体的距离 - 视距 这个值规定要设置给物体的父元素 perspertive:1000px
3. 动态改变物体的 translateZ 即可观察效果

    /* 父元素 */
    body {
      /* 视距 */
      perspective: 1000px;
    }

    /* 目标 */
    div {
      width: 200px;
      height: 200px;
      background-color: aqua;
      margin: 100px auto;
      /* z轴的移动 */
      transform: translateZ(0px);
    }

小结：translateZ的值和perspertive都要大于0 否则容易出现兼容性问题

3d旋转 rotate3d

3d旋转指可以让元素在3维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转 对于元素旋转的方向的判断 我们需要先学习一个左手准则

左手准则

比如要判断某元素沿着x轴是怎么旋转的

1. 左手的手拇指指向 x轴的正方向
2. 其余手指的弯曲方向就是该元素沿着x轴旋转的方向了

例子1

我现在想让元素沿着 x轴正方向旋转90度

    /* 沿着x轴正方向旋转90度 deg为单位 */
      transform: rotateX(90deg);

语法

1. transform:rotateX(45deg); 沿着x轴正方向旋转 45度
2. transform:rotateY(45deg) 沿着y轴正方向旋转 45deg
3. transform:rotateZ(45deg) 沿着Z轴正方向旋转 45deg
4. transform:rotate3d(x,y,z,deg) 沿着自定义轴旋转 deg为角度 了解即可

3D缩放 scale3d 了解

3d缩放 可以控制元素 在 x轴，y轴，z轴上的缩放，也可以理解为 宽，高，厚度的缩放。 结合3d模型工具学习

语法

1. transform: scale3d(1 ,1,2); 宽，高 缩放一倍，厚度放大两倍
2. transform: scaleX(1) 只缩放宽
3. transform: scaleY(1) 只缩放高
4. transform: scaleZ(1) 只缩放厚

视距原点 perspective-origin 了解

回顾视距知识点，视距可以设置 人 和 物体 之间的距离 也就是z轴方向的距离

而 视距原点 可以设置 人 站在x轴和y轴的位置。

1. 视距原点和视距一样，也是设置给要观察元素的父元素上
2. perspective-origin:center center; 默认值是元素的中心点
3. perspective-origin:10px； 指定了一个参数的时候，第二个参数默认为center 也就是50%；
4. perspective-origin:10% %； 百分比都是相对于自身的宽度和高度

转换样式 transform-style 了解

结合3d立方体案例理解，控制子元素是否开启3维立体环境

• transform-style: flat; 平面模式 - 不开启3维立体环境
• transform-style: preserve-3d; 3维立体环境

3D转换总结

1. 百分比单位都是相对于自身
2. 视距、视距原点、转换样式 这三个属性都是给父元素添加的

伪元素选择器

1. 伪元素种类

1. E::before 在E元素前插入一个元素
2. E::after 在E元素后插入一个元素
3. E::first-letter 选择到了E容器内的第一个字母
4. E::first-line 选择到了E容器内的第一行文本

2. h5写法和传统写法区别

1. 单冒号 E:before
2. 双冒号 E::before
3. 浏览器对以上写法都能识别 双冒号 是h5上语法的规范

3. 伪元素的注意事项

想要让伪元素有效，必须遵循以下注意事项

1. 伪元素只能给双标签加 不能给单标签加
2. 伪元素的冒号前不能有空格 如 E ::before 这个写法是错误的
3. 伪元素里面必须写上属性 content:"";

伪类选择符

E:first-child 匹配父元素的第一个子元素E。

E:last-child 则是选择到了最后一个li标签

E:nth-child(n) E:nth-last-child(n)

匹配到父元素的第n个元素 或者 是倒数第n个元素

相比 E:first-child 则要强大了不少，功能如下 （死记硬背是最好的）

匹配到父元素的第2个子元素 ：ul li:nth-child(2){}

匹配到父元素的倒数第2个子元素：ul li:nth-last-child(2){}

匹配到父元素的序号为奇数的子元素：ul li:nth-child(odd){} odd 是关键字 奇数的意思（3个字母 ）

匹配到父元素的序号为偶数的子元素：ul li:nth-child(even){} even（4个字母 ）

匹配到父元素的前3个子元素：ul li:nth-child(-n+3){}

选择器中的 n 是怎么变化的呢？因为 n是从 0 ，1，2，3… 一直递增，所以 -n+3 就变成了

• n=0 时 -0+3=3
• n=1时 -1+3=2
• n=2时 -2+3=1
• n=3时 -3+3=0
• …

匹配到父元素的后3个子元素：ul li:nth-last-child(-n+3){}

E:nth-of-type(n)

E:nth-child(n) 匹配父元素的第n个子元素E。

E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。

CSS初始化：

移动端 CSS 初始化推荐使用 normalize.css/（具体参见：个人GitHub）

移动端常用初始化样式

body {
 margin: 0 auto;
 min-width: 320px;
 max-width: 640px;
 background: #fff;
 font-size: 14px;
 font-family: -apple-system, Helvetica, sans-serif;
 line-height: 1.5;
 color: #666;
}

global.css

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 12px;
  background-color: #f1f1f1;
}

// 分析：
// 行高使用数字，方便子元素继承行高 1.5
body {
    font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
    color: #3c3c3c;
    background-color: #f4f4f4;
}

img {
    border: none;
    vertical-align: middle;
}

a {
  text-decoration: none;
  color: #3c3c3c;
}

i {
  font-style: normal;
}

button {
  outline: none;
  border: none;
}

table {
  /* 边框模式：合并的模式 */
  border-collapse: collapse;
}
th,td {
  padding: 0;
}

/*伪元素是行内元素 正常浏览器清除浮动方法*/
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
.clearfix {
  *zoom: 1;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

// 版心
.layer {
  width: 1200px;
  margin: 0 auto;
}

// 常用颜色：直接在页面元素添加class类名
.c4 {
  color: #f40;
}

.c5 {
  color: #f50;
}

.c6 {
  color: #8d7afb;
}

.c7 {
  color: #a8c001;
}

// 常用margin值
.mr7 {
  margin-right: .4375rem
}

.mr5 {
  margin-right: .3125rem
}

.mt10 {
  margin-top: .625rem
}

.mr10 {
  margin-right: .625rem
}



/* 使用媒体查询：动态计算根元素的字体大小 */

/*>=1024的设备屏幕*/
@media screen and(min-width: 1024px) {
  body {
    font-size: 12px
  }
}

/*>=1100的设备屏幕*/
@media screen and(min-width: 1100px) {
  body {
    font-size: 14px
  }
}

/*>=1280的设备屏幕*/
@media (min-width: 1280px) {
  body {
    font-size: 18px;
  }
}

/*>=1366的设备屏幕*/
@media screen and(min-width: 1366px) {
  body {
    font-size: 20px;
  }
}

/*>=1440的设备屏幕*/
@media screen and(min-width: 1440px) {
  body {
    font-size: 24px !important;
  }
}

/*>=1680的设备屏幕*/
@media screen and(min-width: 1680px) {
  body {
    font-size: 26px;
  }
}

/*>=1920的设备屏幕*/
@media screen and(min-width: 1920px) {
  body {
    font-size: 30px;
  }
}

福利：Photoshop 切图

常见的图片格式

1. jpg图像格式：
JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的

2. gif图像格式：
GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果

3. png图像格式
是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景

4. PSD图像格式
PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计草稿。

切图插件

• Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出， 以替代传统的手工 导出web
• 所用格式" 以及使用切片工具进行挨个切图的繁琐流程。 它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。 它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。
• 官网: http://www.cutterman.cn/zh/cutterman
• 注意： cutterman插件要求你的ps 必须是完整版，不能是绿色版，所以大家需要从新安装完整版本

CSS 的布局的三种机制: 普通流、浮动、定位

CSS属性书写顺序(重点)

建议遵循以下顺序：

1. 布局定位属性：display / position / float / clear / visibility / overflow

2. 自身属性：width / height / margin / padding / border / background

3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word

4. 其他属性（CSS3）：

   content / cursor / border-radius / box-shadow / text-shadow / background:lineargradient …

CSS3 部分新属性

1. 圆角边框(CSS3)

border‐radius:length;

其中每一个值可以为 数值或百分比的形式。
技巧： 让一个正方形 变成圆圈

border‐radius: 50%;

实现椭圆形：

• 就不要用 百分比了，因为百分比会是表示高度和宽度的一半。
• 而我们这里矩形就只用 用 高度的一半就好了。精确单位

2. 盒子阴影(CSS3)

box‐shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；

值	描述
h-shadow	必需；水平阴影的位置；允许负值
v-shadow	必需；垂直阴影的位置；允许负值
blur	可选；模糊距离
spread	可选；阴影的尺寸
color	可选；阴影的颜色；请参阅CSS颜色值
inset	可选；将外部阴影（outset）改为内部阴影

• 前两个属性是必须写的。其余的可以省略。
• 外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 inset

div {
    width: 200px;
    height: 200px;
    border: 10px solid red;
    /* box‐shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
    /* box‐shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影； */
    box‐shadow: 0 15px 30px rgba(0, 0, 0, .4);
}

3. CSS3盒子模型

传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding
CSS3盒子模型： 盒子的宽度 = CSS中设置的宽度width 里面包含了 border 和 padding

也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了。

选择哪个：传统or CSS3盒子模型？

• 移动端可以全部CSS3 盒子模型
• PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择 CSS3 盒子模型

/*CSS3盒子模型*/
box-sizing: border-box;

/*传统盒子模型*/
box-sizing: content-box;

4. 特殊样式

/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;

/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;

/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;

/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }

对比记忆：

1. 文字居中和盒子居中区别

1. 盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
2. 块级盒子水平居中 左右margin 改为 auto

行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距

text‐align: center; /* 文字 行内元素 行内块元素水平居中 */
margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以 */

2. 插入图片和背景图片区别

1. 插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
2. 背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position

img {
    width: 200px;/* 插入图片更改大小 width 和 height */
    height: 210px;
    margin‐top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
    margin‐left: 50px; /* 插入当图片也是一个盒子 */
}
div {
    width: 400px;
    height: 400px;
    border: 1px solid purple;
    background: #fff url(images/sun.jpg) no‐repeat;
    background‐position: 30px 50px; /* 背景图片更改位置 我用 background‐position */
}

3. 行内块 和 浮动

行内块（inline-block）：可以水平显示，不过 div 之间有间隙，不方便处理

div {
    display: inline‐block;
}

浮动：设置浮动属性，可以让 div 水平排列，并且没有间隙

第01节：常用CSS样式

子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

1. font:综合设置字体样式 (重点)

选择器 { font: font‐style font‐weight font‐size/line‐height font‐family;}

注意：

• 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
• 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性
  将不起作用。
• font-size 我们通常用的单位是px 像素，一定要跟上单位
• font-weight 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位
• font-style 记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal

2. line-height:行间距

作用：line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。

行高和高度的三种关系

• 如果 行高 等 高度 文字会 垂直居中
• 如果 行高 大于 高度 文字会 偏下
• 如果 行高小于高度 文字会 偏上

单位：line-height常用的属性值单位有三种

• 字母 line-height: normal

normal值多大呢？ 受浏览器和字体的影响  微软雅黑大概为 1.32

• 数字 line-height: 1.5（根元素常用数字：方便子元素继承行高。其他单位也可以继承，但继承的是计算后的值。）

举例说明：
情况一：body行高使用数字
body {
	font-size: 14px
	line-height: 1.5
}
// h3元素的行高(浏览器可以看到元素规格：宽*48)：1.5*32=48px
h3 {
	font-size: 32px
}
// p元素的行高(浏览器可以看到元素规格：宽*48)：1.5*20=30px
p {
	font-size: 20px
}

情况二：body行高使用百分比
body {
	font-size: 14px
	line-height: 150%
}
// h3元素的行高(浏览器看到元素规格：宽*21)，此时子元素继承的行高是计算之后的：14*1.5=21
h3 {
	font-size: 32px
}
// p元素的行高(浏览器看到元素规格：宽*21)，此时子元素继承的行高是计算之后的：14*1.5=21
p {
	font-size: 20px
}

*****************************************
// 行高使用数字，方便子元素继承行高 1.5；宋体（Unicode）：'\5b8b\4f53'
body {
    font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}

假设元素的字体大小：font-size: 16px
此时元素行高的值换算为px：1.5 * 16 = 24px

分别为像素px，实际工作中使用最多的像素px line-height: 50px

相对值em line-height: 5em

假设根元素的字体大小：font-size: 16px
此时行高的值换算为px：5 * 16 = 80px（1em = 16px）

百分比% line-height: 200%

假设根元素的字体大小：font-size: 16px
此时行高的值换算为px：2 * 16 = 32px

技巧：

一般情况下，行距比字号大7.8像素左右就可以了。
line‐height: 24px;

3. text-indent:首行缩进

作用：text-indent属性用于设置首行文本的缩进，
属性值：

• 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，
• 允许使用负值,
• 建议使用em作为设置单位。

1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度

p {
    /*行间距*/
    line‐height: 25px;
    /*首行缩进2个字 em 1个em 就是1个字的大小*/
    text‐indent: 2em;
}

4. text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

值	描述
none	默认。定义标准的文本。 取消下划线（最常用）
underline	定义文本下的一条线。下划线 也是我们链接自带的（常用）
overline	定义文本上的一条线。（不用）
line-through	定义穿过文本下的一条线。（不常用）

5. 链接伪类选择器（重点）

因为伪类选择器很多，比如链接伪类，结构伪类等等

1. 链接伪类选择器
   • a:link 未访问的链接
   • a:visited 已访问的链接
   • a:hover 鼠标移动到链接上
   • a:active 选定的链接

注意：

• 写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。否则可能引起错误。
• 记忆法：love hate 爱上了讨厌 lv 包包 非常 hao
• 因为叫链接伪类，所以都是 利用交集选择器 a:link a:hover
• 因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式

实际工作开发中，我们很少写全四个状态，一般我们写法如下：

重点记住 a{} 和 a:hover 实际开发的写法

a { /* a是标签选择器 所有的链接 */
    font‐weight: 700;
    font‐size: 16px;
    color: gray;
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
	color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}

6. CSS 背景(background)

6.1 背景颜色(color)

background‐color:颜色值; 默认的值是 transparent 透明的

6.2 背景图片(image)

小技巧： 我们提倡 背景图片后面的地址，url不要加引号。

background‐image : none | url (url)

background‐image : url(images/demo.png);

6.3 背景平铺（repeat）

background‐repeat : repeat | no‐repeat | repeat‐x | repeat‐y

参数	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

6.4 背景位置(position) 重点

background‐position : length || length
background‐position : position || position

参数	值
length	百分数
position	top | center | bottom | left | center | right 方位名词

注意：

• 必须先指定background-image属性
• position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
• 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
• 如果只指定了一个方位名词，另一个值默认居中对齐。
• 如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y
• 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
• 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

6.5 背景附着

背景附着就是解释背景是滚动的还是固定的

• scroll：背景图像是随对象内容滚动

• fixed：背景图像固定

background‐attachment : scroll | fixed

6.6 背景简写（重点掌握）

background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

background: transparent url(image.jpg) repeat‐y scroll center top ;

6.7 背景透明(CSS3) 后面必须是 4个值

background: rgba(0, 0, 0, 0.3);

• 最后一个参数是alpha 透明度 取值范围 0~1之间

• 我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);

• 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响

• 因为是CSS3 ，所以 低于 ie9 的版本是不支持的。

6.8 背景缩放 background-size

background-size 属性规定背景图像的尺寸

background-size: 背景图片宽度 背景图片高度

单位： 长度|百分比|cover|contain;

• cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
• contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

第02节：定位

注意事项：

• 一个行内的盒子，如果加了浮动、固定定位和绝对定位，

  不用转换，就可以给这个盒子直接设置宽度和高度等。

• 浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题

  也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了

定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。

定位 = 定位模式 + 边偏移；

在 CSS 中，通过 top 、 bottom 、 left 和 right 属性定义元素的边偏移：（方位名词）

注意事项：

• 边偏移需要和定位模式联合使用，单独使用无效
• top 和 bottom 不要同时使用；
• left 和 right 不要同时使用。

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素下边线的距离。
left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离

2.1 相对定位(relative) - 重要

相对定位是元素相对于它 原来在标准流中的位置 来说的。（自恋型）

相对定位的特点：（务必记住）

• 相对于 自己原来在标准流中位置来移动的
• 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

2.2 绝对定位(absolute) - 重要

绝对定位的特点：（务必记住）

• 不保留原来的位置，完全是脱标的。（完全脱标 —— 完全不占位置）
• 绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）
• 父元素没有定位，则以浏览器的左上角为准定位（Document 文档）。
• 父元素要有定位：将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

定位口诀 —— 子绝父相

2.2.1 绝对定位的盒子居中

注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。

在使用绝对定位时要想实现水平居中，可以按照下图的方法：

1. left: 50%; ：让盒子的左侧移动到父级元素的水平中心位置；
2. margin‐left: ‐100px; ：让盒子向左移动自身宽度的一半。(盒子：200*100)

2.3 固定定位(fixed) - 重要

固定定位是绝对定位的一种特殊形式： （认死理型）

固定定位的特点：（务必记住）

1. 完全脱标 —— 完全不占位置；
2. 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
3. 跟父元素没有任何关系；单独使用的
4. 不随滚动条滚动。

提示：IE 6 等低版本浏览器不支持固定定位。

第03节：堆叠顺序（z-index）

在使用定位布局时，可能会出现盒子重叠的情况。
加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。
应用 z‐index 层叠等级属性可以调整盒子的堆叠顺序

z‐index 的特性如下：

1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
2. 如果属性值相同，则按照书写顺序，后来居上；
3. 数字后面不能加单位。

注意： z‐index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效

第04节：CSS高级特性

4.1 元素的显示与隐藏

4.1.1 display 显示（重点）：

设置或检索对象是否及如何显示

display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思

特点： 隐藏之后，不再保留位置。

功能：配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛

4.1.2 visibility 可见性 (了解)

设置或检索是否显示对象。

visibility：visible ; 对象可视
visibility：hidden; 对象隐藏

特点： 隐藏之后，继续保留原有位置。（停职留薪）

4.2 overflow 溢出(重点)

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

实际开发场景：

1. 清除浮动
2. 隐藏超出内容，隐藏掉, 不允许内容超过父盒子

4.3 CSS用户界面样式

4.3.1 鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

属性值	描述
default	小白 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

<ul>
    <li style="cursor:default">我是小白</li>
    <li style="cursor:pointer">我是小手</li>
    <li style="cursor:move">我是移动</li>
    <li style="cursor:text">我是文本</li>
    <li style="cursor:not‐allowed">我是文本</li>
</ul>

4.3.2 轮廓线 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

outline : outline‐color ||outline‐style || outline‐width

最直接的写法是 ： outline: 0; 或者 outline: none;

<input type="text" style="outline: 0;"/>

4.3.3 防止拖拽文本域resize

实际开发中，我们文本域右下角是不可以拖拽：

<textarea style="resize: none;"></textarea>

4.4 vertical-align 垂直对齐

• 有宽度的块级元素居中对齐，是margin: 0 auto;

• 让文字居中对齐，是 text-align: center;

• vertical-align 垂直对齐，它只针对于行内元素或者行内块元素，

vertical‐align : baseline |top |middle |bottom

注意：

• vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，
• 特别是行内块元素， 通常用来控制图片/表单与文字的对齐

4.4.1 图片、表单和文字对齐

我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐

4.4.2 去除图片底侧空白缝隙

父盒子由图片撑开，图片下面会多出缝隙

原因：

• 图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。
• 就是图片底侧会有一个空白缝隙。

解决的方法就是：

• 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
• 给img 添加 display：block; 转换为块级元素就不会存在问题了。

4.4.3 文字溢出隐藏

/*1. 先强制一行内显示文本*/
white‐space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text‐overflow: ellipsis;

第05节：浮动

5.1 什么是浮动(float)

概念：元素的浮动是指设置了浮动属性的元素会

1. 脱离标准普通流的控制，不占位置，脱标
2. 移动到指定位置。

作用

1. 让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
2. 可以实现盒子的左右对齐等等…
3. 浮动最早是用来控制图片，实现文字环绕图片的效果

特性：

1. float属性会改变元素display属性

   任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

   生成的块级框和我们前面的行内块极其相似。

2. 浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐

5.2 浮动(float)的扩展

建议：如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题

5.2.1 浮动元素与父盒子的关系

• 子盒子的浮动参照父盒子对齐
• 不会与父盒子的边框重叠，也不会超过父盒子的内边距

5.2.2 浮动元素与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟盒子是：

• 浮动的，那么当前盒子会与前一个盒子的顶部对齐；
• 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方

牢记：浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流

5.3 清除浮动

5.3.1 为什么要清除浮动

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子

总结：

• 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
• 准确地说，并不是清除浮动，而是清除浮动后造成的影响

5.3.2 清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后，

父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

5.3.3 清除浮动的方法

使用after伪元素清除浮动

:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了

.clearfix:after { 
    content: ""; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}
 /* IE6、7 专有 */
.clearfix {
    *zoom: 1;
}

• 优点： 符合闭合浮动思想 结构语义化正确
• 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
• 代表网站： 百度、淘宝网、网易等

使用双伪元素清除浮动：

.clearfix:before,.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	*zoom:1;
}

• 优点： 代码更简洁
• 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
• 代表网站： 小米、腾讯等

5.3.4 清除浮动总结

我们以后什么时候用清除浮动呢？

1. 父级没高度
2. 子盒子浮动了
3. 影响下面布局了，我们就应该清除浮动了。

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义的标签，结构化较差。
父级overflow:hidden;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题
父级双伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题

后面两种伪元素清除浮动，大家暂且会使用就好， 深入原理，我们后面学完伪元素再讲

如何使用 CSS Tree 插件

1. 作用
   1. 将选定的HTML、JSX转化为 scss、less or css 默认为：scss
2. 用法
   1. 选中对应的 HTML/JSX
   2. Ctrl + shift + p
   3. 选择 Generate CSS tree

vscode同时编辑多处，多个光标快捷键

1. 关于颜色的css代码,把鼠标移动到这段代码上时，一个颜色选择器窗口就会显示出来,可以通过它来修改选择自己想要的颜色.
2. ctrl+shift+p 调出命令面板
3. alt+鼠标左键 选中多行同时编辑
4. ctrl+shift+L 选中编辑代码中相同的内容
5. 选中多行,按tab键可统一向右移动
6. 选中文本后,Ctrl + [ 和 Ctrl + ] 可实现文本的向左移动 和 向右移动
7. 选中一段文字，按shift+alt+i，在每行末尾都会出现光标
8. 按shift+alt，再使用鼠标拖动，也可以出现竖直的列光标，同时可以选中多列。
9. 按ctrl+f，可以搜索当前页面

css样式汇编总

1. 元素添加定位之后，宽度由内容撑开了

适用：小程序

page {
	padding-bottom: 90rpx;
}

.footer_tool {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 90rpx;
}

1. flex常识：作为伸缩盒子的子项，高度默认100%

   view {
   	display: flex;
   	view {
   	//=> 子项 高度默认100%
   		flex: 2;
   	}
   }
   

2. 快速生成view标签

   view{$}*100
   

常用样式

1.布局小技巧

1.1 通过添加空标签，实现内容之间的间隔

 <view class='height_20'></view>

.height_20{
  height: 20px;
}

1.2 实现下划线

 <view class='height_1 gray'></view>
  
.gray{
  background-color: #F0F0F0;
}
.height_1{
  height: 1px;
}

1.3 用一个空盒子，实现虚线效果

• 方法1：

 <view class='two_amone_left_amone'></view>

.two_amone_left_amone {
  height: 84rpx;
  width: 2rpx;
  border: 2rpx dashed #e6e6e6;
  margin-left: 16rpx;
}

• 方法2：

 <view class='Cost_Detailed_con'></view>

.Cost_Detailed_con::before {
  content: "";
  display: block;
  width: 10rpx;
  height: 40rpx;
  background: red;
  position: absolute;
  top: 0;
  left: -4rpx;
}

.Cost_Detailed_con::after {
  content: "";
  display: block;
  width: 10rpx;
  height: 90rpx;
  background: red;
  position: absolute;
  bottom: 0;
  left: -4rpx;
}

1.内容最多不能超过2行，超出部分以省略号代替…

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;

2.设置全局样式

.u-f,
.u-f-ac,
.u-f-ajc {
	display: flex;
}
.u-f-ac,
.u-f-ajc {
	align-items: center;
}
.u-f-ajc {
	justify-content: center;
}
.u-f-jsb {
	justify-content: space-between;
}

3.添加旋转动画

<image class = "rotation" />

.rotation {
	animation: rotation 12s linear infinite;
	-moz-animation: rotation 12s linear infinite;
	-webkit-animation: rotation 12s linear infinite;
	-moz-animation: rotation 12s linear infinite;
}

@keyframes rotation {
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}

4.页面遮罩层

.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	text-align: center;
	background: rgba(0,0,0,0.6);
}

5.弹性布局

<view class="musicList_container">
    <view class="musicList_index">左边</view>
    <view class="musicList_info">右边占剩余空间1份</view>
</view>

为什么设置 width: 0 ？

如果当前内容的宽度很大，超出父元素剩余空间，那么就不会按照 flex-grow: 1; 这个比例去分配剩余空间
这时需要设置 width: 0; 这样就不会按照原有内容的宽度分配剩余空间，
而是按照弹性盒模型设置的比例分配 flex-grow: 1

.musicList_container {
	display: flex;
  	align-items: center;
}
.musicList_index {
	 width: 80rpx;
}
.musicList_info {
  flex-grow: 1;
  width: 0;
}

6.高斯模糊效果

• 方法1

 image {
 	// 高斯模糊
 	filter: blur(10rpx);
 }

• 方法2

<view class="player_container" style="background:url({{picUrl}}) center/cover no-repeat"></view>
<view class="player_mask"></view>

.player_container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  filter: blur(40rpx);
  opacity: 0.5;
  z-index: -1
}
.player_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #222;
  z-index: -2
}

7.三角形

1. 我们用css 边框可以模拟三角效果
2. 宽度高度为0
3. 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
4. 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;

<div class="myTriangle"></div>  

  .myTriangle {
      width: 0px;
      height: 0px;
      line‐height:0；
	  font‐size: 0;
      border: 40px solid;
      border-top-color: transparent;
      border-left-color: transparent;
      border-right-color: transparent;
      border-bottom-color: red;
}