CSS3 | Camila's blog

本文件已定稿，最后修改时间 20240430 02:42

1、语法规范

1.1、行内样式表

行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式。
行内样式表由于书写繁琐，没有体现结构与表现相分离的思想，只适合于修改简单的样式，不推荐大量使用。
/*CSS的注释写法*/
<div style="color: red; font-size:12px; ">青春不常在，抓紧谈恋爱</div>

1.2、内部样式表

内部样式表（内嵌样式表）是将所有的CSS代码抽取出来，单独放到一个style标签中，写到html页面内部。
style标签理论上可放在html的任何位置，但通常放在head标签中。

内部样式表也没有实现结构与表现的完全分离，推荐在练习时使用。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
	<div>青春不常在，抓紧谈恋爱</div>
</body>

1.3、外部样式表

外部样式表是将样式单独写到CSS文件中，然后把CSS文件引入到html页面中使用，开发推荐。

新建一个后缀名为**.css**的样式文件，所有的CSS代码都放到此文件中。

在html页面，使用link标签引入.css文件。

style.css：

/*只有样式，没有标签*/
div {
    color: red;
    font-size: 12px;
}

html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div>青春不常在，抓紧谈恋爱</div>
    </body>
</html>

1.4、书写顺序

建议遵循以下顺序：
- 布局定位属性：display、position、float、clear、visibility、overflow（建议display第一个写，毕竟关系到模式）
- 自身属性：width、height、margin、padding、border、background
- 文本属性：color、font、text-decoration、text-align、vertical-align、white-space、break-word
- 其他属性：content、cursor、border-radius、box-shadow、text-shadow、background:linear-gradient

2、元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示，比如div标签自己占一行，一行可以放多个span标签。
HTML元素分为块元素、行内元素、行内块元素。

2.1、块元素

常见的块元素有：h1-h6、div（最典型）、p、ol、ul、li等。
- 块元素独占一行。
- 高度、宽度、外边距、内边距都可以控制。
- 宽度默认是容器（父级宽度）的100%。
- 是一个容器及盒子，里面可以放行内或者块级元素。
- 文字类的块元素内不能使用块级元素，如h1-h6 和 p 标签，里面不能放其他类型的块级元素。

2.2、行内元素

常见的行内元素有：a、strong、em、del、ins、b、i、u、span（最典型）等。
- 相邻行内元素在一行上，一行可以显示多个行内元素。
- 宽、高直接设置是无效的。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本和其他行内元素。
注意：
- 链接里面不能再放链接。
- 特殊情况下a标签中可以放块级元素，但给a标签转换一下块级模式最安全。

2.3、行内块元素

在行内元素中有几个特殊的标签，img、input、td，它们同时具有行内元素和块元素的特点。
- 和相邻行内元素（行内块元素）在一行上，但是它们之间会有空白间隙，一行可以显示多个行内块元素（行内元素特点）。
- 默认宽度就是它本身内容的宽度（行内元素特点）。
- 宽度、行高、外边距、内边距都可以控制（块元素特点）。

2.4、显示模式转换

特殊情况下，我们需要元素模式的转换，比如要增加a标签链接的触发范围。
- 转换为块元素：display:block;
- 转换为行内元素：display:inline;
- 转换为行内块：display:inline-block;

3、基础选择器

3.1、标签选择器

3.2、类选择器

为标签设置class属性，通过 .类名的方式设置CSS样式。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .red {
                color: red;
            }
        </style>
    </head>
    <body>
    	<div class="red">青春不常在，抓紧谈恋爱</div>
    </body>
</html>

3.3、id选择器

为标签设置id属性，通过 #id名的方式设置CSS样式。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #red {
                color: red;
            }
        </style>
    </head>
    <body>
    	<div id="red">青春不常在，抓紧谈恋爱</div>
    </body>
</html>

3.4、通配符选择器

在CSS中，通配符选择器使用 * 定义，它表示选中页面中的所有标签。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            * {
                color: red;
            }
        </style>
    </head>
    <body>
        <div>青春不常在，抓紧谈恋爱1</div>
        <div>青春不常在，抓紧谈恋爱2</div>
    </body>
</html>

4、复合选择器

4.1、后代选择器

后代选择器又称为包含选择器，可以选择父元素中的后代元素。

语法：元素1 元素2,元素3…元素n { 样式 } —— 选择元素1中的所有后代元素2、元素3…元素n

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body div, strong {
                color: red;
            }
        </style>
    </head>
    <body>
        <div>青春不常在，抓紧谈恋爱1</div>
        <span>
            <strong>青春不常在，抓紧谈恋爱2</strong>
        </span>
    </body>
