CSS 简介

什么是 CSS?

  • CSS 指层叠样式表 ( Cascading Style Sheets )
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一
  • 样式对网页中元素位置的排版进行像素级精确控制

样式层叠

样式层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。

样式层叠次序

当同一个 HTML 元素定义了多个样式时，应该使用哪个样式？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

CSS 语法

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

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS 注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 “/*“ 开始, 以 “*/“ 结束

css选择器总结

1，基本选择器语法

选择器 类型 功能描述
* 通配选择器 选择文档中所有HTML元素
E 元素选择器 选择指定类型的HTML元素
#id ID选择器 选择指定ID属性值为“id”的任意类型元素
.class 类选择器 选择指定class属性值为“class”的任意类型的任意多个元素
selector1,selectorN 群组选择器 将每一个选择器匹配的元素集合并

2，层次选择器语法

选择器 类型 功能描述
E F 后代选择器（包含选择器） 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F 子选择器 选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
E~F 通用选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

3，动态伪类选择器语法

选择器 类型 功能描述
E:link 链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited 链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active 用户行为选择器 选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover 用户行为选择器 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus 用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点

4，目标伪类选择器

选择器 功能描述
E:target 选择匹配E的所有元素，且匹配元素被相关URL指向

5，UI元素状态伪类选择器语法

选择器 类型 功能描述
E:checked 选中状态伪类选择器 匹配选中的复选按钮或者单选按钮表单元素
E:enabled 启用状态伪类选择器 匹配所有启用的表单元素
E:disabled 不可用状态伪类选择器 匹配所有禁用的表单元素

6，结构伪类选择器使用语法

选择器 功能描述
E:first-child 作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
E:last-child 作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
E:root 选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同
E F:nth-child(n) 选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.
E F:nth-last-child(n) 选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同
E:nth-of-type(n) 选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n) 选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type 选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
E:last-of-type 选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
E:only-child 选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type 选择父元素只包含一个同类型子元素，且该子元素匹配E元素
E:empty 选择没有子元素的元素，而且该元素也不包含任何文本节点

注：（1），“ul>li:nth-child(3)”表达的并不是一定选择列表ul元素中的第3个子元素li，仅有列表ul中第3个li元素前不存在其他的元素，命题才有意义，否则不会改变列表第3个li元素的样式。

（2），:nth-child(n) 中参数只能是n，不可以用其他字母代替。

（3），:nth-child(odd) 选择的是奇数项，而使用:nth-last-child(odd) 选择的却是偶数项

7，否定伪类选择器

选择器 功能描述
E:not(F) 匹配所有除元素F外的E元素

8，属性选择器语法

选择器 功能描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute=value] 匹配属性值中包含指定值的每个元素。

注：例

其中a[class=”links”]{……} 是找不到匹配元素，只有a[class=”links item”]{……}才匹配

CSS 创建

如何插入样式表

插入样式表的方法有三种:

  • 外部样式表
  • 内部样式表
  • 内联样式

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部

  1. <head> 
  2.     <link rel="stylesheet" type="text/css" href="mystyle.css"> 
  3. </head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style>标签在文档头部定义内部样式表。

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 head 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

多重样式优先级顺序

下列是一份优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：

  1. 通用选择器（*）
  2. 元素(类型)选择器
  3. 类选择器
  4. 属性选择器
  5. 伪类
  6. ID 选择器
  7. 内联样式

!important 规则例外

当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖 CSS 中任何其他的声明，无论它处在声明列表中的哪里。尽管如此，!important 规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

一些经验法则：

  • Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important

  • Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important

  • Never 永远不要在全站范围的 CSS 上使用 !important

  • Never 永远不要在你的插件中使用 !important

  • 内联样式表的权值最高 1000

  • ID 选择器的权值为 100

  • Class 类选择器的权值为 10

  • HTML 标签选择器的权值为 1

CSS 优先级法则：

  • A 选择器都有一个权值，权值越大越优先；
  • B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
  • C 创作者的规则高于浏览者：即网页编写者设置的 CSS 样式的优先权高于浏览器所设置的样式；
  • D 继承的 CSS 样式不如后来指定的 CSS 样式；
  • E 在同一组属性设置中标有 “!important” 规则的优先级最大；

