一、CSS模块

1. 选择器的种类

分为五类：

  • 简单选择器（根据名称、id、类来选取元素）
  • 组合器选择器（根据它们之间的特定关系来选取元素）
  • 属性选择器（根据属性或属性值来选取元素）
  • 伪类选择器（根据特定状态选取元素）
  • 伪元素选择器（选取元素的一部分并设置其样式）

1.1 简单选择器

选择器 例子 例子描述
.class 类选择器 .intro 选取所有 class=”intro” 的元素。
#id id选择器 #firstname 选取 id=”firstname” 的那个元素。
* 通配选择器 * 选取所有元素。
element 类型/元素选择器 p（甚至可以使html本身） 选取所有 元素。

元素选择器

根据元素名称来选择 HTML 元素

  1. p {
  2.   text-align: center;
  3.   color: red;
  4. }

(页面上的所有
元素都将居中对齐，并带有红色文本颜色)

类选择器

类选择器选择有特定 class 属性的 HTML 元素。

  1. <head>
  2. <style>
  3. .center {
  4.   text-align: center;
  5.   color: red;
  6. }
  7. </style>
  8. </head>
  9. <body>
  10. <h1 class="center">居中的红色标题</h1>
  11. <p class="center">居中的红色段落。</p> 
  12. </body>
  • 类选择器结合元素选择器：元素 . class属性（类名）{样式}选择器会将样式运用到 ——所有该元素中 拥有该class属性的部分

（类名不可以数字开头！）

  1. 还可以指定只有特定的 HTML 元素会受类的影响
  2. (只有具有 class="center" 的 <p> 元素会居中对齐)
  3. p.center {
  4.   text-align: center;
  5.   color: red;
  6. }
  • 多类选择器

此时class的值是一个词列表（不同词之间空格隔开），相当于是多个值，在设计样式的时候可以单独开进行定义，

  1. HTML 元素也可以引用多个类
  2. <head>
  3. <style>
  4. p.center {
  5.   text-align: center;
  6.   color: red;
  7. }
  8. p.large {
  9.   font-size: 300%;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <h1 class="center">这个标题不受影响</h1>
  15. <!--前面已经注明了是<p>的类，所以<h>是无法应用的-->
  16. <p class="center">本段将是红色并居中对齐。</p>
  17. <p class="center large">本段将是红色、居中对齐，并使用大字体。</p> 
  18. <!--叠加使用，空格隔开就好-->

id选择器

使用 HTML 元素的 id 属性来选择特定元素；元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素；在一个HTML文档中，只能使用一次；选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id；不能结合使用

  1. <head>
  2. <style>
  3. #para1 {
  4.   text-align: center;
  5.   color: red;
  6. }
  7. </style>
  8. </head>
  9. <body>
  10. <p id="para1">Hello World!</p>
  11. <p>本段不受样式的影响。</p>
  12. </body>

（只有标题hallo world变红）

通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素，会影响页面上每个 HTML 元素

  1. * {
  2.   text-align: center;
  3.   color: blue;
  4. }

【类选择器&ID选择器】

  • 区别一：在一个 HTML 文档中，ID 选择器只能使用一次，而类没有这个限制
  • 区别二：ID属性不能出现词列表
  • 区别三：ID 能包含更多含义（它可能在任何元素中，而且只能出现一个）

【基础选择器的优先级】

id选择器 > 类选择器 > 标签选择器 > 通配选择器

1.2 组合器选择器

分组/群组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素（合并代码）（用,）

  1. h1, h2, p {
  2.   text-align: center;
  3.   color: red;
  4. }

后代选择器/包含选择器

左边的选择器一端包括两个或多个用空格分隔的选择器，选择器之间的空格是一种结合符，从左往右依次为前者的子代。例：
h1 em {color:red;} “选择< h1> 元素内的任何 元素”

子代选择器

子选择器匹配属于指定元素子元素的所有元素，（用>）

例：div > p { background-color: yellow;}“选择属于
元素”
(>两侧的空格可有可无)

相邻兄弟选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。（用+）
可选择紧接在另一元素后的元素，且二者有相同父元素（最近的上一级）例：
h1 + p {margin-top:50px;}，解释为”要增加紧接在< h1> 元素后出现的段落
的上边距“
div + p { background-color: yelllow;},”选择紧随
元素”(这里选中的
是在

)

