CSS 学习笔记

1 CSS 引入方式

内部样式表：建议在 html 文件中的 <head> 里使用 <style></style> 包围

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
		/* CSS*/
    </style>
</head>

<body>

</body>

</html>

行内样式表：元素标签内部使用 style 属性设定 CSS 样式
```
<p style="color: red;"></p>
```

外部样式表：单独写到 CSS 文件中，在 HTML 页面使用 <link> 引入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="CSS 文件路径">
</head>

<body>

</body>

</html>

2 CSS 基础选择器

2.1 标签选择器

用 HTML 标签名作为选择器：

标签名 {
	属性: 属性值;
}

例如：

p {
    color: red;
}

优点：快速为同类型标签同一设置样式
缺点：不能设计差异化样式

2.2 类选择器

用类名作为选择器，使用样式时在属性加上 class="类名..."：
```
.类名 {
    属性: 属性值;
}
```
例如：
```
.red {
    color: red;
}
```

2.3 id 选择器

用 id 作为选择器

#id {
    属性: 属性值;
}

例如：

#nav {
    color: red;
}

2.4 通配符选择器

使用 * 作为选择器，为所有元素增加样式
```
* {
    属性: 属性值;
}
```

3 CSS 字体属性

3.1 字体系列

从前到后依次检查，如果适配则使用

font-family: 字体1, 字体2, 字体3, ...;

例如：

font-family: "Microsoft Yahei";

3.2 字体大小

```
font-size: 像素值;
```
例如：
```
font-size: 20px;
```

3.3 字体粗细

```
font-weight: normal | bold | bolder | lighter | number;
```
推荐使用数字，常用的：400（normal），700（bold）

3.4 文字样式

```
font-style: 文本风格;
```
属性值作用

normal 默认

italic 倾斜

属性值	作用
`normal`	默认
`italic`	倾斜

3.5 字体复合属性

font: font-style font-weight font-size/line-height font-family;

不能更改顺序，font-size 和 font-family 不能省略

4 CSS 文本属性

4.1 文本颜色

```
color: 颜色值;
```
表示方式属性值

预定义颜色值 red, green, blue, ...

十六进制 #ff0000

RGB 代码 rgb(255, 0, 0) 或 rgb(100%, 0%, 0%)

表示方式	属性值
预定义颜色值	`red`, `green`, `blue`, ...
十六进制	`#ff0000`
RGB 代码	`rgb(255, 0, 0)` 或 `rgb(100%, 0%, 0%)`

4.2 对齐文本

```
text-align: left | right | center;
```
水平对齐方式

4.3 装饰文本

text-decoration: none | underline | overline | line-through

4.4 文本缩进

text-indent: 像素值px或相对单位em;

首行缩进

4.5 行间距

```
line-height: 像素值px;
```
行间距包括：上下间距 + 文本高度 > 文本高度

5 Emmet 语法

5.1 快速生成 HTML 结构语法

生成标签：标签名 + tab，例如：div + tab
生成多个相同标签：标签名*数量 + tab，例如：div*3 + tab
父子级标签：在父子间插入 >，例如：ul>li
兄弟级标签：在兄弟间插入 +，例如：div+p
带类名或 id 名：在标签后插入 .类型 或 #id名，例如：p.one + tab
有顺序的类名：在类名后插入 $*数量，例如：.demo*5
生成的标签默认内容：在标签后插入 {} 并在里面写入内容，例如：div{内容}

5.2 快速生成 CSS 样式语法

直接缩写：w100 生成 width: 100px

6 CSS 复合选择器

6.1 后代选择器

```
元素1 元素2 {}
```
元素 1 是父级，元素 2 是后代

例如：
```
ol li {}
```

6.2 子选择器

```
父级>子级 {}
```
父级与子级关系相邻，对孙级及以后不起作用
例如：
```
.nav>a {}
```

6.3 并集选择器

```
元素1, 元素2 {}
```
例如J：
```
div, p {}
```

6.4 伪类选择器

链接伪类选择器

a:link {} /*选择所有未被访问的链接*/
a:visited {} /*选择所有已被选择的链接*/
a:hover {} /*选择鼠标指针位于其上的链接*/
a:active {} /*选择活动链接（鼠标按下不放的链接）*/

