积累沉淀

待山花烂漫，化茧成蝶

CSS-前端开发

Posted on Edited on

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML（包括如SVG、MathML或XHTML等XML文档）文档外观和格式的样式表语言。CSS的主要目的是分离文档的内容与展示方式，使得页面的设计和内容管理更加容易和高效。

样式的位置

  1. 行内样式
  • 语法：
1
2
<h1 style="color: red; font-size: 80px;">欢迎来到尚硅谷学习！</h1>
<h2 style="color: red; font-size: 80px;">欢迎来到尚硅谷学习！</h2>
  1. 内部样式
  • 写在html页面内部，将所有的cSS代码提取出来，单独放在标签中。
  • 语法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
        h1{
            color: blue;
            font-size: 40px;
        }
        h2{
            color: red;
            font-size: 60px;
        }
        p{
            color: green;
            font-size: 80px;
        }
        img{
            width: 400px;
        }
    </style>
  • 注意点：
    <style>标签理论上可以放在HTML文档的任何地方，但一般都放在<head>标签中。
    此种写法：样式可以复用、代码结构清晰。
  1. 外部样式

  • 写在单独的.css文件中，随后在HTML文件中引入使用。

  • 语法：

    1. 新建一个扩展名为.css的样式文件，把所有css代码都放入此文件中。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    h1{
        color: blue;
        font-size: 40px;
    }
    h2{
        color: red;
        font-size: 60px;
    }
    p{
        color: green;
        font-size: 80px;
    }
    img{
        width: 400px;
    }
    1. 在 HTML 文件中引入.css 文件。
    1
    <link rel="stylesheet" href="./pos3.css">

  • 注意点：

    1. <link>标签要写在标签中。
    2. <link>标签属性说明：
      href：引l入的文档来自于哪里。
      rel：（relation：关系）说明引l入的文档与当前文档之间的关系。
    3. 外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速度，实现了结构与样式的完全分离。
    4. 实际开发中，几乎都使用外部样式，这是最推荐的使用方式！

CSS语法规范

CSS语法由两部分构成：

  • 选择器：找到要添加样式的元素。
  • 声明块：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为：属性名：属性值；
    1. 最后一个声明后的分号理论上能省略，但最好还是写上。
    2. 选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好还是写上。

css_syntax_specification

CSS基本选择器

基本选择器包括：

  1. 通配选择器
    作用：可以选中所有的HTML元素。
1
2
3
4
5
* {
    color: green;
    font-size: 30px;
}

备注：目前来看通配选择器貌似有点鸡肋，但后面清除样式时，会对我们有很大帮助。
  1. 元素选择器
    作用：为页面中某种元素统一设置样式。
    语法：
1
2
3
4
5
6
7
8
9
10
11
12
13
h2 {
    color: chocolate;
}
h1 {
    font-size: 50px;
}
p {
    color: red;
}
h3 {
    color: green;
}

备注：元素选择器无法实现差异化设置，例如上面的代码中，所有的p元素效果都一样。
  1. 类选择器
    作用：根据元素的class值，来选中某些元素。
    class翻译过来有：种类、类别的含义，所以class值，又称：类名。
1
2
3
4
5
6
7
8
9
10
11
12
/* 选中页面中所有类名为speak的元素 */
.speak {
    color: red;
}
/* 选中页面中所有类名为answer的元素 */
.answer {
    color: green;
}
.big {
    font-size: 40px;
}

  • 注意点：一个元素的class属性，能写多个值，要用空格隔开，例如：
1
2

<p class="answer big">你回答我：我心里只有一块地，我的玛莎拉蒂！</p>
  1. id选择器
    作用：根据元素的id属性值，来精准的选中某个元素。
    语法：
1
2
3
4
5
6
#lovetalked {
    color: red;
}
#un-lovetalked {
    color: green;
}

注意：

  1. id属性值：尽量由字母、数字、下划线（-）、短杠（－）组成，最好以字母开头、不要包含空格、区分大小写。
  2. 一个元素只能拥有一个id属性，多个元素的id属性值不能相同。
  3. 一个元素可以同时拥有id和class属性。
  1. 交集选择器
  • 作用：选中同时符合多个条件的元素。
  • 语法：选择器1选择器2选择器3…选择器n{}
1
2
3
4
5
6
7
8
9
10
11
12
13
.rich {
    color: gold;
}
.beauty {
    color: red;
}

p.beauty {
    color: green;
}
.beauty.rich {
    color: brown;
}
  • 注意：
    1. 有标签名，标签名必须写在前面。
    2. id选择器、理论上可以作为交集的条件，但实际应用中几乎不用一一因为没有意义。
    3. 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是p元素又是span元素。
    4. 用的最多的交集选择器是：元素选择器配合类名选择器，例如：p.beauty。
  1. 并集选择器
  • 作用：选中多个选择器对应的元素，又称：分组选择器。
  • 语法：选择器1，选择器2，选择器3，…选择器n{}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.dog {
    color: blue;
}
.pig {
    color: green;
}
.beauty {
    color: red;
}
.rich {
    color: gold;
}
.dog,
.pig,
.rich,
.beauty,
#suxi {
    font-size: 40px;
    background-color: gray;
    width: 180px;
}
  • 注意：
    1. 并集选择器，我们一般竖着写。
    2. 任何形式的选择器，都可以作为并集选择器的一部分。
    3. 并集选择器，通常用于集体声明，可以缩小样式表体积。
  1. 后代选择器
  • 作用：选中指定元素中，符合要求的后代元素。
  • 语法：选择器1选择器2选择器3…选择器n{}（先写祖先，再写后代）
1
2
3
4
5
6
ul li {
    color: red;
}
ol li {
    color: green;
}
  • 注意：
    1. 后代选择器，最终选择的是后代，不选中祖先
    2. 儿子、孙子、重孙子，都算是后代。
    3. 结构一定要符合之前讲的HTML嵌套要求，例如：不能p中写h1～h6。
  1. 子代选择器
  • 作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子)
  • 语法：选择器1>选择器2>选择器3>…选择器n{}
1
2
3
4
div>a {
    color: red;
}

  • 注意：
    1. 子代选择器，最终选择的是子代，不是父级。
    2. 子、孙子、重孙子、重重孙子…统称后代！，子就是指儿子。
  1. 兄弟选择器
  • 相邻兄弟选择器：选中指定元素后，符合条件的相邻兄弟元素。
    1. 语法：选择器1+选择器2{}。
  • 通用兄弟选择器：选中指定元素后，符合条件的所有兄弟元素。（简记：睡在我下铺的所有兄弟）
    1. 语法：选择器1~选择器2{}。
1
2
3
4
5
6
7
8
9
/* 选中div后紧紧相邻的兄弟p元素（睡在我下铺的兄弟）一相邻兄弟选择器 */
div+p {
    color: red;
}

/* 选中div后所有的兄弟p元素（睡在我下铺的所有兄弟）一通用兄弟选择器 */
div~p {
    color:green;
}
  1. 属性选择器
  • 作用：选中属性值符合一定要求的元素。
  • 语法：
    1. 【属性名】选中具有某个属性的元素。
    2. 【属性名=“值”】选中包含某个属性，且属性值等于指定值的元素。
    3. 【属性名^=值"】选中包含某个属性，且属性值以指定的值开头的元素。
    4. 【属性名S=“值”】选中包含某个属性，且属性值以指定的值结尾的元素。
    5. 【属性名*=“值"】选择包含某个属性，属性值包含指定值的元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[title] {
    color: red;
}
[title="guigu3"] {
    color: green;
}
[title^="a"] {
    color: gold;
}
[title$="4"] {
    color: yellow;
}

