CSS 简介

美化前端页面，HTML用于做页面骨架，CSS负责美化页面

语法规范

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

选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等
属性和属性值之间用英文“:”分开
多个“键值对”之间用英文“;”进行区分

代码风格

样式格式书写

1）紧凑格式

1	h3 { color: deeppink; font-size: 20px}

2）展开格式

h3 {
  color: pink;
  font-size: 20px;
}

推荐使用第二种格式

样式大小写

推荐使用小写格式

空格规范

属性值前面，冒号后面，保留一个空格
选择器（标签）和大括号中间保留空格

CSS 基础选择器

选择器作用

选择器（选择符）就是根据不同需求选择不同的标签

标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

语法：

标签名 {
  属性1: 属性值1;
  属性2: 属性值2;
  属性3: 属性值3;
  ....
}

作用：标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签。

优点：能快速为页面中同类型的标签统一设置样式。

缺点：不能设计差异化样式，只能选择全部的当前标签。

类选择器

单类名选择器

类选择器可以单独选择一个或者某几个标签。

语法：

<style>
  .red {
    color: red;
  }
</style>
<div class="red">变红色</div>

注意：

类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义类名）。

长名称或词组可以使用中横线来为选择器命名。

不要使用纯数字、中文等命名，尽量使用英文字母来表示。

多类名选择器

使用方式

<style>
  .red {
    color: red;
  }
  .font20 {
    font-size: 20px;
  }
</style>
<div class="red font20">亚瑟</div>

1）在标签class属性中写多个类名

2）多个类名中间必须用空格分开

使用场景

1）可以把一些标签元素相同的样式（公共的部分）放到一个类里面。

2）这些标签可以调用这个公共的类，然后再调用自己独有的类。

3）从而节省CSS代码，统一修改也非常方便。

id选择器

定义

id选择器可以为特定id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。

语法：

<style>
  #id名 {
    属性1： 属性值1；
    ....
  }
</style>
<div id="id名"></div>

与类选择器的区别：

类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
id选择器好比人的身份证号码，全中国是唯一的，不得重复。
id选择器和类选择器最大的不同在于使用次数上。
类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

通配符选择器

在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。

语法：

* {
  属性1：属性值1;
  .....
}

通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况才使用

CSS 字体属性

字体系列

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

1 2	p { font-family: "微软雅黑";} div {font-family: ARIAL, "Microsoft Yahei", "微软雅黑";}

各种字体之间必须使用英文状态下的逗号隔开。
一般情况下，如果有空格隔开的多个单词组成的字体，加引号。
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示。
最常见的几个字体：

1	body{font-family: "Microsoft Yahei",tahoma,arial,"Hiragino Sans GB";}

px（像素）大小是网页的最常用的单位。
谷歌浏览器默认的文字大小为16px。
不同浏览器可能默认显示的字体大小不一致，尽量给一个明确值大小，不要默认大小。
可以给body指定真个页面文字的大小。
标题字体大小必须特别指定。

字体粗细

CSS使用font-weight属性设置文本字体的粗细。

1
2
3

p {
  font-weight: bold;
}

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100-900	400等同于normal，而700等同于bold 注意数字后面不能跟单位

文字样式

CSS使用font-style属性来设置文字样式

1
2
3

p {
  font-style: normal;
}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式 font-style:normal;
italic	浏览器会显示斜体的字体样式。

注意：一般不会给文字加斜体，反而要给斜体标签（em,i)改为不倾斜字体。

字体复合属性

字体属性可以把以上文字样式综合来写，可以节约代码。

1
2
3

body {
  font: font-style font-weight font-size/line-height font-family;
}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否者font属性将不起作用

CSS 文本属性

文本颜色

color属性用于定义文本的颜色

1
2
3

div{
  color: red;
}

代码表示	属性值
预定义的颜色值	red,green,blue等等
十六进制	#FF0000，#FF6600等等
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式

1
2
3

div{
  text-align: center;
}

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

装饰文本

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

1
2
3

div {
  text-decoration: underline;
}

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

文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落首行缩进。

1
2
3

