CSS学习笔记整理具体用法：https://www.w3school.com.cn/css/css_selector_a

CSS 简介

CSS(Cascading Style Sheet) 层叠样式表
用于描述如何显示HTML元素，设计网页的风格和布局
解决内容与表现分离的问题

CSS 语法

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明：

引入 CSS 样式的方式

行内样式

直接对 HTML 标签使用 style 作为该标签的属性。
如下：

<div style="background-color: rgb(113, 80, 80); color: red;">
    div1
</div>

优点：样式和 html 在一起，网页构建的时候直接能读取样式，渲染网页速度较快。
缺点：1. 需要在每个 style 属性里面写样式，不方便编写和维护；
2. 样式不能复用，冗余的样式代码太多，造成 html 文件体积增大。

内部样式（内嵌样式）

将 CSS 代码写在<style>标签之间。
如下：

<style>
    .box1 {
    background-color: rgb(113, 80, 80); 
    color: red;
    }
</style>

外部样式（主流推荐）

把 css 样式写在单独的 .css 样式文件里面，通过<link>标签引入外面的 css 样式文件。
如下：

<link rel="stylesheet" type="text/css" href="./css/index.css">

link 标签可以将当前网页和外部文件资源关联在一起，通常放在 head 标签里面。常见用于引入 css 样式文件。
rel 必填属性，规定当前文件与被链接文件/资源之间的关系。
href 必填，外部文件的地址，可以是本地路径或者网络地址。
type 加载外部文件的类型，可以省略。

优点：实现了 HTML 代码和 CSS 代码的完全分离，可以多个文件引入样式，方便编写和维护。
缺点：需要额外加载 CSS 样式文件，相比直接在 HTML 的样式渲染要慢一些（渲染速度差距一般是 ms 级别，所以可以不用考虑这一点）。

导入样式

@import url( ) 导入外部样式，与link标签比较类似。
如下：

<style>
    @import "./css/index.css";
</style>

必须在第一行导入，可以导入多个样式文件。

link 标签引入样式，在加载的 HTML 结构的同时加载 CSS 文件。
@import 引入样式，先加载的 HTML 结构再加载 CSS 文件，如果 CSS 文件比较大，可能会出现网页加载完成没有样式。

选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

通用选择器

* {
    margin: 0;
    padding: 0;
}

特点：可以控制全局，多用于清除全局默认样式。

标签选择器

p {
    text-align: center;
    color: red;
}

特点：牵一发而动全身，不建议大量使用。

id 选择器

这条规则将应用于 id="para1"的元素：

#para1 {
    text-align: center;
    color: red;
}

注：id 名称不能一数字开头。
特点：元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素。

类选择器

在此例中，所带有 class="center" 的 HTML 元素将为红色且居中对齐：

.center {
    text-align: center;
    color: red;
}

特点：一个元素可以无限添加类别，操作灵活，推荐使用。

分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

h1,
h2,
p {
    text-align: center;
    color: red;
}

特点：能同时操作多个选择器，从而控制多个不同元素。

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

用法：

具体用法：www.w3school.com.cn/css/css_sel…

组合选择器

CSS 中有四种不同的组合器：

后代选择器 (空格)
子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器 (~)

后代选择器

后代选择器又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。

用法:
使用 h1 em {color: red;}
上面这个规则会把作为 h1 元素后代的 em 元素的文本变为红色。

第一个important将变为红色。

注：两个元素之间的层次间隔可以是无限的。
例如：
使用 ul em {color: gray;}

1-3-2将变成灰色。

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。
两元素之间不能有断层。