</html>

4.2、子选择器

子选择器只能选择某元素的最近一级子元素。

语法：元素1 > 元素2,元素3…元素n { 样式 } —— 选择元素1中所有子元素2、元素3…元素n

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body > div, span {
                color: red;
            }
        </style>
    </head>
    <body>
        <div>青春不常在，抓紧谈恋爱1</div>
        <span>
            <strong>青春不常在，抓紧谈恋爱2</strong>
        </span>
    </body>
</html>

4.3、并集选择器

并集选择器可以选择多组标签，同时为它们定义相同的样式，通常用于集体声明。
并集选择器是各选择器通过 , 连接而成，任何形式的选择器都能作为并集选择器的一部分。

语法：元素1,元素2…元素n { 样式 } —— 选择元素1、元素2…元素n

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div, span {
                color: red;
            }
        </style>
    </head>
    <body>
        <div>青春不常在，抓紧谈恋爱1</div>
        <span>
            <strong>青春不常在，抓紧谈恋爱2</strong>
        </span>
    </body>
</html>

4.4、交集选择器

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 连着写就行 */
        div.test {
            color: red;
        }
    </style>
</head>

<body>
    <div>这是div标签</div>
    <div class="test">这是div标签:test</div>
    <p class="test">这是p标签:test</p>
</body>

</html>

4.5、链接伪类选择器

所有标签都可添加，遵循LVHA书写顺序。
- a:link —— 选择所有未被访问的链接。
- a:visited —— 选择所有已被访问的链接。
- a:hover —— 选择鼠标指针位于其上的链接。
- a:active —— 选择活动链接（鼠标按下未弹起）。

4.6、focus伪类选择器