CSS 背景

CSS 背景属性用于定义 HTML 元素的背景。

CSS 属性定义背景效果：

  • background-color：定义了元素的背景颜色， 不能继承，其默认值是transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才可见。

  • background-image：描述了元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

  • background-repeat：对背景图像进行平铺。background-repeat:no-repeat不平铺。

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

  • background-position：改变图像在背景中的位置。可以使用一些关键字：top、bottom、left、right 和 center；其次，可以使用长度值，如 100px 或 5cm；最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

    1. background-position:top;       /*相当于上 中位置*/
    2. background-position:50% 50%;   /*图像中心与元素中心对齐*/
    3. background-position:50px 100px;  /*图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上*/

背景- 简写属性：

  1. body {
  2.     background:#ffffff url('img_tree.png') no-repeat right top;
  3. }

CSS文本属性

属性 描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

CSS字体属性

Property 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。

CSS 链接

链接的样式，可以用任何 CSS 属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

  • a:link - 正常，未访问过的链接

  • a:visited - 用户已访问过的链接

  • a:hover - 当用户鼠标放在链接上时

  • a:active - 链接被点击的那一刻

  • a:hover 必须跟在a:link 和 a:visited 后面

  • a:active 必须跟在 a:hover 后面

  1. /* 创建连接框 */
  2. <style>
  3.     a:link,a:visited
  4.     {
  5.     display:block;
  6.     font-weight:bold;
  7.     color:#FFFFFF;
  8.     background-color:#98bf21;
  9.     width:120px;
  10.     text-align:center;
  11.     padding:4px;
  12.     text-decoration:none;
  13.     }
  14.     a:hover,a:active
  15.     {
  16.     background-color:#7A991A;
  17.     }
  18. </style>

CSS 列表

CSS 列表属性作用如下：

  • 设置不同的列表项标记为有序列表
  • 设置不同的列表项标记为无序列表
  • 设置列表项标记为图像

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

  • none：不使用项目符号
  • disc：实心圆
  • circle：空心圆
  • square：实心方块
  • decimal：阿拉伯数字
  • lower-alpha：小写英文字母
  • upper-alpha：大写英文字母
  • lower-roman：小写罗马数字
  • upper-roman：大写罗马数字

CSS 表格

表格边框

指定 CSS 表格边框，使用 border 属性。

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开，border-collapse:collapse。

表格宽度和高度

width 和height 属性定义表格的宽度和高度。

表格文字对齐

表格中的文本对齐和垂直对齐属性。

text-align 属性设置水平对齐方式，像左，右，或中心

表格填充

如果在表的内容中控制空格之间的边框，应使用 td 和 th 元素的padding填充属性

CSS Box Model (盒子模型)

所有 HTML 元素可以看作盒子，在 CSS 中，”box model “这一术语是用来设计和布局时使用。

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

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

  • Margin（外边距） - 清除边框区域。Margin 没有背景颜色，它是完全透明
  • Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
  • Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
  • Content（内容） - 盒子的内容，显示文本和图像

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

CSS 边框属性

属性 描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

CSS 轮廓（outline）属性

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

轮廓（outline）属性指定了样式，颜色和外边框的宽度。

轮廓（outline）属性的位置让它不像边框那样参与到文档流中，因此轮廓出现或消失时不会影响文档流，即不会导致文档的重新显示。

CSS Margin(外边距)

CSS Margin (外边距)属性定义元素周围的空间。

CSS Margin 属性接受任何长度单位、百分数值甚至负值。

margin 清除周围的元素（外边框）的区域。margin 没有背景颜色，是完全透明的

margin 可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。

CSS Padding（填充）

CSS Padding（填充）属性定义元素边框与元素内容之间的空间。

当元素的 Padding（填充）（内边距）被清除时，所”释放”的区域将会受到元素背景颜色的填充。

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。

CSS padding 属性的百分比数值是相对于其父元素的 width 计算的，如果改变了父元素的 width，则它们也会改变。

CSS 尺寸 (Dimension)属性

属性 描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

CSS Display(显示) 与 Visibility（可见性）

CSS display 属性和 visibility 属性都可以用来隐藏某个元素，display 属性设置一个元素应如何显示，visibility 属性指定一个元素应可见还是隐藏。