div {
  text-indent: 10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

1
2
3

p {
  text-indent: 2em;
}

em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

行间距

line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。

1
2
3

p {
  line-height: 26px;
}

CSS 引入方式

内部样式表

内部样式表（内嵌样式表）是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中。

<style>
  div {
    color: red;
    font-size: 12px;
  }
</style>

<style>标签理论上可以放到HTML文档的任何位置，但一般会放在文档的<head>标签中

通过这种方式，可以方便控制当前整个页面中的元素样式设置

代码结构清晰，但是并没有实现结构与样式完全分离

使用内部样式表设置CSS，通常也被称为嵌入式引入，这种方式是常用的方式

行内样式表

行内样式表（内嵌样式表）是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式

1	<div style="color: red; font-size: 12px;"></div>

style其实是标签的属性

在双引号中间，写法要符合CSS规范

可以控制当前的样式设置样式

由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只对当前元素添加简单样式时，可以考虑使用

使用行内样式表设定CSS，通常也被称为行内式引入

外部样式表

实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入HTML页面中使用。

引入外部样式表分为两步：

新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。
在HTML页面中，使用<link>标签引入这个文件。

1	<link rel="stylesheet" href="css文件路径">

CSS 复合选择器

后代选择器

后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：

1	元素1 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有元素2（后代元素）。

元素1和元素2中间用空格隔开

元素1时父级，元素2是子级，最终选择的是元素2

元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可

元素1和元素2可以是任意基础选择器

子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。

语法：

1	元素1 > 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有直接后代（子元素）元素2。

元素1和元素2中间用大于号隔开

元素1是父级，元素2是子级，最终选择的是元素2

元素2必须是亲儿子，其孙子、重孙之类都不归其管

并集选择器

并集选择器可以选择多组标签，同时为她们定义相同的样式。通常用于集体声明。

并集选择器是各选择器通过英文逗号（，）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

1	元素1,元素2 { 样式声明 }

上述语法表示选择元素1和元素2

元素1和元素2中间用逗号隔开

逗号可以理解为和的意思

并集选择器通常用于集体声明

伪类选择器

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

伪类选择器书写最大特点使用冒号（:）表示，比如:hover、:first-child。

链接伪类选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*选择未被访问的链接*/
        a:link {
            color: #333;
            text-decoration: none;
        }

        /*选择已被访问的链接*/
        a:visited {
            color: orange;
        }

        /*选择鼠标指针位于其上的链接*/
        a:hover {
            color: red;
        }

        /*选择鼠标按下未弹起的链接*/
        a:active {
            color: skyblue;
        }
    </style>
</head>
<body>
<a href="#">你好，世界</a>
<br>
<a href="http://baidu.com">百度一下</a>
</body>
</html>

注意事项：

为了确保生效，需按照LVHA的顺序声明 :link - :visted - :hover - :active。

因为a链接在浏览器中具有默认样式，所以实际工作中需给链接单独指定样式。

:focus 伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input:focus {
            background-color: yellow;
        }
    </style>
</head>
<body>
<input type="text" >
<input type="text" >
<input type="text" >
</body>
</html>

CSS 的元素显示模式

块元素

常见块元素有<h1>、<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

自己独占一行
高度，宽度、外边距以及内边距都可以控制
宽度默认是容器（父级宽度）的100%
一个容器及盒子，里面可以放行内或者块级元素

行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素

注意：

链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最为安全

行内块元素

在行内元素中有几个特殊的标签：<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。

行内块元素的特点：

和相邻行内元素（行内块）在一行上，但是它们之间有空白缝隙。一行可以显示多个（行内元素特点）
默认宽度就是它本身内容的宽度（行内元素特点）
高度、行高、外边距以及内边距都可以控制（块级元素特点）

元素显示模式转换

特殊情况下，可能会需要进行元素显示模式的转换

语法：

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块元素：display:inline-block;

单行元素垂直居中

让文字的行高等于盒子的高度，就可以让文字再当前盒子内垂直居中

CSS 背景

背景颜色

background-color属性定义了元素的背景颜色。

一般情况下元素背景颜色默认是transparent（透明），也可手动指定背景颜色为透明色。

背景图片

background-image属性描述了元素的背景图片。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置

1	background-image: none \| url(url);

参数值	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

背景平铺

如果需要再HTML页面上对背景图像进行平铺，可以使用background-repeat属性。

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

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

页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色。

背景图片位置

利用background-position属性可以改变图片在背景中的位置。

1	background-position：x y;

参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位

参数值	说明
length	百分数
position	top

1.如果参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致

如果只指定了一个方位名词，另一个值省略，则另一个值默认为居中对齐

2.参数是精确单位

如果参数是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标

如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

3.参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值一定是x坐标，第二个值一定是y坐标

背景图像固定（背景附着）

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

background-attachment后面可以制作视差滚动的效果

1	background-attachment: scroll \| fixed;

参数	作用
scroll	背景图像时随对象内容滚动
fixed	背景图像固定

背景属性复合写法

为了简化背景属性的代码，可以将这些属性合并简写在同一个属性background中。从而节约代码量。

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

例如：

1	background: transparent url(image.jpg) repeat-y fixed top;

背景色半透明

CSS为我们提供了背景颜色半透明效果。

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

最后一个参数时alpha透明度，取值范围在0~1之间
可以把0.3的0省略带哦，写为background: rgba(0,0,0,.3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
CSS新增属性，是IE9+版本浏览器才支持的

背景线性渐变

1
2
3

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

背景颜色线性渐变属性必须加浏览器私有前缀

<html>
  <head>
    <style>
      div {
        width: 600px;
        height: 200px;
        background: -webkit-linear-gradient(left, red, blue);
      }
    </style>
  </head>
  <body>
    <div>
      
    </div>
  </body>
</html>

CSS 三大特性

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题

层叠性原则：

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

例如：

<html>
  <head>
    <style>
      div {
        /* 被覆盖的样式 */
        color: red;
        /* 不会被覆盖 */
        font-size: 16px;
      }
      div {
        /* 执行这个样式 */
        color: orange;
      }
    </style>
  </head>
  <body>
    <div>你好</div>
  </body>
</html>

继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号

行高继承性

1
2
3

body {
  font: 12px/1.5 Microsoft YaHei;
}

行高可以跟单位，也可以不跟单位

如果子元素没有设置行高，则会继承父元素的行高为1.5

此时子元素的行高是：当前子元素的文字大小*1.5

body行高1.5 这样写法最大优势就是里面子元素可以根据自己文字大小自动调整行高

优先级

当同一元素指定多个选择器，就会有优先级的产生

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

选择器权重如下：

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

例如：

<html>
  <head>
    <style>
      div {
        /* 本来优先级第五，但是加了!important后，优先级第一了 */
        color: pink!important;
      }
      .test {
        /* 优先级倒数第四 */
        color: red;
      }
      #demo {
        /* 优先级第三 */
        color: orange;
      }
    </style>
  </head>
  <body>
    <!-- 优先级第二 -->
    <div class="test" id="demo" style="color: purple;">你好</div>
  </body>
</html>

优先级注意点：

权重是有4组数字组成，但是不会有进位。
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
继承的权重为0，如果该元素没有直接选中，不管父元素权重有多高，子元素得到的权重都是0
复合选择器会出现权重叠加，例如 .nv li的权重为0,0,1,0 + 0,0,0,1 = 0,0,1,1

盒子模型

盒子模型的组成

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个装内容的容器

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，外边距，内边距和实际内容

边框

定义

border可以设置元素的边框。边框有三部分组成：边框粗细（宽度）、边框样式、边框颜色

边框的粗细会影响盒子的大小

例如：

<html>
  <head>
    <style>
      div {
        /* 边框宽度 */
        border-width: 5px;
        /* 边框样式 */
        border-style: solid;
        /* 边框颜色 */
        border-color: pink;
      }
    </style>
  </head>
  <body>
    <div>你好</div>
  </body>
</html>

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式（solid：实线边框，dashed：虚线边框，dotted：点线边框）
border-color	边框颜色

边框语法的简写

CSS边框属性允许同时指定一个元素的样式和颜色

例如：

<html>
  <head>
    <style>
      div {
        border: 5px solid pink;
      }
    </style>
  </head>
  <body>
    <div>你好</div>
  </body>
</html>

边框分开写法：

1 2	/* 只设定上边框，其余同理 */ border-top: 5px solid red;

边框的层叠性

<html>
  <head>
    <style>
      div {
        /* 涉及四个边框 */
        border: 5px solid pink;
        /* 只设定上边框，会覆盖掉上面的上边框配置 */
        border-top: 5px solid red; 
      }
    </style>
  </head>
  <body>
    <div>你好</div>
  </body>
</html>

表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法：

1	border-collapse: collapse;

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

内边距

定义

padding属性用于设置内边距，即边距与内容之间的距离

内边距会影响盒子的大小，但是如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

复合写法

padding属性（简写属性）可以有一到四个值

值的个数	表达意思
padding: 5px;	1个值，待变上下左右都有5像素的边距
padding: 5px 10px;	2个值，代表上下边距是5像素，左右边距是10像素
padding: 5px 10px 20px;	3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding: 5px 10px 20px 30px;	4个值，代表上内边距5像素，下内边距10像素，左内边距20像素，右内边距30像素

外边距

定义

margin属性用于设置外边距，即控制盒子和盒子之间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

复合写法

与内边距复合写法一致

外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

1.盒子必须指定宽度（width）。

2.盒子左右的外边距都设置为auto。

.header {
  width: 960px;
  margin: 0 auto;
}

常见的写法：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0px auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align: center即可

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

嵌套块元素垂直外边距的塌陷：

对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值。

解决方案：

1.可以为父元素定义上边框

2.可以为父元素定义内边距

3.可以为父元素添加overflow: hidden。

清除内外边距

网页元素自带默认的内外边距，而且不同浏览器默认的也不一致。因此在布局前，首先要清除网页元素的内外边距。

* {
  /* 清除内边距 */
  padding: 0;
  /* 清除外边距 */
  margin: 0;
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级或行内块元素就可以设置了。

去除列表中的小圆点

语法：

1	list-style: none;

圆角边框

在CSS3中，新增了圆角边框样式，这样盒子就可以变成圆角。

border-radius属性用于设置元素的外边框圆角。

语法：

1	border-radius: length;

radius半径（圆的半径）原理：（椭）圆与边框的交集形成了圆角效果

参数值可以是数值或者百分比的形式

如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%

如果是个矩形，设置为高度的一半就可以实现圆角矩形

该属性可以简写，四个值分别代表左上角、右上角、右下角、左下角，两个值分别代表正对角线、反对角线

分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius

盒子阴影

CSS3中新增了盒子阴影，可以使用box-shadow属性为盒子添加阴影。

语法：

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

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

注意：

1.默认的是外部阴影（outset），但是不可以写这个单词，否则导致阴影失效。

2.盒子阴影不占用空间，不会影响其他盒子排列。

文字阴影

在CSS3中，可以使用text-shadow属性将阴影应用于文字

语法：

1	text-shadow: h-shadow v-shadow blur color;

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

CSS 浮动

标准流

所谓标准流：就是标签按照规定好默认方式排列

1.块级元素会独占一行，从上向下顺序排列。

常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

2.行内元素会按照顺序、从左到右排列，碰到父元素边缘则自动换行

span、a、i、em等

浮动定义

float属性用于创建浮动框，将其移动到一边，知道左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

1
2
3

选择器 {
  float： 属性值;
}

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

浮动特性

1.脱离标准普通流的控制（浮）移动到指定位置（动）

2.浮动的盒子不再保留原先的位置

3.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

4.浮动元素会具有行内块元素特性

任何元素都可以浮动。不管原来是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

如果块级元素没有设置宽度，默认宽度和父级一样，但是添加浮动后，它的大小根据内容来决定
浮动的盒子中间没有缝隙，是紧挨在一起的
行内元素同理

清除浮动

清除浮动的原因

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

父盒子未设置高度，父盒子中的子盒子浮动不占有位置，故而父盒子高度为0，下面的盒子就会顶上，排版就乱掉了

清除浮动的语法

1
2
3

选择器 {
  clear: 属性值;
}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧又浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

实际工作中，常用clear: both;

清除浮动的方法

额外标签法

额外标签法也称隔墙法

额外标签法会在浮动元素末尾添加一个空标签。例如<div style="clear: both;"></div>，或者其他标签（如<br/>等）

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

注意：要求这个新的空标签必须是块级元素

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            margin: 0 auto;
            background-color: orange;
        }

        .footer {
            height: 100px;
            background-color: black;
        }

        .damao {
            width: 100px;
            float: left;
            background-color: pink;
        }

        .ermao {
            width: 100px;
            float: left;
            background-color: pink;
        }

        .box .clear {
            clear: both;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="damao">大毛</div>
    <div class="ermao">二毛</div>
    <!-- 清除左右浮动 -->
    <div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html>

父级添加overflow

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。

优点：代码简洁
缺点：无法显示溢出的部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            margin: 0 auto;
            background-color: orange;
            /* 清除子元素的浮动 */
            overflow: hidden;
        }

        .footer {
            height: 100px;
            background-color: black;
        }

        .damao {
            width: 100px;
            float: left;
            background-color: pink;
        }

        .ermao {
            width: 100px;
            float: left;
            background-color: pink;
        }

        .box .clear {
            clear: both;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="damao">大毛</div>
    <div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>
</html>

after伪元素

:after方式是额外标签法的升级版。也是给父元素添加

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

/* IE6、7专有 */
.clearfix {
  *zoom: 1;
}

优点：没有增加标签，结果更简单

缺点：照顾低版本浏览器

在父元素的class属性中添加clearfix

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            margin: 0 auto;
            background-color: orange;
        }

        .footer {
            height: 100px;
            background-color: black;
        }

        .damao {
            width: 100px;
            float: left;
            background-color: pink;
        }

        .ermao {
            width: 100px;
            float: left;
            background-color: pink;
        }

        /* after伪元素清除浮动 */
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        /* IE6、7专有 */
        .clearfix {
            *zoom: 1;
        }
    </style>
</head>
<body>
<!-- 父盒子添加clearfix，实现清除浮动的影响 -->
<div class="box clearfix">
    <div class="damao">大毛</div>
    <div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>
</html>

双伪元素清除浮动

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

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

优点：代码更简洁

缺点：需要照顾低版本浏览器

在父级元素的class属性中添加clearfix

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            margin: 0 auto;
            background-color: orange;
        }

        .footer {
            height: 100px;
            background-color: black;
        }

        .damao {
            width: 100px;
            float: left;
            background-color: pink;
        }

        .ermao {
            width: 100px;
            float: left;
            background-color: pink;
        }

        /* 双伪元素清除浮动 */
        .clearfix:before, .clearfix:after {
            content: "";
            /* 转换成块级元素并且一行显示 */
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }
    </style>