通用兄弟选择器

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。（用~）
div ~ p { background-color : yellow; },”选择属于
元素，同级选择体现在选择了

1.3 属性选择器

  • 在头部设置，例：

    • *[title] {color:red;}把包含标题（title）的所有元素变为红色
    • a[href] {color:red;}只对有 href 属性的锚（a 元素）应用

  • 可叠加多个属性（多个中括号连在一起就好）

  • 中括号中可添加属性的具体指，更加精确的选择，如

      1. a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

1.4 伪类选择器

CSS 伪类用于向某些选择器添加特殊的效果(用于定义元素的特殊状态)，可以用于“设置鼠标悬停在元素上时的样式”、“未访问前后的链接设置不同样式”、“设置元素获得焦点时的样式”
语法：

  1. selector:pseudo-class {
  2.   property: value;
  3. }

  • 锚伪类

    • 链接能够以不同的方式显示： ``` / 未访问的链接 / a:link { color: #FF0000; }

/ 已访问的链接 / a:visited { color: #00FF00; }

/ 鼠标悬停链接 / a:hover { color: #FF00FF; }

/ 已选择的链接 / a:active { color: #0000FF; }

  3. - 
  4. first-child 伪类（冒号前的就是只选的首个某元素）
  6.    - 
  7. 匹配第一个 <br /> 元素：`p:first-child { }`
  9.    - 
  10. 匹配所有 <br /> 元素中的第一个  元素：`p > i:first-child {}`，或`p i : first-child { color : blue}`
  12.    - 
  13. 匹配所有作为第一个子元素的 <br /> 元素中的所有  元素：`p:first-child i {}`
  15. - 
  16. 简单的工具提示悬停

p { display: none; background-color: yellow; padding: 20px; }

div:hover p { display: block; } …

鼠标移到这里显示 p 元素

突然出现

  3. - 
  4. :lang 伪类
  5. <br />:lang 选择器用于选取带有以指定值开头的 lang 属性的元素。

例： :lang 为属性为 lang=”en” 的 元素定义引号

Some text A quote in a paragraph Some text.

在本例中，:lang 为 lang=”en” 的 q 元素定义引号：

Some text A quote in a paragraph Some text. 在本例中，:lang 为 lang=”en” 的 q 元素定义引号： ```

  • 所有伪类 | 选择器 | 例子 | 描述 | | —- | —- | —- | | :active | a:active | 选择活动的链接。 | | :checked | input:checked | 选择每个被选中的 元素。 | | :disabled | input:disabled | 选择每个被禁用的 元素。 | | :empty | p:empty | 选择没有子元素的每个 元素。 | | :enabled | input:enabled | 选择每个已启用的 元素。 | | :first-child | p:first-child | 选择作为其父的首个子元素的每个 元素。 | | :first-of-type | p:first-of-type | 选择作为其父的首个 元素的每个
    元素。 | | :focus | input:focus | 选择获得焦点的 元素。 | | :hover | a:hover | 选择鼠标悬停其上的链接。 | | :in-range | input:in-range | 选择具有指定范围内的值的 元素。 | | :invalid | input:invalid | 选择所有具有无效值的 元素。 | | :lang(language) | p:lang(it) | 选择每个 lang 属性值以 “it” 开头的 元素。 | | :last-child | p:last-child | 选择作为其父的最后一个子元素的每个 元素。 | | :last-of-type | p:last-of-type | 选择作为其父的最后一个 元素的每个
    元素。 | | :link | a:link | 选择所有未被访问的链接。 | | :not(selector) | :not(p) | 选择每个非 元素的元素。 | | :nth-child(n) | p:nth-child(2) | 选择作为其父的第二个子元素的每个 元素。 | | :nth-last-child(n) | p:nth-last-child(2) | 选择作为父的第二个子元素的每个元素，从最后一个子元素计数。 | | :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择作为父的第二个元素的每个
    元素，从最后一个子元素计数 | | :nth-of-type(n) | p:nth-of-type(2) | 选择作为其父的第二个 元素的每个
    元素。 | | :only-of-type | p:only-of-type | 选择作为其父的唯一 元素的每个
    元素。 | | :only-child | p:only-child | 选择作为其父的唯一子元素的 元素。 | | :optional | input:optional | 选择不带 “required” 属性的 元素。 | | :out-of-range | input:out-of-range | 选择值在指定范围之外的 元素。 | | :read-only | input:read-only | 选择指定了 “readonly” 属性的 元素。 | | :read-write | input:read-write | 选择不带 “readonly” 属性的 元素。 | | :required | input:required | 选择指定了 “required” 属性的 元素。 | | :root | root | 选择元素的根元素。 | | :target | #news:target | 选择当前活动的 #news 元素（单击包含该锚名称的 URL）。 | | :valid | input:valid | 选择所有具有有效值的 元素。 | | :visited | a:visited | 选择所有已访问的链接。 |

