CSS的基本使用 - IPS99技术分享

1. 初始css

1.1 引入方式

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。有三种：

行内样式表（在 HTML 元素内部）

<p style="color: white;">学习HTML好简单</p>

内部样式表（位于 <head> 标签内部）
```
<style type="text/css"></style>
```

外部样式表

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

样式表的优先级：内联 > 内部 > 外部 > 缺省

# 引入CSS样式的三种方式：
1. 外部样式 新建一个.css文件 在head标签使用link来引入
2. 内部样式 在head标签中，加入一个style标签
3. 内联样式-行内样式 在开始标签中，加入style属性
# 优先级： 内联样式 > 内部样式 > 外部样式 > 缺省样式（默认样式）
# 耦合性： 内联样式 > 内部样式 > 外部样式
# 弱耦合还是强耦合好？ 弱耦合

1.2 基本语法

CSS 语法由三部分构成：选择器、属性和值：

body { background-color:red; }

注意：多个样式之间用分号；隔开。

2. 基础选择器

选择器分为基础选择器和复合选择器两大类。

基础选择器由单个选择器组成。
基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器。

2.1 标签选择器

直接用 HTML 标签名作为选择器，按标签名称分类，为页面某一类标签指定统一的 CSS 样式。

样式：p {}
优点：标签选择器可以把某一标签全部选择出来，快速为同类型标签设置统一样式。
缺点：不能设置差异化样式，只能选择全部当前标签。

2.2 类选择器

差异化选择不同标签，单独选一个或者某个标签。

样式：.nav {}
注意：
- 若是多类名，中间用空格隔开。
- 小写，使用 - 连接单词。
- 不要用纯数字、中文。

2.3 id选择器

类名间用空格分开。

样式：#name {}

2.4 通配符选择器

用 * 定义通配符选择器，选取页面中所有标签。不需要调用，自动给所有标签。

样式：* {}

3. 常用样式

3.1 字体属性

3.1.1 字体类型

样式：font-family: "微软雅黑", Arial, Helvetica, sans-serif;
注意：
- 尽量使用默认字体，保证不同浏览器的兼容性。
- 多个字体采用英文逗号隔开。
- 第一个优先级高。

3.1.2 字体大小

样式：font-size: 16px;
注意：
- 标题标签需要单独设置，统一对body设置标题不会生效。
- px 大小是我们网页常用单位。
- 谷歌浏览器默认是 16px。

3.1.3 字体粗细

样式：font-weight: 700;
注意：
- 实际开发中，更常用数字来表示加粗或变细。
- 默认值是normal，相当于数字400。
- 加粗bold，相当于数字700。
- 不需要使用单位。

3.1.4 文字样式

样式：font-style: italic;
注意：
- 平常很少给字体加斜体，而是给斜体标签（em,i）设置字体不倾斜。

属性值	描述
normal	正常显示
italic	斜体

3.1.5 复合属性

样式：font: font-style font-weight font-size/line-hight font-family;
注意：
- 顺序不能错乱。
- 空格隔开。
- font-size和font-family的值不可以省略，剩下可以省略。

3.2 文本属性

定义文本外观，比如颜色、对齐、装饰、缩进、行间距等。

3.2.1 文本颜色

样式：color: red;或者color: #ff5555;或者color: rgb(110,110,10);
注意：
- 实际开发中，最常用的是十六进制。
- 十六进制中#666666;可以简写为#666;
- 十六进制中#ff66ff;可以简写为#f6f;

3.2.2 对齐文本

样式：text-align: center;
注意：
- 值可以是：left(默认)，center，right

3.2.3 装饰文本

样式：text-decoration: none;
注意：
- 可以给文本添加下划线删除线，上划线等。

属性值	描述
none	默认，无装饰（最常用）
underline	下划线，a 标签自带（常用）
overline	上划线。（几乎不用）
line-through	删除线。（不常用）

3.2.4 文本缩进

样式：text-indent: 5px/2em;
注意：
- 用来设置首行缩进。
- 一般使用em，是一个相对单位，例如2em，代表缩进两个字大小。

3.2.5 行间距