</head>
<body>
<!-- 在父级元素添加 -->
<div class="box clearfix">
    <div class="damao">大毛</div>
    <div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>
</html>

CSS 定位

定位组成

定位：把盒子固定在某一位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

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

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

定位模式

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

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

边偏移

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

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

静态定位 static

静态定位是元素的默认定位方式，无定位的意思。

语法：

1
2
3

选择器 {
  position: static;
}

静态定位按照标准流特性摆放位置，它没有边偏移

静态定位在布局时很少用到

相对定位 relative

相对定位时元素在移动位置的时候，是相对于它原来的位置来说的。

语法：

1
2
3

选择器 {
  position: relative;
}

相对定位的特点：

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）

绝对定位 absolute

绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的。

语法：

1
2
3

选择器 {
  position: absolute;
}

绝对定位的特点：

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级有定位的祖先元素为参考点移动位置
绝对定位不再占有原先的位置（脱标）

固定定位

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

语法：

1
2
3

选择器 {
  position: fixed;
}

固定定位的特点：

以浏览器的可视窗口为参照点移动元素。

跟父元素没有任何关系。
不随滚动条滚动。

固定定位不占有原来的位置

固定定位小技巧：固定在版心右侧位置。

1.让固定定位的盒子left：50%，走到浏览器可视区域的一半位置。