1.5 伪元素选择器

选择器 例子 例子描述
::after p::after 在每个 元素之后插入内容。
::before p::before 在每个 元素之前插入内容。
::first-letter p::first-letter 选择每个 元素的首字母。
::first-line p::first-line 选择每个 元素的首行。
::selection p::selection 选择用户选择的元素部分。

  • 插入的内容可以是content:（内容）,backgroung-color等

    2. flex 与 table

    2.1 flex布局（弹性布局）

    2.1.1 简述

  • 任何一个容器都可以指定为 Flex 布局。
    .box{ display:flex; }

  • 行内元素也可以使用 Flex 布局
    .box { display : inline-flex;}

  • 设为 Flex 布局以后，子元素的float、clear和vertical-align属性都将失效

2.1.2 基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。
task3-1 - 图1
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

2.1.3 容器的属性

（1）flex-direction
决定主轴的方向（即项目的排列方向）
该属性可能取4个值（图文不同序）

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。

  • column-reverse：主轴为垂直方向，起点在下沿。 task3-1 - 图2（2）flex-wrap
    flex-wrap属性定义，如果一条轴线排不下，如何换行。
    该属性可能取3个值

  • nowrap（默认）：不换行

  • wrap：换行，第一行在上方
  • wrap-reverse：换行，第一行在下方

（3）flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

  1. .box {
  2.   flex-flow: <flex-direction> || <flex-wrap>;
  3. }

（4）justify-content
justify-content属性定义了项目在主轴上的对齐方式
该属性可能取5个值，具体对齐方式与轴的方向有关（下面以主轴为从左到右为例）

  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐(边缘起始位置)，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

（5）align-items
align-items属性定义项目在交叉轴上如何对齐
该属性可能取5个值，具体对齐方式与轴的方向有关（下面以交叉轴为从上到下为例）

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。

  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 task3-1 - 图3（6）align-content
    align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
    该属性可能取6个值

  • flex-start：与交叉轴的起点对齐。

  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

  • stretch（默认值）：轴线占满整个交叉轴。 task3-1 - 图4

    2.1.4 项目的属性

    （1）order
    order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

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

    1. .item {
    2. order: <integer>;
    3. }

    （2）flex-grow
    flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

    1. .item {
    2. flex-grow: <number>; /* default 0 */
    3. }

  • 如果所有项目的属性值都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的属性值为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

（3）flex-shrink
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。（代码参考上（2））

  • 如果所有项目的属性值都为1，当空间不足时，都将等比例缩小。如果一个项目的属性值为0，其他项目都为1，则空间不足时，前者不缩小。

（4）flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

  1. .item {
  2.   flex-basis: <length> | auto; /* default auto */
  3. }
  • 它可以设为跟width或height属性一样的值，则项目将占据固定空间。

（5）flex
felx属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

  • 该属性有两个快捷值：auto 相当于 (1 1 auto) 和 none 相当于(0 0 auto)。

（6）align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

  1. .item {
  2.   align-self: auto | flex-start | flex-end | center | baseline | stretch;
  3. }