:focus 伪类选择器用于选取获得焦点（光标）的表单元素。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*获得焦点的input表单背景色变为红色*/
            input:focus {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <form>
            <input type="password">
        </form>
    </body>
</html>

#、CSS3新增选择器

#.1、属性选择器

属性选择器可以根据元素特定的属性来选择元素，这样就可以不借助类选择器或id选择器。
- E[att] —— 选择具有att属性的E元素。
- E[att=”val”] —— 选择具有att属性且属性值等于val的E元素。
- E[att^=”val”] —— 匹配具有att属性且属性值以val开头的E元素。
- E[att$=”val”] —— 匹配具有att属性且属性值以val结尾的E元素。
- E[att*=”val”] —— 匹配具有att属性且属性值含有val的E元素。

#.2、结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择里面的子元素。
- E:first-child —— 匹配父元素中第一个子元素E。
- E:last-child —— 匹配父元素中最后一个子元素E。
- E:nth-child(n) —— 匹配父元素中第n个子元素E。
- E:first-of-type —— 指定类型 E 的第一个。
- E:last-of-type —— 指定类型 E 的最后一个。
- E:nth-of-type(n) —— 指定类型 E 的第n个。
- n可以是数字、关键字（even 偶数 odd奇数）、公式（2n偶数、2n+1奇数、5n倍数、n+5从5开始到最后、-n+5前5个）。
- 区别：
  - E:nth-child(n)对父元素里面的所有孩子排序选择，先找到第n个孩子，然后看是否和E匹配。
  - E:nth-of-type(n)对父元素里面指定子元素进行排序选择，先匹配E，然后根据E找到第n个孩子。

#.3、伪元素选择器

伪元素选择器可以帮助我们利用CSS创建标签元素，而不需要HTML标签。
- ::before —— 在元素内部的前面插入内容。
- ::after —— 在元素内部的后面插入内容。
语法：element::before{}
注意：
- before和after创建的元素属于行内元素。
- 新创建的元素在文档树是找不到的，所以称为伪元素。
- before和after必须有content属性。

5、CSS三大特性

5.1、层叠性

层叠性就是相同的选择器给设置相同的样式（值不一样），此时一个样式就会层叠另一个冲突的样式。

层叠性原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。
样式不冲突，不会层叠。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*就近原则，后来居上，层叠red，显示blue*/
            div {
                color: red;
            }

            div {
                color: blue;
            }
        </style>
    </head>
    <body>
    	<div>青春不常在，抓紧谈恋爱</div>
    </body>
</html>

5.2、继承性

子标签会继承父标签的某些样式（text- font- line- color）。恰当地使用继承可以简化代码，降低CSS样式的复杂性。
行高的继承性：
- 行高可以跟单位，也可以不跟单位。
- 行高继承的优势在于子元素可以根据自己文字大小自动调整行高。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*p标签继承父标签div的red颜色*/
            div {
                color: red;
                /*font: 14px/14px 'Microsoft YaHei';*/
                /*以下写法表示：如果子元素p没有设置行高，则p行高=1.5 * p文字大小 */
                font: 14px/1.5 'Microsoft YaHei';
            }
        </style>
    </head>
    <body>
        <div>
            <p>青春不常在，抓紧谈恋爱</p>
        </div>
    </body>
</html>

5.3、优先级

当同一个元素（标签）有多个选择器为其设置样式，就会有优先级的产生。
- 选择器相同，则执行层叠性。
- 选择器不同，则根据选择器权重执行。
  - 继承或者 * 权重为（0,0,0,0）
  - 标签选择器，伪元素选择器（0,0,0,1）
  - 类选择器，伪类选择器、属性选择器（0,0,1,0）
  - id选择器（0,1,0,0）
  - 行内样式（1,0,0,0）
  - !important 无穷大
- 权重叠加：如果是复合选择器，则会有权重叠加。

6、字体属性

6.1、字体

CSS使用font-family属性定义文本的字体系列。

div {
            font-family: Arial, "Microsoft YaHei UI";
        }

6.2、字号

CSS使用font-size属性定义文本的大小。

div {
            font-size: 14px;
        }

6.3、粗细

CSS使用font-weight属性定义文字的粗细。

6.4、风格

CSS使用font-style属性定义文本的风格。
- normal —— 默认值，浏览器会显示标准的字体样式。
- italic —— 浏览器会显示斜体的字体样式。
  div {
  font-style: italic;
  }

6.5、复合属性

语法：选择器 {font: font-style font-weight font-size/line-height font-family;}
- font属性，必须按照上述顺序写，以空格隔开。
- font-size和font-family属性必须设置，其余属性可以省略（取默认值），否则font属性将不起作用。

7、文本属性

7.1、颜色

color属性用于定义文本的颜色，有3种表示方式：
- 预定义的颜色英文单词。
- 十六进制（开发推荐），如#FF0000。
- RGB代码，rgb(255,0,0)或rgb(100%,0%,0%)。
div {
color: red;
}

7.2、装饰文本

text-decoration属性规定添加到文本的装饰，比如上划线、下划线、删除线等。
- none——默认，没有装饰。
- overline——上划线，几乎不用。
- underline——下划线，常用。
- line-through——删除线。

7.3、对齐文本

text-align属性用于设置元素内文本内容的对齐方式。
- left——默认，左对齐。
- right——右对齐。
- center——居中对齐。

7.4、文本缩进

text-indent属性用来指定文本的第一行的缩进（甚至可以是负值），通常是将段落的首行缩进。
单位可以是 px 或em（em是相对单位，1em就是当前元素（font-size）1个文字的大小）。

7.5、行间距

line-height属性用来设置文字行与行之间的距离（行高）。
div {
line-height: 100px;
}

8、CSS的背景

8.1、背景颜色

background-color属性定义了元素的背景颜色。
默认值是transparent，透明色。
CSS3为我们提供了背景颜色半透明的效果：rgba(0,0,0,.3)——黑色半透明，a的取值范围在0-1之间，0.3习惯性省略0。
div {
background-color: rgba(0, 0, 0, .3);
}

8.2、背景图像

background-image属性定义了元素的背景图像，背景图像会盖住背景颜色。
- none——默认值。
- url——使用绝对路径或相对路径指定背景图片。
div {
width: 958px;
height: 958px;
background-image: url("image.jpg");
}

8.3、背景平铺

可使用background-repeat对背景图像进行平铺。

repeat——默认，横纵向都平铺。
no-repeat——不平铺。
repeat-x——横向平铺。
repeat-y——纵向平铺。

div {
            width: 958px;
            height: 958px;
            background-image: url("image.jpg");
            background-repeat: repeat;
        }

8.4、背景图像位置

background-position属性（x y）可以设置图像在背景中的位置。
- length——百分数、由浮点数字和单位标识符组成的长度值。
- position——top、bottom、left、right、center 方位名词。
  - 参数是方位名词：
    - 如果两个值都是方位名词，则两个值的顺序不重要，比如left top 和 top left效果一致。
    - 如果只有一个方位名词，另一个省略，则第二个值默认为center。
  - 参数是精确单位：
    - 第一个是x坐标，第二个是y坐标。
    - 如果只有一个值，则这个值规定为x坐标，y坐标默认为垂直居中。
  - 参数是混合单位：
    - 默认第一个是x坐标，第二个是y坐标。
div {
width: 958px;
height: 958px;
background-image: url("image.jpg");
background-repeat: repeat;
background-position: 0 0;
}

8.5、背景图像固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

可制作视差滚动的效果。

fixed——背景图像固定。
scroll——滚动。

div {
            width: 958px;
            height: 958px;
            background-image: url("image.jpg");
            background-repeat: repeat;
            background-position: 0 0;
            background-attachment: scroll;
        }

8.6、复合属性

background属性可以把以上样式综合来写，更节约代码（开发推荐），习惯顺序为：
- background 背景颜色背景图片背景平铺背景图像滚动背景图片位置;

9、盒子模型

盒子模型就是把html页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
盒子模型包括：边框、外边距、内边距、实际内容。

9.1、边框

border属性可以设置元素的边框，包括边框宽度（粗细）、边框样式、边框颜色。

语法：

border : border-width border-style border-color; —— （没有顺序）

border-top : border-width border-style border-color; —— （只设定上边框，其余同理）

div {
            /*
            solid——实线边框
            dashed——虚线边框
            dotted——点线边框
            */
            border: 2px solid red;
        }

border-collapse属性可以用来设置表格单元格细线。

border-collapse: collapse;/*表示相邻边框合并在一起*/

border-radius属性可以设置圆角边框样式，语法：border-radius : length;
- 属性值可以为数值或百分比。
- 如果是正方形，把数值设置为边长一半即可变为圆形边框，或直接写 50%。
- 如果是矩形，设置为高度的一半即可变为圆角边框。
- 该属性是一个简写方式，可以跟4个值，分别代表左上角、右上角、右下角、左下角。
- 也可以分别设置各个角的圆角边框效果：
  - border-top-left-radius
  - border-top-right-radius
  - border-bottom-right-radius
  - border-bottom-left-radius
div {
width: 200px;
height: 100px;
border: 2px solid red;
border-radius: 51px;
}
注意：边框会改变盒子的实际大小。

9.2、内边距

padding属性用于设置内边距，即边框和内容的距离。
- padding属性可以有1到4个值：
  - padding : 5px; ——上下左右都是5px内边距。
  - padding : 5px 10px; ——上下内边距为5px，左右内边距为10px。
  - padding : 5px 10px 20px; ——上内边距为5px，左右内边距为10px，下内边距为20px。
  - padding : 5px 10px 20px 30px; ——上右下左内边距（顺时针）。
- 也可以分别设置上下左右的内边距：
  - padding-top
  - padding-bottom
  - padding-left
  - padding-right
注意：如果盒子本身没有指定宽高属性，此时padding不会撑开盒子大小。

9.3、外边距

margin属性用于设置外边距，即盒子和盒子的距离。
- margin属性可以有1到4个值（写法和意义同padding一致）。
- 也可以分别设置上下左右的外边距：
  - margin-top
  - margin-bottom
  - margin-left
  - margin-right
外边距可以让块级盒子水平居中，满足以下条件即可：
- 盒子必须指定了宽度。
- 盒子左右的外边距都设置为auto。
  margin: 0 auto;
相邻块元素垂直外边距的合并：
- 定义：当上下相邻的两个块元素（兄弟关系）相遇，如果上面的元素有下外边距，下面的元素有上外边距，则它们之间的垂直距离不是下外边距和上外边距之和，而是取其较大值。
- 解决方案：尽量只给一个盒子添加margin值。
嵌套块元素垂直外边距的塌陷：
定义：对于两个嵌套关系（父子）的块元素，父元素有上外边距，子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
- 可以为父元素定义上边框。
- 可以为父元素定义内边距。
- 可以为父元素添加overflow:hidden;

9.4、清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一样。因此我们在布局前，先要清除下网页元素的内外边距。
* {
padding: 0;
margin: 0;
}

9.5、盒子阴影

box-shadow属性，可以为盒子添加阴影。
语法：box-shadow : h-shadow v-shadow blur spread color inset;
- h-shadow —— 必须，水平阴影的位置，允许负值。
- v-shadow —— 必须，垂直阴影的位置，允许负值。
- blur —— 可选，模糊距离。
- spread —— 可选，阴影的尺寸。
- color —— 可选，阴影的颜色。
- inset —— 可选，将外部阴影改为内部阴影。
注意：
- 默认的是外部阴影（outset），但不可以写这个单词，否则导致阴影无效。
- 盒子阴影不占用空间，不会影响其他盒子的排列。

9.6、文字阴影

text-shadow属性，可以为文字添加阴影。
语法：text-shadow : h-shadow v-shadow blur color;

9.7、box-sizing

通过box-sizing属性来指定盒子模型，这样我们计算盒子大小的方式就发生了变化。
- box-sizing:content-box; —— 盒子大小为 width + padding + border （以前默认的）。
- box-sizing:border-box; —— 盒子大小为 width。
如果盒子模型改为了box-sizing:border-box;那padding 和 border就不会撑大盒子了（前提是padding 和 border不会超过width）。

10、浮动

10.1、概述

网页布局的本质就是用CSS来摆放盒子，CSS提供了3种传统布局方式：
- 普通流（标准流）—— 标签按默认方式排列
- 浮动
- 定位
定义：float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：选择器 {float: 属性值;}
- none —— 默认值，元素不浮动。
- left —— 元素向左浮动。
- right —— 元素向右浮动。
作用：如何让多个块级盒子水平排列成一行？如何实现两个块级盒子的左右对齐？
总结：
- 任何元素都可以浮动，不管原先是什么模式的元素。
- 浮动最典型的运用就是可以让多个块级元素一行内排列显示。
- 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

10.2、浮动特性

浮动特性分别是脱标、一行显示、行内块特征。
脱标：
- 定义：脱离标准流（浮）移动到指定位置（动），是浮动最重要的特性。
- 特点：浮动的盒子不再保留原先的位置。
一行显示：
- 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示（没有间隙）并且顶端对齐排列。
- 如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

行内块特征：

如果块级盒子没有设置宽度，添加浮动后，它的大小根据内容来定。
浮动的盒子中间没有缝隙。
行内元素同理。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #div1 {
                width: 200px;
                height: 100px;
                background-color: red;
            }

            #div2 {
                /*设置浮动*/
                width: 100px;
                height: 100px;
                background-color: blue;
                float: left;
            }

            #div3 {
                width: 200px;
                height: 100px;
                background-color: springgreen;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </body>