样式：line-height: 20px;
注意：
- 行间距=上间距+文字+下间距。
- 一般调整行间距，其实是修改了上间距和下间距。

3.2.6 文字在盒子内垂直居中

方式：让文字行高=盒子高度，也就是：line-height设置为盒子的高度。

4. 复合选择器

由两个或多个基础选择器，通过不同的方式组合而成。

包括：后代选择器、子选择器、并集选择器、伪类选择器。

4.1 后代选择器(重要)

描述：可以选择父元素中的子元素。
样式：元素1 元素2 {}
注意：
- 用来选择元素1中的所有元素2。
- 元素2不一定是直系，是后代都行。
- 元素1和元素2可以是任意选择器。
- 只影响元素2。

4.2 子选择器(重要)

描述：只能选择最近一级子元素，只能选儿子。
样式：元素1 > 元素2 {}
注意：
- 只影响元素2。
- 元素2一定是直系。
- 元素1和元素2可以是任意选择器。

4.3 并集选择器(重要)

描述：可以选择多组标签，同时设定相同的样式。
样式：元素1 , 元素2 {}
注意：
- 元素1和元素2都会受到影响。
- 元素1和元素2可以是任意选择器。

4.4 伪类选择器

描述：可以向选择器添加特殊的效果，特点是使用:。
有很多种伪类选择器，包括链接伪类，结构伪类，表单伪类等。

4.4.1 链接伪类选择器

a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接(鼠标按下未弹起的链接)

注意:

为了确保生效，使用顺序为l、v、h、a。

4.4.2 focus伪类选择器

描述：:focus 伪类选择器，用于选取获得焦点的表单元素。主要针对表单元素。
样式：input:focus{background-color:yellow}

4.4.3 其他伪类选择器

first-child
- 描述：表示父元素的第一个子元素。
- 样式：li:first-child{}
last-child
- 描述：代表父元素的最后一个子元素。
- 样式：li:last-child{}

nth-child(n)

描述：用来自定义选择子元素。

样式：

/*选择列表中的第 n 个标签*/
li:nth-child(3){
    color: blue;
}
/*选择列表的奇数行*/
li:nth-child(odd){
    background: #999;
}
/*选择列表的偶数行*/
li:nth-child(even){
    background: #999;
}

:not(p)
- 描述：用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类。
::after (:after)
- 描述：用来创建一个伪元素，作为已选中元素的最后一个子元素。
- 注意：
  - 默认是行内元素。
  - 必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。
- 样式：
```
q::after {
  content: "»";
  color: red;
}
```
::before (:before)
- 描述：用来创建一个伪元素，作为已选中元素的第一个子元素。
- 注意：
  - 默认是行内元素。
  - 必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。
- 样式：
```
q::before {
  content: "«";
  color: blue;
}
```

5. 元素显示模式

块元素。
行内元素。
行内块元素。

5.1 块元素

包含：h1-h6 ，p，div，ul，ol，li
注意：p标签里不能放div。
特点：
- 自己独占一行。
- 高度，宽度，外边距以及内边距都可以控制。
- 默认宽度是容器的100%。
- 是一个容器以及盒子，可以放行内元素。

5.2 行内元素

包含：a，strong，b，em，i，del，s，ins，u，span
特点：
- 相邻行内元素在一行。
- 高，宽直接设置是无效的。
- 默认宽度是本身宽度。
- 行内元素只能容纳文本或其他行内元素。
- 链接不能放链接。
- a标签里可以放块元素，给a转换为块级最安全。

5.3 行内块元素

包含：img，input，td
注意：同时具有块元素和行内元素的特点。
特点：
- 和相邻行内元素在一行上，一行可以显示多个，两个之间存在缝隙。
- 默认宽度是本身内容宽度。
- 高度，宽度，外边距和内边距都可以控制。

5.4 元素模式转化

描述：一个模式的元素需要另外一个模式的特性，例如增加链接a的触发范围。
样式：
- 转化为块元素：display : block ;
- 转化为行内元素：display : inline ;
- 转化为行内块元素：display : inline-block ;

6. 背景