顺序不要颠倒

`:focus` 伪类选择器

```
input:focus {}
```

7 CSS 元素显示模式

7.1 块元素

特点：
- 独占一行
- 高度、宽度、外边距及内边距可以控制
- 宽度默认是父级的尺寸
- 是一个容器及盒子，内部可以放行内和块元素

7.2 行内元素

特点：
- 相邻行内元素在一行上
- 高宽设置无效
- 默认宽度是内容宽度
- 行内元素只能放文本或行内元素

7.3 行内块元素

特点：
- 一行可以放多个
- 默认宽度是内容宽度
- 高度、宽度、外边距及内边距可以控制

7.4 元素显示模式转换

样式中设置：

display: block | inline | inline-block;

8 CSS 的背景

8.1 背景颜色

```
background-color: transparent | color;
```

8.2 背景图片

```
background-image: none | url(url);
```

8.3 背景平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y;

8.4 背景图片位置

background-position: x y;

x y 可以使用方位名词或精确单位

例如：

/*x y 使用方位名词时顺序无关，缺省为居中*/
background-position: center top;
background-position: right;
/*x y 使用精确单位时顺序有关，缺省为 y 居中*/
background-position: 20px 50px;
background-position: 20px;

8.5 背景图片固定（背景附着）

```
background-attachment: scroll | fixed;
```

8.6 背景复合写法

background: color image repeat attachment position

和 text 不一样，background 没有固定顺序

8.7 背景色半透明

```
background: rgba(r, g, b, a);
```
a 是透明度，取值在

9 CSS 三大特性

9.1 层叠性

相同选择器与样式后配置生效

9.2 继承性

子标签继承父标签样式

9.3 优先级

选择器	权重
继承或 `*`	0, 0, 0, 0
元素选择器	0, 0, 0, 1
类选择器，伪类选择器	0, 0, 1, 0
ID 选择器	0, 1, 0, 0
行内样式 `style=""`	1, 0, 0, 0
`!important`	无穷大

10 盒子模型

盒子模型包括：边框、外边框、内边距和实际内容

10.1 边框

组成：边框宽度、边框样式和边框颜色

border: border-width || border-style || border-color;

样式常用：
```
border-style: solid | dashed | dotted;
```
复合写法：

border: border-width border-style border-color;

没有先后顺序

分开写法：

border-top | border-bottom | border-left | border-right:;

表格细线边框：collapse 合并相邻边框
```
border-collapse: collapse;
```

10.2 内边距

分开写法：

padding-top | padding-bottom | padding-left | padding-right:;

复合写法：

/*1 个值，代表上下左右*/
padding: 5px;
/*2 个值，代表上下，左右*/
padding: 5px 10px;
/*3 个值，代表上，左右，下*/
padding: 5px 10px 20px;
/*4 个值，代表上，右，下，左（顺时针）*/
padding: 5px 10px 20px 30px;

10.3 外边距

分开写法：

margin-top | margin-bottom | margin-left | margin-right:;

复合写法：与内边距一致
盒子水平居中：
```
margin: 0 auto;
```

10.4 盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset

值描述

h-shadow 水平阴影位置

v-shadow 垂直阴影位置

blur 模糊距离

spread 阴影尺寸

color 颜色

inset 外部阴影改为内部阴影

值	描述
`h-shadow`	水平阴影位置
`v-shadow`	垂直阴影位置
`blur`	模糊距离
`spread`	阴影尺寸
`color`	颜色
`inset`	外部阴影改为内部阴影

11 CSS 浮动

```
float: none | left | right;
```
浮动特性：
- 浮动元素会脱离标准流，不再保留原先的位置
- 多个浮动元素按照属性值一行内显示，且顶端对齐
- 浮动元素具有行内块元素特性
清除浮动：
```
clear: left | right | both;
```

清除浮动方法：

额外标签法：额外块标签应用清除浮动
- ```
.clear {
    clear: both;
}
```
父级添加 overflow 属性
- ```
overflow: hidden;
```

父级添加 after 伪元素

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    *zoom: 1;
}