隐藏一个元素可以通过把 display 属性设置为”none”，或把 visibility 属性设置为”hidden”。

visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

CSS Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。内联元素只需要必要的宽度，不强制换行。

可以更改内联元素为块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循 web 标准。

CSS Positioning (定位)

CSS position 属性，允许您将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

CSS 定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非事先设定 position 属性。他们也有不同的工作方式，这取决于定位方法.

有四种不同的定位方法。

Static 定位

HTML 元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到 top, bottom, left, right 影响。

Fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动。

Relative 定位

相对定位元素的定位是相对其正常位置。

Absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于

Absolutely 定位使元素的位置与文档流无关，因此不占据空间。

Absolutely 定位的元素和其他元素重叠。

重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index 属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序

CSS Float(浮动)

CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边。

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

CSS 水平对齐 (Horizontal Align)

关于 CSS 中元素的水平对齐 (Horizontal Align)，你可以使用多种属性来进行设置。

中心对齐,使用margin属性

块元素可以把左，右页边距设置为”自动”对齐。margin：0 auto

使用 position 属性设置左，右对齐

元素对齐的方法之一是使用绝对定位：

  1. .right
  2. {
  3. position:absolute;
  4. right:0px;
  5. width:300px;
  6. background-color:#b0e0e6;
  7. }

使用 float 属性设置左，右对齐

使用 float 属性是对齐元素的方法之一。

使用 Padding 设置垂直居中对齐

CSS 中一个简单的设置垂直居中对齐的方式就是头部顶部使用 padding: 70px 0。

如果要水平和垂直都居中，可以使用 padding 和 text-align: center。

CSS 组合选择符