描述：包括背景颜色，背景图片，背景图片位置，背景图像固定等。

6.1 背景颜色

样式：background-color : transparent ;
值：
- transparent背景色透明。
- 指定颜色。

6.2 背景图片

样式：background-image : url() ;
值：
- none
- URL地址。

6.3 背景平铺

样式：background-repeat : no-repeat ;
值：
- repeat：默认。
- no-repeat：不平铺。
- repeat-x：水平平铺。
- repeat-y：垂直平铺。

6.4 背景图片位置

描述：修改图片在盒子中的位置。
样式：background-position : center top ;
值：
- 参数是方位名词，两个值顺序无关。
- 参数是精确单位，有严格坐标，x轴向右，y轴向下。
- 参数是混合参数。
- 若有一个参数未指定，则那个参数默认居中。

6.5 背景图片固定

描述：图片是否随着滚动条滚动。后期可以制作视差滚动效果。
样式：background-attachment : transparent url() no-repeat scroll
值：
- scroll：随着滚动。
- fixed：固定。

6.6 背景描述统一写法

样式：background : transparent url() no-repeat scroll
注意：
- 值的位置没有固定顺序。
- 一般推荐：背景色，背景图片，背景平铺，背景图片位置，图片固定。

6.7 背景半透明

描述：设置图片的透明度。
样式：background: rgba(0, 0, 0, 0.3);
注意：
- 半透明指的是盒子背景半透明，盒子的内容不受影响。
- 最后一个参数的范围在0-1之间。
- 最后一个参数：0.3可以简写为.3。

7. 三大特性

有三个非常重要的特性：层叠性、继承性、优先级。

7.1 层叠性

描述：相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题。
注意：
- 若前面的属性不冲突，则不会覆盖掉。

7.2 继承性

描述：子标签会继承父标签的某些样式，主要跟文字相关的。例如：text-，font-，line-以及color等。
注意：
- 父标签的宽度，高度，盒子内边距这些不会被继承。
- 行高在继承时若父亲是：font: 12px/1.5。
- 后面的行高带px单位，则子模块的行高就是该数字。
- 若不带单位，行高就是子模块的字体大小乘以这个数字。

7.3 优先级

描述：同一个元素指定多个选择器，会产生优先级。
注意：
- 选择器相同，执行层叠性。
- 不同，根据选择器权重执行。
- 复合选择器，存在权重叠加。
- 权重可以叠加，需要计算权重，但是没有进位。

样式	权重（从小到大）
继承，通配符选择器	0,0,0,0
元素选择器	0,0,0,1
类，伪类选择器	0,0,1,0
id选择器	0,1,0,0
标签内style=＂＂	1,0,0,0
`!important`	无穷大∞

8. 盒子模型

描述：主要包括四部分
- border边框，content内容，padding内边距，margin外边距

8.1 border边框

描述：可以设置元素边框。边框有三个组成：border-width、border-style、border-color。
样式：border: border-width || border-style || border-color;
注意：
- 默认是总体设置上下左右四条边。
- 可以分开写：border-top，border-bottom，border-left，border-right。

8.1.1 属性描述

属性	作用
border-width	定义边框粗细，单位 px
border-style	边框样式(`none`：无边框；`solid`：实线边框；`dashed`：虚线边框；`dotted`：点线边框)
border-color	边框颜色

8.1.2 细线边框

描述：左边的右边框和右边的左边框会重叠加粗，所以添加细线属性。
样式：border-collapse : collapse ;合并相邻的边框

8.1.3 边框会影响盒子实际大小

描述：边框会额外增加盒子的实际大小，因此有两种方案解决。
方案一：测量盒子大小的时候，不测边框。
方案二：若测量的时候包含了边框，则需要 width/height-边框宽度。

8.2 padding内边距

描述：盒子与内部文字的距离。
样式：padding : a b c d
注意：
- 默认4个值的顺序是上，右，下，左。
- 可以分开写：padding -top，padding -bottom，padding -left，padding -right。
- 值的个数分别对应：
  - 1 个值：上下左右。
  - 2 个值：上下，左右。
  - 3 个值：上，左右，下。
  - 4 个值：上，右，下，左，顺时针。