[title*="3"] {
    color: blue;
}

常用的伪类选择器

  1. 动态伪类：
    1. :link 超链接未被访问的状态。
    2. :visited超链接访问过的状态。
    3. :hover鼠标悬停在元素上的状态。
    4. :active元素激活的状态。

      什么是激活？一一按下鼠标不松开。
      注意点：遵循LVHA 的顺序，即：link、visited、hover、active。

    5. :focus取焦点的元素。

      表单类元素才能使用：focus伪类。
      当用户：点击元素、触摸元素、或通过键盘的“tab”键等方式，选择元素时，就是获得焦点。

  2. 结构伪类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 选中的是div的第一个儿子p元素(按照所有兄弟计算的) */
div>p:first-child {
    color: red;
}
/* 选中的是div的最后一个儿子p元素（按照所有兄弟计算的） */
div>p:last-child {
    color: green;
}
/* 选中的是div的第n个儿子p元素（按照所有兄弟计算的） */
div>p:nth-child(2) {
    color: blue;
}
/* 选中的是div的第一个儿子p元素（按照所有同类型兄弟计算的） */
div>p:first-of-type {
    color: brown;
}
/* 选中的是div的最后一个儿子p元素（按照所有同类型兄弟计算的） */
div>p:last-of-type {
    color: blueviolet;
}
/* 选中的是div的第n个儿子p元素（按照所有同类型兄弟计算的） */
div>p:nth-of-type(3) {
    color: black;
}

  1. 否定伪类:not（选择器） 排除满足括号中条件的元素。
1
2
3
div>p:not(.fail) {
    color: red;
}
  1. UI伪类：
    1. :checked 被选中的复选框或单选按钮。
    2. :enable可用的表单元素（没有disabled属性）。
    3. :disabled不可用的表单元素（有disabled属性）。
1
2
3
4
5
6
7
input:checked {
    width: 100px;
    height: 100px;
}
input:disabled {
    background-color: gray;
}
  1. 目标伪类（了解） :target选中锚点指向的元素。
1
2
3
4
5
6
7
8
div {
    background-color: gray;
    height: 300px;
}
div:target {
    background-color: green;
}

  1. 伪元素选择器 作用：选中元素中的一些特殊位置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    /* 什么是伪元素？一
很像元素，但不是元素（element），是元素中的一些特殊位置 */
    /* 选中的是div中的第一个文字 */
    div::first-letter {
        color: red;
        font-size: 40px;
    }
    div::first-line {
        background-color: green;
    }
    div::selection {
        background-color: green;
        color: orange;
    }
    input::placeholder {
        background-color: skyblue;
    }
    /* 选中的是p元素最开始的位置，随后创建一个子元素 */
    p::before {
        content: "￥";
    }
    /* 选中的是p元素最后的位置，随后创建一个子元素 */
    p::after {
        content: ".00";
    }

选择器的优先级

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。 到底应用哪个样式，此时就需要看优先级了。
简单描述：

行内样式>ID选择器>类选择器>元素选择器>通配选择器>继承的样式

具体计算方式：
每个选择器，都可计算出一组权重，格式为：（a，b，c）

  • a：ID选择器的个数。
  • b：类、伪类、属性选择器的个数
  • c：元素、伪元素选择器的个数

CSS三大特性

  1. 层叠性
    概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）

    什么是样式冲突？
    元素的同一个样式名，被设置了不同的值，这就是冲突。

  2. 继承性
  • 概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式
  • 规则：优先继承离得近的
  • 常见的可继承属性：

    text-??， font-??， line-??、 color

  1. 优先级
    见选择器的优先级

字体族

  • 属性名：font-family
  • 语法：
1
2
3
.atguigu4 {
    font-family: "HanziPen SC","STCaiyun","STHupo","Microsoft YaHei",sans-serif;
}
  • 注意：
  1. 使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找。
  2. 如果字体名包含空格，必须使用引号包裹起来。
  3. 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上serif（衬线字体）或sans-serif（非衬线字体）
  4. windows系统中，默认的字体就是微软雅黑。

字体风格

  • 属性名：font-style
  • 常用值：

normal：正常 (默认值)
italic：斜体（使用字体自带的斜体效果）
oblique：斜体（强制倾斜产生的斜体效果）实现斜体时，更推荐使用italic。

字体粗细

属性名：font-weight
常用值：

  • 关键词

    lighter：细 normal：正常 bold: 粗 bolder：很粗(多数字体不支持)

  • 数值：

    100~1000且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时的精确程度）。 100~ 300等同于1ighter，400~500等同于norma1，600及以上等同于bo1d。

字体复合写法

  • 属性名：font，可以把上述字体样式合并成一个属性。
  • 编写规则：
    1. 字体大小、字体族必须都写上。
    2. 字体族必须是最后一位、字体大小必须是倒数第二位。
    3. 各个属性间用空格隔开。
  • 实际开发中更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接用font-size属性。

文本间距

  • 字母间距：letter-spacing
  • 单词间距：word-spacing（通过空格识别词）
  • 属性值为像素（px），正值让间距增大，负值让间距缩小。

文本修饰

  • 属性名：text-decoration
  • 可选值：
    • none：无装饰线（常用）
    • underline：下划线（常用）
    • overline：上划线
    • line-through：删除线
      可搭配如下值使用：
    • dotted：虚线
    • wavy：波浪线
    • 也可以指定颜色

文本缩进

  • 属性名：text-indent
  • 属性值：css 中的长度单位，例如：px
  • 举例
1
2
3
.atguigu9 {
    text-indent: 60px;
}

后面我们会学习css 中一些新的长度单位，目前我们只知道像素(px)。

文本对齐_水平

  • 属性名：text-align
  • 常用值：

    left ：左对齐 (默认值)
    right：右对齐
    center：居中对齐

  • code:
1
2
3
4
5
div {
    font-size: 40px;
    background-color: orange;
    text-align: center;
}

行高

  • 属性名：line-height
  • 可选值：

    normal：由浏览器根据文字大小决定的一个默认值。
    像素(px)。
    数字：参考自身font-size 的倍数（很常用）。
    百分比：参考自身font-size的百分比。

  • 备注：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。
  • 举例:
1
2
3
4
5
#d1 {
    font-size: 40px;
    background-color: skyblue;
    line-height: 1.667;
}
  • 行高注意事项：
  1. line-height过小会怎样？－一文字产生重叠，且最小值是θ，不能为负数。
  2. line-height是可以继承的，且为了能更好的呈现文字，最好写数值。
  3. line-height 和 height 是什么关系?
    a. 设置了height，那么高度就是height 的值。
    b. 不设置height的时候，会根据1ine-height计算高度。
  • 应用场景：
  1. 对于多行文字：控制行与行之间的距离。
  2. 对于单行文字：让height等于1ine-height，可以实现文字垂直居中

vertical-align

  • 属性名：vertical-align。
  • 作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。
  • 常用值：
    1. baseline（默认值）：使元素的基线与父元素的基线对齐。
    2. top：使元素的顶部与其所在行的顶部对齐。
    3. middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐。
    4. bottom：使元素的底部与其所在行的底部对齐。
  • 特别注意：vertical-align不能控制块元素。