2.让固定定位的盒子margin-left: 版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐。

添加固定定位的盒子一定要给宽度

粘性定位

粘性定位可以被认为是相对定位和固定定位的混合。Sticky 粘性的语法：

选择器 {
  position: sticky;
  top: 10px;
}

粘性定位的特点：

以浏览器的可视窗口为参照点移动元素（固定定位的特点）
粘性定位占有原先的位置（相对定位的特点）
必须添加top、left、right、bottom其中一个才有效

跟页面滚动搭配使用。兼容性较差，IE不支持。

子绝父相

原因：

子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
父盒子需要加定位限制子盒子在父盒子内显示。
父盒子布局时，需要占有位置，因此父盒子只能是相对定位。

总结：父盒子需要占有位置，所以使用相对定位，而子盒子不需要占有位置，所以是绝对定位。

定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）

语法：

1
2
3

选择器 {
  z-index: 1;
}

数值可以是正整数、负整数或0、默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来者居上
数字后面不能加单位
只有定位的盒子才有z-index属性

定位的扩展

绝对定位（或固定定位）的盒子居中

加了绝对定位的盒子不能通过margin: 0 auto水平居中，但是i可以通过以下计算方式实现水平和垂直居中。

1.left: 50%; ：让盒子的左侧移动到父级元素的水平中心位置。