组合选择符说明了两个选择器直接的关系。

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

  • 后代选取器(以空格分隔)
  • 子元素选择器(以大于号分隔）
  • 相邻兄弟选择器（以加号分隔）
  • 普通兄弟选择器（以波浪号分隔）

CSS 伪类 (Pseudo-classes)

CSS 伪类是用来添加一些选择器的特殊效果。

由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和 class 有些类似，但它是基于文档之外的抽象，所以叫伪类。

CSS 伪元素

CSS 伪元素是用来添加一些选择器的特殊效果。

CSS 伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于文档中，所以称为伪元素。

CSS伪类/元素

选择器 示例 示例说明
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个 元素的第一个字母
:first-line p:first-line 选择每个 元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before p:before 在每个元素之前插入内容
:after p:after 在每个元素之后插入内容
:lang(language) p:lang(it) 为元素的lang属性选择一个开始值

CSS 导航栏

导航栏=链接列表

作为标准的 HTML 基础一个导航栏是必须的。

在我们的例子中我们将建立一个标准的 HTML 列表导航栏。

导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：

  1. <style>
  2.     ul {
  3.          list-style-type:none;
  4.          margin:0;
  5.          padding:0;
  6.     }
  7. </style>
  9. <ul>
  10.  <li><a href="default.asp">主页</a></li>
  11.  <li><a href="news.asp">新闻</a></li>
  12.  <li><a href="contact.asp">联系</a></li>
  13.  <li><a href="about.asp">关于</a></li>
  14. </ul>

水平导航栏

有两种方法创建横向导航栏。使用内联或浮动的列表项。

这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。

内嵌列表项

建立一个横向导航栏的方法之一是指定li元素的display:inline

浮动列表项

在上面的例子中链接有不同的宽度。对于所有的链接宽度相等，浮动

元素，并指定为 元素的宽度：

  1. li {
  2.     float:left;
  3. }
  4. a {
  5.     display:block;
  6.     width:60px;
  7.     background-color:#dddddd;
  8. }

CSS 下拉菜单

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

基本下拉菜单

当鼠标移动到指定元素上时，会出现下拉菜单。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  5.   <title>下拉菜单实例|W3Cschool教程(w3cschool.cn)</title>
  6.   <meta charset="utf-8">
  7.   <style>
  8.   .dropdown {
  9.       position: relative;
  10.       display: inline-block;
  11.   }
  13.   .dropdown-content {
  14.       display: none;
  15.       position: absolute;
  16.       background-color: #f9f9f9;
  17.       min-width: 160px;
  18.       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  19.       padding: 12px 16px;
  20.   }
  22.   .dropdown:hover .dropdown-content {
  23.       display: block;
  24.   }
  25.   </style>
  26. </head>
  27. <body>
  29. <h2>鼠标移动后出现下拉菜单</h2>
  30. <p>将鼠标移动到指定元素上就能看到下拉菜单。</p>
  32. <div class="dropdown">
  33.   <span>鼠标移动到我这！</span>
  34.   <div class="dropdown-content">
  35.     <p>W3Cschool教程</p>
  36.     <p>www.w3cschool.cn</p>
  37.   </div>
  38. </div>
  40. </body>
  41. </html>

CSS 属性 选择器

顾名思义，CSS 属性选择器就是指可以根据元素的属性以及属性值来选择元素。

具有特定属性的HTML元素样式

具有特定属性的 HTML 元素样式不仅仅是 class 和 id。

属性选择器

下面的例子是把包含标题（title）的所有元素变为蓝色：[title] { color:blue; }

属性和值选择器

下面的实例改变了标题title='w3cschool'元素的边框样式:[title=w3cschool] { border:5px solid green; }

属性和值的选择器 - 多值

下面是包含指定值的 title 属性的元素样式的例子，使用（~）分隔属性和值:[title~=hello] { color:blue; }

下面是包含指定值的 lang 属性的元素样式的例子，使用（|）分隔属性和值:[lang|=en] { color:blue; }

表单样式

属性选择器样式无需使用 class 或 id 的形式:

input[type="text"]
{ width:150px;
display:block;
margin-bottom:10px;
background-color:yellow; }
input[type="button"]
{ width:120px;
margin-left:35px;
display:block; }

CSS3

CSS3 模块

CSS3被拆分为”模块”。旧规范已拆分成小块，还增加了新的。

一些最重要CSS3模块如下：

CSS3 边框

用CSS3，您可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序（如Photoshop等作图软件），极大地帮助您节省了很多时间。

而在本节中，您将了解以下的边框属性有：

  • border-radius
  • box-shadow
  • border-image（需要注意的是：该属性不支持ie浏览器）

Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。

Firefox、Chrome 以及 Safari 支持所有新的边框属性。

注释：对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。

Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-。

CSS3 圆角

在CSS2中添加圆角是需要一些技巧的，尤其对于新手来说更加难了，所有我们不得不在每个角落使用不同的图像。

但是如果您在CSS3中，就能够很容易创建圆角。在CSS3中border-radius属性就是被用于创建圆角的：

以下示例即：圆角边框，您可以尝试着做一个！

div {
    border:2px solid;
    border-radius:25px;
}

CSS3盒阴影

CSS3中的box-shadow属性被用来添加阴影:

div {
    box-shadow: 10px 10px 5px #888888;
}

CSS3边界图片

有了CSS3的border-image属性，你可以使用图像创建一个边框：

border-image属性允许你指定一个图片作为边框！用于创建上文边框的原始图像：

在div中使用图片创建边框:

div {
    border-image:url(border.png) 30 30 round;
    -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
}

CSS3 背景

CSS3更新了几个新的背景属性，提供更大背景元素控制，通过这几个背景属性，您能够做出更加精美的样式。

在本节中您将了解以下4种背景属性：

  • background-image：规定背景图片。
  • background-size：规定背景图片的尺寸。background-size:80px 60px;
  • background-origin：规定背景图片的定位区域，content-box, padding-box,和 border-box区域内可以放置背景图像。
  • background-clip：规定背景的绘制区域。

CSS3 多个背景图像

CSS3 允许你在元素中添加多个背景图像。

<style>
#example1 {
    background-image:
        url(/statics/images/course/img_flwr.gif),
        url(/statics/images/course/paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}
</style>

CSS3 渐变（Gradients）

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

  • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
  • 径向渐变（Radial Gradients）- 由它们的中心定义

CSS3 线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

/*线性渐变 - 从上到下（默认情况下）
下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：*/
#grad {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */
}

/*线性渐变 - 从左到右
下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：*/
#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
/*线性渐变 - 对角
你可以通过指定水平和垂直的起始位置来制作一个对角渐变。
下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：*/
#grad {
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}
/*使用角度
如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。*/