父级添加双伪元素

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

12 CSS 定位

定位组成：定位模式 + 边偏移

12.1 定位模式

position: static | relative | absolute | fixed;

静态定位 `static`

与标准流一致，很少使用

相对定位 `relative`

相对于原来位置来说
原位置依然占用

绝对定位 `absolute`

相对祖先元素来说
祖先元素需要有定位（除去静态定位）子代才能相对祖先，否则相对浏览器
原位置不占用

固定定位 `fixed`

相对于浏览器可视窗口
原位置不占用

粘性定位 `sticky`

相对于浏览器可视窗口
原位置依然占用
必须添加边偏移

12.2 边偏移

```
top | bottom | left | right:;
```

12.3 定位叠放次序 `z-index`

控制重叠盒子的前后次序，数值越大越靠上
```
z-index: 1;
```

13 CSS 高级技巧

13.1 精灵图

background: color url(url) repeat x y;

13.2 字体图标

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?p4ssmb');
    src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
        url('fonts/icomoon.woff?p4ssmb') format('woff'),
        url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

13.3 三角

width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 10px solid transparent;
border-left-color: pink;

13.4 CSS 用户界面样式

鼠标样式 `cursor`

cursor: default | pointer | move | text | not-allowed;

轮廓线 `outline`

```
outline: 0 | none;
```

防止拖拽文本域 `resize`

```
resize: none;
```

`vertical-align` 属性应用

设置图片或表单和文字垂直对齐，只针对行内元素或行内块元素有效

vertical-align: baseline | top | middle | bottom;

溢出文字省略号显示

单行文本溢出显示省略号

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行文本溢出显示省略号

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

14 常见布局技巧

marign 负值的运用：消除相邻边框重叠
文字围绕浮动元素
行内块的运用：运用天然的行内块间间隔

CSS 三角强化：

width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;

15 CSS 初始化

消除不同浏览器对 HTML 文本显示的差异

* {
    margin: 0;
    padding: 0;
}

em,
i {
    font-style: normal;
}

li {
    list-style: none;
}

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

button {
    cursor: pointer;
}

a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #c81623;
}

button,
input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", ...;
}

body {
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, ...;
    color: #666;
}

.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0;
}

.clearfix {
    *zoom: 1;
}

16 CSS3 新特性

新增选择器

属性选择器：注意 val 要带引号

/*选择具有 att 属性的 E 元素*/
E[att]
/*选择具有 att 属性的 val = E 元素*/
E[att=val]
/*选择具有 att 属性的 val 开头的 E 元素*/
E[att^=val]
/*选择具有 att 属性的 val 结尾的 E 元素*/
E[att$=val]
/*选择具有 att 属性的含有 val 的 E 元素*/
E[att*=val]

结构伪类选择器

/*父元素中第一个子元素 E*/
E:first-child
/*父元素中最后一个子元素 E*/
E:last-child
/*父元素中第 n 个子元素 E, n 可以是数字或者 even | odd 关键字，或者是公式 n （从 0 开始）等*/
E:nth-child(n)
/*指定类型 E 的第一个*/
E:first-of-type
/*指定类型 E 的最后一个*/
E:last-of-type
/*指定类型 E 的第 n 个*/
E:nth-of-type(n)

伪元素选择器

选择符简介

::before 在元素内部的前面插入内容

::after 在元素内部的后面插入内容
- 必须有 content 属性

选择符	简介
`::before`	在元素内部的前面插入内容
`::after`	在元素内部的后面插入内容

盒子模型

```
box-sizing: content-box | border-box;
```

过渡

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

2D 转换

移动 translate：不影响其他元素位置

transform: translate(x, y);

分开写：

transform: translateX(n);
transform: translateY(n);

旋转 rotate：不影响其他元素位置。单位是 deg，顺时针为正，旋转中心为元素中心点
```
tranform: rotate(度数deg);
```
转换中心点：像素或方位名词
```
transform-origin: x y;
```
缩放 scale：不影响其他元素位置。同时也可以设置中心点，方法同上
```
/*分别缩放*/
transform: scale(x, y);
/*同时缩放*/
transform: scale(a);
```
2D 转换综合写法：最终效果与顺序有关
```
transform: translate() rotate() scale() ...;
```