</html>

10.3、清除浮动

为什么要清除浮动？我们会先定义标准流父盒子，在父盒子里面摆放浮动子盒子，但有的情况下不方便设置父盒子的高度，但父盒子高度为0时，由于浮动的子盒子不占位置，就会影响后面的标准流盒子。
语法：选择器 { clear: 属性值;}
- left —— 清除左侧浮动的影响。
- right —— 清除右侧浮动的影响。
- both —— 同时清除左右两侧浮动的影响（推荐）。
总结：
- 清除浮动的本质是清除浮动元素脱标造成的影响。
- 清除浮动的策略是闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

清除浮动的方法：

额外标签法：
- 定义：额外标签法（隔墙法）会在浮动元素末尾添加一个空的块级标签，例如div或者br等（W3C推荐）。
  <div style="clear: both"></div>
- 优点：通俗易懂，书写方便。
- 缺点：添加许多无意义标签，结构化较差。
父元素overflow：
- 定义：给父级元素添加overflow属性，将属性值设置为hidden、auto或scroll。
- 优点：代码简洁。
- 缺点：无法显示溢出的部分。

after伪元素：

定义：**:after**方式是额外标签法的升级版，在CSS样式中添加下图代码后，在父元素中调用类即可。

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

优点：没有增加标签，结构更简单。
缺点：照顾低版本浏览器。