CSS3 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

CSS3 文本效果

属性 描述 CSS
hanging-punctuation 规定标点字符是否位于线框之外。 3
punctuation-trim 规定是否对标点字符进行修剪。 3
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。 3
text-outline 规定文本的轮廓。 3
text-overflow 规定当文本溢出包含元素时发生的事情。 3
text-shadow 向文本添加阴影。 3
text-wrap 规定文本的换行规则。 3
word-break 规定非中日韩文本的换行规则。 3
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3

CSS3 转换

CSS3转换，我们可以移动，比例化，反过来，旋转，和拉伸元素。

transform-origin: 原点水平位置 原点垂直位置; 默认圆点是盒子中心点

Y轴向下，X轴向右。

使用translate实现绝对定位的元素居中：

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

多重转换原理，中间用空格分开。

旋转会改变网页元素的坐标轴向

先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

2D 转换

函数 描述
matrix(n,n,n,n,n,n) 定义 2D 转换,有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，transform: scale(x轴缩放倍数, y轴缩放倍数);
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

3D 转换

函数 描述
matrix3d(n,n, n,n,n,n ,n,n,n ,n,n,n, n,n,n,n ) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

使用perspective属性实现透视效果

属性（添加给父级）

perspective: 值;

取值：像素单位数值， 数值一般在800 – 1200。

作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果

使用rotate实现元素空间旋转效果

左手法则

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

使用transform-style: preserve-3d呈现立体图形

思考：使用perspective透视属性能否呈现立体图形？

答：不能，perspective只增加近大远小、近实远虚的视觉效果。

实现方法

添加 transform-style: preserve-3d; 使子元素处于真正的3d空间