2.margin-left：-盒子宽度的一半px; ：让盒子向左移动自身宽度的一半。

定位的特性

绝对定位和固定定位也和浮动类似。

1.行内元素添加绝对或固定定位，可以直接设置高度和宽度。

2.块级元素提娜佳绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

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

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

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

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

但是绝对定位（固定定位）会压住下面标准流所有的内容。

浮动之所以不会压住文字，是因为浮动产生的最初目的是为了做文字环绕效果的。文字会围绕浮动元素

元素的显示与隐藏

类似网站广告，当点击关闭就不见了，但是刷新网页后又会重新出现

本质：让一个元素在页面中隐藏或者显示出来

三种属性都可以实现该效果：

display 显示隐藏
visibility 显示隐藏
overflow 溢出显示隐藏

display 属性

display属性用于设置一个元素应如何显示。

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

display隐藏元素后，不再占有原来的位置。

visibility 属性

visibility属性用于指定一个元素应可见还是隐藏。

visibility: visible; 元素可视
visibility: hidden; 元素隐藏

visibility隐藏元素后，继续占有原来的位置

overflow 属性

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会做哪些处理。

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

一般情况下，都不会让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，则需要慎用overflow: hidden; 因为它会隐藏多余的部分。

精灵图

精灵图出现的原因

由于前端展示的图片都是通过请求从服务器获取得到，如果所有图片都是分开的，那么展示一张网页则会多次访问服务器，导致服务器压力增加。故此引出了精灵图，将多张图片整合成一张图片，当网页显示时，只需要请求一次即可拿到所有图片。

精灵图的使用

精灵图主要针对于小的背景图片使用。
主要借助于背景位置来实现（background-position）。
一般情况下精灵图都是负值（千万注意网页中的坐标：x轴右边走是正值，左边走是负值，y轴同理）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拼出自己的名字</title>
    <style>
      span {
        display: inline-block;
      }
      .c {
        width: 102px;
        height: 113px;
        background: url(images/abcd.jpg) no-repeat -240px -6px;
      }
      .z {
        width: 114px;
        height: 115px;
        background: url("images/abcd.jpg") no-repeat -480px -554px;
      }
    </style>
</head>
<body>
    <span class="c"></span>
    <span class="z"></span>
</body>
</html>

字体图标

字体图标的产生

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。

精灵图是有诸多优点的，但是缺点也很明显。

图片文件还是比较大的。

图片本身放大和缩小会失真。

一旦图片制作完毕想要更换是非常复杂的。

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

字体图标的优点

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

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

如果遇到一些结构和样式比较简单的小图标，就用字体图标

如果遇到一些结构和样式复杂一点的小图片，就用精灵图

字体图标的使用

使用教程：https://blog.csdn.net/weixin_70152241/article/details/127596380

CSS 三角

网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作CSS三角</title>
    <style>
      .jd {
        position: relative;
        width: 120px;
        height: 249px;
        background-color: pink;
      }
      /* css三角 */
      .jd span{
        position: absolute;
        right: 15px;
        top: -10px;
        width: 0;
        height: 0;
        /* 兼容低版本浏览器 */
        line-height: 0;
        font-size: 0;
        border: 5px solid transparent;
        border-bottom-color: pink;
      }
    </style>
</head>
<body>
    <div class="jd">
      <span></span>
    </div>
</body>
</html>

CSS 用户界面样式

更改用户的鼠标样式 cursor

语法：

1
2
3

li {
  cursor: pointer;
}

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

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

轮廓线 outline

给表单添加outline: 0; 或者outline: none; 样式之后，就可以去掉默认的蓝色边框。

语法：

1
2
3