双伪元素法：

定义：在CSS样式中添加下图代码后，在父元素中调用类即可。

.clearfix:before, .clearfix:after {
           content: "";
           display: table;
       }
      
       .clearfix:after {
           clear: both;
       }
      
       /*IE 6 7 专有*/
       .clearfix {
           *zoom: 1;
       }

优点：代码更简洁。
缺点：照顾低版本浏览器。

11、定位

11.1、概述

定义：将盒子定在某一个位置。
定位 = 定位模式 + 偏移量。
- 定位模式通过position属性来设置：
  - static —— 静态定位。
  - relative —— 相对定位。
  - absolute —— 绝对定位。
  - fixed —— 固定定位。
  - stick —— 粘性定位。
- 偏移量有4个属性：
  - top:80px; —— 顶端偏移量，定位元素相对于其父元素上边线的距离。
  - bottom:80px;
  - left:80px;
  - right:80px;

11.2、定位模式

定位模式分别有：静态定位、相对定位、绝对定位、固定定位、粘性定位。
静态定位：
- 静态定位是元素的默认定位方式，无定位的意思。
- 语法：选择器 {position: static;}
  - 没有偏移量，很少使用。
相对定位：
- 相对定位是元素在移动位置的时候相对于它原来的位置来说的。
- 语法：选择器 {position: relative;}
  - 它是相对于自己原来的位置来移动。
  - 原来在标准流的位置继续占有（不脱标，继续保留原来的位置）。
  div {
  position: relative;
  top: 100px;
  }