CSS表格属性

  1. 边框相关属性（其他元素也能用）：
css属性名 功能 属性值
border-with 边框宽度 CSS中可用的长度值
border-color 边框颜色 CSS中可用的颜色值
border-style 边框风格 默认值 none solid 实线 dashed dotted double 虚线点线双实线
border 符合属性 没有数量、顺序的要求
  1. 表格独有属性（只有table标签才能使用）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
table {
    border: 2px solid green;
    width: 500px;
    /* 控制表格的列宽 */
    table-layout: fixed;
    /* 控制单元格间距 */
    border-spacing: 0px;
    /* 合并相邻的单元格的边框 */
    border-collapse: collapse;
    /* 隐藏没有内容的单元格 */
    empty-cells: hide;
    /* 设置表格标题的位置 */
    caption-side: top;
}

CSS背景属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div {
    width: 400px;
    height: 400px;
    border: 2px solid black;
    font-size: 40px;
    /* 设置背景颜色，不写background-color即：默认值是transparent */
    background-color: skyblue;
    /* 设置背景图片 */
    background-image: url(../images/beauty.jpg);
    /* 设置背景图片的重复方式 */
    background-repeat: repeat;
    /* 控制背景图片的位置 */
    background-position: center center;
    /* 复合属性 */
    background: skyblue url(../images/beauty.jpg) repeat center;
}

CSS盒子模型

CSS长度单位

  1. px：像素。
  2. em：相对元素font-size的倍数。
  3. rem：相对根字体大小，html标签就是根。
  4. %：相对父元素计算。
  • 注意：CSS中设置长度，必须加单位，否则样式无效！

元素的显示模式

  • 块元素 (block) 又称：块级元素

特点：

  1. 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
  2. 默认宽度：撑满盆元素
  3. 默认高度：由内容撑开。
  4. 可以通过CSS设置宽高。
  • 行内元素（inline）又称：内联元素

特点：

  1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
  2. 默认宽度：由内容撑开。
  3. 默认高度：由内容撑开。
  4. 无法通过CSS设置宽高。
  • 行内块元素（inline-block） 又称：内联块元素

特点：

  1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
  2. 默认宽度：由内容撑开。
  3. 默认高度：由内容撑开。
  4. 可以通过CSS设置宽高。

总结各元素的显示模式

  • 块元素(block)
  1. 主体结构标签：<html>、<body>
  2. 排版标签：<h1>~<h6>、<hr>、<p>、<pre>、<div>
  3. 列表标签：<ul>、<ol>、<1i>、<dl>、<dt>、<dd>
  4. 表格相关标签：<table>、<tbody>、<thead>、<tfoot>、<tr>、<caption>
  5. <form>与<option>
  • 行内元素（inline）
  1. 文本标签：<br>、<em>、 <strong>、<sup>、<sub>、<del>、<ins>
  2. <a>与<label>
  • 行内块元素（inline-block）
  1. 图片：<img>
  2. 单元格：<td>、<th>
  3. 表单控件：<input>、<textarea>、<select>、 <button>
  4. 框架标签：<iframe>

修改元素显示模式

通过CSS中的display属性可以修改元素的默认显示模式，常用值如下：

值 描述
none 元素会被隐藏。
block 元素将作为块级元素显示。
inline 元素将作为内联元素显示。
inline-block 元素将作为行内块元素显示。

盒子模型的组成

CSS会把所有的HTML元素都看成一个盒子，所有的样式也都是基于这个盒子。

  1. margin（外边距）：盒子与外界的距离。
  2. border（边框）：盒子的边框。
  3. padding（内边距）：紧贴内容的补白区域。
  4. content（内容）：元素中的文本或后代元素都是它的内容。
  5. 盒子的大小=content+左右padding+左右border。

注意：外边距margin不会影响盒子的大小，但会影响盒子的位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div {
    /* 内容宽 */
    width: 400px;
    /* 内容高 */
    height: 400px;
    font-size: 40px;
    /* 内边距 */
    padding: 20px;
    /* 边框 */
    border: 10px dashed red;
    /* 外边距 */
    margin: 30px;
    background-color: orange;
}

关于默认宽度

所谓的默认宽度，就是不设置width属性时，元素所呈现出来的宽度。

  • 总宽度=父的content－自身的左右margin。
  • 内容区的宽度=父的content－自身的左右margin－自身的左右border－自身的左右padding。

盒子内边距（padding）

padding复合属性的使用规则：

  1. padding：10px；四个方向内边距都是10px。
  2. padding：10px 20px；上10px，左右20px。（上下、左右）
  3. padding：10px 20px 30px；上10px，左右20px，下30px。（上、左右、下）
  4. padding：10px 20px 30px 40px；上10px，右20px，下30px，左40px。（上、右、下、左）

注意点：

  1. padding的值不能为负数。
  2. 行内元素的左右内边距是没问题的，上下内边距不能完美的设置。
  3. 块级元素、行内块元素，四个方向内边距都可以完美设置。

margin注意事项

  1. 子元素的margin，是参考父元素的content计算的。（因为是父亲的content中承装着子元素）
  2. 上margin、左margin：影响自己的位置；下margin、右margin：影响后面兄弟元素的位置。
  3. 块级元素、行内块元素，均可以完美地设置四个方向的margin；但行内元素，左右margin可以完美设置，上下margin设置无效。
  4. margin的值也可以是auto，如果给一个块级元素设置左右margin都为auto，该块级元素会在父元素中水平居中。
  5. margin的值可以是负值。

margin塌陷问题

什么是margin塌陷？

  • 第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上。

如何解决margin塌陷？

  • 方案一：给父元素设置不为0的padding。
  • 方案二：给父元素设置宽度不为0的border。
  • 方案三：给父元素设置css样式overflow:hidden

margin合并问题

什么是margin合并？

  • 上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。

如何解决margin塌陷？

  • 无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

处理内容溢出

CSS属性名 功能 属性值
overflow 溢出内容的处理方式 visible：显示，默认值
hidden：隐藏
scroll：显示滚动条，不论内容是否溢出
auto：自动显示滚动条，内容不溢出不显示
overflow-x 水平方向溢出内容的处理方式 同overflow
overflow-y 垂直方向溢出内容的处理方式 同overflow
  • 注意：
  1. overflow-x、overflow-y 不能一个是hidden，一个是visible，是实验性属性，不建议使用。
  2. overflow常用的值是hidden和auto，除了能处理溢出的显示方式，还可以解决很多疑难杂症。

隐藏元素的方式

  1. visibility属性
    visibility属性默认值是show，如果设置为hidden，元素会隐藏。
    元素看不见了，还占有原来的位置（元素的大小依然保持）。
  2. display属性
    设置display:none，就可以让元素隐藏。
    彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。

13.样式的继承

有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；但如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）。

  • 会继承的css属性

字体属性、文本属性（除了vertical-align）、文字颜色等。

  • 不会继承的css属性

边框、背景、内边距、外边距、宽高、溢出方式等。

一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。