8.2.1 内边距会影响盒子实际大小

描述：当盒子已经有了宽度和高度，再指定内边距，会撑大盒子。
方案：让 width/height减去多出来的内边距大小即可。

8.2.2 box-sizing-属性解决方案

描述：CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。
原本困扰：在设置了一个盒子的 width/height 后，再设置其 border/padding 会影响盒子实际大小。当进行响应式布局时，这个尤其烦人。
属性值：
- box-sizing: content-box;：是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
- box-sizing: border-box;：推荐使用。你想要设置的边框和内边距的值是包含在 width 内的。
尺寸计算公式：width = border + padding + 内容的宽度，height = border + padding + 内容的高度。
若盒子没有指定 width/height 属性，则此时 padding 不会撑开盒子大小。

8.3 margin外边距

描述：盒子与盒子之间的距离。
样式：margin : 0 auto;
注意点与padding一致，参照上方即可。

8.3.1 外边距应用

让块级盒子 水平居中。
- 需要满足两点：盒子必须指定宽度，左右外边距设置为auto。
- 样式：margin: 0 auto
让行内元素或者行内块元素水平居中。
- 给其父标签设置text-align : center ;，当成文字来设置。

8.3.2 外边距合并问题

会出现两种问题：
- 问题一：相邻块元素垂直外边距合并，第一个盒子的下边距和第二个盒子的上边距，取其中较大的那个作为垂直间距。
- 问题二：嵌套块元素垂直外边距塌陷，父元素设置了上边距，子元素也设置了上边距，取其中一个较大的父元素进向下塌陷，子元素随父元素一起塌陷，也就是子元素的设置没有生效。
出现原因：父元素与子元素贴的太紧了。
解决方案：
- 方法一：为父元素定义上边框
- 方法二：为父元素定义上内边距
- 方法三：为父元素添加 overflow:hidden。

8.3.3 清除内外边距

描述：不同浏览器默认的内外边距存在差异，所以统一清除。
样式：* { padding : 0 ; margin : 0 ; }
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以设置。

8.4 圆角边框

描述：CSS3 新增 圆角边框 属性，盒子可以变成圆角。
样式：border-radius : 10px
原理：以值为半径，画圆与矩形相切。
注意：
- 值可以使用百分比来设置。
- 常用的椭圆设置：设置为 height 的一半
- 默认是四个角都生效，可以单独设置。
- 分开来写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。

8.5 盒子阴影

描述：CSS3 新增盒子阴影，使用 box-shadow 属性。
样式：bxo-shadow: h-shadow v-shadow blur spread color inset;
注意：
- 默认是外阴影，但是不能显式的设置。
- 盒子阴影不占用空间，不会影响其他盒子排列。

8.5.1 属性设置

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

8.6 文字阴影

描述：CSS3 中，使用 text-shadow 属性设置文本阴影。
样式：text-shadow : h-shadow v-shadow blur color;

8.6.1 属性设置

值	描述
h-shadow	必需，水平阴影位置。允许负值。
v-shadow	必须，垂直阴影。允许负值。
blur	可选，模糊距离。
color	可选，阴影颜色。

9. 浮动

CSS 提供了三种传统布局方式：标准流、浮动、定位。
标准流：
- 描述：所谓的标准流，就是标签按照规定好的默认方式排列。
- 块级元素会独占一行，从上到下顺序排列常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table
- 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em
浮动：
- 描述：改变元素标签默认排列方式，让多个块级元素一行显示。
- 样式：float : none;
- 值：
  - none：元素不浮动。
  - left：左浮动。
  - right：右浮动。
- 注意：float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘。

9.1 浮动特性（重点）

浮动元素会脱离标准流，不再保留原来的位置。
浮动元素会一行内显示并且元素顶部对齐。
浮动的元素会具有行内块元素的特性。
注意：
- 浮动的元素是相互贴在一起的（没有间隙），若父级宽度放不下盒子，多出的盒子会另起一行对齐。
- 浮动元素具有行内块元素特性。任何元素都可以浮动，并且都具有行内块元素性质。