绝对定位：
- 绝对定位是元素在移动位置的时候相对于它祖先元素来说的。
- 语法：选择器 {position: absolute;}
  - 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
  - 如果祖先元素有定位，则以最近一级的有定位的祖先元素为参考点移动位置。
  - 绝对定位不再占有原先的位置（脱标）。
- 绝对定位的盒子居中：加了绝对定位的盒子不能通过margin:0 auto实现水平居中，但可以通过以下方式实现水平和垂直居中：
  - left:50%; —— 让盒子的左侧移动到父级元素的水平中心位置。
  - margin-left:-100px; —— 让盒子向左移动自身宽度的一半。
- 总结：子绝父相。
固定定位：
- 固定定位元素是固定于浏览器可视区的位置。
- 语法：选择器 {position: fixed;}
  - 以浏览器的可视窗口为参照点移动元素。
  - 跟父元素没任何关系。
  - 不随滚动条滚动。
  - 不再占有原先的位置（脱标）。
粘性定位：
- 粘性定位可以看作是相对定位和固定定位的混合。
- 语法：选择器 {position: stick; top:10px;}
  - 以浏览器的可视窗口为参照点移动元素（固定定位特点）。
  - 粘性定位占有原先的位置（相对定位的特点）。
  - 必须添加一个偏移量属性才有效。
  - 跟页面滚动搭配使用，兼容性较差，IE不支持。

11.3、定位的叠放次序

在使用定位布局时，盒子可能出现重叠，可以使用z-index属性来设置盒子的前后顺序。
语法：选择器 {z-index: 1;}
- 只有有定位的盒子才有此属性。
- 数值可以是正负整数和0，默认是auto，数值越大盒子越靠上。
- 如果数值相同，则按照书写顺序，后来居上。

12、flex布局

Flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

Flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

12.1、组成

12.2、主轴与侧轴对齐方式

主轴对齐方式：justify-content属性

侧轴对齐方式：align-items 当前弹性容器内所有弹性盒子；align-self 单独控制某个弹性盒子

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            /* 设置弹性布局 */
            display: flex;
            height: 500px;
            border: 1px solid black;
            /* 1、设置主轴对齐方式 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /* justify-content: space-between; */
            /* justify-content: space-around; */
            /* justify-content: space-evenly; */

            /* 2、设置侧轴对齐方式 */
            /* stretch弹性盒子没有高才能拉伸 */
            /* align-items: stretch; */
            /* align-items: center; */
            /* align-items: flex-start; */
            /* align-items: flex-end; */
        }

        .box div {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

12.3、修改主轴方向

/* row默认；Colum主轴改为垂直方向（侧轴自动变为水平方向） */
         flex-direction: row;
         flex-direction: row-reverse;
         flex-direction: column;
         flex-direction: column-reverse;

12.4、弹性伸缩比

属性 flex，控制弹性盒子在主轴方向的尺寸。属性值为整数，表示占用父级剩余尺寸的份数。

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            /* 设置弹性布局 */
            display: flex;
            height: 500px;
            border: 1px solid black;
        }

        .box div {
            /* 设置flex属性 */
            flex: 1;
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

12.5、弹性换行与行对齐方式

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。
属性名 flex-wrap: wrap; flex-wrap: nowrap; 分别表示换行与不换行。
行对齐方式 align-content 对单行弹性盒子不生效。

13、元素的显示与隐藏

13.1、概述

类似网站广告，点击就关闭了，刷新就会重新出现，这本质是让一个元素在页面中显示或隐藏起来。
- display 显示隐藏。
- visibility 显示隐藏。
- overflow 溢出显示隐藏。

13.2、display属性

display属性用于设置一个元素如何显示。
- display:none; 隐藏元素。
- display:block; 除了转换为块级元素，同时还有显示元素的意思。
特点：display隐藏元素后，不再占有原来的位置。

13.3、visibility属性

visibility属性用于指定一个元素可见还是隐藏。
- visibility:visible; 元素可见。
- visibility:hidden; 元素隐藏。
特点：visibility隐藏元素后，继续占有原来的位置。

13.4、overflow属性

overflow属性指定了内容溢出一个元素的框（宽或高）时，会发生什么。
- visible——不剪切内容也不添加滚动条。
- hidden——不显示超出尺寸的内容，超出内容被隐藏。
- scroll——总是显示滚动条。
- auto——超出显示滚动条，不超出不管。
注意：在有定位的盒子需慎用hidden，因为它会隐藏多余的部分。

14、高级技巧

14.0、标题图标

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 格式为.ico 一般都是放置在网站根目录 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

14.1、三角盒子

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                width: 0;
                height: 0;
                line-height: 0;
                font-size: 0;
                border: 50px solid transparent;
                border-left-color: red;
            }
        </style>
    </head>
    <body>
    	<div></div>
    </body>