布局小技巧

  1. 行内元素、行内块元素，可以被父元素当做文本处理。

    即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
    例如：text-align、line-height、text-indent 等。

  2. 如何让子元素，在父亲中水平居中：
  • 若子元素为块元素，给父元素加上：margin:0 auto；
  • 若子元素为行内元素、行内块元素，给父元素加上：text-align:center。
  1. 如何让子元素，在父亲中垂直居中：
  • 若子元素为块元素，给子元素加上：margin-top，值为：（父元素content－子元素盒子总高）／2。
  • 若子元素为行内元素、行内块元素：
    • 让父元素的height=line-height，每个子元素都加上：vertical-align:middle;
    • 补充：若想绝对垂直居中，父元素font-size 设置为0。

元素之间的空白问题产生的原因：

行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。解决方案：

  1. 方案一：去掉换行和空格（不推荐）。
  2. 方案二：给父元素设置font-size:0，再给需要显示文字的元素，单独设置字体大小(推者).

行内块的幽灵空白问题

  • 产生原因：
    行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
  • 解决方案：
  1. 给行行内块设置vertical，值不为baseline即可，设置为middel、bottom、top均可。
  2. 若父元素中只有一张图片，设置图片为display: block。
  3. 给父元素设置font-size：0。如果该行内块内部还有文本，则需单独设置font-size。

元素浮动后的特点

  1. 脱离文档流。
  2. 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。
  3. 不会独占一行，可以与其他元素共用一行。
  4. 不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding 。
  5. 不会像行内块一样被当做文本处理（没有行内块的空白问题）。

浮动后会有哪些影响

  • 对兄弟元素的影响：
    后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
  • 对父元素的影响：
    不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

解决浮动产生的影响（清除浮动）解决方案：

  1. 方案一：给父元素指定高度。
  2. 方案二：给父元素也设置浮动，带来其他影响。
  3. 方案三：给父元素设置overflow:hidden。
  4. 方案四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置clear:both。
  5. 方案五：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===>推荐使用
1
2
3
4
5
.outer::after {
    content: '';
    display: block;
    clear: both;
}

布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

相对定位

  1. 如何设置相对定位？
  • 给元素设置position：relative即可实现相对定位。
  • 可以使用 left、right、top、bottom 四个属性调整位置。
  1. 相对定位的参考点在哪里？
  • 相对自己原来的位置
  1. 相对定位的特点：
  • 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响
  • 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
    • 定位的元素会盖在普通元素之上。
    • 都发生定位的两个元素，后写的元素会盖在先写的元素之上。
  • left不能和right一起设置，top和bottom不能一起设置。
  • 相对定位的元素，也能继续浮动，但不推荐这样做。
  • 相对行为的元素，也能通过margin调整位置，但不推荐这样做。

注意：绝大多数情况下，相对定位，会与绝对定位配合使用。

绝对定位

  1. 如何设置绝对定位？
  • 给元素设置position：absolute即可实现绝对定位。
  • 可以使用 left、right、top、bottom 四个属性调整位置。
  1. 绝对定位的参考点在哪里？
  • 参考它的包含块。

    什么是包含块？

    1. 对于没有脱离文档流的元素：包含块就是父元素；
    2. 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）。
  1. 绝对定位元素的特点：
  • 脱离文档流，会对后面的兄弟元素、父元素有影响。
  • left不能和right一起设置，top和bottom不能一起设置。
  • 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
  • 绝对定位的元素，也能通过margin调整位置，但不推荐这样做。
  • 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。

何为定位元素？一一默认宽、高都被内容所撑开，且能自由设置宽高。

固定定位

  1. 如何设置为固定定位？
  • 给元素设置position：fixed即可实现固定定位。
  • 可以使用left、right、top、bottom四个属性调整位置。
  1. 固定定位的参考点在哪里？
  • 参考它的视口

    什么是视口？一一对于PC浏览器来说，视口就是我们看网页的那扇“窗户”。

  1. 固定定位元素的特点
  • 脱离文档流，会对后面的兄弟元素、父元素有影响。
  • left不能和right一起设置，top和bottom不能一起设置。
  • 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
  • 固定定位的元素，也能通过margin调整位置，但不推荐这样做。
  • 无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。

粘性定位

  1. 如何设置为粘性定位？
  • 给元素设置position:sticky 即可实现粘性定位。
  • 可以使用 left、right、top、bottom四个属性调整位置，不过最常用的是top 值。
  1. 粘性定位的参考点在哪里？
  • 离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。
  1. 粘性定位元素的特点
  • 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
  • 最常用的值是top值。
  • 粘性定位和浮动可以同时设置，但不推荐这样做。
  • 粘性定位的元素，也能通过margin调整位置，但不推荐这样做。

粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。

定位层级

  1. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
  2. 如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
  3. 可以通过CSS 属性z-index调整元素的显示层级。
  4. z-index的属性值是数字，没有单位，值越大显示层级越高。
  5. 只有定位的元素设置z-index才有效。
  6. 如果z-index值大的元素，依然没有覆盖掉z-index值小的元素，那么请检查其包含块的层级。

定位的特殊应用

  1. 让定位元素的宽充满包含块
  • 块宽想与包含块一致，可以给定位元素同时设置left和right为0。
  • 高度想与包含块一致，top 和bottom设置为0。
  1. 让定位元素在包含块中居中