9.2 清除浮动（重点）

原因：由于父级盒子很多情况下，不方便给高度，当时盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的盒子，对后面元素排版产生影响。
本质：
- 清除浮动的本质是清除浮动元素造成的影响。
- 如果父盒子本身具有高度，则不需要清除浮动。
- 清除浮动之后，父级会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。
样式：选择器 : { clear : 属性值};
属性值：
- left：不允许左侧有浮动元素。
- right：不允许右侧有浮动元素。
- both：同时清除左右两侧浮动。开发常用

9.3 清除浮动的方法（重点）

额外标签法（隔墙法），是 W3C 推荐的方法
父级添加 overflow 属性
父级添加 after 伪元素
父级添加双伪元素

9.3.1 额外标签法

描述：最后一个浮动元素末尾添加一个 空块级元素，给其赋以属性 clear:both;。
优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化差。

9.3.2 父标签添加 overflow 属性

描述：可以给父级添加 overflow 属性，将其属性设置为 hidden、auto或scroll。
优点：代码简洁。
缺点：无法显示溢出部分。

9.3.3 父级添加 after 伪元素

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

9.3.4 父级添加双伪元素

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

10. 定位

描述：可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
定位=定位模式+边偏移。
- 定位模式：用于指定一个元素在文档中的定位方式。
- 边偏移：则决定了该元素的最终位置。

10.1 定位描述

描述：定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个值：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

10.2 边偏移

描述：边偏移就是定位的盒子移动到最终位置。有 top， bottom， left 和 right 4 个属性

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

10.3 静态定位static（了解）

描述：默认定位方式，无定位。
样式：选择器{ position: static;}
注意：
- 按照标准流拜访，没有边偏移。
- 开发很少使用。

10.4 相对定位relative（重要）

描述：自恋型的定位，所移动的位置按照原来的位置作为参照点。
样式：选择器{ position : relative;}
注意：
- 原有的位置会继续保留。
- 主要是来给绝对定位当爹。

10.5 绝对定位absolute（重要）

描述：所移动的位置按照它的祖先元素作为参照点。
样式：选择器{ position : absolute;}
注意：
- 如果 没有祖先元素 或者 祖先元素没有定位，则以 浏览器 为准定位（ Document 文档）。
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
- 绝对定位不再占有原先的位置。

10.6 固定定位fixed（重要）

描述：固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
样式：选择器{ position : fixed;}
注意：
- 以浏览器的可视窗口为参照点移动元素。
  - 跟父元素没有任何关系。
  - 不随滚动条滚动。
- 固定定位不占有原先的位置。
- 固定在版心右侧位置：
  - 首先：让固定定位的盒子 left： 50%。
  - 其次：让固定定位的盒子 margin—left板心宽度的一半距离。

10.7 粘性定位sticky（了解）

描述：可以被认为是相对定位和固定定位的混合。
样式：选择器{ position : sticky;top: 10px;}
注意：
- 以浏览器的可视窗口为参照点移动元素（固定定位特点）
- 粘性定位占有原先的位置（相对定位特点）
- 必须添加 top， left， right， bottom 其中一个才有效跟页面滚动搭配使用。
- 兼容性较差， IE 不支持。

10.8 定位叠放次序 z-index

描述：在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z—index 来控制盒子的前后次序（z 轴）。
语法：选择器 {z-index: 1;}
注意：
- 数值可以是正整数、负整数或 0，默认是 auto ，数值越大，盒子越靠上。
- 如果属性值相同，则按照书写顺序，后来居上。
- 数字后面不能加单位。
- 只有定位的盒子才有 z—index 属性。

10.9 绝对定位的盒子居中

描述：加了绝对定位的盒子不能通过 margin：0auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
方式：
- left： 50% ：让盒子的左侧移动到父级元素的水平中心位置。
- margin—left：—100px；：让盒子向左移动自身宽度的一半。

10.10 定位特殊特性

描述：绝对定位和固定定位也和浮动类似。
注意：
- 行内元素添加绝对或者固定定位，可以直接设置高度和完度。
- 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