</html>

14.2、用户界面样式

鼠标样式：
- 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
- 语法：选择器 {cursor: 属性值;}
  - default —— 小白，默认。
  - pointer —— 小手。
  - move —— 移动。
  - text —— 文本。
  - not-allowed —— 禁止。
取消表单轮廓：
- 给表单添加outline: 0; 即可取消默认的蓝色边框。
防止拖拽文本域：
- 实际开发中，文本域右下角是不可拖拽的。
  textarea {
  resize: none;
  }
vertical-align属性：
- 用于设置一个元素的垂直对齐方式，但它只针对于行内元素或者行内块元素有效。
- 使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
- 语法：vertical-align: 属性值;
baseline —— 默认，元素放置在父元素的基线上。
top —— 把元素的顶端和行中最高元素的顶端对齐。
middle —— 把此元素放置在父元素的中部。
bottom —— 把元素的顶端和行中最低的元素的顶端对齐。
文字溢出省略号显示：
- 单行文本溢出省略号显示：
  - 先强制一行内显示文本。
  - 超出的部分隐藏。
  - 用省略号替代超出的文字。
  /*1、*/
  white-space: nowrap; /*默认normal 自动换行*/
  /*2、*/
  overflow: hidden;
  /*3、*/
  text-overflow: ellipsis;
- 多行文本溢出省略号显示：
  - 有较大兼容性问题，推荐后台开发。

14.3、图片模糊

filter属性将模糊或颜色偏移等图形效果应用于元素。

语法：选择器 {filter: 函数();}

div {
    		/*模糊 数值越大越模糊*/
            filter: blur(2px);
        }

14.4、calc函数

calc函数可以在声明css属性值时执行一些计算（+ - * /）。
语法：width : calc(100% - 80px);

14.5、过渡

transition属性，当元素从一种样式变换为另一种样式时为元素添加效果。
使用场景：经常和**:hover**一起搭配使用。

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

属性——宽高、背景颜色、内外边距都可以（多个属性逗号分隔），想要所有的属性都过渡写一个all就行。
花费时间——必须带单位s。
运动曲线——默认ease（可省略）。
何时开始——默认是0s。
总结：谁过渡就给谁加。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                width: 100px;
                height: 100px;
                background-color: red;
                /*鼠标悬停过渡设置*/
                transition: all 0.5s ease 0s;
            }

            div:hover {
                width: 200px;
                height: 200px;
                background-color: springgreen;
            }
        </style>
    </head>
    <body>
    	<div></div>
    </body>
</html>

14.6、2D转换

transform属性，可以实现元素的位移、旋转、缩放等效果。
移动translate：
语法：transform: translate(x,y); （也可以分开写，见下）
- 语法：transform: translateX(n);
- 语法：transform: translateY(n);
  - 元素沿着X轴和Y轴移动。
- 不会影响其他元素的位置（最大优点）。
- 移动单位可以是百分比，是相对于自身而言的。
- 对行内标签没有效果。
div {
width: 100px;
height: 100px;
background-color: red;
/*移动*/
transform: translate(100px, 0px);
}
旋转rotate：
- 语法：transform: rotate(度数deg);
  - 度数单位是deg，角度为正顺时针，角度为负逆时针。
  - 默认旋转的中心点是元素的中心点。
  - 我们可以设置元素转换的中心点：transform-origin : x,y; （单位可以是%或px）。
div {
width: 100px;
height: 100px;
background-color: red;
/*旋转*/
transform: rotate(45deg);
}
缩放scale：
- 语法：transform: scale(x,y);
  - transform: scale(2,2); = transform: scale(2); 宽和高都放大两倍。
  - transform: scale(0.5,0.5); 缩小
  - 可通过transform-origin : x,y; 设置转换中心点，不影响其他盒子。
div {
width: 100px;
height: 100px;
background-color: red;
/*缩放*/
transform: scale(2, 2);
}
位移、旋转、缩放综合写法：transform: translate(x,y) rotate( deg) scale(x,y);
- 书写顺序会影响转换的效果。
- 有位移和其它属性，位移放到最前面。

14.7、动画

基本使用：

用keyframes定义动画。

元素使用动画。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            @keyframes demo {
                /*1、定义动画 也可使用from  to*/
                0% {
                    width: 100px;
                    height: 100px;
                }
                100% {
                    width: 200px;
                    height: 200px;
                }
            }

            div {
                width: 100px;
                height: 100px;
                background-color: red;
                /*2、调用动画*/
                animation-name: demo;
                /*持续时间*/
                animation-duration: 2s;
            }
        </style>
    </head>
    <body>
    	<div></div>
    </body>