实例：3d导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .navs {
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }
        .navs li {
            position: relative;
            width: 100px;
            height: 40px;
            float: left;
            line-height: 40px;
            transition: all .5s;
            transform-style: preserve-3d;
        }
        .navs li a {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        .navs li a:first-child {
            background-color: green;
            transform: translateZ(20px);
        }
        .navs li a:last-child {
            background-color: orange;
            /* 躺平x轴旋转  立方体的顶部,位移z(确保看到这个盒子) */
            transform: rotateX(90deg) translateZ(20px);
        }
        .navs li:hover {
            transform: rotateX(-90deg);
        }
    </style>
</head>
<body>
    <div class="navs">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">登录</a>
                <a href="#">Login</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">Register</a>
            </li>
        </ul>
    </div>
</body>
</html>

CSS3 过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要添加多个样式的变换效果，添加的属性由逗号分隔。

要实现这一点，必须规定两项内容：

  • 指定要添加效果的CSS属性
  • 指定效果的持续时间。

过渡属性

下表列出了所有的过渡属性:

属性 描述 CSS
transition 简写属性，用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3 
div {
    width:100px;
    height:100px;
    background:red;
    transition:width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
}

div:hover {
    width:200px;
}

                                 综合案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        img {
            width: 100%;
            vertical-align: middle;
        }

        .box {
            width: 1110px;
            height: 247px;
            margin: 20px auto;
        }

        .box li {
            position: relative;
            float: left;
            width: 350px;
            height: 247px;
            margin-right: 30px;
            overflow: hidden;
        }

        .box li:last-child {
            margin-right: 0;
        }

        .box .txt {
            position: absolute;
            left: 0;
            bottom: -50px;
            width: 350px;
            height: auto;
            padding: 20px 30px;
            z-index: 1;
            color: #fff;
            transition: transform .5s;
        }

        .box .txt h4 {
            font-size: 14px;
            font-weight: normal;
            line-height: 2em;
            color: #fff;
        }

        .box .txt h5 {
            margin-bottom: 40px;
            font-size: 18px;
            line-height: 1.5em;
            color: #fff;
        }

        .box .txt p {
            color: black;
            font-size: 14px;
        }

        .box .txt p .iconfont {
            color: #c7000b;
            vertical-align: middle;
            font-size: 20px;
            font-weight: 700;
        }

        .box .mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 350px;
            height: 247px;
            background-image: linear-gradient(transparent, rgba(0, 0, 0, .6));
            opacity: 0;
            transition: all .5s;
        }

        /* 2. hover效果 */
        /* 2.1 图片缩放 */
        .box li .pic img {
            transition: all .5s;
        }

        .box li:hover .pic img {
            transform: scale(1.2);
        }


        /* 2.2 渐变背景显示 */
        .box li:hover .mask {
            opacity: 1;
        }

        /* 2.3 文字向上移动 */
        .box li:hover .txt {
            transform: translateY(-50px);
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/product.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>产品</h4>
                        <h5>OceanStor Pacific 海量存储斩获2021 Interop金奖</h5>
                        <p>
                            <span>了解更多</span>
                            <i></i>
                        </p>
                    </div>
                    <div class="mask"></div>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>

CSS3 动画

当在@keyframe创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

  • 规定动画的名称
  • 规定动画的时长
<style> 
div {
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst {
    from {background:red;}
    to {background:yellow;}
}
</style>

您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。

CSS3动画是什么？

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

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

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

/*当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：*/
@keyframes myfirst {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

/*改变背景色和位置：*/
@keyframes mysecond {
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 “ease”。step(数字)：逐帧动画 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。paused暂停 3

使用简写的动画 animation 属性：animation: myfirst 5s linear 2s infinite alternate;

CSS3 弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示，从左到右:

<!DOCTYPE html>
<html>
<head>
<style>
    .flex-container {
        display: -webkit-flex;
        display: flex;
        width: 400px;
        height: 250px;
        background-color: lightgrey;
    }

    .flex-item{
        background-color: cornflowerblue;
        width: 100px;
        height: 100px;
       margin: 10px;
    }
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>

</body>
</html>

flex-direction

flex-direction 顺序指定了弹性子元素在父容器中的位置。

flex-direction的值有:

  • row：横向从左到右排列（左对齐），默认的排列方式。
  • row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
  • column：纵向排列。
  • column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

各个值解析:

  • flex-start：
    弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

  • flex-end：
    弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

  • center：
    弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

  • space-between：
    弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

  • space-around：
    弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

align-items 属性

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

各个值解析:

  • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
  • stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

flex-wrap 属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

各个值解析:

  • nowrap - 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
  • wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
  • wrap-reverse -反转 wrap 排列。

align-content 属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

各个值解析:

  • stretch - 默认。各行将会伸展以占用剩余的空间。
  • flex-start - 各行向弹性盒容器的起始位置堆叠。
  • flex-end - 各行向弹性盒容器的结束位置堆叠。
  • center -各行向弹性盒容器的中间位置堆叠。
  • space-between -各行在弹性盒容器中平均分布。
  • space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

弹性子元素属性

排序

各个值解析:

  • ：用整数值来定义排列顺序，数值小的排在前面。可以为负值。

order 属性设置弹性容器内弹性子元素的属性

align-self

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

各个值解析:

  • auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
  • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
  • stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

flex

flex 属性用于指定弹性子元素如何分配空间。

各个值解析:

  • none：none关键字的计算值为: 0 0 auto
  • [ flex-grow ]：定义弹性盒子元素的扩展比率。
  • [ flex-shrink ]：定义弹性盒子元素的收缩比率。
  • [ flex-basis ]：定义弹性盒子元素的默认基准值。 | 属性 | 描述 | | :—- | :—- | | display | 指定 HTML 元素盒子类型。 | | flex-direction | 指定了弹性容器中子元素的排列方式 | | justify-content | 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。 | | align-items | 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 | | flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行。 | | align-content | 修改 flex-wrap 属性的行为，类似align-items, 但不是设置子元素对齐，而是设置行对齐 | | flex-flow | flex-direction 和 flex-wrap 的简写 | | order | 设置弹性盒子的子元素排列顺序。 | | align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 | | flex | 设置弹性盒子的子元素如何分配空间。 |

视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口。

布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

视觉视口 visual viewport

字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。

我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定

理想视口，对设备来讲，是最理想的视口尺寸

需要手动添写meta视口标签通知浏览器操作

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

属性 解释说明

width 宽度设置的是viewport宽度，可以设置device-width特殊值

initial-scale 初始缩放比，大于0的数字

maximum-scale 最大缩放比，大于0的数字

minimum-scale 最小缩放比，大于0的数字

user-scalable 用户是否可以缩放，yes或no（1或0）

标准的视口配置

视口宽度和设备保持一致；视口的默认缩放比例1.0；不允许用户自行缩放；最大允许的缩放比例1.0；最小允许的缩放比例1.0

二倍图

物理像素&物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8 是 750* 1334

我们开发时候的1px 不是一定等于1个物理像素的

PC端页面，1个px 等于1个物理像素的，但是移动端就不尽相同

一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

PC端 和 早前的手机屏幕 / 普通手机屏幕: 1CSS像素 = 1 物理像素的

Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

多倍图

对于一张 50px * 50px 的图片,在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊

在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

通常使用二倍图， 因为iPhone 6\7\8 的影响,但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求

背景图片 注意缩放问题

背景缩放 background-size

background-size 属性规定背景图像的尺寸。background-size: 背景图片宽度 背景图片高度; 单位： 长度|百分比|cover|contain;

cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

移动适配

rem ： 目前多数企业在用的解决方案

vw / vh：未来的解决方案

rem单位：相对单位，rem单位是相对于HTML标签的字号计算结果，1rem = 1HTML字号大小

思考

  • 手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？
  • 设备宽度不同，HTML标签字号设置多少合适？
  • 设备宽度大， 元素尺寸大
  • 设备宽度小，元素尺寸小

解答

目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10：

/*视口宽度320px，根字号为32px*/
@media (width: 320px) {
    html {
        font-size: 32px;
    }
}
/*视口宽度375px，根字号为37.5px*/
@media (width: 375px) {
    html {
        font-size: 37.5px;
    }
}
/*视口宽度414px，根字号为41.4px*/
@media (width: 414px) {
    html {
        font-size: 41.4px;
    }
}

rem适配原理

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果

rem单位尺寸

  1. 根据视口宽度，设置不同的HTML标签字号

  2. 书写代码，尺寸是rem单位

2.1 确定设计稿对应的设备的HTML标签字号

  查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）

2.2 rem单位的尺寸

N = 68 / 37.5

rem单位的尺寸 = px单位数值 / 基准根字号

使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

思考：咱们检测了3个视口，分别设置了根字号，有什么弊端吗？

答：手机设备多，屏幕尺寸不一，视口不仅仅有这3个

flexible.js是手淘开发出的一个用来适配移动端的js框架。

核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

<script src="./js/flexible.js"></script>

Less

目标：使用Less运算写法完成px单位到rem单位的转换

思考：在px单位转换到rem单位过程中，哪项工作是最麻烦的？

答：除法运算。CSS不支持计算写法。

解决方案：可以通过Less实现。

目标：使用Less语法快速编译生成CSS代码

Less是一个CSS预处理器, Less文件后缀是.less

扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。

注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

Easy Less : vscode插件

作用：less文件保存自动生成css文件

Less语法

注释：

单行注释：语法：// 注释内容

快捷键：ctrl + /

块注释：语法：/ 注释内容 /

快捷键： shift + alt + A

运算：

加、减、乘直接书写计算表达式

除法需要添加 小括号 或 .

注意：表达式存在多个单位以第一个单位为准

.box {
    width:100 + 50px;
    height: 5 * 32px;

    width: (100 / 4px);
    height: 100 ./ 4px
}

嵌套：

作用：快速生成后代选择器。

语法：

.father {
    color: red;
    .son {
        width:100px;
    }
}
// 相当于
.father {
    color:red;
}
.father .son {
    width: 100px;
}

注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

.father {
    color: red;
    &:hover {
        width:100px;
    }
}
// 相当于
.father {
    color:red;
}
.father:hover {
    width: 100px;
}

变量：

思考：

网页中, 文字文字颜色基本都是统一的， 如果网站改版，变换文字颜色， 如何修改代码？

方法一：逐一修改属性值（太繁琐）

方法二： 把颜色提前存储到一个容器，设置属性值为这个容器名

语法：

  • 定义变量：@变量名：值；
  • 使用变量：css属性：@变量名；
@fontColor: pink;

.box {
    color: @fontColor;
}

如何引入：

导入: @import “文件路径”;

如何导出：

使用Less语法导出CSS文件

方法一：

配置EasyLess插件， 实现所有Less有相同的导出路径

配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）

方法二：控制当前Less文件导出路径

Less文件第一行添加如下代码, 注意文件夹名称后面添加 /

// put: ./css/
或者
// out: ./css/common.css

禁止导出

在less文件第一行添加: // out: false

vw / vh

相对单位

相对视口的尺寸计算结果

vw：viewport width

1vw = 1/100视口宽度

vh：viewport height

1vh = 1/100视口高度

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果

vw单位尺寸

  1. 确定设计稿对应的vw尺寸 （1/100视口宽度）
    查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）

  2. vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

思考：开发中，会不会vw和vh混用呢？

不会。

vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。

CSS3 多媒体查询

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。

媒体查询可用于检测很多事情，例如：

  • viewport(视窗) 的宽度与高度
  • 设备的宽度与高度
  • 朝向 (智能手机横屏，竖屏) 。
  • 分辨率

目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。

多媒体查询语法

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) {
    CSS-Code;
}

如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。

除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。

  • not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
  • only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
  • all: 所有设备，这个应该经常看到。

你也可以在不同的媒体上使用不同的样式文件：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 多媒体类型

值 描述
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕，平板，智能手机等。
speech 用于屏幕阅读器

多媒体查询简单实例

使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。

以下实例中在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色:

@media screen and (min-width: 480px) {
    body {
       background-color: lightgreen;
    }
}

CSS3 多媒体查询实例

本章节我们将为大家演示一些多媒体查询实例。

开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px;
    display: block;
}
</style>
</head>
<body>

<ul>
  <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li >
  <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li >
  <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a>< /li>
</ul>

</body>
</html>

注意 data-email 属性。在 HTML 中我们可以使用带 data- 前缀的属性来存储信息。

520 到 699px 宽度 - 添加邮箱图标

当浏览器的宽度在 520 到 699px, 邮箱链接前添加邮件图标：

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

700 到 1000px - 添加文本前缀信息

当浏览器的宽度在 700 到 1000px, 会在邮箱链接前添加 “Email: “:

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}

大于 1001px 宽度 - 添加邮件地址

当浏览器的宽度大于 1001px 时，会在链接后添加邮件地址接。

我们会使用 data- 属性来为每个人名后添加邮件地址：

@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}