10.11 脱标的盒子不会触发外边距塌陷

描述：浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题。

10.12 绝对定位（固定定位）会完全压住盒子

描述：浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）但是绝对定位（固定定位）会压住下面标准流所有的内容。
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素。

11. 元素的显示与隐藏

11.1 display属性

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

11.2 visibility属性

描述：属性用于指定一个元素应可见还是隐藏。
样式：visibility : hidden;
值的属性：
- inherit：继承父类。
- visible：可视。
- hidden：隐藏。
注意：
- 隐藏元素后，继续占有原来的位置。
- 如果隐藏元素想要原来位置，就用 visibility ： hidden 如果隐藏元素不想要原来位置，就用 display ： none （用处更多重点）。

11.3 overflow溢出

指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。
注意：一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。但是如果有定位的盒子，请慎用overflow : hidden; 因为它会隐藏多余的部分。

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

12. CSS高级

12.1 精灵图

描述：减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术。
注意：
- 精灵图主要针对于小的背景图片使用。
- 主要借助于背景位置来实现———background—position。
- 一般情况下精灵图都是负值。（千万注意网页中的坐标： x 轴右边走是正值，左边走是负值， y 轴同理。）

12.2 字体图标

描述：主要用于显示网页中通用、常用的一些小图标精灵图是有诸多优点的，但是缺点很明显。
下载网站：阿里 iconfont 字库 http://www.iconfont.cn 或者IcoMoon App - Icon Font, SVG, PDF & PNG Generator
icoMoon字体使用：
- 选择字体并下载。
- 将下载文件中的 fonts 文件夹复制到项目根目录下。
- 字体声明，将 style.css 文件中的开头的字体声明代码赋值到 html 中。
- 对字体图片标签设置CSS：font-family: "icomoon";
- 打开 demo.html，复制页面中的方框图标到 html 代码中即可。
icnMoon更新字体/添加字体：
- 上传 selections.json，添加字体图标，重新生成。下载，更换 @font-face 内容。

12.3 CSS 三角图形

.box1 {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-left-color: black;
  /* 照顾兼容性 */
  line-height: 0;
  font-size: 0;
}

12.4 CSS 用户界面样式

12.4.1 鼠标样式 cursor

样式：cursor:pointer;

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

12.4.2 取消表单轮廓和文本域缩放

描述：去掉点击时周围的轮廓线。
text的样式： outline: none;
textarea的样式：outline: none;resize: none;

12.5 vertical-align 的应用

描述：vertical-align 指定行内/行内块元素的元素的垂直对齐方式。
值的属性：
- baseline：默认，元素放在父元素的基线上。
- top：把元素的顶端与行中最高元素的顶端对齐。
- middle：放在父元素的中部。
- bottom：把元素的顶端与行中最低元素的顶端对齐。

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

描述：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
- 给图片添加 vertical—align: middle topl bottom; 等。（提倡使用的）
- 把图片转换为块级元素 display: block；

12.6 溢出的文字省略号显示

单行文本溢出显示省略号：

必须满足三个条件：

/*1·先强制一行内显示文本*/
white-space: nowrap;
默认normal 自动换行）
/*2·超出的部分隐藏*/
overflow: hidden;
/*3.文字用省略号替代超出的部分*/
text-overflow: ellipsis;

多行文本溢出显示省略号：

适合移动端，兼用性较差。
适合webKit内核。

overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-libe-clamp: 2;
/*设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient: vertical;

12.7 margin 负值巧妙利用

描述：解决并排盒子之间的边框宽度加倍问题。
原理：让每个盒子压住前面的盒子，边框叠加。
鼠标移动边框颜色变化效果。

/*如果盒子没有定位，则鼠标经过添加相对定位即可*/
ul li:hover {
  position: relative;
  border: 1px solid orange;
}
/*若li都有定位，则使用 z-index 提高层级*/
ul li {
  z-index: 1;
  border: 1px solid orange;
}

12.8 文字围绕浮动元素巧妙运用

原理：浮动元素不会遮住文字。

12.9 行内块元素巧妙运用

描述：行内块元素布局当前页码和 pre，next盒子，使用 text-align: center 居中。