用法:
使用 h1 > strong {color:rad;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

实例1：

<html>
<head>
    <style>
        h1 + p {
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <h1>This is a heading.</h1>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
</body>
</html>

实例2：

<html>
<head>
    <style>
        li + li {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
      <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ol>
    </div>
</body>
</html>

通用兄弟选择器

通用兄弟选择器选择与指定元素同级的所有元素。

实例：
下面的例子选择属于<div>元素的同级的所有<p>元素：

<html>
<head>
    <style>
        div ~ p {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>通用的兄弟选择器（~）选择指定元素后的所有同级元素。</p>
    <p>段落 1。</p>
    <div>
      <p>段落 2。</p>
    </div>
    <p>段落 3。</p>
    <code>一些代码。</code>
    <p>段落 4。</p>
</body>
</html>

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

链接伪类选择器

:link /* 未访问的链接（鼠标没点击过）*/
:visited /* 已访问的链接（鼠标已点击过）*/
:hover /* 鼠标悬停的链接 */
:action /* 已选中的链接（鼠标点击没松开）*/

注意：顺序不能颠倒，要按照 lvha 的顺序。记忆：lv包包非常好。

在实际工作中，一般只需用到 :hover伪类选择器即可。

也可以用在其他元素上添加效果。

结构（位置）伪类选择器

:first-child：选取属于其父元素的首个子元素的选择器。
:last-child：选取属于其副元素的最后一个子元素的选择器。
:nth-child：选取属于其副元素的第n个子元素。括号里的n可以是具体的数字；可以是 even 偶数、odd 奇数；还可以是 n 的表达式：n（全选）、2n（选偶数）、2n+1（选奇数）、3n（选3的倍数）、-n+3（选前三个）等。
:nth-last-child：和 :nth-child 的选择规则相同，只不过从最后一个子元素开始倒过来选取。

实例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*li:first-child {  选择第一个孩子
            color:pink;
        }
        li:last-child {  选择第七个孩子
            color:purple;
        }
        li:nth-child(4) {  选择第四个孩子  
            color:skyblue;
        }*/
        
        li:nth-child(even) { /*选择所有的偶数孩子*/
            color:pink;
        }
        li:nth-child(2n-1) { /*选择所有的奇数孩子*/
            color:purple;
        }
        li:nth-child(3n) { /*选择所有为3的倍数的孩子*/   
            color:skyblue;
        }
    </style>
</head>
<body>
    <ul>
        <li>第一个孩子</li>
        <li>第二个孩子</li>
        <li>第三个孩子</li>
        <li>第四个孩子</li>
        <li>第五个孩子</li>
        <li>第六个孩子</li>
        <li>第七个孩子</li>
    </ul>
</body>
</html>

其他伪类选择器

:target 目标伪类选择器：选择器可用于选取当前活动的目标元素。

:focus 获取焦点的伪类选择器。 input: focus { color: red; }

伪元素选择器

CSS2.1 版本的伪元素和伪类都是冒号，不好区分。为了区分这两种选择器，CSS3规定伪元素用 :: 。

E::first-letter：选取文本的第一个单词或字。
E::first-line：选取文本的第一行。
E::selection：可改变选中文本的样式。
E::before 和 E::after：在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须结合 content 属性使用。

div::before {
    content: "开始"；
}
div::after {
    content: "结束";
}

选择器优先级

优先级：是指不同类别样式的权重比较。

权重：用四位的数字串来表示权重的大小，有四个级别，值从左到右，越往左越大，一级大于一级，数位之间没有进制，级别之间不可超越。

注意：
1. 数位之间没有进制，比如：0,0,0,5 + 0,0,0,5 = 0,0,0,10 而不是 0,0,1,0，所以不存在 10 个标签选择器能赶上一个类选择器的情况。
2. 继承的权重为 0。
3. 权重可以叠加。

优先级总结

1. 使用了 !imprtant 声明的规则。
2. 内嵌在 HTML 元素的 style 属性里的声明。
3. 使用了 id 选择器的规则。
4. 使用了类选择器、属性选择器、伪类选择器和伪元素选择器的规则。
5. 使用了标签选择器的规则。
6. 只包含一个通用选择器的规则。
7. 继承得来样式。
8. 同一类型选择器则遵循就近原则（后写的会覆盖先写的样式）。

总结排序：!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通用选择器 > 继承

属性

单位

px：像素，绝对单位。
em：相对单位，相对于父元素的字体大小。由于浏览器默认字体大小是16px，字体的大小是可以继承，所以默认 1em = 16px。
rem：相对单位，相对于根元素的字体大小。
vw：相对单位，相对于视口宽度的 1%。视口（Viewport）= 浏览器窗口的尺寸。如果视口为 50 厘米宽，则 1vw = 0.5 厘米。
vh：相对单位，相对于视口高度的 1%。

背景

背景颜色

background-color 属性指定元素的背景色。

颜色通常由以下方式指定：

有效的颜色名称 - 比如 red。
十六进制值 - 比如 #ff0000。
rgb 值 - 比如 rgb(255, 0 , 0)。
rgba 值 - 比如 rgba(0, 255, 0, 0.4)。在 rgb 的基础上多一个透明度的变化，a 的变化是 0-1 之间，0 是全透明，1 是不透明。可以实现颜色透明度的变化。
transparent 背景透明，默认值。

背景图片

background-image 属性指定用作元素背景的图像。
background-image: url(./imgs/shop_15.jpg);

背景重复

默认情况下，background-repeat 属性引入的图片会在 div 盒子里水平和垂直方向上重复平铺。

repeat-x 水平方向平铺。
repeat-y 垂直方向平铺。
no-repeat 不平铺，只显示 1 张背景图。

背景位置

background-position: x y;
x，y 的值可以是 px，百分比（如30%）。可以为负数，负数代表反方向。
可以是方位名词：left、center、right，top、center、bottom。如果方位名词只写一个，另一个默认为 center。
background-position: center 20px;

背景附着

background-attachment 属性指定背景图片是滚动还是固定的（不会随页面的其余部分一起滚动）。

scroll：滚动。
fixed：固定（默认）。

简写背景属性

例如：
background: #333 url(image.jpg) no-repeat fixed center -25px;

背景缩放

background-size 属性可以设置背景图片的尺寸。

其参数设置如下：

可以设置长度单位（px）或百分比。
cover：自动调整缩放比例，保证图片始终填充满背景，溢出部分会被隐藏。
contain：自动调整缩放比例，保证图片完整显示在背景区域。图片进行等比例缩放，如果图片的高度或宽度有一个和盒子一样大了，就不会再缩放。

多背景

以逗号分隔可以设置多背景，可用于自适应布局。

一个元素可以设置多重背景。
每组属性间使用逗号分隔。
如果设置的多重背景图存在重叠，则前面的背景图会覆盖在后面的背景图上。
为了避免背景色将图像盖住，背景色通常都定义在最后一组上。

文本

文本颜色和背景色

color 属性和 background-color 属性：

文本对齐

text-align 属性用于设置文本的水平对齐方式。

垂直对齐

vertical-align 属性设置元素的垂直对齐方式。调整该元素和其他文本元素的对齐线（只针对行内元素和行内块元素有效）。

文本方向

direction 和 unicode-bidi 属性可用于更改元素的文本方向。
属性值：
ltr(默认) 从左往右，需要配合 unicode-bidi: bidi-override 改变字符方向。
rtl 从右往左。

文字装饰

text-decoration 属性用于设置或删除文本装饰。
text-decoration: none; 通常用于从链接上删除下划线。

属性值：
none 没有任何装饰。
underline 下划线，在文字底部添加线条。
overline 上划线，在文字顶部添加线条。
line-through 删除线，在中部添加线条。

文本转换

text-transform 属性用于指定文本中的大写和小写字母。

属性值：
uppercase 全转大写。
lowercase 全转小写。
capitalize 首字母转大写。

文字间距

字母间距（也适用于中文字符）：letter-spacing: 10px;
单词间距（默认以空格区分单词）： word-spacing: 10px;

首行缩进

首行缩进：为两个中文字符的宽度。
text-indent: 2em;

行间距

行间距：两行文本的基线与基线之间的距离。默认为 font-size 的 1.2 倍。
行距 = line-height 减 font-size。

文本阴影

text-shadow 属性为文本添加阴影。

字体

字体样式

font-style 属性主要用于指定斜体文本。

属性值：
normal (默认)普通样式。
italic 文本以斜体显示。

字体粗细

font-weight 属性指定字体的粗细。

属性值：
100 - 900。
normal：400的粗度。
bold：700的粗度。
bolder：900的粗度。

字体系列

font-family 属性设置文本的字体类型。
可以指定多种字体作为备选，用逗号分隔，会按顺序查找字体，没有找到则显示默认字体。
font-family: 余繁新语, 微软雅黑, "Times New Roman";

简写文字属性

font 属性用于对字体进行综合设置，其语法格式如下：
font: font-style font-weight font-size font-family;
使用font 属性时，必须按上面语法格式的顺序书写，不能更换顺序，各个属性以空格隔开。
注意：其中不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用。

列表

不同的列表项标记

list-style-type 属性指定列表项标记的类型。

图像作为列表项标记

list-style-image 属性将图像指定为列表项标记。

列表项标记的定位

list-style-position 属性指定列表项标记（项目符号）的位置。

list-style-position: outside; 表示项目符号将在列表项之外。

list-style-position: inside; 表示项目符号将在列表项内，成为文本的一部分。

删除默认设置

list-style-type: none; 删除列表项标记。
margin: 0; 删除默认外边距。
padding: 0; 删除默认内边距。

简写列表属性

list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性。
例如：

表格

表格边框

border 属性用于设置表格边框。

合并表格边框

border-collapse 属性设置是否将表格边框折叠为单一边框。

水平对齐

text-align 属性设置 <th> 或 <td> 中内容的水平对齐方式（左、右或居中）。

垂直对齐

vertical-align 属性设置 <th> 或 <td> 中内容的垂直对齐方式（上、下或居中）。

表格颜色

background-color 属性可以给整个表格（table）或单元格（th、td）设置背景颜色。

其他属性及具体用法

其他属性及具体用法：https://www.w3school.com.cn/css/css_table.asp

盒子模型

由于html标签可以嵌套其他标签或内容，可以把标签看做是一个盒子。一个网页可以看做是由一个个的盒子拼凑起来的。

content

使用 width 和 height 属性可以对盒子的大小进行控制。

符合 CSS 规范的盒子模型的总宽度和总高度的计算原则是：

注意：
1. width 和 height 属性仅适用于块级元素，对行内元素无效（img 和 input 标签除外）。
2. 计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
3. 如果一个盒子没有指定宽度/高度或者继承了父元素的宽度/高度，则 padding 不会影响盒子的大小。

padding

padding 属性用于设置内边距。是指内容与边框之间的距离。

padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距

简写：
padding: 3px; 上下左右的内边距都是 3px。
padding: 3px 5px; 上下 3px，左右 5px。
padding: 3px 5px 8px; 上 3px，左右 5px，下 8px。
padding: 3px 5px 8px 10px; 上 3px，右 5px，下 8px，左 10px。

border

盒子的边框由 border 属性指定，默认没有边框。

语法格式：
border: border-width border-style border-color;

border-style 边框样式
属性值：
none 没有边框
solid 实线
dashed 虚线
dotted 点线
double 双实线

border: 1px solid red; 四边边框属性设置
border-top:1px dashed red; 上边框
border-right:1px solid blue; 右边框
border-bottom:1px solid gray; 下边框
border-left: 5px dashed green; 左边框

边框圆角

border-radius: 10px; 4个角的圆角半径都是 10px。
border-radius: 50%; 变为圆形。
border-radius: 10px 40px; 左上角和右下角 10px，右上角和左上角 40px。
border-radius: 10px 40px 80px; 左上角 10px，右上角和左下角 40px，右下角 80px。
border-radius: 10px 40px 80px 100px; 左上角 10px，右上角 40px，右下角 80px, 左下角 100px

margin

margin 属性用于设置外边距。是指元素离周边元素的距离。

margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距

简写：
margin: 25px; 上下左右的外边距都是 25px。
margin: 25px 50px; 上下 25px，左右 50px。
margin: 25px 50px 75px; 上 25px，左右 50px，下 75px。
margin: 25px 50px 75px 100px; 上 25px，右 50px，下 75px，左 100px。

盒子水平居中：
margin: 0 auto; 给左右外边距属性值设置为auto，左右两边外边距将自动填充，块级元素水平居中。

外边距合并：
使用 margin 属性定义块级元素的垂直外边距时，可能会出现外边距合并的情况。

1. 相邻盒子垂直外边距的合并：

2. 嵌套盒子垂直外边距的合并：

解决方案：
（1）为父元素定义 1 像素的上边框或上内边距；
（2）为父元素添加 overflow: hidden; 声明。

box-sizing

CSS3 中可以通过 box-sizing 属性来指定盒子模型。

box-sizing: content-box;（默认）
盒子大小为：width+padding+border

box-sizing: border-box;
盒子大小为：width（padding 和 border 包含在 width 中）

box-shadow

语法格式：
box-shadow: 水平位置垂直位置模糊距离阴影尺寸阴影颜色内/外阴影

CSS定位机制

CSS的定位机制有3种：标准流、浮动和定位。

标准流

标准流也叫普通流或文档流，规定网页中的标签元素以自上而下、从左往右的方式进行排列布局。

元素在标准流中的特点：
1. 块级元素：① 会独占一行；② 宽度默认是父元素的100%；③ 高度默认被内容撑开。
2. 行内元素（内联元素）：① 不会独占一行；② 宽度，高度默认被内容撑开，不能自定义高度。

脱离标准流

脱离标准流的元素将处于浮动状态（漂浮在文档流的上方，不再占据位置），依然在标准流中的其他元素将忽略该元素并填补其原先的空间。

脱离标准流后，就不需要区分块级元素和行内元素，它们的特征会发生改变，块级元素将不会独占一行，width的默认值不再是父元素的width，宽度和高度都默认被内容撑开，行内元素可以设置宽高，默认被内容撑开。共同特征：不会独占一行，宽度和高度默认被内容撑开，同时也可以设置宽高。

使用float脱离标准流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用position脱离标准流的元素，其他盒子与其他盒子内的文本都会无视它。

浮动

浮动是指设置了浮动的元素会脱离标准流，移动到其父元素中指定位置的过程。

设置浮动

在CSS中，通过float属性来设置浮动。

float: left; 元素向左浮动。
float: right; 元素向右浮动。
float: none; 元素不浮动（默认）。

浮动的主要目的是为了让多个元素在一行内显示。即父元素中的子元素都设置浮动，他们将在父元素中呈一行对齐显示。

清除浮动

为什么要清除浮动？
由于浮动元素不再占用原标准流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，需要在该元素中清除浮动，准确的说是清除浮动造成的影响。

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

清除浮动的方法

清除浮动后，在标准流中的元素就能识别浮动的元素。
在CSS中，clear 属性用于清除浮动。

clear: left; 左侧不允许浮动元素。
clear: right; 右侧不允许浮动元素。
clear: both; 左右两侧均不允许浮动元素。

1. 额外标签法

在浮动元素末尾添加一个空的标签，例如 <div style="clear: both"></div>。

优点：通俗易懂，书写方便。
缺点：添加许多无意义标签，结构化差。

2. 父级元素添加overflow属性

可以通过触发BFC的方式，实现清除浮动的效果。

给父级元素添加：
overflow: hidden;
overflow: auto;
overflow: scroll; 都可以实现。

优点：代码简洁。
缺点：内容增多时容易造成不会自动换行导致内容被隐藏，无法显示需要溢出的元素。

3. 使用after伪元素清除浮动

该方法为额外标签法的升级版，好处是不用单独加标签了。

使用方法：

注意：content 里面跟一个小点，或者其他，尽量不要空，否则在firefox7.0前的版本会生成一个空格。

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

4. 使用before和after双伪元素清除浮动

使用方法：

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

定位

元素定位的属性主要为定位模式和边偏移。

1. 边偏移

定位要和边偏移搭配使用，比如：top: 100px; left: 30px

2. 定位模式

postion 属性用于定义元素的定位模式。

postion 的常用属性值：

static

元素默认情况下的定位模式为 static（静态）。
当postion属性的取值为static时，可以将元素定位于静态位置。
静态位置就是元素在文档流中默认的位置。

relative（相对定位）

设置相对定位的元素会相对于它在标准流中的位置进行定位。
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。
元素移动的位置是以自己的左上角为基点进行移动。

absolute（绝对定位）

设置绝对定位的元素会相对于最近定位的父元素进行定位。
若父元素没有定位，将相对于根元素（html元素）进行定位。
子绝父相：子元素绝对定位，父元素应该相对定位。

fixed（固定定位）

设置固定定位的元素会相对于浏览器窗口进行定位。
固定定位的元素不会随网页的滚动条滚动。

层叠次序

z-index属性可以指定定位元素的堆叠顺序。

1. z-index的默认属性值是0，取值越大，定位元素的层级越高。
2. 如果元素的层级一样，则优先显示后写的元素。
3. 后面的数字不能加单位。
4. 只有相对定位、绝对定位、固定定位才有这个属性。

四种定位总结

元素的显示与隐藏

display 显示

display 属性设置元素是否显示及如何显示。

display: none; 隐藏元素。
display: block; 显示元素并可将行内元素转换为块级元素。
display: inline; 转换为行内元素。
display: inline-block; 转换为行内块元素。

特点：隐藏后的元素不再保留位置。

visibility 可见性

visibility 属性指定元素是否应该可见。

visibility: visible; 元素可见（默认）。
visibility: hidden; 元素不可见。
visibility: inherit; 继承父元素的visibility。

特点：隐藏后继续保留原有位置。

overflow 溢出

overflow 属性设置元素内容溢出时的显示方案。

overflow: visible; 溢出内容不会被剪裁，将在元素框外显示（默认）。
overflow: hidden; 溢出内容被剪裁并隐藏。
overflow: auto; 溢出时会添加滚动条查看溢出内容，不溢出则不添加滚动条。
overflow: scroll; 不论内容是否溢出都会添加滚动条。

特点：overflow 属性仅适用于具有指定高度的块级元素。

CSS高级技巧

精灵图

1. 为什么要使用精灵图？

为了有效减少服务器接收和发送请求的次数，提高页面加载速度，将网页中的一些小背景图片整合到一张大图中，这样服务器只需要一次请求即可，这就是CSS精灵技术（CSS Sprites）。

2. 精灵图的使用

使用核心：

精灵技术主要针对背景图片使用，就是把多个小背景图片整合到一张大图片中。这个大的图片称为 Sprites 精灵图或雪碧图。
移动背景图片位置 background-position。
一般情况下移动精灵图的属性值都是负值。

div {
    width: 236px;
    height: 128px;
    margin: 100px auto;
    background-image: url(/img/sprite.png);
    background-position: -80px -220px;
}

3. 精灵图的缺点

文件较大
图片失真
更换复杂

字体图标

1. 字体图标的简介

iconfont字体图标，展示的是图标，本质是字体。

2. 字体图标的优点

轻量级：一个字体图标比一系列的图像要小。一旦字体加载，图标就会马上渲染出来，减少了服务器请求。
灵活性：本质是文字，可以随意的改变颜色、产生阴影、透明效果、旋转等。
兼容性：几乎支持所有的浏览器。

PS：字体图标不能替代精灵技术，只是对工作中的图标部分技术的提升和优化。

3. 字体图标的下载

icomoon字体库：http://icomoon.io
阿里iconfont字体库：http://www.iconfont.cn

4. 字体图标的引入

（1）把下载包里面的fonts文件夹放入页面文件夹的根目录中
（2）在CSS样式中全局声明字体
（3）HTML标签添加小图标
（4）声明字体样式

    span {
    font-family: 'icomoon';
    font-size:100px;
    color:pink
}

5. 字体图标的追加

方法：把压缩包里面的selection.json重新上传，然后选中自己想要的新图标，重新下载压缩包，并且替换原来的文件即可。

CSS三角

1. 设置盒子的宽高为都为0
2. 边框设置为透明色（transparent）
3. 若想要设置向下的三角，则把上边框设置颜色

    .box2 {
    width: 0;
    height: 0;
    border: 20px solid transparent;  /*边框为透明色*/
    border-top: 20px solid pink;  /*上边框设置颜色*/
}

用户界面样式

鼠标样式cursor

属性值	描述
auto (默认值)	根据元素自动确认显示光标样式
default	默认光标样式 (箭头)
pointer	光标呈现为指示链接的指针（一只手）
not-allowed	禁用标志
help	带有 ? 的箭头，表示帮助信息

轮廓outline

outline（轮廓）是绘制于元素周围的线，位于边框边缘的外围，起到突出元素的作用。

语法格式（和border一样）：
outline: outline-width outline-style outline-color;

input {
    /* 消除表单轮廓线 */
    outline: none;
}

防止文本域拖拽resize

textarea {
    resize: none;
}

解决图片底部默认空白缝隙的问题

图片与边框默认基线对齐，所以存在一定空隙。
解决方法：
1. 给图片添加 vertical-align：middle | top | bottom等
2. 把图片转换为块级元素 display：block;

div {
    border: 2px solid red;
}
/* 图片与边框默认基线对齐，所以存在一定空隙， */
/* 解决方法1 */
/* img {
vertical-align: bottom;
} */

/* 解决方法2 */
img {
    display: block;
}

文本换行处理

word-break 文本换行规则(css3)。
属性值：
normal (默认)根据语言自身特性进行换行。
break-all 允许把单词截断，在单词内换行。
keep-all 不允许把单词截断，只能在空格处换行(如果是英文，则是kepp-all)。

word-wrap 是否在单词内部换行。
属性值：
normal (默认)根据语言自身特性进行换行。
break-word 在长单词或者url地址内部进行换行。

white-space 文本空格和换行处理。
属性值：
normal (默认)空格会被浏览器忽略，长单词超出元素不会换行。
nowrap 文本不换行，在一行显示。

单行文本溢出显示省略号

div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

多行文本溢出显示省略号

div {
    width: 120px;
    background-color: pink;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

解决最后一行未溢出不显示省略号的问题：
1. 不要给高度，直接写元素显示文字的行数
2. 缩小高度直到文字溢出

文字纵向排列

<div class="vertical-text">文字纵向排列</div>

<style>
    .vertical-text {
        writing-mode: vertical-rl;
        text-orientation: upright;
    }
</style>

CSS初始化

不同浏览器对标签的默认值是不一样的，为消除不同浏览器对HTML文本呈现的差异，所以要对CSS初始化，即重新设置浏览器的样式。

Unicode编码字体：避免浏览器解释CSS代码时候出现乱码的问题

字体	Unicode
黑体	\9ED1\4F53
宋体	\5B8B\4F53
微软雅黑	\5FAE\8F6F\96C5\9ED1

初始化设置：

/* 把所有标签内外边距清零 */
* {
    margin: 0;
    padding: 0;
}

/* 斜体的文字不倾斜 */
em,
i {
    font-style: normal;
}

/* 去掉li的小圆点 */
li {
    list-style: none;
}

/* border 0照顾低端的浏览器 如果图片外包含了链接会有边框的问题 */
img {
    border: 0;
    /* 图片与文字垂直居中 取消图片底边有空白缝隙的问题 */
    vertical-align: middle;
}

/* 鼠标悬停在按钮时，光标显示为小手 */
button {
    cursor: pointer;
}

/* 取消链接的下划线 */
a {
    text-decoration: none;
}

body {
    /* 抗锯齿性，让文字更加清晰 */
    -webkit-font-smoothing: antialiased;
}

/* 清除浮动的影响 */
.clearfix:after {
    visibility: hidden;
    8clear: both;
    display: block;
    content: ".";
    height: 0;
}
.clearfix {
    *zoom: 1;
}

CSS样式的书写顺序

浏览器渲染会按照CSS样式的书写顺序解析执行，定位相关的样式会影响CSS DOM树的排列，如果写在最后，会最后读取这些样式，则又要重排CSS DOM树，影响性能。

书写顺序：
(1) 定位属性：flaot position left right top bottom display overflow clear z-index ...
(2) 自身属性：width height padding border margin background ...
(3) 文字样式：font-系列 color
(4) 文本样式：text-align vertical-align text-wrap letter-spacing ...
(5) css3新增的属性：box-shadow border-radius tranform ...

CSS继承

默认继承的属性：

所有元素默认继承: visibility、cursor
文本属性默认继承: color、font、font-size、font-weight、font-family、font-style、font-variant、line-height、text-indent、text-align、text-shadow、text-transform、letter-spacing、word-spacing、white-space...
列表元素默认继承: list-style、list-style-type、list-style-position、list-style-image
表格元素默认继承: border-collapse

CSS新特性（CSS3新增）

属性选择器

结构伪类选择器

目标伪类选择器

伪元素选择器

box-sizing 盒子模型

颜色渐变

inear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

/* 渐变轴为45度，从蓝色渐变到红色 */
background-image: linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
background-image: linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
background-image: linear-gradient(0deg, blue, green 40%, red);

过渡

transition 在不使用Flash动画或Javascript的情况下，当元素从一种样式变换为另一种样式时为元素添加过渡动画效果。主要通过 :hover选择器实现。

语法格式：
transition: transition-property transition-duration transition-timing-function transition-delay;
如果有多组属性变化，要用逗号隔开。

属性	描述
transition-property	指定要过渡的属性。none 没有要过渡的属性。all 所有属性。
transition-duration	指定过渡时间。默认是0。单位是S，单位必须写。
transition-timing-function	指定过渡效果的速度曲线。属性值代表对应的速度曲线。
transition-delay	指定何时开始过渡。默认是0。单位是S，单位必须写。

div {
    width: 300px;
    height: 200px;
    background-color: blue;
    /* transition: 要变化的属性名 过渡时间 运动曲线 何时开始; */
    /*多个属性用逗号隔开*/
    transition: width 2s ease 0s, height 2s ease 0s;
    /*或者将属性名改为all*/
    transition: all 2s ease 0s;
}

div:hover {
    width: 500px;
    height: 300px;
}

2D转换

transform 属性可以实现元素的移动、旋转、缩放、倾斜效果。
若需同时实现多种转换效果，则每个函数之间用空格隔开。
例如：transform: translate(100px, 100px) rotate(180deg);

translate 移动

函数	描述
translateX(x)	沿x轴方向移动
translateY(y)	沿y轴方向移动
translateY(x,y)	沿x轴方向和y轴方向同时移动

div {
    /* 2D转换translate移动盒子 */
    width: 200px;
    height: 200px;
    background-color: blue;
    /* 1.移动水平的距离 100px */
    /* transform: translateX(100px); */
    /* 2.移动垂直的距离 10px */
    /* transform: translateY(10px);*/
    /* 3.移动水平和垂直的距离 */
    transform: translate(100px, 10px); 
}

注意：
1. 优点是不会影响其他元素。
2. 值也可以使用百分比，例如 transform: translateX(50%); 移动自身的50%。
3. 对行内标签没有效果。

定位的盒子实现水平垂直居中

div {
    width: 100px;
    height: 100px;
    background-color: blue;
    /* 让盒子实现水平居中 */
    position: absolute;
    top: 50%;
    left: 50%;
    /* 向左走自身的50%，向上走自身的50% */
    transform: translate(-50%, -50%);
}

rotate 旋转

rotate(angle) 函数可以让元素旋转。
angle 的值是角度，正值为顺时针，负值为逆时针。
单位是 deg（度数）。
默认旋转的中心点是元素的中心点。

div {
    width: 100px;
    height: 100px;
    background-color: rgb(50, 218, 36);
    /* 顺时针旋转45度 */
    /* transform: rotate(45deg); */
    /* 逆时针旋转45度 */
    transform: rotate(-45deg);
}

scale 缩放

scale(sx,sy) 函数可以放大缩小元素。
sx、sy的值是宽度和高度的倍数。
只给一个值表示宽和高的倍数一样。

div {
    margin: 100px auto;
    width: 200px;
    height: 200px;
    background-color: rgb(23, 206, 87);
}

div:hover {
    /* 1.括号里的数字代表倍数 */
    /* transform: scale(2, 2); */
    /* 2.宽度是两倍，高度不变 */
    /* transform: scale(2, 1); */
    /* 3.同时改变高和宽，两倍 */
    transform: scale(2);
}

skew 倾斜

skew(ax,ay) 函数可以倾斜扭曲元素。
ax 的值是在水平方向上倾斜的角度。
ay 的值是在垂直方向上倾斜的角度。
单位是 deg（度数）。
ay 可省略，默认为0。

transform-origin 中心点

transform-origin 属性允许改变被转换元素的中心点的位置。

div {
    margin: 200px;
    width: 100px;
    height: 100px;
    background-color: rgb(49, 217, 34);
    /* 顺时针旋转45度 */
    transform: rotate(45deg);
    /* 改变中心点的位置 */
    /* 可以是百分数 */
    /* transform-origin: 10% 10%; */
    /* 可以是像素 */
    /* transform-origin: 10px 10px; */
    /* 可以是方位名词 */
    transform-origin: right top;
}

注意：
1. x y要用空格分开。
2. x y的值可以是像素、百分数或者方位名词（top bottom left right）。

3D转换

CSS3中的3D坐标：

translate3d

translate3d(x,y,z) 函数可以设置元素在3d空间上的位移。

x 的值为x轴方向的位移 (px或百分数)
y 的值为y轴方向的位移 (px或百分数)
z 的值为z轴方向的位移 (不能用百分数)

translateZ

translateZ(z) 函数可以设置元素在z轴方向的位移。

rotateX

rotateX(angle) 沿x轴旋转。angle 为角度。单位是deg。

rotateY

rotateY(angle) 沿y轴旋转。

rotateZ

rotateZ(angle) 沿z轴旋转。

perspective

perspective 属性可以设置视点距元素的距离（即为视距），视点相当于一个观察元素的观察点。

可以让一个2D平面在转换的过程中呈现出3D的效果。
设置的距离为具体的像素。
设置给父元素，作用于所有3D转换的子元素。
原理：远小近大。

perspective: 150px; 给父元素设置150px的视距，3D转换的子元素将会呈现出该视距的3D效果。

动画

@keyframes 定义动画

@keyframes 动画名称{
    from{
        初始样式
    }
    to{
        最终样式
    }
}

用百分比定义动画过程，可以实现更复杂的动画效果。

@keyframes move {
    /* 定义动画 */
    /* 可以做多个状态的变化 keyframes —— 关键帧 */
    /* 里面的百分比要是整数 */
    /* 里面的百分比就是总的时间的划分 */
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(1000px, 0);
    }
    50% {
        transform: translate(1000px, 1000px);
    }
    75% {
        transform: translate(0, 1000px);
    }
    100% {
        transform: translate(0, 0);
    }
}

animation 动画属性

语法格式：
animation: 动画名称动画时间运动曲线何时开始播放次数动画播放方向;

属性	描述
animation-name	@keyframes 动画的名称
animation-duration	动画时间。单位s。
animation-timing-function	运动曲线。默认是ease。
animation-delay	动画何时开始 (延迟时间)。默认是0。
animation-iteration-count	播放次数。默认是1。 infinite 无限播放。
animation-direction	动画播放方向。normal (默认) 顺序播放(0% - 100%)。reverse 倒序播放(100% - 0%)
animation-play-state	动画播放状态。running (默认) 正常播放。paused 动画暂停。

注意：
1. animation 属性按正常顺序简写，没有的则省略。
2. 简写属性不包含 animation-play-state。

img { /* 调用动画 */
    animation: car 5s infinite;
}
/* 定义动画 */
@keyframes car {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(1000px);
    }
    51% {  /* 翻转图片 小车掉头 */
        transform: translateX(1000px) rotateY(180deg);
    }
    100% {
        transform: translateX(0) rotateY(180deg);
    }
}

CSS学习笔记整理

CSS 简介

CSS 语法

引入 CSS 样式的方式

行内样式

内部样式（内嵌样式）

外部样式（主流推荐）

导入样式

选择器

通用选择器

标签选择器

id 选择器

类选择器

分组选择器

属性选择器

组合选择器

后代选择器

子元素选择器

相邻兄弟选择器

通用兄弟选择器

伪类选择器

链接伪类选择器

结构（位置）伪类选择器

其他伪类选择器

伪元素选择器

选择器优先级

优先级总结

属性

单位

背景

背景颜色

背景图片

背景重复

背景位置

背景附着

简写背景属性

背景缩放

多背景

文本

文本颜色和背景色

文本对齐

垂直对齐

文本方向

文字装饰

文本转换

文字间距

首行缩进

行间距

文本阴影

字体

字体样式

字体粗细

字体大小

字体系列

简写文字属性

列表

不同的列表项标记

图像作为列表项标记

列表项标记的定位

删除默认设置

简写列表属性

表格

表格边框

合并表格边框

水平对齐

垂直对齐

表格颜色

其他属性及具体用法

盒子模型

content

padding

border

边框圆角

margin

box-sizing

box-shadow

CSS定位机制

标准流

脱离标准流

浮动