动画

定义动画

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    
    ...
    
    100% {
        width: 200px;
    }
}

只有起始和结束时也可以使用 from 和 to

@keyframes 动画名称 {
    from {
        width: 100px;
    }
    
    to {
        width: 200px;
    }
}

使用动画

animation-name: 动画名称;
animation-duration: 持续时间;

动画常用属性

属性	描述
`@keyframes`	定义动画
`animation`	动画属性简写
`animation-name`	动画名称
`animation-duration`	动画周期
`animation-timing-function`	速度曲线
`animation-delay`	何时开始
`animation-iteration-count`	播放次数，例：`infinite`
`animation-direction`	是否在下一周期逆向播放，例：`alternate`
`animation-play-state`	是否正在运行或暂停，例：`pause`
`animation-fill-mode`	结束后状态，例：`forwards`

动画简写：

animation: name duration function delay times direction fill-mode;

速度曲线：

值	描述
`linear`	匀速
`ease`	默认。低速到加快到变慢
`ease-in`	低速开始
`ease-out`	低速结束
`ease-in-out`	低速开始和结束
`steps()`	间隔数量

3D 转换

三维坐标系：左手坐标系，向右为 x 正方向，向下为 y 正方向

移动 translate3d

transform: translateX(px);
transform: translateY(px);
transform: translateZ(px);
transform: translate3d(x, y, z);

透视 perspective：写在被观察元素父元素上
```
perspective: 500px;
```

rotate3d

transform: rotateX(deg);
transform: rotateY(deg);
transform: rotateX(deg);
transform: rotate3d(x, y, z, deg);

3D 呈现 transform-style：写在被观察元素父元素上
```
transform-style: preserve-3d;
```

浏览器私有前缀

私有前缀：
- -moz-：firefox
- -ms-：ie
- -webkit-：safari、chrome
- -o-：Opera
  
  即同一个属性需要写多个不同前缀的属性

17 移动端

二倍图

背景缩放：

background-size: width, height;

或

background-size: cover | contain;

二倍精灵图

偏移坐标设为缩放后的坐标，同时设置缩放后的精灵图尺寸

特殊样式

清除点击高亮：

* {
    -webkit-tap-highlight-color: transparent;
}

清除默认外观：

input {
    -webkit-appearance: none;
}

禁用长按页面时的弹出菜单：

img, a {
    -webkit-touch-callout: none;
}

常见布局

流式布局（百分比布局）

设置拉伸时宽度限制
```
max-width: px;
min-width: px;
```

常见初始化样式

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;
}

flex 布局

常见父项属性

flex-direction: row | row-reverse | column | column-reverse; 主轴方向
jusify-content: flex-start | flex-end | center | space-around | space-between; 主轴子元素排列方式
flex-wrap: nowrap | wrap; 子元素是否换行
align-content: flex-start | flex-end | center | space-around | space-between | stretch; 侧轴子元素排列方式（多行）
align-items: flex-start | flex-end | center | stretch; 侧轴子元素排列方式（单行）
flex-flow: flex-direction flex-wrap; 复合属性

常见子项属性

flex: 剩余空间中子项占的份数
align-self: 控制子项自己在侧轴的排列方式
order: 子项的排列顺序，默认是 0, 数字越小越靠前

背景线性渐变

background: linear-gradient(起始方向, 颜色1, 颜色2, ...);
background: -webkit-linear-gradient(left, red, blue);
background: -webkit-linear-gradient(left top, red, blue);

rem 适配布局

基础知识
- em：相对父元素
- rem：root em。相对 html 元素
媒体查询
```
@media mediatype and | not | only (media feature) {}
```
- mediatype：all | print | screen
- media feature：width | min-width | max-width

引入资源

<link rel="stylesheet" href="" media="mediatype and | not | only (media feature)">

rem 适配方案

less 基础

less 变量
```
@变量名: 值;
```
less 编译

less 嵌套

.father {
    .son {
        
    }
}

.ele {
    &:hover {
        
    }
    
    &::before {
        
    }
}