1
2
3
4
5
6
7
8
9
10
11
.inner {
    width: 400px;
    height: 200px;
    background-color: orange;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

注意：

  1. 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。
  2. 发生相对定位后，元素依然是之前的显示模式。
  3. 以下所说的特殊应用，只针对绝对定位和固定定位的元素，不包括相对定位的元素。

H5

  1. 什么是HTML5?
  1. HTML5优势
  • 针对JavaScript，新增了很多可操作的接口。
  • 新增了一些语义化标签、全局属性。
  • 新增了多媒体标签，可以很好的替代flash。
  • 更加侧重语义化，对于SEO更友好。
  • 可移植性好，可以大量应用在移动设备上。
  1. HTML5兼容性
  • 支持：Chrome、Safari、Opera、Firefox等主流浏览器。

新增语义化标签

  1. 新增布局标签
b标签名 语义 单/双标签
header 整个页面，或部分区域的头部 双
footer 整个页面，或部分区域的底部 双
nav 导航 双
article 文章、帖子、杂志、新闻、博客、评论等 双
section 页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含标题） 双
aside 侧边栏 双
main 文档的主要内容（WHATWG没有语义，IE不支持），几乎不用 双
hgroup 包裹连续的标题，如文章主标题、副标题的组合（W3C将其删除） 双
  • 关于article和section：
  1. artical里面可以有多个section。
  2. section强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用section元素。
  3. article比section更强调独立性，一块内容如果比较独立、比较完整，应该使用article元素。
  1. 新增状态标签
  • meter标签
    语义：定义已知范围内的标量测量。也被称为gauge（尺度），双标签，例如：电量、磁盘用量等。
1
2
<span>手机电量：</span>
<meter max="100" min="0" low="16" high="20" value="15" optimum="90"></meter>
  • progress标签
    语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签，例如：工作完成进度等。
1
2
<span>当前进度：</span>
<progress max="100" value="80"></progress>
  1. 新增列表标签
标签名 语义 单/双标签
datalist 用于搜索框的关键字提示 双
details 用于展示问题和答案，或对专有名词进行解释 双
summary 写在details的里面，用于指定问题或专有名词 双 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form action="#">
    <input type="text" list="mydata">
    <button>搜索</button>
</form>
<datalist id="mydata">
    <option value="周杰伦">周杰伦</option>
    <option value="周冬雨">周冬雨</option>
    <option value="马冬梅">马冬梅</option>
    <option value="温兆伦">温兆伦</option>
</datalist>
<hr>
<details>
    <summary>
        如何一夜暴富？
    </summary>
    <p>来尚硅谷学习前端</p>
</details>
  1. 新增文本标签
  • 文本注音
1
2
3
4
<ruby>
    <span>魑魅魍魉</span>
    <rt>chī mèi wǎng liǎng</rt>
</ruby>
  • 文本标记
1
<p>Lorem, ipsum <mark>dolor</mark> sit amet consectetur adipisicing elit. Vel, quibusdam!</p>

新增表单功能

  1. 表单控件新增属性
属性名 功能
placeholder 提示文字（注意：不是默认值，value是默认值），适用于文字输入类的表单控件。
required 表示该输入项必填，适用于除按钮外其他表单控件。
autofocus 自动完成，可以设置为on或off，适用于文字输入类的表单控件。注意：密码输入框、多行输入框不可用。
autocomplete 自动完成，可以设置为on或off，适用于文字输入类的表单控件。
注意：密码输入框、多行输入框不可用。
pattern 填写正则表达式，适用于文本输入类表单控件。
注意：多行输入不可用，且空的输入框不会验证，往往与required配合。
  1. input新增属性值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form action="#">
    邮箱：<input type="email" name="email" required>
    url：<input type="url" name="url" required>
    数值：<input type="number" name="number" max="100" min="0" step="2">
    搜索：<input type="search" name="keyword">
    光照强度：<input type="range" name="range" max="80" min="20">
    颜色：<input type="color" name="color">
    日期：<input type="date" name="date" required>
    月份：<input type="month" name="month" required>
    周：<input type="week" name="week" required>
    时间：<input type="time" name="time" required>
    日期+时间：<input type="datetime-local" name="datetime-local" required>
    <button>提交</button>
</form>
  1. form标签新增属性
属性值 功能
novalidate 如果给form标签设置了该属性，表单提交的时候不再进行验证

视频标签

1
<video src="" controls muted autoplay loop poster="" preload="auto"></video>

音频标签

1
<audio src="../images/Liangzhu.mp3" controls autoplay loop preload="auto"></audio>

CSS3

  1. CSS3 概述
  • CSS3是CSS2的升级版本，它在CSS2的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。
  • CSS3在未来会按照模块化的方式去发展： https://www.w3.org/Style/CSS/current-work.html
  • CSS3的新特性如下：
    • 新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等。
    • 新增了更好的视觉效果，例如：圆角、阴影、渐变等。
    • 新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性。
    • 新增了全新的布局方案一一弹性盒子。
    • 新增了Web字体，可以显示用户电脑上没有安装的字体。
    • 增强了颜色，例如：HSL、HSLA、RGBA几种新的颜色模式，新增opacity属性来控制透明度。
    • 增加了2D和3D变换，例如：旋转、扭曲、缩放、位移等。
    • 增加动画与过渡效果，让效果的变换更具流线性、平滑性。
  1. CSS3 私有前缀
  • Chrome浏览器：-webkit-
  • Safari 浏览器：-webkit-
  • Firefox浏览器：-moz-
  • Edge浏览器：-webkit-
  1. box-sizing怪异盒模型
    使用box-sizing属性可以设置盒模型的两种类型
可选值 含义
content-box width和height设置的是盒子内容区的大小。（默认值）
border-box width和height设置的是盒子总大小。（怪异盒模型）
  1. resize调整盒子大小
    使用resize属性可以控制是否允许用户调节元素尺寸。
值 含义
none 不允许用户调整元素大小 （默认）
both 用户可以调节元素的宽度和高度
horizontal 用户可以调节元素的宽度
vertical 用户可以调节元素的高度
  1. opacity不透明度
  • opacity属性能为整个元素添加透明效果，值是0到1之间的小数，0是完全透明，1表示完全不透明。

    opacity与rgba 的区别?
    opacity是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。
    rgba是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。

背景设置

  1. background-origin
    作用：设置背景图的原点。
值 含义
padding-box 从padding区域开始显示背景图像一默认值
border-box 从border区域开始显示背景图像
content-box 从content区域开始显示背景图像
  1. background-size
  • 作用：设置背景图的尺寸。
  • 语法：

用长度值指定背景图片大小，不允许负值。

1
background-size:300px 200px;

用百分比指定背景图片大小，不允许负值。

1
background-size:100% 100%;

auto：背景图片的真实大小。一一默认值
contain：将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含
在容器内，但要注意：可能会造成容器里部分区域没有背景图片。

1
background-size: contain;

cover：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景
图片有可能显示不完整。一一相对比较好的选择

1
background-size: cover;
  1. 多背景图
    CSS3允许元素设置多个背景片
1
2
3
4
5
6
/* 添加多个背景图 */
background: url('../images/bg-lt.png') no-repeat,
            url('../images/bg-rt.png') no-repeat right top, 
            url('../images/bg-lb.png') no-repeat left bottom, 
            url('../images/bg-rb.png') no-repeat right bottom;

新增边框相关属性

  1. outline-offset设置外轮廓与边框的距离，正负值都可以设置。
  2. outline复合属性
1
outline: 50px solid blue;

新增文本属性

  1. 文本阴影
  • 在CSS3中，我们可以使用text-shadow属性给文本添加阴影。
  • 语法：
    text-shadow:h-shadow v-shadow blur color;
值 描述
h-shadow 必需写，水平阴影的位置。允许负值。
v-shadow 必需写，垂直阴影的位置。允许负值。
blur 可选，模糊的距离。
color 可选，阴影的颜色
  • 默认值：text-shadow：none表示没有阴影。
  1. 文本换行
  • 在CSS3中，我们可以使用white-space属性设置文本换行方式。
  • 常用值如下：
值 含义
normal 文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。 (默认值)
pre 原样输出，与pre标签的效果相同。
pre-wrap 在pre效果的基础上，超出元素边界自动换行。
pre-line 在pre效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略。
nowrap 强制不换行
  1. 文本溢出
  • 在CSS3中，我们可以使用text-overflow属性设置文本内容溢出时的呈现模式。
  • 常用值如下：
值 含义
clip 当内联内容溢出时，将溢出部分裁切掉。(默认值)
ellipsis 当内联内容溢出块容器时，将溢出部分替换为…

注意：要使得text-overflow属性生效，块容器必须显式定义overflow为非visible值， white-space 为 nowrap 值。

  1. 文本修饰
  • CSS3升级了text-decoration属性，让其变成了复合属性。
1
2
3
4
5
6
7
h1 {
    font-size: 40px;
    /* text-decoration-line: overline; */
    /* text-decoration-style: dashed; */
    /* text-decoration-color: blue; */
    text-decoration: overline dashed blue;
}
  1. 文本描边
  • 注意：文字描边功能仅webkit内核浏览器支持。经验证：Firefox 浏览器也支持！
1
2
3
4
5
h2 {
    font-size: 100px;
    -webkit-text-stroke: 3px red;
    color: transparent;
}

新增渐变

  1. 线性渐变
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.box {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    float: left;
    margin-left: 50px;
    font-size: 20px;
}
.box1 {
    background-image: linear-gradient(red, yellow, green);
}
.box2 {
    background-image: linear-gradient(to right top, red, yellow, green);
}
.box3 {
    background-image: linear-gradient(20deg, red, yellow, green);
}
.box4 {
    background-image: linear-gradient(red 50px, yellow 100px, green 150px);
}
.box5 {
    background-image: linear-gradient(20eg, red 50px, yellow 100px, green 150px);
    font-size: 80px;
    text-align: center;
    line-height: 200px;
    font-weight: bold;
    color: transparent;
    -webkit-background-clip: text;
}
  1. 径向渐变
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.box {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    float: left;
    margin-left: 50px;
    font-size: 20px;
}
.box1 {
    background-image: radial-gradient(red, yellow, blue);
}
.box2 {
    background-image: radial-gradient(at left top, red, yellow, blue);
}
.box3 {
    background-image: radial-gradient(at 150px 100px, red, yellow, blue);
}
.box4 {
    background-image: radial-gradient(circle, red, yellow, blue);
}
.box5 {
    background-image: radial-gradient(200px 200px, red, yellow, blue);
}
.box6 {
    background-image: radial-gradient(red 50px, yellow 100px, blue 150px);
}

2D变换

  1. 2D位移
    2D位移可以改变元素的位置，具体使用方式如下：
  • 先给元素添加转换属性transform
  • 编写transform的具体值，相关可选值如下：
值 含义
translateX 设置水平方向位移，需指定长度值；若指定的是百分比，是参考自身宽度的百分比。
translateY 设置垂直方向位移，需指定长度值；若指定的是百分比，是参考自身高度的百分比。
translate 一个值代表水平方向，两个值代表：水平和垂直方向。
  • 注意点：
  1. 位移与相对定位很相似，都不脱离文档流，不会影响到其它元素。
  2. 与相对定位的区别：相对定位的百分比值，参考的是其父元素；定位的百分比值，参考的是其自身。
  3. 浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。
  4. transform可以链式编写，例如：
1
transform:translateX(30px) translateY(40px);
  1. 位移对行内元素无效。
  2. 位移配合定位，可实现元素水平垂直居中
1
2
3
4
5
6
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  1. 2D缩放
    2D缩放是指：让元素放大或缩小，具体使用方式如下：
  • 先给元素添加转换属性transform
  • 编写transform的具体值，相关可选值如下：
值 含义
scaleX 设置水平方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。
scaleY 设置垂直方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。
scale 同时设置水平方向、垂直方向的缩放比例，一个值代表同时设置水平和垂直缩放；两个值分别代表：水平缩放、垂直缩放。
  • 注意点：
  1. scale的值，是支持写负数的，但几乎不用，因为容易让人产生误解。
  2. 借助缩放，可实现小于12px的文字。
  1. 2D旋转
    2D旋转是指：让元素在二维平面内，顺时针旋转或逆时针旋转，具体使用方式如下：
  • 先给元素添加转换属性transform
  • 编写transform的具体值，相关可选值如下：
值 含义
rotate 设置旋转角度，需指定一个角度值（deg），正值顺时针，负值逆时针。
  • 注意：rotateZ(20deg) 相当于rotate(20deg)，当然到了3D变换的时候，还能写：rotate(x,x,x)
  1. 多重变换
  • 多个变换，可以同时使用一个transform来编写。
1
2
/* transform: translate(100px, 100px) scale(.5); */
transform: translate(100px, 100px) rotate(30deg);
  • 注意点：多重变换时，建议最后旋转。
  1. 变换原点
  • 元素变换时，默认的原点是元素的中心，使用transform-origin可以设置变换的原点。
  • 改变换原点对位移没有影响，对旋转和缩放会产生影响。
  • 如果提供两个值，第一个用于横坐标，第二个用于纵坐标。
  • 如果只提供一个，若是像素值，表示横坐标，纵坐标取50%；若是关键词，则另一个坐标取50%
  1. transform-origin：50% 50%，变换原点在元素的中心位置，百分比是相对于自身。一默认值
  2. transform-origin：left top，变换原点在元素的左上角。
  3. transform-origin：50px 50px，变换原点距离元素左上角50px 50px的位置。
  4. transform-origin：0，只写一个值的时候，第二个值默认为50%。

3D变换

  1. 开启3D空间
    重要原则：元素进行3D变换的首要操作：父元素必须开启3D空间！

使用transform-style开启3D空间，可选值如下：

  • flat：让子元素位于此元素的二维平面内（2D空间）－一默认值
  • preserve-3d：让子元素位于此元素的三维空间内（3D空间）
  1. 设置景深
    何为景深？-－指定观察者与z=0平面的距离，能让发生3D变换的元素，产生透视效果，看来更加立体。

使用perspective设置景深，可选值如下：

  • none：不指定透视－一 (默认值)
  • 长度值：指定观察者距离z=0平面的距离，不允许负值。

注意：perspective设置给发生3D变换元素的父元素！

  1. 透视点位置
  • 所谓透视点位置，就是观察者位置；默认的透视点在元素的中心。
  • 注意：通常情况下，我们不需要调整透视点位置。
1
2
3
/* 设置透视点的位置 */
/* 相对坐标轴往右偏移400px，往下偏移300px（相当于人蹲下300像素，然后向右移动400像素看元素） */
perspective-origin: 400px 300px;
  1. 3D位移
    3D位移是在2D位移的基础上，可以让元素沿z轴位移，具体使用方式如下：
  • 先给元素添加转换属性transform
  • 编写transform的具体值，3D相关可选值如下：
值 含义
translateZ 设置z轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比。
translate3d 第1个参数对应x轴，第2个参数对应y轴，第3个参数对应z轴，且均不能省略。
  1. 3D旋转
    3D旋转是在2D旋转的基础上，可以让元素沿x轴和y轴旋转，具体使用方式如下：
  • 先给元素添加转换属性transform
  • 编写transform的具体值，3D相关可选值如下：
值 含义
rotateX 设置x轴旋转角度，需指定一个角度值（deg），面对x轴正方向：正值顺时针，负值逆时针。
rotateY 设置y轴旋转角度，需指定一个角度值（deg），面对y轴正方向：正值顺时针，负值逆时针。
rotate3d 前3个参数分别表示坐标轴：x，y，z，第4个参数表示旋转的角度，参数不允许省略。例如：transform：rotate3d(1,1,1,30deg)，意思是：x、y、z分别旋转30度。
  1. 3D缩放
    3D缩放是在2D缩放的基础上，可以让元素沿z轴缩放，具体使用方式如下：
  • 先给元素添加转换属性transform
  • 编写transform的具体值，3D相关可选值如下：
值 含义
scaleZ 设置z轴方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。
scale3d 第1个参数对应x轴，第2个参数对应y轴，第3个参数对应z轴，参数不允许省略。

过渡

过渡可以在不使用Flash动画，不使用JavaScript的情况下，让元素从一种样式，平滑过渡为另一种样式。

  1. 基本使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.box1 {
    width: 200px;
    height: 200px;
    background-color: orange;
    /* 设置哪个属性需要过渡效果 */
    /* transition-property: height width background-color; */
    /* 让所有能过渡的属性，都过渡 */
    transition-property: all;
    /* 分别设置时间 */
    /* transition-duration: 1s, 1s, 1s; */
    /* 设置一个时间，所有人都用 */
    transition-duration: 1s;
}
.box1:hover {
    height: 400px;
    width: 400px;
    background-color: green;
    transform: rotate(45deg);
    box-shadow: 0px 0px 20px black;
    opacity: 1;
}
  1. 高级使用
1
2
3
4
5
6
7
8
9
10
11
12
<div class="outer">
    <!-- transition-timing-function: xxx; -->
    <div class="box box1">ease（慢，快，慢）</div>
    <div class="box box2">linear（匀速）</div>
    <div class="box box3">ease-in（慢，快）</div>
    <div class="box box4">ease-out（快，慢）</div>
    <div class="box box5">ease-in-out（慢，快，慢）</div>
    <div class="box box6">step-start不考虑过渡的时间，直接就是终点</div>
    <div class="box box7">step-end考虑过渡时间，但无过渡效果，过渡时间到了以后，瞬间到达终点</div>
    <div class="box box8">steps分步过渡</div>
    <div class="box box9">无敌的贝赛尔曲线</div>
</div>
  1. transition复合属性
  • 如果设置了一个时间，表示duration；如果设置了两个时间，第一是duration，第二个是delay；其他值没有顺序要求。
1
transition:1s 1s linear all;

动画

  1. 动画的基本使用
  • 第一步：定义关键帧 (定义动画)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.inner {
    width: 100px;
    height: 100px;
    background-color: deepskyblue;
    /* 应用动画到元素 */
    animation-name: moving_right_better;
    /* 动画持续的时间 */
    animation-duration: 3s;
    /* 动画延迟时间 */
    animation-delay: 0.5s;
}
/* 定义一个动画（定义一组关键帧） */
@keyframes moving_right {
    /* 第一帧 */
    from {}
    /* 最后一帧 */
    to {
        transform: translate(900px);
        background-color: red;
    }
}
  • 第二步：完整方式定义
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 定义一个动画（定义一组关键帧）一第二种方式 */
@keyframes moving_right_better {
    0% { }
    30% {
        background-color: orange;
    }
    60% {
        background-color: red;
    }
    100% {
        transform: translate(900px) rotate(360deg);
        background-color: purple;
        border-radius: 50%;
    }
}
  1. 动画的其他属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.outer {
    width: 1000px;
    height: 100px;
    border: 1px solid black;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: deepskyblue;
    /* 应用动画到元素 */
    animation-name: moving_right;
    /* 动画持续的时间 */
    animation-duration: 3s;
    /* 动画延迟时间 */
    animation-delay: 0.5s;

    /* 其他属性--start */
    /* 设置动画的方式 */
    /* animation-timing-function: steps(20); */
    animation-timing-function: linear;

    /* 动画播放的次数 */
    animation-iteration-count: 3;

    /* 动画的方向 */
    animation-direction: alternate;

    /* 动画以外的状态（不发生动画的时候在哪里） */
    animation-fill-mode: forwards;
}
.outer:hover .inner {
    /* 动画的播放状态 */
    animation-play-state: paused;
}
@keyframes moving_right {
    from {}
    to {
        transform: translate(900px) rotate(360deg);
        background-color: purple;
        border-radius: 50%;
    }
}

  1. animation复合属性
  • 只设置一个时间表示duration，设置两个时间分别是：duration和delay，其他属性没有数量和顺序要求。

animation-name
animation-duration
animation-delay
animation-timing-function
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

  • 以上属性符合的结果
1
2
3
4
5
6
.inner {
    width: 100px;
    height: 100px;
    background-color: deepskyblue;
    animation: moving_right 3s linear 0.5s 3 alternate forwards;
}

多列布局

作用：专门用于实现类似于报纸的布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.outer {
    width: 1000px;
    margin: 0 auto;

    /* 直接指定列数 */
    column-count: 3;
    /* 指定每一列的宽度，会自动计算列数 */
    /* column-width: 220px; */
    /* 复合属性，能同时指定列宽和列数（不推荐使用） */
    /* columns: 6 200px; */

    /* 调整列间距 */
    column-gap: 20px;
    /* 边框相关的复合属性 */
    column-rule: 2px dashed red;

}
h1 {
    column-span: all;
    text-align: center;
    font-size: 50px;
}
img {
    width: 100%;
}

伸缩盒模型

  1. 伸缩盒模型简介
  • 2009年，W3C提出了一种新的盒子模型一FlexibleBox（伸缩盒模型，又称：弹性盒子）。
  • 它可以轻松的控制：元素分布方式、元素对齐方式、元素视觉顺序
  • 截止目前，除了在部分IE浏览器不支持，其他浏览器均已全部支持。
  • 伸缩盒模型的出现，逐渐演变出了一套新的布局方案一flex布局。

小贴士：

  • 传统布局是指：基于传统盒状模型，主要靠：display属性+position属性+float属性。
  • flex布局目前在移动端应用比较广泛，因为传统布局不能很好的呈现在移动设备上。
  1. 伸缩容器、伸缩项目

  • 伸缩容器：开启了flex的元素，就是：伸缩容器。

    1. 给元素设置：display: flex 或display: inline-flex，该元素就变为了伸缩容器。
    2. display: inline-flex很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器。
    3. 一个元素可以同时是：伸缩容器、伸缩项目。

  • 伸缩项目：伸缩容器所有子元素自动成为了：伸缩项目。

  1. 仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。
  2. 无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会“块状化”。
  1. 主轴与侧轴
  • 主轴：伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边是终点）。
  • 侧轴：与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边是终点）。
  1. 主轴方向
  • 属性名：flex-direction
  • 常用值如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.outer {
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    background-color: #888;
    /* 伸缩盒模型相关属性-start */
    /* 将该元素变为了伸缩容器（开启了flex布局） */
    display: flex;

    /* 调整主轴方向，水平从左到右，默认 */
    /* flex-direction: row; */

    /* 调整主轴方向，水平从右到左 */
    /* flex-direction: row-reverse; */

    /* 调整主轴方向，垂直从上到下 */
    /* flex-direction: column; */

    /* 调整主轴方向，垂直从下到上 */
    flex-direction: column-reverse;
}
  1. 主轴换行方式
  • 属性名：flex-wrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.outer {
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    background-color: #888;
    /* 伸缩盒模型相关属性-start */
    /* 将该元素变为了伸缩容器（开启了flex布局） */
    display: flex;

    /* 调整主轴方向，水平从左到右，默认 */
    flex-direction: row;

    /* 主轴换行方式，不换行，默认值 */
    /* flex-wrap: nowrap; */

    /* 主轴换行方式，换行 */
    /* flex-wrap: wrap; */

    /* 主轴换行方式，反向换行(向上换行) */
    flex-wrap: wrap-reverse;
}
  1. 主轴对齐方式
  • 属性名：justify-content
  • 常用值如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.outer {
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    background-color: #888;
    /* 伸缩盒模型相关属性-start */
    /* 将该元素变为了伸缩容器（开启了flex布局） */
    display: flex;
    /* 调整主轴方向，水平从左到右，默认 */
    flex-direction: row;
    /* 主轴换行方式，换行 */
    flex-wrap: wrap;

    /* 主轴的对齐方式，主轴的起始位置 */
    /* justify-content: flex-start; */

    /* 主轴的对齐方式，主轴的结束位置 */
    /* justify-content: flex-end; */

    /* 主轴的对齐方式，中间对齐 */
    /* justify-content: center; */

    /* 主轴的对齐方式，项目均匀的分布在一行中，项目与项目之间的距离，是项目距边缘的二倍 */
    /* justify-content: space-around; */

    /* 主轴的对齐方式，项目均匀的分布在一行中，项目与项目之间的距离是相等的，项目距边缘没有距离 */
    /* justify-content: space-between; */

    /* 主轴的对齐方式，项目均匀的分布在一行中 */
    justify-content: space-evenly;
}
  1. 侧轴对齐方式
    (1) 只有一行的情况
  • 所需属性：align-items
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.outer {
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    background-color: #888;
    /* 伸缩盒模型相关属性-start */
    /* 将该元素变为了伸缩容器（开启了flex布局） */
    display: flex;
    /* 调整主轴方向，水平从左到右，默认 */
    flex-direction: row;
    /* 主轴换行方式，换行 */
    flex-wrap: wrap;
    /* 主轴的对齐方式，主轴的起始位置 */
    justify-content: flex-start;
    /* 侧轴的对齐方式，侧轴的起始位置对齐 */
    align-items: flex-start;

    /* 侧轴的对齐方式，侧轴的结束位置对齐 */
    /* align-items: flex-end; */

    /* 侧轴的对齐方式，侧轴的中间位置对齐 */
    /* align-items: center; */

    /* 侧轴的对齐方式，基线对齐 */
    /* align-items: baseline; */

    /* 侧轴的对齐方式，拉伸到整个父容器（前提：伸缩项目不能给高度），默认 */
    /* align-items: stretch; */
}

(2) 多行的情况

  • 所需属性：align-content
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.outer {
    width: 1000px;
    height: 900px;
    margin: 0 auto;
    background-color: #888;
    /* 伸缩盒模型相关属性-start */
    /* 将该元素变为了伸缩容器（开启了flex布局） */
    display: flex;
    /* 调整主轴方向，水平从左到右，默认 */
    flex-direction: row;
    /* 主轴换行方式，换行 */
    flex-wrap: wrap;
    /* 主轴的对齐方式，主轴的起始位置 */
    justify-content: flex-start;

    /* 侧轴的对齐方式（多行）侧轴的起始位置对齐 */
    align-content: flex-start;

    /* 侧轴的对齐方式（多行）侧轴的结束位置对齐 */
    /* align-content: flex-end; */

    /* 侧轴的对齐方式（多行）侧轴的中间位置对齐 */
    /* align-content: center; */

    /* 侧轴的对齐方式（多行），伸缩项目之间的距离是相等的，且是边缘距离的2倍 */
    /* align-content: space-around; */

    /* 侧轴的对齐方式（多行），伸缩项目之间的距离是相等的，且边缘没有距离 */
    /* align-content: space-between; */

    /* 侧轴的对齐方式（多行），伸缩项目之间的距离是相等的 */
    /* align-content: space-evenly; */

    /* 侧轴的对齐方式（多行），拉伸，默认 */
    /* align-content: stretch; */
}
  1. flex-grow (伸)
  • 概念：flex-grow定义伸缩项目的放大比例，默认为0，即：纵使主轴存在剩余空间，也不拉伸（放大）。
  • 规则：
    • 若所有伸缩项目的flex-grow值都为1，则：它们将等分剩余空间（如果有空间的话）。
    • 若三个伸缩项目的flex-grow值分别为：1、2、3，则：分别瓜分到：1/6、2/6、3/6的空间。
  1. flex-shrink (缩)
  • 概念：flex-shrink定义了项目的压缩比例，默认为1，即：如果空间不足，该项目将会缩小。* 收缩项目的计算，略微复杂一点，我们拿一个场景举例：
    flex-shrink计算法
  1. flex复合属性
  • flex 是复合属性，复合了：flex-grow、flex-shrink、flex-basis 三个属性，默认值为0 1 auto。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.inner {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    background-color: deepskyblue;
    box-sizing: border-box;
    flex-grow: 1;
    flex-shrink: 1;
    /* 基准长度 */
    flex-basis: 100px;
    /* 可以拉伸可以压缩不设置基准长度，可简写为：flex: auto */
    flex: 1 1 auto;
    /* 可以拉伸可以压缩设置基准长度为o，可简写为：flex：1 */
    flex: 1 1 0;
    /* 不可以拉伸不可以压缩不设置基准长度，可简写为：flex：none */
    flex: 0 0 auto;
    /* 不可以拉伸可以压缩不设置基准长度，可简写为：flex:0 auto */
    flex: 0 1 auto;
}
  1. 项目排序
  • order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
  1. 单独对齐
  • 通过align-self属性，可以单独调整某个伸缩项目的对齐方式
  • 默认值为auto，表示继承父元素的align-items属性。

媒体查询

  1. 媒体类型
    | 值 | 含义 |
    | ---- | ---- |
    | all | 检测所有设备。|
    | screen | 检测电子屏幕，包括：电脑屏幕、平板屏幕、手机屏幕等。|
    | print | 检测打印机。|
  2. 媒体特性
值 含义
width 检测视口宽度。
max-width 检测视口最大宽度。
min-width 检测视口最小宽度。
height 检测视口高度。
max-height 检测视口最大高度。
min-height 检测视口最小高度。
device-width 检测设备屏幕的宽度。
max-device-width 检测设备屏幕的最大宽度。
min-device-width 检测设备屏幕的最小宽度。
orientation 检测视口的旋转方向（是否横屏）。1.portrait：视口处于纵向，即高度大于等于宽度。2.landscape：视口处于横向，即宽度大于高度。
  1. 常用阈值
  • 在实际开发中，会将屏幕划分成几个区间，例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 超小屏幕 */
@media screen and (max-width:768px) {
    h1 {
        background-color: orange;
    }
}
/* 中等屏幕 */
@media screen and (min-width:768px) and (max-width:992px) {
    h1 {
        background-color: green;
    }
}
/* 大屏幕 */
@media screen and (min-width:992px) and (max-width:1200px) {
    h1 {
        background-color: deepskyblue;
    }
}
/* 超大屏幕 */
@media screen and (min-width:1200px) {
    h1 {
        background-color: purple;
    }
}

BFC

  1. 什么是BFC？
  • BFC是BlockFormattingContext（块级格式上下文），可以理解成元素的一个“特异功能”
  • 该“特异功能”，在默认的情况下处于关闭状态；当元素满足了某些条件后，该“特异功能"被激活。
  • 所谓激活“特异功能”，专业点说就是：该元素创建了BFC（又称：开启了BFC）。
  1. 开启了BFC能解决什么问题
  • 元素开启BFC后，其子元素不会再产生margin塌陷问题。
  • 元素开启BFC后，自己不会被其他浮动元素所覆盖。
  • 元素开启BFC后，就算其子元素浮动，元素自身高度也不会塌陷。
  1. 如何开启BFC
  • 根元素
  • 浮动元素
  • 绝对定位、固定定位的元素
  • 行内块元素
  • 表格单元格：table、thead、tbody、tfoot、th、td、tr、caption
  • overflow的值不为visible的块元素
  • 伸缩项目多列容器
  • column-span为all的元素（即使该元素没有包裹在多列容器中）
  • display的值，设置为flow-root（副作用最小）
Buy me a coffee please.