</html>

0% - 100%这套规则就叫动画序列。
常见属性：

14.8、3D转换

移动translate3d：
- 语法：transform: translate3d(x,y,z); （也可以分开写，见下）
- 语法：transform: translateX(n);
- 语法：transform: translateY(n);
- 语法：transform: translateZ(n);
旋转rotate3d:
- 语法：transform:rotate3d(x,y,z,deg); （也可以分开写，见下）
- 语法：transform:rotateX(deg);
- 语法：transform: rotateY(deg);
- 语法：transform: rotateZ(deg);
呈现transform-style：
控制子元素是否开启三维立体环境。

代码写给父元素，但影响的是子元素，很重要。

/*默认 不开启*/
transform-style: flat;
/*开启*/
transform-style: preserve-3d;

14.9、搜索引擎优化SEO

SEO是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

页面必须要有3个标签用来符合SEO优化：

title网站标题：
- 是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
- 建议：网站名（产品名）- 网站的介绍（尽量不要超过30个汉字）。
<title>淘宝网 - 淘！我喜欢</title>

description网站说明：

简要说明我们网站是做什么的。

<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">

keywords关键字：

keywords是页面关键，是搜索引擎的关注点之一。
最好限制为6-8个，关键词之间用英文逗号隔开。

<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">

15、移动端

15.1、rem

rem是相对单位，是相对于HTML标签字号的计算结果，1rem=1HTML字号大小。
要想使用rem实现等比适配，需要解决以下两个问题：
- ① 手机分辨率不同，如何设置不同的HTML标签字号？（使用媒体查询即可，实际工作中用手淘团队的flexible.js）
- ② 设备宽度不同，HTML标签字号设置多少合适？（将网页等分成10份，HTML标签的字号为视口宽度的 1/10)

媒体查询能够检测视口的宽度，然后编写差异化的CSS样式。

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 媒体查询 视口宽度是412时 */
        @media(width:412px) {
            html {
                font-size: 41px;
            }
        }

        /* 使用rem定义尺寸 */
        .box {
            /* rem = px / 基准根字号 37.5 */
            width: 3rem;
            height: 5rem;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

15.2、vw

vw是相对视口宽度的计算结果（vh则是相对视口高度），1vw=1%视口宽度（1vh同理）。

① 使用vw和vh单位，不用媒体查询就能实现等比适配。
② 工作中建议使用vw单位。
③ vw和vh不能混用，因为全面屏的原因，可能会导致盒子变形。

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 使用vw定义尺寸 */
        .box {
            width: 30vw;
            height: 50vw;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

15.3、媒体查询

媒体查询也可以查询区间（还有完整的写法，因为不常用，此处不做介绍）。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 媒体查询 视口宽度是412时 */
        @media(width:412px) {
            html {
                background-color: green;
            }
        }

        /* 媒体查询 视口宽度小于等于412时 */
        @media(max-width:412px) {
            html {
                background-color: yellow;
            }
        }

        /* 媒体查询 视口宽度大于等于412时 */
        @media(min-width:412px) {
            html {
                background-color: blue;
            }
        }
    </style>
</head>

从外部引入css样式时，可以进行媒体查询。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" media="(width:412px)" href="./pink.css">
</head>

15.4、less

less是一种css预处理器，文件扩展名是.less，扩充了css语言，使得其具备一定的逻辑性和计算能力。目前浏览器不能识别less代码，需要引入对应的css文件。

// less单行注释 ctrl / 无法转换成css注释
/* less块注释 shift alt a */

/* 1、less运算 加减乘直接书写计算表达式 除法需要添加小括号或. */
// 参与运算的都可以写单位，但计算结果会以先写的单位为准
.box {
    width: 100 + 20px;
    height: (400 / 2px);
}

/* 2、less嵌套 快速生成后代选择器 */
.box {
    // 可以设置.box的属性
    background-color: green;

    .son {
        width: 100px;
        height: 100px;

        a {
            color: red;

            // & 表示当前选择器 不会生成后代选择器
            &:hover {
                color: yellow;
            }
        }
    }
}

/* 3、less变量 必须先定义再使用 @变量名:数据; css属性:@变量名;  */
@myColor: blue;

span {
    background-color: @myColor;
}

/* 4、less导入 @import "文件路径"; 可以省略less扩展名 */
@import "./common.less";

/* 5、less导出 在less文件的第一行添加 //out: 存储url */
//out: ./index.css
/* 6、less禁止导出 在less文件的第一行添加 //out: false*/