less 运算：+、-、*、/（不是整除）以及括号 ()
```
@border: 5px + 5;
@color: #666 - #444;
```
- 只有一个数有单位，则以有单位的为准
- 两个数有单位，则以第一个为准
rem 实际开发适配方案
- rem + 媒体查询 + less 技术
  - 设计稿常见尺寸宽度
    
    设备常见宽度
    
    iphone 45 640px
    
    iphone 678 750px
    
    Android 320px, 360px, 375px, 384px, 400px, 414px, 500px, 720px
  - ```
  html {
      font-size: 屏幕宽度 / 划分份数;
  }
```
- 元素 rem 值：实际 px 值 / font-size
- flexible.js + rem
  - 引入 js 文件：
```
<script src="js/flexible.js"></script>
```

设备	常见宽度
iphone 45	640px
iphone 678	750px
Android	320px, 360px, 375px, 384px, 400px, 414px, 500px, 720px

响应式开发

设备划分	尺寸区间	设置
超小屏幕（手机）	< 768px	100%
小屏设备（平板）	>= 768px, < 992px	750px
中等屏幕（桌面显示器）	>= 992px, < 1200px	970px
宽屏设备（大桌面显示器）	>= 1200px	1170px

布局容器

<div class="container"></div>

使用媒体查询对不同尺寸作区别

.container {
    width: ;
}

bootstrap 栅格系统

	< 768px	>=768px	>=992px	>=1200px
.container 最大宽度
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列数	12	12	12	12

<div class="container">
	<div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
    </div>
</div>

列嵌套：使用行包裹，去掉父元素内边距，高度自动对齐

<div class="container">
    <div class="row">
    	<div class="col-md-4">
            <div class="row">
                <div class="col-md-6"></div>
            	<div class="col-md-6"></div>
            </div>
        </div>
    </div>
</div>

列偏移

<div class="container">
	<div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4 col-md-offset-4"></div>
    </div>
</div>

列排序

<div class="container">
	<div class="row">
        <div class="col-md-4 col-md-push-8"></div>
        <div class="col-md-8 col-md-pull-4"></div>
    </div>
</div>

响应式工具

.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
.visible-xs
.visible-sm
.visible-md
.visible-lg

`vw` | `vh` | `vmin` | `vmax`

1 vw = 1 / 100 视口宽度
1 vh = 1 / 100 视口高度
vmin = min(vw, vh)
vmax = max(vw, vh)

1 CSS 引入方式
2 CSS 基础选择器
2.1 标签选择器
2.2 类选择器
2.3 id 选择器
2.4 通配符选择器
3 CSS 字体属性
3.1 字体系列
3.2 字体大小
3.3 字体粗细
3.4 文字样式
3.5 字体复合属性
4 CSS 文本属性
4.1 文本颜色
4.2 对齐文本
4.3 装饰文本
4.4 文本缩进
4.5 行间距
5 Emmet 语法
5.1 快速生成 HTML 结构语法
5.2 快速生成 CSS 样式语法
6 CSS 复合选择器
6.1 后代选择器
6.2 子选择器
6.3 并集选择器
6.4 伪类选择器
7 CSS 元素显示模式
7.1 块元素
7.2 行内元素
7.3 行内块元素
7.4 元素显示模式转换
8 CSS 的背景
8.1 背景颜色
8.2 背景图片
8.3 背景平铺
8.4 背景图片位置
8.5 背景图片固定（背景附着）
8.6 背景复合写法
8.7 背景色半透明
9 CSS 三大特性
9.1 层叠性
9.2 继承性
9.3 优先级
10 盒子模型
10.1 边框
10.2 内边距
10.3 外边距
10.4 盒子阴影
11 CSS 浮动
12 CSS 定位
12.1 定位模式
12.2 边偏移
12.3 定位叠放次序 z-index
13 CSS 高级技巧
13.1 精灵图
13.2 字体图标
13.3 三角
13.4 CSS 用户界面样式
14 常见布局技巧
15 CSS 初始化
16 CSS3 新特性
新增选择器
盒子模型
过渡
2D 转换
动画
3D 转换
浏览器私有前缀
17 移动端
二倍图
二倍精灵图
特殊样式
常见布局