大于 1151px 宽度 - 添加图标

当浏览器的宽度大于 1001px 时，会在人名前添加图标。

实例中，我们没有编写额外的查询块，我们可以在已有的查询媒体后使用逗号分隔来添加其他媒体查询 (类似 OR 操作符):

@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

Bootstrap使用

Bootstrap 使用四步曲： 1. 创建文件夹结构 2. 创建 html 骨架结构 3. 引入相关样式文件 4. 书写内容

<!--引入-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，它提供了两个作此用处的类。

1.container 类

响应式布局的容器 固定宽度

大屏 ( >=1200px) 宽度定为 1170px

中屏 ( >=992px) 宽度定为 970px

小屏 ( >=768px) 宽度定为 750px

超小屏 (100%)

2. container-fluid 类

流式布局容器 百分百宽度

占据全部视口（viewport）的容器。

栅格系统简介

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

按照不同屏幕划分为1~12 等份

行（row） 可以去除父容器作用15px的边距

xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；

列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列

每一列默认有左右15像素的 padding

可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class=”col-md-4 col-sm-6”

列嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm- 元素到已经存在的 .col-sm- 元素内。

<!-- 列嵌套 -->
 <div class="col-sm-4">
     <div class="row">
         <div class="col-sm-6">小列</div>
         <div class="col-sm-6">小列</div>
     </div>
</div>

列偏移

使用 .col-md-offset- 类可以将列向右侧偏移。这些类实际是通过使用 选择器为当前元素增加了左侧的边距（margin）。

 <!-- 列偏移 -->
 <div class="row">
     <div class="col-lg-4">1</div>
     <div class="col-lg-4 col-lg-offset-4">2</div>
 </div>

列排序

通过使用 .col-md-push- 和 .col-md-pull- 类就可以很容易的改变列（column）的顺序。

 <!-- 列排序 -->
 <div class="row">
     <div class="col-lg-4 col-lg-push-8">左侧</div>
     <div class="col-lg-8 col-lg-pull-4">右侧</div>
 </div>