13. CSS 初始化

描述：不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对 HTML 文本呈现的差异，照顾浏览器的兼容，我们需要对 CSS 初始化。
注意：
- Unicode 编码字体：把中文字体的名称用相应的 Unicode 编码来代替，这样就可以有效的避免浏览器解释 CSS 代码时候出现乱码的问题。
- 比如：黑体：\9ED1\4F53 宋体：\5B8B\4F53 微软雅黑：\5FAE\8F6F196C519ED1

14. CSS3 新特性

14.1 新增选择器

描述：可以更加便捷，更加自由的选择元素。
属性选择器
结构伪类选择器
伪元素选择器

14.1.1 属性选择器

input[type=text] {
    color: green;
}Copy to clipboardErrorCopied
<input type="password">
<input type="text">

类选择器、属性选择器、伪类选择器的权重都为 10

14.1.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个

重点：E: nth-child(key)

key 可以是整数、关键字（even/odd）、公式（n/2n/2n+1）

公式	取值
2n	偶数
2n-1	奇数
5n	5 10 15 ...
n+	5 6 7 8 ...
-n+5	前五个

关于 nth-of-type 与 nth-of-child

div: nth-child 会把所有的盒子都排列序号执行的时候首先看 :nth-child(1) 之后回去看前面 div
div: nth-of-type 会把指定元素的盒子排列序号执行的时候首先看 div指定的元素之后回去看 :nth-of-type(1) 第几个孩子

区别：

nth—child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
nth—of—type对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E找第n个孩子

14.1.3 伪元素选择器

描述：伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
::before：在元素内部的前面插入内容。
::after：在元素内部的后面插入内容。
注意：
- before 和 after 创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
- 语法：element：before{}
- before 和 after 必须有 content 属性
- before 在父元素内容的前面创建元素， after 在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，权重为 1

案例一：伪元素字体图标

 div::after {
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: 'icomoon';
    content: '\e91b';
    color: red;
    font-size: 18px;
}

案例二：伪元素遮罩层

.tudou::before {
    content: '';
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3) url(images/arr.png) no-repeat center;
}

案例三：伪元素清除浮动

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

双伪元素清除浮动

.clearfix::before,
.clearfix::after {
    content: '';
    display: block;
}
.clearfix::after {
    clear: both;
}

14.2 CSS3盒子模型

描述：CSS3中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box，border-box ，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
- box-sizing：content-box 盒子大小为 width + padding + border （以前默认的）
- box-sizing: border-box 盒子大小为 width 如果盒子模型我们改为了 box-sizing： border-box ，那padding 和 border就不会撑大盒子了（前提 padding 和 border 不会超过 width 宽度）

14.3 CSS3 渐变

描述：CSS 渐变是 CSS3 图像模块中添加的新类型的图像。CSS 渐变允许您在 两个或多个指定颜色之间显示平滑过渡。浏览器支持两种类型的渐变：
- 线性渐变（Linear Gradients）：向下/向上/向左/向右/对角方向，用 linear-gradient() 函数定义
  - 样式：background: linear-gradient(direction, color1, color2, ...);
  - 参数：
    - direction：指定了颜色过度的方向，不写默认为从上到下，值可以为 to bottom、to top、to right、to left、to bottom right 等。
    - color1：可以有多个 color 值，指定了颜色变化的范围。
- 径向渐变（Radial Gradients）：由它们的中心定义，用 radial-gradient() 函数定义

14.4 CSS3过渡（重点）

描述：过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
经常和:hover一起搭配使用。
样式：transition: 要过渡的属性花费时间运动曲线何时开始;
属性：
- 属性：想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
- 花费时间：单位是秒（必须写单位）比如 0.5s
- 运动曲线：默认是ease （可以省略）
- 何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是Os （可以省略）

14.5 CSS3 滤镜 filter

描述：filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
样式： filter： blur(5px);
注意：blur 模糊处理数值越大越模糊

标签：基本,盒子,样式,元素,使用,属性,选择器,CSS,描述
From： https://www.cnblogs.com/zhaohaodong/p/17481174.html