input {
  outline: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮廓线</title>
    <style>
      input, textarea {
        outline: none;
      }

      textarea {
          resize: none;
      }
    </style>
</head>
<body>
  <!-- 取消表单轮廓 -->
  <input type="text">
  <!-- 防止拖拽文本域 -->
  <textarea cols="30" rows="10"></textarea>
</body>
</html>

防止拖拽文本域 resize

语法：

1
2
3

textarea {
  resize: none;
}

vertical-align 属性应用

定义

CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

语法：

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

值	描述
baseline	默认。元素放置再父元素的基线上。
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。

<html>
  <head>
    <style>
      textarea {
        /* 实现文本域与后面的文字水平居中对齐 */
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <textarea></textarea>请你留言
  </body>
</html>

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

bug：图片底侧会有一个空白缝隙，原因是在行内块元素会和文字的基线对齐。

主要解决办法有两种：

给图片添加vertical-align: middle | top | bottom等
把图片转换成块级元素 diplay: block;

溢出的文字省略号显示

单行文本溢出显示省略号的方法

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

<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 100px;
        background-color: pink;
        margin: 100px auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <div>
      此处省略一万字
    </div>
  </body>
</html>

多行文本溢出显示省略号

多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）

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

<html>
  <head>
    <style>
      div {
        height: 45px;
        width: 100px;
        background-color: pink;
        margin: 100px auto;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    </style>
  </head>
  <body>
    <div>
      此处省略一万字此处省略一万字此处省略一万字此处省略一万字
    </div>
  </body>
</html>

常见布局技巧

margin 负值运用

1.实现两个盒子的边框重叠（如果只是让边框为1px的盒子浮动，会导致两个盒子相邻的边框紧靠在一起，进而出现2px的边框）

<html>
  <head>
    <style>
      ul li {
        float: left;
        list-style: none;
        width: 150px;
        height: 200px;
        border: 1px solid red;
        /* 实现盒子相邻边框的重叠 */
        margin-left: -1px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  </body>
</html>

2.实现鼠标经过盒子，改变盒子边框颜色

<html>
  <head>
    <style>
      ul li {
        position: relative;
        float: left;
        list-style: none;
        width: 150px;
        height: 200px;
        border: 1px solid red;
        /* 实现盒子相邻边框的重叠 */
        margin-left: -1px;
      }
      /*ul li:hover {
         1.如果盒子没有添加定位，则采用给盒子添加相对定位提高盒子的显示层级 
        position: relative;
        border: 1px solid blue;
      }*/
      ul li:hover {
        /* 2.如果盒子添加了定位，则采用z-index提高盒子显示层级 */
        z-index: 1;
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  </body>
</html>

文字围绕浮动元素

不采用左右布局的方式实现如下图片效果

<html>
  <head>
    <style>
      .box {
        width: 300px;
        height: 70px;
        background-color: pink;
        margin: 0 auto;
      }
      
      .pic {
        float: left;
        width: 120px;
        height: 60px;
      }
      
      .pic img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="pic">
        <img src="图片地址">
      </div>
      <p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
    </div>
  </body>
</html>

行内块巧妙使用

使用行内块元素实现页码的布局效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      * {
        border: 0;
        margin: 0;
      }

      /* 父级元素添加text-align: center;可以实现子级元素中的行内块元素和块元素居中对齐 */
      .box {
        text-align: center;
      }

      .box a {
        display: inline-block;
        width: 36px;
        height: 36px;
        background-color: #f7f7f7;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 36px;
        text-decoration: none;
        color: #333;
        font-size: 14px;
      }

      .box .current,
      .box .elp{
        background-color: #fff;
        border: none;
      }

      .box .prev,
      .box .next {
        width: 85px;
      }

      .box input {
        width: 45px;
        height: 36px;
        border: 1px solid #ccc;
        outline: none;
      }

      .box button {
        width: 60px;
        height: 36px;
        background-color: #f7f7f7;
        border: 1px solid #ccc;
      }
    </style>
</head>
<body>
    <div class="box">
      <a href="#" class="prev">&lt;&lt;上一页</a>
      <a href="#">1</a>
      <a href="#" class="current">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
      <a href="#" class="elp">...</a>
      <a href="#" class="next">&gt;&gt;下一页</a>
      到第
      <input type="text">
      页
      <button>确定</button>
    </div>
</body>
</html>

CSS 三角强化

实现获得如下的梯形

<html>
  <head>
    <style>
      .price {
        width: 160px;
        height: 24px;
        border: 1px solid red;
        margin: 0 auto;
      }
      
      .miaosha {
        position: relative;
        float: left;
        width: 90px;
        height: 100%;
        background-color: red;
        text-align: center;
        color: #fff;
        font-weight: 700;
      }
      
      .miaosha i {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        /* 1.只保留右边的边框有颜色 */
        border-color: transparent #fff transparent transparent;
        /* 2.样式都是solid */
        border-style: solid;
        /* 3.上边框大一点，右边框小一点，下和左边框宽度为0 */
        border-width: 24px 10px 0 0;
      }
      
      .origin {
        font-size: 12px;
        color: gray;
        text-decoration: line-through;
        margin-left: 8px;
      }
    </style>
  </head>
  <body>
    <div class="price">
      <span class="miaosha">
        ￥1650
        <i></i>
      </span>
      <span class="origin">￥5650</span>
    </div>
  </body>
</html>

CSS 初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，需要对CSS初始化。

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

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

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

Unicode编码字体：

把中文字体的名称用相应的Unicode编码来代替，这样可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

比如：

黑体 \9ED1\4F53

宋体 \5B8B\4F53

微软雅黑 \5FAE\8F6F\96C5\9ED1

CSS3 新增特性

属性选择器

属性选择器可以根据元素特定属性来选择元素。这样就可以不用借助于类或者id选择器。

选择符	简介
[att]	选择具有att属性的所有元素
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元素

注意：类选择器、属性选择器、伪类选择器的权重都是10。

结构伪类选择器

结构伪类选择器主要是根据文档结构来选择元素，常用于根据父级选择器里面的子元素

选择器	简介
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个

区别：

nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配

nth-of-type对父元素里卖弄指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子

nth-child(n)选择某个父元素的一个或多个特定的子元素

n可以是数字，关键字和公式
n如果是数字，就是选择第n个子元素，里面数字从1开始
n可以是关键字：even代表偶数，odd代表奇数
n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超过了元素的个数会被忽略）

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15…
n+5	从第5个开始（包含第五个）到最后
-n+5	前5个（包含第五个）

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

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

注意：

before和after创建一个元素，但是属于行内元素

新创建的这个元素在文档书中是找不到的，所以称之为伪元素

语法：element::before{}

before和after必须有content属性

before在父元素内容的前面创建元素，after在父元素内容的后面插入元素

伪元素选择器和标签选择器一样，权重为1

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宽度）

CSS3 过滤filter

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

1 2	/* 例如：filter:blur(5px); blur模糊处理数值越大越模糊 */ filter: 函数();

CSS3 calc函数

calc() 此CSS函数可以在声明CSS属性值时执行一些计算。

1	width: calc(100% - 80);

括号里面可以使用+-*/来进行计算。

<html>
  <head>
    <style>
      .father {
        width: 300px;
        height: 200px;
        background-color: pink;
      }
      .son {
        width: calc(100% - 30px);
        height: 30px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <!-- 需求：子盒子宽度永远比父盒子宽度小30px -->
    <div class="father">
      <div class="son"></div>
    </div>
  </body>
</html>

CSS3 过渡

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

属性：想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all即可。
花费时间：单位是秒（必须写单位）比如0.5s
运动曲线：默认是ease（可以省略）

何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是0s（可以省略）

<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: pink;
        transition: all .5s;
      }
      
      div:hover {
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

CSS3 2D转换

转换（transform）是CSS3中具有颠覆性的特性之一，可以实现元素的位移、旋转、缩放等效果

移动 translate

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

语法

1
2
3

transform: translate(x,y);或者分开写
transform: translateX(n);
transform: translateY(n);

重点

定义2D转换中的移动，沿着X和Y轴移动元素
translate最大的优点：不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%);
对行内标签没有效果

旋转 rotate

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

语法

1	transform: rotate(度数);

重点

rotate里面跟度数，单位是deg 比如 rotate(45deg)
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点

<html>
<head>
  <Style>
    div {
      position: relative;
      width: 249px;
      height: 33px;
      border: 1px solid #000;
    }
    div::after {
      content: '';
      position: absolute;
      top: 7px;
      right: 15px;
      width: 10px;
      height: 10px;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      transform: rotate(45deg);
      transition: all 0.2s;
    }
    div:hover::after{
      transform: rotate(225deg);
    }
  </Style>
</head>
<body>
  <div></div>
</body>
</html>

设置元素转换中心点

语法

1	transform-origin: x y;

重点

注意后面的参数x和y用空格隔开
x y默认转换的中心点是元素的中心点（50% 50%）
还可以给x y 设置像素或者方位名词 (top bottom left right center)

<html>
  <head>
   <style>
     
   </style>
  </head>
  <body>
    
  </body>
</html>

缩放 scale

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

语法

1	transform: scale(x,y);

注意

注意其中的x和y用逗号分隔，并且x和y不能跟单位。
transform: scale(1,1)：宽和高都放大一倍，相对于没有放大
transform: scale(2,2)：宽和高都放大了2倍
transform: scale(2)：只写了一个参数，第二个参数则和i的一个参数一样，相当于 scale(2,2)
transform: scale(0.5,0.5)：缩小2倍
scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

<html>
<head>
  <Style>
    li {
      float: left;
      width: 30px;
      height: 30px;
      margin: 10px;
      border: 1px solid #0da8ff;
      border-radius: 50%;
      text-align: center;
      line-height: 30px;
      list-style: none;
      cursor: pointer;
      transition: all .4s;
    }
    li:hover {
      transform: scale(1.2);
    }
  </Style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
</body>
</html>

2D 转换综合写法

注意：

同时使用多个转换，其格式为：transform: translate() rotate() scale()…等
其顺序会影响转换的效果（先旋转会改变坐标轴的方向）
当同时有位移和其他属性的时候，要将位移放到前面

CSS3 动画

制作动画分为两步：先定义动画，再使用（调用）动画

用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称 {
  /* 开始状态 */
  0% {
    width: 100px;
  }
  /* 结束状态 */
  100% {
    width: 200px;
  }
}

动画序列

0%是动画的开始，100%是动画的弯沉。这样的规则就是动画序列。

在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多次的样式。

用百分比来规定变化发生的时间，或用关键词“form”和“to”，等同于0%和100%。

元素使用动画

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

动画常见的属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了aniamtion-play-state属性。
animation-name	规定@keyframes动画的名称。（必须的）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的）
animation-timing-function	规定动画的速度曲线，默认是”ease”。
animation-delay	规定动画何时开始
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite，表示无限次。
animation-direction	规定动画是否在下一个周期逆向播放，默认是”normal”，altemate逆播放。
animation-play-stae	规定动画是否正在运行或暂停。默认是”running”，还有”paused”。
animaion-fill-mode	规定动画结束后状态，保持结束状态forwards，回到起始状态backwards（默认）

动画简写属性

animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态

1	animation: myfirst 5s linear 2s infinite alternate;

速度曲线细节

animation-timing-function：规定动画得速度曲线，默认是”ease”

值	描述
linear	动画从头到尾得速度是相同的
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束
steps()	制定了时间函数中的间隔数量（步长）

<html>
  <head>
    <style>
      div {
        font-size: 20px;
        overflow: hidden;
        width: 0;
        height: 30px;
        white-space: nowrap;
        animation: move 4s steps(10)  forwards;
      }
      @keyframes move {
        0% {
          width: 0;
        }
        100% {
          width: 200px;
        }
      }
    </style>
  </head>
  <body>
    <div>
      世纪佳缘我在这里等你
    </div>
  </body>
</html>

CSS3 3D转换

三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

x轴：水平向右注意：x右边是正值，左边是负值
y轴：垂直向下注意：y下面是正值，上面是负值
z轴：垂直屏幕注意：往外面是正值，往里面是负值

3D移动 translate3d

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

transform: translateX(100px)：仅仅是在x轴上移动
transform: translateY(100px)：仅仅实在y轴上移动
transform: translateZ(100px)：仅仅实在z轴上移动
transform: translate3d(x,y,z)：其中x、y、z分别指要移动的轴的方向的距离

透视 prerspective

在2D平面产生近大远小视觉立体，但是只有效果二维的

如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。
模拟人类的视觉位置，可认为安排一直眼睛去看
透视也称之为视距：视距指人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单位是像素

透视写在被观察元素的父盒子上面

d：就是视距，视距是指人眼到屏幕的距离
z：就是z轴，物体距离屏幕的距离，z轴越大（正值），看到的物体就越大。

3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。

语法：

transform: rotateX(45deg)：沿着x轴正方向旋转45度
transform: rotateY(45deg)：沿着y轴正方向旋转45度
transform: rotateZ(45deg)：沿着z轴正方向旋转45度
transform: rotate3d(x,y,z,deg)：沿着自定义轴旋转，deg为角度（了解即可）

transform: rotate3d(1,0,0,45deg)就是沿着x轴旋转45deg

transform: rotate3d(1,1,0,45deg)就是沿着对角线旋转45deg

3D呈现 transform-style

控制子元素是否开启三维立体环境。
transform-style: flat 子元素不开启3d立体空间默认的
transform-style: preserve-3d; 子元素开启立体空间
代码写在父级，但是影响的是子盒子

<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 100px auto;
        perspective: 500px;
        transition: all 1s;
        /*保持子元素的3d效果*/
        transform-style: preserve-3d;
      }
      .box div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: pink;
      }
      .box div:last-child {
        background-color: purple;
        transform: rotateX(60deg);
      }
      .box:hover {
        transform: rotateY(60deg);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div></div>
      <div></div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style>
    .box {
      position: relative;
      width: 300px;
      height: 300px;
      margin: 100px auto;
      perspective: 500px;
      transition: all 2s;
      transform-style: preserve-3d;
    }
    .box:hover {
      transform: rotateY(180deg);

    }
    .front,
    .back {
      position: absolute;
      width: 100%;
      height: 100%;
      font-size: 30px;
      color: #fff;
      line-height: 300px;
      text-align: center;
      border-radius: 50%;
    }
    .front {
      background-color: pink;
      z-index: 1;
      backface-visibility: hidden;
    }
    .back {
      background-color: purple;
      transform: rotateY(180deg);
    }
  </style>
</head>
<body>
<div class="box">
  <div class="front">黑马程序员</div>
  <div class="back">pink老师在这里等你</div>

</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      margin: 100px;
    }
    ul li {
      float: left;
      width: 150px;
      height: 35px;
      list-style: none;
      perspective: 500px;
    }
    .box {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: all .4s;
    }
    .box:hover {
      transform: rotateX(90deg);
    }
    .front,
    .bottom {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      line-height: 35px;
      text-align: center;
      color: #fff;
    }
    .front {
      background-color: pink;
      z-index: 1;
      transform: translateZ(17.5px);
    }
    .bottom {
      background-color: purple;
      /* 有多个动画效果，先移动再做其他动作 */
      transform: translateY(17.5px) rotateX(-90deg);
    }
  </style>
</head>
<body>
  <ul>
    <li>
      <div class="box">
        <div class="front">黑马程序员</div>
        <div class="bottom">Pink老师在这等你</div>
      </div>
    </li>
    <li>
      <div class="box">
        <div class="front">黑马程序员</div>
        <div class="bottom">Pink老师在这等你</div>
      </div>
    </li>
    <li>
      <div class="box">
        <div class="front">黑马程序员</div>
        <div class="bottom">Pink老师在这等你</div>
      </div>
    </li>
    <li>
      <div class="box">
        <div class="front">黑马程序员</div>
        <div class="bottom">Pink老师在这等你</div>
      </div>
    </li>
  </ul>
</body>
</html>

浏览器私有前缀

私有前缀

-moz-：代表firefox浏览器私有属性
-ms-：代表ie浏览器私有属性
-webkit：代表sfari、chrome私有属性
-o-：代表Opera私有属性

提倡写法

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

页面滚动效果

给页面添加滚动效果：

1
2
3

html {
  scroll-behavior: smooth;
}

CSS 简介

语法规范

代码风格

样式格式书写

样式大小写

空格规范

CSS 基础选择器

选择器作用

标签选择器

类选择器

单类名选择器

多类名选择器

id选择器

定义

与类选择器的区别：

通配符选择器

CSS 字体属性

字体系列

字体大小

字体粗细

文字样式

字体复合属性

CSS 文本属性

文本颜色

对齐文本

装饰文本

文本缩进

行间距

CSS 引入方式

内部样式表

行内样式表

外部样式表

CSS 复合选择器

后代选择器

子选择器

并集选择器

伪类选择器

链接伪类选择器

:focus 伪类选择器

CSS 的元素显示模式

块元素

行内元素

行内块元素

元素显示模式转换

单行元素垂直居中

CSS 背景

背景颜色

背景图片

背景平铺

背景图片位置

背景图像固定（背景附着）

背景属性复合写法

背景色半透明

背景线性渐变

CSS 三大特性

层叠性

继承性

优先级

盒子模型

盒子模型的组成

边框

定义

边框语法的简写

表格的细线边框

内边距

定义

复合写法

外边距

定义

复合写法

外边距典型应用

外边距合并

清除内外边距

去除列表中的小圆点

圆角边框

盒子阴影

文字阴影

CSS 浮动

标准流

浮动定义