task3-1 - 图5
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。2.2 table布局

  • 直接使用table标签

    • 其中的内容可以自动居中
      1. <body>
      2. <table class=container>
      3.    <tbody>
      4.        <tr>
      5.            <td class=left> 左 </td>
      6.            <td class=right> 右 </td>
      7.        </tr>
      8.    </tbody>
      9. </table>
      10. </body>

  • 亦可用 父级容器display:table和子级容器display:table-cell代替table标签的效果，其中display:table == |

  • 子级容器默认是自动平分宽度沾满父级容器（平均划分空间）
  • vertical-align:middle样式可使该元素放置在其父元素垂直居中放置
  • 对于两个box（可以看做是同级div之间的代码块），box-sizing 属性可以实现两个并排的带边框的框；如果只有左侧的bxo设置了display:table-cell，那么左侧跟随右侧高度变化而变化。如果左右两个都设置了，那么可以互相随对方变化而变化

    3. 水平和居中的布局

    3.1 水平居中

  • 文字的水平居中 text-align:center;

  • 容器的水平居中

    1. 　　div#container {
    2. 　　　　width:760px;  // 先为容器设置一个宽度
    3. 　　　　margin:0 auto; // 再将margin的水平值设为auto，即为居中
    4. 　　}
  • margin 的第一个参数表示上下外边距，第二个参数表示左右外边距

3.2 垂直居中

文字的垂直居中

  • line-height

    • 文字为单行时——只要将行高与容器高设为相等即可
      1. div#container {
      2.    height: 35px; 
      3.    line-height: 35px;
      4. }

  • 文字为n行时——将行高设为容器高度的1/n

  • 使垂直居中容器中的文字垂直居中（运用在下面），同理

  • display+vertical-align

    1.       div#big{
    2.           width: 300px;
    3.           height: 300px;
    5.           display: table;
    6.           }
    7.       div#small {
    8.           display: table-cell;
    9.           vertical-align: middle;
    10.       }

容器的垂直居中

！！【要使其中的文字、容器水平居中不能照搬上面的】

  • 绝对定位+负外边距
    【必须知道被居中的块级元素的尺寸】
    假设有两个容器，现将小容器在垂直居中在大容器中（外相对，内绝对）
    1. 　　div#big{
    2. 　　　　position:relative; // 大容器是相对定位
    3. 　　　　height:480px;
    4. 　　}
    5. 　　div#small {
    6. 　　　　position: absolute;// 小容器是绝对定位
    7. 　　　　top: 50%;
    8. 　　　　height: 240px;
    9. 　　　　margin-top: -120px; // 自身高度的一半
    10. 　　}
  1. 　　<div id="big">
  2. 　　　　<div id="small">
  3. 　　　　123456
  4. 　　　　</div>
  5. 　　</div>

  • 绝对定位+transform
    【可以不用提前知道被居中元素的尺寸，因为transform中偏移的百分比就是相对于元素自身的尺寸而言】

    1.       div#big{
    2.           position: relative; /*相对定位*/
    3.           height: 300px;
    4.           width: 300px;
    5.           }
    6.       div#small {
    7.           position: absolute; /*绝对定位*/   
    8.           height: 200px;
    9.           width: 150px;
    11.           top:50%;
    12.           transform: translate(50%,-50%);
    14.           line-height: 200px;
    15.       }

  • 绝对定位+margin:auto
    要点是：top和bottom数值相等，再将要居中的元素的margin设为auto
    被居中元素的宽度也可以不设置，但是不设置的话，就必须是图片这种自身就包含尺寸的元素，否则无法实现。

    1.    div#big{
    2.        position: relative; /*相对定位*/
    3.        height: 300px;
    4.        width: 300px;
    5.        }
    6.    div#small {
    7.        position: absolute; /*绝对定位*/   
    8.        height: 100px;
    9.        width: 150px;
    11.        top: 0;
    12.        right: 0;
    13.        left: 0;
    14.        bottom: 0;
    15.        margin:auto;
    17.        line-height: 100px;
    18.    }

  • 使用padding实现子元素的垂直居中
    要点：给父元素设置相同的上下内边距，注意！此时的父元素不能设置高度（才能随子元素的高度设置相同的上下内边距，其高度会改变）

    1.       div#big{
    2.           width: 300px;
    3.           padding: 100px 0;
    4.           }
    5.       div#small {      
    6.           height: 200px;
    7.           width: 150px;
    8.           border: 2px solid hotpink;
    10.           line-height: 200px;
    11.       }

  • flex布局

  • 弹性布局