H5+CSS3笔记

最新推荐文章于 2023-04-10 17:25:53 发布
最新推荐文章于 2023-04-10 17:25:53 发布
阅读量1.2k 收藏 8
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43181211/article/details/119004778
版权

关于授课（学习）

许多人相信，他们的智力水平是生来是注定的，学业无成是因为先天不足。但实际情况是，当学习新东西时，大脑会发生改变，也就是说影响智力水平的因素在很大程度上是你本人掌握的。（自信）

上课：主动参与学习可以有更好的效果。

  • 上课的跟着思路走-》琢磨-》提出问题。
  • 上课进行互动，可以开一些玩笑（调节气氛，没有恶意不影射谁），有\没有问题都要及时说出来。
  • 上课安排的课堂练习通常和当天的讲解内容及之前的知识有关，尝试着去想、去做。即使做不出来也可以起到巩固知识的效果。

练习：想成为高手就要有循序渐进的过程。知识、概念性的理解、判断，以及技能要靠慢慢积累才能获得。只有在练习新技能的同时付出努力、展开思考，并且演练，成果才会显现。

  • 默写：每天早上的默写是学习工具，它让你检索知识。
    • 告诉你什么是你知道的，什么是你不知道的，然后你就可以将精力放在薄弱的环节。
    • 回想已经学过的东西会动脑重新巩固记忆，强化新知识与已知之间的联系。
  • 难点：
    • 用心的思考一遍、做一遍，之后学习其他的知识点，然后再回来回忆一遍、做一遍，形成交错练习。
    • 努力与挫折是必不可少的，犯错并改正错误，是通往高层次学习的桥梁。
    • 在别人教你答案前，先尝试自己解决问题。这样效果会更好，哪怕在尝试中会犯下一些错误。

作业：没有大量的练习、思考，没有办法将知识牢记并且活学活用，但很多人就是容易过高地估计自己对学习资料的掌握程度。你感觉自己明白了某样东西，觉的不再需要练习了，这个时候通常会在使用、测试时受伤（人们有极强的天赋说服自己接受自己想看的结论，同时否认那些不合自己心意的真相），这就是学习过程中经常遇到的一讲就会，一写就废。

  • 早晨的默写会在当天进行讲解（但肯定不是默写完成之后马上讲解，对于记忆知识点没好处），晚上的时候需要将当天默写再练习多遍。
  • 课堂代码最少三遍：（耗费心血的学习才是深层次的，效果也更持久。不花力气的学习就像在沙子上写字，今天写上，明天字就消失了。）
    • 第一遍：整理思路，回想上课的讲解，知道讲的是什么，按照课上的套路写出来（可以一边整理思路一边对照课上的代码写）。
    • 第二遍：回想思路，按照思路尝试写出来。
    • 第三遍及更多遍：最终能够一边想一边写出来。
      这些课堂代码千万不要一次写三遍，交错着去写。
  • 扩展作业：在复习完之前的知识、搞定当天的知识之后再做，之后会讲解。

复习：遗忘是好事，人都会忘记一些事情，遗忘后复习可以让你的知识更牢固。

  • 当天搞定所学知识点，复习之前知识点。
  • 周四、周日休息时复习前面的知识点。
单标签 `<标签名 />`
双标签  `<标签名 属性1="值1" 属性2="值2".....>要标记出来的内容</标签名>`

<!-- 告诉浏览器应该用什么标准来解释 -->
<!DOCTYPE html>
<html>
  <!-- 描述性的内容 -->
  <head></head>
  <!-- 真正在页面中显示出来的内容 -->
  <body></body>
</html>
head标签中的内容

  1. <title>标签：定义在HTML文档的标题，显示在网页的标题栏上。一个网页中只能有一个标题。

    作用：

    1. 显示网页的标题让用户一看就知道网页要表达的意思。

    2. 当在收藏本网页的时候标题会作为默认的内容存在。

    3. 搜索引擎也会用到titile里面的内容。

      <title>“五个一百”上新了，为正能量打call！ |里约奥运会|中国女排_网易政务</title>
<title>共庆百年华诞！成都点亮灯光秀 献上祝福_腾讯新闻</title>
<title>又要涨价！6月28日国内汽柴油价每吨或上调约200元</title>

      有些网站会单独的写自己的标题，有些网站它会将格式设置为文章标题-栏目标题-网站名或文章标题|栏目标题|网站名

      <title>李沛华老师的过去|感情故事|破鞋网</title>

  2. 字符集

    • 字符集：字符的集合。说明了里面都有哪些字。
    • 编码：规定了字符集里面的每个字应该怎么存。

    发展过程：

    1. 美帝国主义发明了电脑，他们要控制电脑。单字节编码ASCII码，只包含英文字母和一些符号。

    2. 电脑开始普及，每个国家的人都需要控制电脑。所以商量之后咱们指定自己的一些编码方式ANSI字符集，有各种的编码，中国指定了GB2312和GBK编码。一个汉字占2个字符。

    3. ANSI只能存储自己国家的字符，如果要存储其他的字符怎么办。Unicode字符集，里面有UTF-8、UTF-16编码。UTF-8存储汉字占据3个字节。

      Unicode字符集里面包含各个国家的文字，所以我们也称它为万国码。

  3. <meta />标签，定义对页面的描述。

    1. 更改编码方式，规定让浏览器以什么编码来解析这个页面。

      <meta charset="编码" />

      __页面中乱码的根本原因：是因为存储的字符集和浏览器解释的字符集不同导致的。__保证不乱码只需要设置存储的编码和解释的编码相同就行了。

      现在导致这个问题的原因是vscode自身提供的服务器导致的，它会默认给你的解析编码都设置为utf-8

      我们用的时候没有字符集什么事，用的只是编码。

      UTF-8

      GBK

      GB2312 这些东西是编码。

    2. 其他用法

      <meta name="" content="" />

      • name属性里面的值是规定好的
        • keywords，用来指定HTML文档的关键字。
        • description，指定网页的描述。
      • content属性里面的值是根据name属性的值来写的，自定义的内容。

      1. 当name值为keywords时

        作用：描述网页中的关键字，给搜索引擎用。

        __注意： __

        1. 可以设置多个关键字，每个关键字之间以逗号进行分隔。
        2. 越重要的关键字应该越放在前面。

        编程过程中使用的符号都是英文的。

      2. 当name的值为description的时候。

        作用：用来设置简短的网页的描述，给搜索引擎用。

  4. 其他的头标签

    • <script></script>，在里面写一段JavaScript脚本。
    • <style></style>，用来写CSS样式。
    • <link />设置外部文件的链接标志，用来确定本页面和其他文档之间的关系。
body中的内容

学习HTML要注意什么，不要注意样式，要注意结构，意思，意义。

<marquee></marquee>它有动态效果bgcolor

  • p标签：定义一个段落（一段话）

    p标签会在每个段落后面加上换行。

  • <hn>标签：定义文字的标题

    n指的是数值

    h1是最大的标题，h6是最小的标题。

    注意：

    1. 被hn标记的文本会被自动加粗并且自动换行。
    2. H标签代表的是标题。
    3. h1标签最好在一个页面中只出现一次。
    4. h1~h6他们的重要程度依次递减。本身H标签就是用来进行对文本的标题着重强调的。

  • <hr />标签：定义一条水平线，用来进行内容的分隔。

    我们在使用的时候首先文件名尽量不要用中文。

语义化的标签
  • <b>&<strong>，加粗文本。
  • <i>&<em>，斜体文本。
  • <u>&<ins>，文本下划线
  • <s>&<del>，删除线

强调结构，强调意义。不要看样式。

__注意： __

  1. 第一种只具有显示效果。

  2. 第二种不单单有显示效果还强调语义。

  3. 语义给谁看给搜索引擎和浏览器看。

    我为啥给搜索引擎看。

    搜索引擎中的抓取程序：只认识HTML，对于CSS和JS不认识。

绝对路径和相对路径

路径：当前的HTML文件与其他文件的位置关系。

  • 绝对路径，从头开始计算文件出现的路径。

    不管当前你在哪里都是从头开始计算，完整的路径。

    C:\xampp\htdocs\0624\2\1.html（c盘，顶头，不能再往上了）走的是file协议。

    http://localhost/0624/1/1.html （从头：web服务器的根目录）走的是http或https协议。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bwYstgKH-1626946116458)(/Volumes/尚硅谷前端/笔记/2/20210216094837243_21665.png)]

  • 相对路径：相对于编码文件现在的位置来计算路径。

    • 下级

      当前位置/b酒店/301/yanhaijing

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QJ0XXYax-1626946116460)(/Volumes/尚硅谷前端/笔记/2/20210216094859197_15275.png)]

    • 同级

      当前所在位置的yanhaijing

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5du1505q-1626946116461)(/Volumes/尚硅谷前端/笔记/2/20210216094932055_6119.png)]

    • 上级

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NHbhSL2W-1626946116464)(/Volumes/尚硅谷前端/笔记/2/20210216095006599_16663.png)]

./a/xxx.jpg

./a/b/xxx.jpg

./abc.jpg

../abc.jpg

../../helloworld.html

当前的位置：使用.来表示。

当前目录的上级目录：使用..来表示。

a链接

链接：我们web中的网页是由一个一个的链接相互连起来的。这种点击可以跳转的东西叫链接。

<a>标签：链接到指定的文档

  • href属性：要跳转的页面，值为一个路径（绝对路径、相对路径）

    __注意： __

    1. 当你的路径为绝对路径时记得要加上协议名。

    2. 目录大小写问题，在window系统下不区分大小写，在Linux中是严格区分大小写的。

      人家大写你就大写人家小写你就小写。

    3. href的值不要写本地的绝对路径（file协议：file protcol 本地文件传输协议）

    4. 我们在使用过程中a链接里面的内容有可能是一张图片。

    5. href中的url地址有可能指向的不是一个html文件有可能是图片等等。

    6. 我们可以给href的值写为一个#表示这是一个空链接。

  • title属性：鼠标移动上去的时候给出提示，值为自定义的文字。

  • target属性：点击链接之后在哪里打开链接

    • _self，默认值。
    • _blank，在新窗口打开。

  • 锚点：URL中的片段标识符就是锚点，请求指定资源的子资源，点击指定的链接时候跳转到指定的位置。

    1. 分块

      <a name="标记的名字">
    要分块的内容
</a>

    2. 标记链接

      <a href="#标记的名字">内容</a>

img标签

<img />图像标签

  • src属性：必须，指向的地址
  • alt属性：图片不能识别的时候告诉浏览网页的人和搜索引擎这张图片表示什么内容。
  • width属性：用来设置图像的宽度
  • height属性：用来设置图像的高度

注意：

  1. 如果只是单独设定了宽度或高度，将会进行等比例缩放。
  2. 如果同时设定了宽度或高度的时候，图像有可能会失真。
  3. pixel，像素，它不是自然界中的长度单位。px是一种图像中的最小的点。
行内元素和块级元素

行内元素和块状元素直观上的区别：行内元素会在一条水平线上排列，在同一行。块级元素自己独占一行。

列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-btq10ueG-1626946116468)(/Volumes/尚硅谷前端/笔记/2/20210216115848156_29571.png)]

  • 无序列表（没有顺序）
    • ul标签表示无序列表
    • ul里面放置一个一个的li标签代表列表的每一项。
    • ul的子元素必须是li。li里面可以放置其他内容。
  • 有序列表（有顺序）
    • ol标签表示无序列表
    • ol里面放置一个一个的li标签代表列表的每一项。
    • ol的子元素必须是li。li里面可以放置其他内容。
  • 自定义列表，由列表的一项的主题和每一项的具体描述组成。
    • <dl>标签：定义了一个自定义列表。
    • <dt>标签：定义列表项的主题。
    • <dd>标签：描述列表中的项目。
表格

展示数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-URFoqz3y-1626946116469)(/Volumes/尚硅谷前端/笔记/2/20210216095636032_3665.png)]

  • <table>标签：告诉浏览器在<table>内包含的内容属于表格。

    • border属性：用来定义边框
    • width属性：定义表格的宽度
    • cellspacing属性：单元格与单元格之间的距离。

  • 标题：<caption>标签。

  • 表头：<thead>

  • 表格主体数据：<tbody>

  • 表格脚注：<tfoot>

注意：

  1. thead、tbody、tfoot中每一行使用tr来表示。
  2. 如果说是thead中的行的每个单元格我们使用th来表示
  3. tbody和tfoot中的每一行中的每个单元格使用<td>。
  4. 虽然可以省略但是自动会加上的标签：html、head、body、tbody(即使被省略了，它也是隐式存在的)

  • tr中的属性

    • height属性：设置tr的高度。
    • align属性：设置本行的文本的对齐方式
      • left
      • center
      • right
    • valign属性：规定表格行中内容的垂直对齐方式
      • top：顶部对齐
      • middle：垂直居中对齐
      • bottom：底部对齐

  • td中的属性：

    • colspan：规定单元格可以横跨的列数。
    • rowspan：规定单元格可以竖跨的行数。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-va6gXjeG-1626946116471)(/Volumes/尚硅谷前端/笔记/2/20210216095652306_26682.png)]

    写好的再删？（刚开始）

    直接就先算好？（先算好）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tLRi8QWz-1626946116472)(/Volumes/尚硅谷前端/笔记/2/image-20210626100058094.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F8V8ZkqA-1626946116473)(/Volumes/尚硅谷前端/笔记/2/image-20210626100214690.png)]

‘Fira Code’,‘Anonymous Pro’,‘Source Code Pro Semibold’,Consolas, ‘Courier New’, monospace

多光标（alt+要添加光标的位置）

明天不上课：放假。。。。。。

  1. 完成如下内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jAREbpzz-1626946116475)(/Volumes/尚硅谷前端/笔记/2/20210216095704642_23012.png)]

  1. 今天的课堂代码敲3遍（最少）。

第三天

内框架

<iframe>标签：创建包含另外一个文档框架。

  • src属性：载入框架时要载入的文档地址。

  • frameborder属性：规定是否显示边框，1位显示。0不显示。

  • width属性：用来设置iframe的宽度

  • height属性：用来设置iframe的高度

  • name属性：给这个iframe起一个名字。

    看见这个名字能让看你代码的人猜出来表示什么。

    团队干活。。。

外框架标签（frameset）为什么不建议使用，是因为生成外框架标签的HTML文档中不能出现body。

a链接中的target的值可以是_parent，它的意思是在父层HTMl窗口打开。

表单

总的纲要：表单：就是用来向服务器传递数据的。

表单：东西多，乱。

  • <form>标签：告诉浏览器这个双标签中包含的内容是表单的内容。

    • method属性：提交数据的方法。默认使用get将使用URL的查询字符串来传参，POST将URL和数据分开来进行传输。
    • action属性：告诉浏览器你提交的数据应该提交到哪里去。

  • input标签：定义输入框，让用户输入内容。

    • type属性：定义输入框的类型（根据type的值来配合使用那些属性）

      • text值，表示一个文本输入框。

        • value属性：默认值。

        • name属性：传递到服务器上的标识。

        • maxlength属性：表示的是最大的输入字符数。

        • disabled属性：禁用此输入框。

          disabled="disabled"可以简写为disabled

        • readonly属性：表示输入框只读。

          readonly="readonly"可以简写为readonly

          disbaled和readoly都不能改变输入框里面的，那么他们的区别：disabled的输入框的值不会被传递到服务器端，而readyonly的输入框的值虽然也不能更改，但是可以传递到服务器。

      • password：表示一个密码框

        password输入的密码是明文的，没有经过加密的。

        • name属性：传递到服务器端的标识。
        • value属性：用来设置输入框的默认值。

      • radio，表示一个单选框，只能选择一个。

        • name属性：传递到服务器的标识，给单选框分组。
        • value属性：因为用户不能输入某些值，所以我给他指定好选中之后传递到服务器上的值是什么。
        • checked属性：默认选中该单选按钮。

      • checkbox：复选框，多选框

        • name属性：传递到服务器上的标识。

        • value属性：传递到服务器上的值。

        • checked属性：默认选中该复选框。

          checked="checked"也可以写为checked

      • file，上传矿。

        • name属性：传递到服务器的标识。

        • multiple属性：用来多文件上传。

          multiple="multiple"可以直接写为multiple。

      • submit，提交按钮。

        • value属性：用来设置按钮显示的值。

      • image：图像按钮用图片替代submit按钮原来的样式。

        • src属性：指明要当做图片按钮的图片所在的位置。
        • width属性：设置图片按钮的宽度
        • height属性：设置图片按钮的高度

      • reset：重置按钮，重置所有input标签所属的内容。

        将会留下默认值。

    • label标签：为input标签定义标注。

      • for属性：用来和input进行绑定，值为要标注的input输入框的id的值。

      label(for属性值) = input(id属性值)

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zjsf97V2-1626946116477)(/Volumes/尚硅谷前端/笔记/3/20210216111413434_27255.png)]

  • select标签：定义一个下拉列表

    • name属性：下拉列表叫什么名字，传递给服务器的标识

    • disabled属性：禁用这个下拉列表。

      disabled="disabled"，也可以简写为disabled

  • option标签：用来定义下拉列表中的每一项。

    • value属性：选中后传递给服务器的值。
    • disbaled，将指定的option选择禁用。
    • selected属性：默认选中某一项。

  • <optgroup>标签：对option进行分组。

    • label属性：说明这个分组的描述。
    • disbaled属性：将整个分组禁用掉。

  • 多选下拉列表

    1. multiple属性：是否可以多选。

      多选要按ctrl键

    2. size属性：显示几个值。

  • textarea，用来输入大段的文字（文本域）

    • input中type=text用来输入小段文字（不允许出现换行）
    • textarea用来输入大段文字并且其中可以出现换行。
    • textarea标签的默认值放在两个标签之间，没有value属性。
    • name属性：传递给服务器的标识。

  • <button>标签：用来表示一个按钮

    • type属性：定义按钮的类型：值可以是button，submit、reset。

    我们用button用的最多的场景是在JavaScript中。操作BOM、DOM的时候。<button type="button">

无意义的标签

这里所说的无意义指的是没有语义。我们用它来进行布局。

  • div，无意义的块状元素标签。
  • span，无意义的行内元素标签。

HTML4讲完了。CSS2-》HTML5-》CSS3

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tspFOFNz-1626946116478)(/Volumes/尚硅谷前端/笔记/3/20210216111438594_31713.png)]

CSS

CSS不特殊说明都是重点。

CSS（Cascading style sheet）修饰用的。层叠样式表，主要用来控制网页的样式和布局。

使样式、布局和标记能够分离。

解耦

完全不耦合代表没有关系。（只能是低耦合不能没有耦合）

灵活、容易维护。

CSS的基本语法

选择-》改变（改变的是选择的这个东西的属性）

选择器{
	属性1:值1;
	属性2:值2;
	...
	属性:值n;
}

选择器{属性1:值1;属性2:值2......}
  • 选择器：告诉浏览器应该将修改后的内容应用到那些元素上面。
  • 声明：告诉浏览器如何渲染选择的元素。两部分组成
    • 属性：属性是cSS预先定义好的，通常这些属性由一个或多个单词组成。
    • 值：对应的属性要设置的值。

__注意： __

  1. 每个声明（属性:值）一对数据后面加上分好。
  2. 属性名和值不要横着写。

为了更好实验：

  • 选择器（HTML选择器、标签选择器），将HTML标签名作为选择器来使用。
  • font-size:value，设置字体大小，单位px
  • color:value，设置字体的颜色。
CSS中的颜色表示

  1. 十六进制的数字（6位），总共分成3组（红、绿、蓝）。

    如果三组中每一组的两个字符都相同那么可以进行简写。

    #FF4400可以简写为#f40

    #AAEEBB 可以简写为#AEB

    #FF4100不可以简写（三组中所有的每两位字符都要相同）

  2. 颜色关键字

  3. rgb颜色值：rgb(红,绿,蓝)，值为0~255之间的值。值越小颜色越深。

  4. rgba颜色值：rgba(红,绿,蓝,透明度)，透明度在0~1之间。0位完全透明。可以使用.n来表示透明度。

CSS的使用方式

  • 内联方式（行内样式），在HTML标签中使用style属性来设置CSS样式。

    因为是在某个标签上直接使用style属性所以这个就相当于使用选择器了。

    格式：<标签名 style="属性1:值1;属性2:值2....">被标记出来的内容</标签名>

    特点：仅作用于本标签。

  • 内嵌方式：在head标签中使用style标签。

    • 格式：

      <style>
选择器{
	属性1:值1;
	属性2:值2;
	...
	属性:值n;
}
</style>

      type="text/css"可写可不写。

    • 特点：作用在当前整个页面。

  • 外部链接：使用<link />标签

    格式：<link href="文件名.css" type="text/css" rel="stylesheet"/>

    • href属性：你要链接的这个文档来自于哪里。

      这个链接到html中的文档应该是.css结尾的，而且在这个css中应该只包含样式规则。

    • rel属性：（relation，关系），指当前文档与被链接文档之间的关系。

    • type属性：规定被链接文档的MIME类型，也就是加载的数据的类型。

    <link href="./xxx.css" rel="stylesheet" type="text/css"/>，现在我要链接xxx.css进来，这个.css文件和我之间的关系（它是我的样式表），它的数据格式是文本类型的css。

    特点：一个css文件可以被多个HTML引入，达到复用的效果。

    注意：以上三种方式，当样式冲突的时候，采用就近原则。哪个属性离被修饰的内容近就使用哪个。如果没有冲突就采用叠加效果。

CSS特性
  • 层叠性：CSS样式允许重复声明，相互覆盖。
  • 继承性：被包含的元素右外层元素的效果（有些可以继承有些不能被继承）
CSS的注释符
/*
要注释掉的内容。
*/

shift+alt+a来进行注释

也可以ctrl+/

所有语言中都有注释符

#
//   单行注释
/*  */   多行注释

第四天

选择器

  • 标签选择器，直接引用HTMl的标签名。设置标签的默认样式。

  • *，通用选择器，选择文档中的所有HTML标签。

  • 类选择器

    男人、女人、老人、小孩，是不是具有相同的一些特征。

    空调：制冷、制热、除湿。。。。

    将有相同特征的一些标签归到一类里面。

    CSS中使用.类名作为选择器。

    HTML中使用class="类名"

    __注意： __

    1. 类名区分大小写。
    2. 可以使用标签名.类名方式选择只具有指定类名的标签。
    3. 一个标签中可以有多个类。<span class="cl1 cl2">test</span>
    4. 我们可以使用.class1.class2这种方式来匹配同时拥有class1和class2类名的元素。只有其中一个类时是无法匹配到的。而且这种用法类名的先后顺序可以相互颠倒。

  • chrome调试工具的使用

    调用调试工具：F12或右键->检查

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u0S0nNDR-1626946116480)(/Volumes/尚硅谷前端/笔记/4/image-20210629093139942.png)]

    • 注释掉的代码在调试器中的表现

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YMDcQKTQ-1626946116481)(/Volumes/尚硅谷前端/笔记/4/image-20210629093320257.png)]

    • 无效的属性名和属性值

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yaEyQtln-1626946116483)(/Volumes/尚硅谷前端/笔记/4/image-20210629093542255.png)]

    • 缺少分号在chrome中的表现。

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S8bE4zzJ-1626946116485)(/Volumes/尚硅谷前端/笔记/4/image-20210629093727248.png)]

    • 默认样式

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5anLeKJ0-1626946116486)(/Volumes/尚硅谷前端/笔记/4/image-20210629093907810.png)]

    • 继承下来的样式

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rGp0vye9-1626946116488)(/Volumes/尚硅谷前端/笔记/4/image-20210629094007875.png)]

    • 暂时调试代码

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gr7OC89c-1626946116490)(/Volumes/尚硅谷前端/笔记/4/image-20210629094108442.png)]

  • id选择器

    1. HTML使用id属性指定一个值。
    2. css中使用#id的值来作为选择器

    ID的值是具有唯一性的，在一个HTML文档中，一个ID值能且只能使用一次。

    类选择器相当于名字（这个名字可以多个人拥有），ID相当于身份证号。

  • 组合选择器

    选择器1,选择器2,选择器3.....

  • 后代选择器

    格式：E F，后代选择器，选择匹配的F元素，且匹配的F元素被包含在匹配的E元素的内部。

  • 链接伪类选择器

    只能用在HTML标签中的A标签中。它有两种状态已经访问、没有访问。

    • a:link，匹配a标签，并且a标签定义了href并且这个地址没有被访问过。
    • a:visited，匹配a标签，并且a标签定义了href并且这个地址已经被访问过。

    访问过之后就在缓存中了，再打开也是访问过。同一个浏览器中的多个a链接指向了同一个地址也会受到影响。

    如果要删除已经访问过的记录（缓存）ctrl+shift+del

    不同浏览器的缓存是不一样的。

  • 动态伪类选择器

    • E:active，选择匹配的e元素，且匹配的元素被激活的那一刹那被选中。
    • E:hover，选择匹配的E元素，且用户鼠标移动到匹配的元素上的时候被选中。

    这两个选择器不一定非要用在a链接上也可以用在其他的地方。

    如果要给a链接应用上面的4个选择器必须要遵守一个爱/恨原则，link->visited->hover->active（Love/HAte）

    一般在用的时候先写整个a的样式，然后在写hover的样式。

    伪：假的。 伪军、伪娘。

    基于特征不是根据属性、名字、内容获得。

权重值

同一个元素可能会被多个选择器选择，它们又应用了相同的规则（选择了同一个元素的多个选择器之间的同一个属性产生了冲突），这个时候要计算权重值。

权重值分为4部分：0,0,0,0

  • id选择器：0,1,0,0
  • 类选择器、伪类选择器：0,0,1,0
  • 标签选择器：0,0,0,1
  • 通用选择器0,0,0,0
  • 行内样式：1,0,0,0

你需要知道当你的选择器选择正确设置的属性也正确但是就是不生效，这个时候应该想到权重值。

注意：

  1. 数值越大，权重越高。
  2. 如果说权重相同时最后一个样式胜出。
  3. 如果要忽略权重值时，需要在被保护的属性后面加上!important，这样就可以避免它被覆盖。能少用就少用。

不要记死代码，记特点。

字体

  • 字体：字体就是文字的外在特征。样式，文字的衣服。

    文字的诞生：

    1. 设计师设计。
    2. 字体制作人员制作、修改
    3. 技术编码、添加指令
    4. 测试：校对、测试
    5. 生产包装、上市。

    windows的字体放在C:\Windows\Fonts

    字体分为：免费使用和商业使用。

  • 字体的组成

    我们认为的字体可能不单纯，它不是一个单纯的字体。而是许多字体的变形组成，这些变形用来描述粗体、斜体、正常字体等等

  • 字体的类型

    字体、字体族分类：

    • 衬线字体，笔画开始、结束的地方有额外装饰笔画粗细有不同的地方。

    • 非衬线字体，没有额外的装饰，笔画粗细差不多

    • 等宽字体，等宽字体是针对英文而言每个英文字母占据同等的宽度。

      i M 占据的是相同的宽度。

    • 手写字体

    • 奇幻字体

'Fira Code','Anonymous Pro','Source Code Pro Semibold',Consolas, 'Courier New', monospace

字体系列

格式：font-family:value

value指的是字体名或字体族的名字。

__注意： __

  1. 常见的中文字体在设置时可以使用宋体、微软雅黑，但是一般我们不这样用，我们用的是他们的英文名字。（中英文对照，见表）
  2. 如果你设置的字体包含空格那么我们应该使用引号括起来。
  3. 为了保证用户体验，看到的效果是比较好的效果，我们会设置多个，定义了多个字体，每个字体之间使用逗号进行分隔。浏览器根据这个字体列表检索客户端系统中的字体，按照从左到右的顺序进行使用，先找到的就先使用了。如果说到列表最后都没有找到指定的字体那么会使用浏览器默认字体。
字体大小

没有用CSS给文本指定一种文本尺寸，web浏览器会使用它预先设定好的默认值。大部分浏览器是16px，也叫基准文本尺寸。

格式：font-size:value

  • px，像素。

    网页中最小的字号是12px，但是0px可以生效。

  • em，相对于从父元素继承下来的大小来计算。1em=1个设置的大小。

  • rem，它的值基于根元素的文本尺寸来进行定义。

    根元素是<html></html>

字体粗细

格式：font-weight:value

  • normal，正常字体。

  • bold，粗体。

  • bolder，更粗。

  • lighter，更细。

  • 100900，使用100900作为关键字（因为字体或字体族都映射了9级粗度）

    100~900有没有效果要看这个字体族是否安装了各种字体的变体。

    有些100\200\300没变化呢，实际上这符合CSS的规范只要一个关键字对应的变形不会比前一个关键字对应变形更细，都是允许的。

    通常400等于normal。

    bold通常是700。

    如果字体、字体族中没有设定粗细、浏览器会自行计算，生成粗细。

字体风格

格式：font-style:value

  • normal，默认值。
  • italic，显示成斜体。
字体简写格式

格式：font:style weight size family

__注意： __

  1. style和weight他们的顺序可以颠倒。
  2. size和family他们的值必须写，而且顺序不能颠倒。
字体颜色

格式： color:value

  • 十六进制的值
  • rgb颜色
  • rgba颜色
  • 颜色关键字
字体下划线

格式：text-decoration:value

  • underline，文本的下划线。
  • none，标准的文本。
  • overline，上划线
  • line-through，贯穿线
字符间距

格式：letter-spacing:value

  • px，像素
  • em，按照当前字体大小来计算。
盒子模型的基本元素
  • width，设置元素的宽度
  • height，设置元素的高度
  • background-color:用来设置元素的背景色
  • border:设置元素的边框
元素的显示模式

  • 块级元素（block）

    • 独占一行。
    • 块状元素可以设置宽度和高度，即使设置了宽度也是独占一行。
    • 默认情况下块状元素宽度自动填满父元素宽度。
    • 当我自己设置宽度、高度的时候可以比父元素设置的大，也可以比父元素设置的小。只不过我们通常设置的比父元素要小。

    常用元素：div、h1~h6、p、ul、ol、form…

  • 内联元素、行内元素（inline）

    • 不会自己独占一行，多个相邻的行内元素排列在同一行。一行放不下换行。宽度随着内容的变化而变化。
    • 行内元素不能设置宽度和高度。

    常用的行内元素：span、b、strong、i、em…

  • 行内块状元素（inline-block）

    在内部表现为块状元素，可以设置宽度和高度、在外部排列方式类似于内联元素水平排列。

    常用元素：img、表单元素

更改显示类型

格式： display:value

  • block，显示为块状元素。
  • inline，显示为内联元素。
  • inline-block，显示为内联块状元素。
  • none，隐藏元素。

块-》一行一行内容（inline、inline-block）

文本缩进

格式：text-indent:value

  • px，像素
  • em，字体大小

为了应对字体大小变化之后也随之缩进2个字符那我们经常用的是em这个单位。

__注意： __

  1. text-indent，适用于块状元素和行内块状元素。
  2. 文本缩进只会影响第一行，其他行不会受到影响。
换行

格式：white-space，用来处理元素内文本是否允许换行。

  • normal，默认值。CJK文本遇到容器边界自动换行，非CJK文本按照word-break的值决定。

    CJK（china，japan，korea）

  • nowrap，超出容器边界不换行。

格式：word-break:value，用来表明怎么样进行单词内的断句。

  • none，浏览器根据默认设置来决定。
  • break-all，如果使用了break-all之后换行会出现在任何字符之间。
隐藏内容

格式：overflow:value

  • visible，超出元素框的内容是可见的。
  • hidden，超出元素矿的内容被隐藏。
  • scroll，多出的内容出现滚动条。
  • auto，浏览器自己决定，通常具有不确定性。
水平对齐

格式： text-algin:value

  • left，默认，文字放在左边。
  • right，文字放在右边。
  • center，文字放在中间。

text-algin能应用在块状元素和行内块状元素上，对其中的行内块状元素和行内元素生效。

有问题，先找原因。然后才有解决方案

这种作业做不出来就不做。。。

当天的代码最少敲三遍。搞明白，熟练。着重研究当天的内容。

对于学习：慢就是快。

第五天

问题：给父元素设置了color，color具有继承性，但是为什么a链接没有改变颜色。

继承下来的内容没有自身设置的优先级高（即使是系统自带的样式也比继承下来的优先级要高）

  • h标签和a标签：
    • h标签默认对字号进行了设置，会覆盖继承下来的字号。
    • a标签默认对字体颜色进行了设置，所以会覆盖继承下来的颜色。
内联盒子模型

块级元素中通常放置的是一行一行的行内元素，内联盒子模型决定了这一行一行的行内元素该如何摆放。

<p>这是个普通的文字<em>em</em>!</p>

上面的代码实际上在一行上面形成了3个内联盒子。

内联盒子的类型：

  • 如果内容被其他的行内元素包含，属于具名内联盒子。
  • 如果是光秃秃的文字，属于匿名内联盒子。

内联盒子的组成：内容区域、半行间距（上半行间距、下半行间距）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vtVH2GvJ-1626946116492)(/Volumes/尚硅谷前端/笔记/5/image-20210630101542597.png)]

行框盒子（line box），每一行都是一个行框盒子，每个行框盒子是一个一个的内联盒子组成的。

<p style="font-size:16px">这是个普通的文字<em style="font-size:30px;">em</em>!</p>

行框的上边界位于本行的最高的内联盒子的上边界。行框的底部放在最低的内联盒子的下边界。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KBJwciTu-1626946116493)(/Volumes/尚硅谷前端/笔记/5/image-20210630102005599.png)]

行高

我们用的时候是将line-height放在块状元素上，这个时候他表示的是每行（每个行框）的最小行框高度。

格式：line-height:value，定义行高（继承性）

  • normal，默认值，跟用户的浏览器走。
  • px，像素。

既然是最小行框高度，就说明我可以设置的比它大。

line-height的值也可以是数值，将数值作为行高的值，它会根据当前元素的fonts-size来计算大小，是当前font-size的多少倍。

比如当前是50px的fonts-size，line-height设置的是1.5那么这个时候line-height=1.5*50=75px;

上面说的是line-height的第一个功能：调整行与行之间的距离。

不设置块状元素高度的情况下，line-height改变会撑高盒子，盒子中的文字与盒子始终是垂直居中的。这种情况下line-height设置的高度=height

撑开盒子的是行高不是内容。

当我设置了块状元素的高度的情况下，line-height改变只会改变文字的垂直方向的位置，不会改变块状元素的高度。

既然块状元素不设置高度时line-height可以撑高元素，那我反过来想知道具体高度，也能确定出来line-height然后让文本垂直居中。

当想让一个文本垂直居中与当前元素的时候，行高等于元素的高度。（单行文本垂直居中）

垂直对齐方式

基线：baseline，基线是内联盒子中小写英文字母的x的下边缘，是为了排列整齐用的。基线是其他线的根本。

格式：vertical-algin:value

  • baseline，默认值，默认的时候都是基线对齐。

    如果是图片，其中底端与父元素的基线对齐。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OIx5QBkq-1626946116495)(/Volumes/尚硅谷前端/笔记/5/image-20210630111238844.png)]

  • bottom，将内联盒子的底边与行框的底边对齐。

  • top，将内联盒子的顶边与行框的顶边对齐。

  • middle，元素的垂直中心线和父元素的x-height的1/2处对齐。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qclZfYyG-1626946116496)(/Volumes/尚硅谷前端/笔记/5/image-20210630112317620.png)]

vertical-align中使用问题

  1. 在一行当中一个高的元素占据了整行的高度verticla-algin对其不会有影响就是因为没有空间。这个时候还要对齐，所以说将会导致父元素的基线产生移动。

    <!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <style>
    div{
      font-size:16px;
    }
    img{
      height:80px;
      vertical-align: top;
    }

  </style>
</head>

<body>
  <div>
    sphinx<img src="./img/Frederik-the-Great1.jpg" />
  </div>
</body>

</html>

  2. 块状元素只包含一张图片时会有不知名的空白

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cyyDSGWO-1626946116499)(/Volumes/尚硅谷前端/笔记/5/image-20210630113107812.png)]

    问题分析：

    1. 在HTML5的文档声明中，内联元素的所有解析和渲染如果每个行框盒子前面有一个空白节点（叫幽灵节点），这个空白节点透明、不占据任何宽度也没有办法通过JS脚本获得。但是只在HTML5中使用<!DOCTYPE html>声明的时候才会有。
    2. 根据上面所说有一个空白的节点空白就是内容有内容默认就采用vertical-align:middle对齐。图片是行内块状元素会和基线的底部对齐。既然是有空白节点有内容那么就会分为内容区、上下半行间距。最终导致有这个空白的原因是上、下半行间距。

    解决方法：

    • 第一种方法： 图片块状化，让其没有基线对齐。

      <!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <style>
    div{
      border:1px solid green;
    }
    img{
      height:80px;

      display:block;
    }

  </style>
</head>

<body>
  <div>
    <img src="./img/Frederik-the-Great1.jpg" />
  </div>
</body>

</html>

    • 方法二：将图片改为顶部、底部、middle对齐。

      <!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
1. __根据渲染树在页面中的大小、位置将元素固定在指定的位置上，这个时候布局属性将会生效。__

2. __布局绘制完成之后开始装饰渲染树：背景、颜色、文本才会生效。__



重排：页面生成之后，如果位置发生变化，将要从第三步开始执行，然后执行第四部。

重绘：只是显示样式变、布局不变，将会直接进行第四部。

重排必然会引起重绘。

尽可能避免重排、减少重绘制。
</body>

</html>

  3. 对齐问题。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KvMVojYs-1626946116500)(/Volumes/尚硅谷前端/笔记/5/image-20210630114832207.png)]

    一个inline-block的元素，如果里面没有内容，则该元素的基线是元素的底部。如果里面有内容基线是里面最后一行内联元素的基线。

line-height和vertical-align的具体应用

垂直居中。

  1. 已知宽度、高度情况下，图片水平、垂直居中。

    <!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <style>
    div{
      width:500px;
      height:500px;
      /* 1.设置行高和高度一致 */
      line-height: 500px;
      border:1px solid red;

      text-align: center;
    }
    img{
      width:300px;
      /* 2. 设置和父元素的x-height的1/2处对齐 */
      vertical-align: middle;
    }
  </style>
</head>

<body>
  <div>
    <img src="./0d338744ebf81a4cec155d96dc2a6059252da64e.png" alt="">
  </div>
</body>

</html>

  2. 已知高度情况下，多行文本垂直居中。

  3. 当使用vertical-align:middle时只是近似垂直居中。

    为什么：

    1. vetical-align:middle将元素的垂直中心线和父元素的x-height的1/2处对齐。
    2. 但是字体设计的时候不会正好占据内容区的1/2处，一般来说都会有下沉。
    3. 这个时候字体设置的越大，内容区就会越大，字体位置的偏差就会越大。

    解决方法：要设置完全垂直居中：将父元素的字体大小设置为0，当你设置为0的时候所有内容区内的线都会在同一条线上。

盒子模型

文档中的每个元素都会生成一个矩形框，我们成为元素框。这个框用来描述在文档布局中所占的位置。

这些元素框默认的时候是不会重叠的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2opSq3Ww-1626946116501)(/Volumes/尚硅谷前端/笔记/5/20210223153552612_15593.png)]

  • 内容区：用来存放具体的内容。

    • 宽度：用来定义内容区的宽度。
    • 高度：用来定义内容区的高度。

  • 内边距：用来定义内容区和边框的距离。

  • 边框：是内容区或内边距周围的一条或多条线段。

  • 外边距：定义元素和元素之间的距离。就是在元素周围添加额外的空白。

    margin:0 auto;

宽度

元素的宽度指的是从内容区左边界到右边界的距离。

格式：width:value，适用于块状元素、行内块状元素。（不能继承）

  • auto，默认值。没有特定的宽度。
    • 对于块状元素来说，宽度默认是父元素的宽度。
    • 对于行内元素来说，宽度默认是内容的宽度。
  • px，像素
  • %，相对于包含的块元素的宽度来设置。
高度

元素高度指的是从内容区上边界到下边界的距离。

格式：height:value（不能继承）

  • 内容区：用来存放具体的内容。

    • 宽度：用来定义内容区的宽度。
    • 高度：用来定义内容区的高度。

  • 内边距：用来定义内容区和边框的距离。

  • 边框：是内容区或内边距周围的一条或多条线段。

  • 外边距：定义元素和元素之间的距离。就是在元素周围添加额外的空白。

    margin:0 auto;

宽度、高度的最大值和最小值
  • 元素的内容区可以使用min-width和min-height定义最小值。（大于等于）
  • 元素的内容区可以使用max-width和max-height定义大值。（小于等于）
内边距

适用于所有的元素（块状、行内、行内块状），元素默认的时候没有内边距（内边距为0）。

  • 内边距使用padding属性：

    • px，像素。
    • %，使用百分比来设置内边距，水平（left、right）、垂直（top、bottom）都相对于__父级元素__的内容区的__宽度__来计算。

  • 简写格式：

    • 一个值：padding:top/right/bottom/left
    • 两个值：padding:top/botom left/right
    • 三个值：padding:top right/left bottom
    • 四个值：padding:top right bottom left（顺时针）

  • 简写格式：(单边的内边距)

    • padding-top
    • padding-right
    • padding-bottom
    • padding-left

    默认情况下增加内边距会撑开盒子。因为width和height是盒子内容区的宽度高度之外的内边距、边框是在这个上面增加。

行内元素&行内块状元素的内边距。

行内元素上设置左、下内边距可以正常生效。

行内元素上设置上、下内边距对行高没有影响，但是内边距确实生效了。

行内块状元素可以设置内边距，并且都有正常的效果。

边框

border:1px solid green;

边框一共有三要素：宽度（border-width）、样式（border-style）、颜色（border-color）

  • 边框宽度：border-width，如果没有设置具体宽度由某个浏览器决定一般2px或3px。
  • 样式：border-style，默认为none，所以即使有边框宽度也看不到边框。
  • 颜色：border-color，默认的边框颜色是使用的元素自身的文本颜色。
边框样式
  • 取值
    • none，没有样式。当没有样式的时候即使有其他的值也不会显示出来边框。
    • solid，实线。
  • 简写格式：
    • 一个值，border-style：top/right/bottom/left。
    • 两个值，border-style:top/bottom left/right
    • 三个值：border-style:top left/right bottom
    • 四个值：border-style:top right bottom left
  • 单边样式：
    • border-top-style:value
    • border-right-style:value
    • border-bottom-style:value
    • border-left-style:value
边框宽度
  • 简写格式：
    • 一个值，border-width：top/right/bottom/left。
    • 两个值，border-width:top/bottom left/right
    • 三个值：border-width:top left/right bottom
    • 四个值：border-width:top right bottom left
  • 单边样式：
    • border-top-width:value
    • border-right-width:value
    • border-bottom-width:value
    • border-left-width:value
边框颜色

  • 简写格式：

    • 一个值，border-color：top/right/bottom/left。
    • 两个值，border-color:top/bottom left/right
    • 三个值：border-color:top left/right bottom
    • 四个值：border-color:top right bottom left

  • 单边样式：

    • border-top-color:value
    • border-right-color:value
    • border-bottom-color:value
    • border-left-color:value

    边框颜色可以设置成透明，transparent。当用它的时候即使设置了边框也看不到。

    透明和没有一样吗？

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JeUshCYE-1626946116503)(/Volumes/尚硅谷前端/笔记/5/20210223192950174_7241.png)]

简写格式

格式： border-top:width style color

格式： border-right:width style color

格式： border-bottom:width style color

格式： border-left:width style color

width、style、color的顺序是可以改变的。

整个边框

格式： border:width style color

缺点就是宽度、样式、颜色同时应用到了四边上。

内联元素的边框

行内元素上设置的上边框和下边框对行高没有影响。行内元素上设置的左边框和右边框会将周围的文本推开。

第六天

外边距

CSS中任何元素的外边距都可以使用margin。外边距是添加在边框外边界的外侧的距离。

浏览器会给很多元素提供预设的一些样式，其中就包括外边距。比如p标签的上下、body的上右下左。

  • 外边距取值

    • auto，自动。
    • px，像素。
    • %，百分比数值相对于父元素的内容区域的宽度来计算。

  • 简写格式：

    • margin:top/right/bottom/left（一个值）
    • margin:top/bottom left/right（两个值）
    • margin:top left/right bottom（三个值）
    • margin:top right bottom left（四个值）

  • 单外边距

    • margin-top
    • margin-right
    • margin-bottom
    • margin-left

    margin的值可以设置为负数，这样有可能使元素从父元素中冒出来。

    内容区用来放置内容的。

外边距折叠

普通的块状元素的上下外边距会产生折叠。

元素的外边距产生折叠将会折叠为最大的那个外边距。

天塌了有个高的顶着

  • 情况一：兄弟之间

    兄弟1的下外边距和兄弟2的上外边距。

    解决方法：给第一个元素的display:inline-block。

    我更倾向于只设置上或下一边的外边距。

  • 情况二：父子之间

    解决方法：父元素设置边框、内边距。或父元素设置overflow:hidden;

产生边距折叠的原因：margin之间直接接触没有阻隔。

行内元素的外边距

行内元素上设置的上下外边距对行高没有影响，左右外边距可以正常使用。

横向auto

容纳块：离的最近的块状元素

容纳块公式：容纳块宽度=子元素的margin-left + 子元素的border-left + 子元素的 padding-left + 子元素的width + 子元素padding-right + 子元素border-right + 子元素的margin

七个属性：子元素的width、子元素的margin-left、margin-right可以设置为auto，其他的都必须为具体指或使用默认值（0）。

  • 情况一：width、margin-left、margin-right两个设置为具体值，一个为auto。必须要满足容纳块公式。

    <!DOCTYPE html>
<html>

<head>
  <style>
    #f{
      width:300px;
      height:300px;
      border:1px solid green;
    }
    #z{
      /* 300 -100 -10 -2  */
      width:100px;
      height:100px;
      margin-left:10px;
      margin-right:auto;
      border:1px solid blue;
    }
  </style>
</head>

<body>
  <div id="f">
    <div id="z"></div>
  </div>
</body>

</html>

    <!DOCTYPE html>
<html>

<head>
  <style>
    #f{
      width:300px;
      height:300px;
      border:1px solid green;
    }
    #z{
      /* 300-2 - 10 -20 */
      height:100px;
      margin-left:10px;
      margin-right:20px;
      border:1px solid blue;
    }
  </style>
</head>

<body>
  <div id="f">
    <div id="z"></div>
  </div>
</body>

</html>

  • 情况二：width、margin-left、margin-right两个为auto。

    • margin-left、margin-right为auto，两个的外边距相等。

      (减完之后剩下的距离/2)等于margin-left和margin-right的距离。

      margin:0 auto;

      margin:0 auto 0 auto;

      margin-left:auto;

      margin-right:auto;

      <!DOCTYPE html>
<html>

<head>
  <style>
    #f {
      width: 300px;
      height: 300px;
      border: 1px solid green;
    }

    #z {
      /* 300 -100 - 2 */
      width: 100px;
      height: 100px;
      margin-left: auto;
      margin-right: auto;
      border: 1px solid blue;
    }
  </style>
</head>

<body>
  <div id="f">
    <div id="z"></div>
  </div>
</body>

</html>

    • 某一边的外边距和width设置为auto时，那个为auto的外边距会被设置为0。width被设置为填满容纳块所需要的值。

      <!DOCTYPE html>
<html>

<head>
  <style>
    #f {
      width: 300px;
      height: 300px;
      border: 1px solid green;
    }

    #z {
      /* 300-1-1-10 */
      width: auto;
      height: 100px;
      margin-left: 10px;
      margin-right: auto;
      border: 1px solid blue;
    }
  </style>
</head>

<body>
  <div id="f">
    <div id="z"></div>
  </div>
</body>

</html>

    • 三个都为auto。两边的外边距为0。width要多宽就有多宽。

      <!DOCTYPE html>
<html>

<head>
  <style>
    #f {
      width: 300px;
      height: 300px;
      border: 1px solid green;
    }

    #z {
      width: auto;
      height: 100px;
      margin-left: auto;
      margin-right: auto;
      border: 1px solid blue;
    }
  </style>
</head>

<body>
  <div id="f">
    <div id="z"></div>
  </div>
</body>

</html>

    • width、margin-left、margin-right都设置为auto之外的值，这个时候交过渡约束，这种情况下一般来说margin-right看不到效果。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4qYoCXdd-1626946116504)(/Volumes/尚硅谷前端/笔记/6/20210302065733455_10097.png)]

纵向auto

块状元素的高度：

  • 如果你的内容设置了高度，并且指定了块状元素的高度，块状元素的高度大于内容的高度，这个时候多出来内容看起来像是内边距。
  • 如果设定的高度比其中的内容的高度小，最终要看overflow的值。

纵向和横向一样的。height、margin-top、margin-bottom可以设置为auto。

  • margin-top或margin-bottom为auto。就是自动计算为0.

    <!DOCTYPE html>
<html>

<head>
  <style>
    #f {
      width: 300px;
      height: 300px;
      border: 1px solid green;
    }

    #z {
      width: 100px;
      height: 100px;
      margin-bottom:10px;
      border: 1px solid blue;
    }
  </style>
</head>

<body>
  <div id="f">
    <div id="z"></div>
  </div>
</body>

</html>

  • margin-top、margin-bottom都为具体的值。height的值为auto，它是不会被自动拉开。

    <!DOCTYPE html>
<html>

<head>
  <style>
    #f {
      width: 300px;
      height: 300px;
      border: 1px solid green;
    }

    #z {
      width: 100px;
      height: auto;
      margin-top: 10px;
      margin-bottom: 10px;
      border: 1px solid blue;
    }
  </style>
</head>

<body>
  <div id="f">
    <div id="z" >123</div>
  </div>
</body>

</html>

  • height设置为了auto之外的值，margin-top和margin-bottom设置为auto。二者都会被计算为0。

    <!DOCTYPE html>
<html>

<head>
  <style>
    #f {
      width: 300px;
      height: 300px;
      border: 1px solid green;
    }

    #z {
      width: 100px;
      height: 100px;
      margin-top: auto;
      margin-bottom: auto;
      border: 1px solid blue;
    }
  </style>
</head>

<body>
  <div id="f">
    <div id="z" >123</div>
  </div>
</body>

</html>

  • 某一边外边距和height为auto，外边距为auto那个等于0，height被设置行高撑开的高度。

    <!DOCTYPE html><html><head>  <style>    #f {      width: 300px;      height: 300px;      border: 1px solid green;    }    #z {      width: 100px;      height: auto;      margin-top: 10px;      margin-bottom: auto;      border: 1px solid blue;    }  </style></head><body>  <div id="f">    <div id="z" style="line-height: 100px;">123</div>  </div></body></html>

  • height、margin-top、margin-bottom都位置为具体的值。设置的是多少就是多少。

    <!DOCTYPE html><html><head>  <style>    #f {      width: 300px;      height: 300px;      border: 1px solid green;    }    #z {      width: 100px;      height: 100px;      margin-top: 10px;      margin-bottom: 20px;      border: 1px solid blue;    }  </style></head><body>  <div id="f">    <div id="z" style="line-height: 100px;">123</div>  </div></body></html>

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KbM5PM65-1626946116506)(/Volumes/尚硅谷前端/笔记/6/20210302203902468_17813.png)]

    除了height为auto时要看里面的内容，其他的margin-top、margin-bottom为auto时基本上都是为0。

    调整宽度和高度的计算方式

    默认情况下，width、height等于内容区的宽度和高度。但是我们可以使用box-sizing来调整。

    box-sizing适用于所有可以设置width和height的元素。

    • content-box，默认值。内容区宽度等于width，内容区高度等于height。内边距、边框都在这个上面增加。（w3c盒子模型的计算方式）
    • border-box，宽度、高度等于内容区+内边距+边框，相应的内容区将会缩小。（IE盒子模型，也叫怪异盒子模型）

    以前我媳妇一个月给我3000吃饭钱+500买衣服+1000买烟的钱。 4500

    现在3000叫生活费：3000-500-1000 我吃饭的钱越来越少。

    背景色

    格式：background-color:value（不可继承的）

    • transparent，透明（默认值）元素的默认背景色都是透明的。

      body和html都不是整个页面，body由内容（行高）撑开，html由body撑开。

      先给body设置了红色（整个页面变成了红色），又给html设置了绿色（整个页面变成了绿色）

      1. 整个的层次为body->html->页面画布
      2. 最终整体的背景颜色由页面画布决定。
      3. 画布颜色的决定规则：有html颜色就用html的颜色，html没有颜色就用body的颜色，如果都没有则使用画布本身的颜色（这个时候页面最终的颜色由浏览器自己决定，但是一般浏览器都会设置为白色）。

    • 其他类型的颜色的值。

      可以给图片可以加背景，图片的本身就是内容区。

      <!DOCTYPE html><html><head>  <style>    img {      background-color: yellow;      padding: 10px;    }  </style></head><body>  <img src="./img/brand_07.png" alt=""></body></html>

      背景包括内容区、内边距、边框，不会延伸到外边距区域的。

      背景色是在前景色的后面：前景色：边框颜色、文字颜色。

    背景图

    格式：background-image:url('背景图的地址')（不可继承的）

    背景图的大小和盒子的大小没有关系：背景图如果比盒子大显示一部分，如果比盒子小开始平铺。

    有背景图、背景色可以同时存在但是背景图压在了背景色上面。

    背景重复的方式

    格式：background-repeat:value

    value的值：

    • repeat，默认值，横向平铺、纵向平铺。
    • repeat-x，横向平铺。
    • repeat-y，纵向平铺。
    • no-repeat，不重复。
    背景定位

    background-position:value（不可继承）

    • 关键字

      • left
      • right
      • top
      • bottom
      • center

      我们在使用的时候通常使用两个值：第一个指定横向位置，第二个指定纵向位置。

      如果只写一个关键字的时候，另外一个假定为center。

      如果为两个横向（left right）或留个纵向（top bottom）那么整个值将会被忽略。

    • px，像素。

      相对于哪里来进行定位。

      第一个值为横向的偏移量、第二个值为纵向的偏移量。

      默认的时候背景图的位置是在内边距的外边界的左上角来进行定位。

      x轴的正数往右走，负数往左走。

      y轴的正数往下走，负数往上走。

      负数：x的负数往左走，y的负数往上走。

      如果背景图比盒子大将会显示一部分。

    精灵图、雪碧图（css sprites）

    是一种网页图片的应用处理方式，允许将一个页面中很多零星的小图片包含到一张大图里面去，当访问页面的时候就不会一张一张的去请求显示图片。

    有点：服务器的请求链接数是有限的，为了减少对服务器的压力，提升网页的加载速度将一张一张的小图拼在一张大图中，一次下载。

    @mixin yanhaijingzhengyingjun{background:url(../images/yanhaijingzhengyingjun.png) no-repeat; }@mixin caa83ce9b881cd24{height:28px;width:28px;background-position: 0 0;}@mixin cebbff76b25dc22e{height:28px;width:28px;background-position: -28px 0;}@mixin d4d1151b09b5553b{height:28px;width:28px;background-position: -56px 0;}@mixin afb4399323fe3b76{height:28px;width:28px;background-position: -84px 0;}@mixin b8a8418d5418f471{height:28px;width:28px;background-position: -112px 0;}@mixin b61f083872a7a1de{height:28px;width:28px;background-position: -140px 0;}@mixin eed6f6cbf1de3aaa{height:28px;width:28px;background-position: -168px 0;}@mixin f1f6dc5c207329f9{height:28px;width:28px;background-position: -196px 0;}@mixin f12276b17e5dcf3b{height:28px;width:28px;background-position: -224px 0;}@mixin d6f3909618c6307a{height:28px;width:28px;background-position: -252px 0;}@mixin dd4d9ef7ce8fc169{height:28px;width:28px;background-position: -280px 0;}@mixin e6976f3cb30c9a8a{height:28px;width:28px;background-position: -308px 0;}@mixin _0004c1b85fbf7bde{height:28px;width:28px;background-position: -336px 0;}@mixin _4b49b55af25a7bdf{height:28px;width:28px;background-position: -364px 0;}@mixin _5da079255c6dfabe{height:28px;width:28px;background-position: -392px 0;}@mixin _0aff0a42cece09ee{height:28px;width:28px;background-position: -420px 0;}@mixin _1c590322ece537ba{height:28px;width:28px;background-position: -448px 0;}@mixin _1d0957d7f2ae01a2{height:28px;width:28px;background-position: -476px 0;}@mixin _671f7c186c5e9b01{height:28px;width:28px;background-position: -504px 0;}@mixin _9570fdd46ecd3a76{height:28px;width:28px;background-position: -532px 0;}@mixin _97917a2daa34be0f{height:28px;width:28px;background-position: -560px 0;}@mixin _5fee386254dd2ebc{height:28px;width:28px;background-position: -588px 0;}@mixin _8f3f63ae04ff19af{height:28px;width:28px;background-position: -616px 0;}@mixin _90a218f053e903d2{height:28px;width:28px;background-position: -644px 0;}
    background的简写属性

    格式： backgorund:image position repeat color

图标字体

图标字体也是一种字体，和宋体、微软雅黑。。。。

https://www.iconfont.cn/

github，全球最大的男性交友社区。

托管的程序，写程序大多数都是男的。

阿里矢量字体库登录：github、微博。

404 没找到

200 成功

304 读取浏览器缓存

403 有这个东西但是不给你。

500 服务器错误。

复制、粘贴、改引入的文件的路径。

  1. 定义图标字体

    我们写的字体是依赖客户端的字体的，css3中引入了一种可以从web服务器下载字体技术@font-face，确保用户看到CSS中预设的这些字体。

    @font-face {  font-family: 'iconfont';//下载下来的字体叫什么名字。  src: url('iconfont.woff2') format('woff2'),//引入的字体的资源。       url('iconfont.woff') format('woff'),       url('iconfont.ttf') format('truetype');}

  2. 使用图标字体

    .iconfont {  font-family: "iconfont" !important;//你定义的.iconfont类用什么字体。  font-size: 16px;  font-style: normal;  -webkit-font-smoothing: antialiased;//CSS3中的属性 让字体抗锯齿，让字体看起来更加清晰。  -moz-osx-font-smoothing: grayscale;}

  3. 使用这个类，然后里面放置相应的编码。

    <span class="iconfont">&#x33;</span>

黄色多就偏嫩绿色，蓝色多就会变成深绿色。

厂商前缀（供应商前缀）

如果在源码中发现类似_webkit_开头的代码，这种东西叫厂商前缀也叫供应商前缀。浏览器厂商通过它标记实验性或专属的属性。

  • -moz-，火狐浏览器
  • -ms-，微软
  • -o-，欧朋浏览器
  • -webkit-，safari和chrome浏览器
body * {		-webkit-filter: grayscale(100%);		-moz-filter: grayscale(100%);		-ms-filter: grayscale(100%);		-o-filter: grayscale(100%);		filter: grayscale(100%);		filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);		filter: gray;	}

第七天

#sprites div:hover span.huafei

div:hover选中的是被移动上去的div。

span.huafei，有没有一个span标签类名为huafei。

div.jiudian:hover span

还是区分出来你hover的是哪个jiudian的这个div被hover的时候他下面的span

列表

每个列表（ul、ol）都会给自己设置一定的默认样式。(上下margin：16px，左边padding：40px)。

所以我们用的时候会将默认样式清除：

<!DOCTYPE html>
<html>

<head>
  <style>
    ul,
    ol {
      margin: 0;
      padding: 0; 
    }
  </style>
</head>

<body>
  <ul>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ul>
  <ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ol>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mVqztZTc-1626946116507)(/Volumes/尚硅谷前端/笔记/7/image-20210703104907502.png)]

每个列表项目都是块状元素再加上一个标识，但是__前面的标识不参与文档布局__，它只是附加在列表的一侧（不管列表在哪里都会随着列表移动）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bL9X4HI3-1626946116508)(/Volumes/尚硅谷前端/笔记/7/image-20210703105448775.png)]

  • 列表的类型

    list-style-type:value

    • none，没有标记。
    • disc，实心圆
    • decimal，数字
    • 其他的自行百度，记不住。我也不记。

  • 设置列表标记的位置。

    list-style-position用来规定列表的记号是在标记盒子中还是在内容盒子中。

    • outside，在标记盒子中。
    • inside，在内容盒子中。

  • 使用图片标记列表前面的记号。

    list-style-image:url()

简写格式：list-style:type image positioin

他们三个的顺序可以调换而且还是可选的。

表格

格式：border-collapse:value（可继承的），写到table元素上，继承到td。

  • separate，分离边框。
  • collapse，边框折叠。
浮动

文档流：文档流指的是HTMl中元素在计算布局、排版过程中的机制。文档源代码在书写的时候是有顺序的上->下，从左->右。

解释的代码的时候从上到下，从左到右来解释。解释的时候如果行内元素就在一行，如果是块状元素就独占一行。

浮动的出现就是为了打破上面所说的正常文档流而实现文字环绕效果。浮动本质就是为了实现文字环绕。

格式：float:value（不可继承）

  • none，无浮动。
  • left，元素向左浮动，其他内容包围在浮动元素的右边。
  • right，元素向右浮动，其他内容包围在浮动元素的左边。

形成文字环绕的原理：

  1. 父元素高度塌陷，让跟随的内容可以和浮动元素在一条水平线上。
  2. 块状元素和浮动元素会重叠，但是块状元素中的行框盒子和浮动元素不会重叠。
float属性的规则

  1. 子元素浮动将会导致父元素高度塌陷。

    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />

  <style>
    #f {
      border: 1px solid red;
    }

    #f div {
      float: left;
      width: 300px;
      height: 300px;
      border: 1px solid blue;
    }
  </style>
</head>

<body>
  <div id="f">
    <div></div>
  </div>
</body>

</html>

  2. 浮动元素的位置，要考虑在它之前的块元素或浮动元素。

    正常的块元素是在浮动元素之前，浮动元素将重开一行。

    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />

  <style>
    div {
      width: 300px;
      height: 300px;
      border: 1px solid green;
    }
  </style>
</head>

<body>
  <div style="background-color:red;"></div>
  <div style="background-color:blue;float:left;"></div>
</body>

</html>

    正常元素在浮动元素之后，正常元素将不再考虑它之前的浮动元素（就像浮动元素不存在）

    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />

  <style>
    div {
      width: 300px;
      height: 300px;
      border: 1px solid green;
    }
  </style>
</head>

<body>
  <div style="background-color:red;float:left;"></div>
  <div style="background-color:blue;width:350px;height:350px;"></div>
</body>

</html>

  3. 浮动之后的元素将会变成一个块状元素。

  4. 浮动元素的上下外边距不会折叠。

    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />

  <style>
    span {
      float: left;
      margin:10px;
      width: 300px;
      height: 300px;
      border: 1px solid green;
    }
  </style>
</head>

<body>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>

</body>

</html>

  5. 浮动元素的后代也浮动时，将扩大范围，包含浮动元素的后代（子浮动，父也浮动将不会导致父塌陷）

    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />

  <style>
    div {
      border: 10px solid pink;
      float: left;
    }

    span {
      float: left;
      width: 300px;
      height: 300px;
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <div>
    <span></span>
  </div>
</body>

</html>

  6. 元素向左浮动时，后面的元素在前一个浮动元素的右边。元素向右浮动时，后面的元素在前一个浮动元素的左边。

    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />

  <style>
    span{
      float:right;
      width:200px;
      height:200px;
      border:1px solid green;
    }
  </style>
</head>

<body>

    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>

</body>

</html>

    后面的浮动元素不与前一个浮动元素在一行，那么将会重启一行。

  7. 浮动元素不会超过父元素的顶边、左边、右边。

    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />

  <style>
    div{
      border:1px solid red;
      width:610px;
      margin-top:100px;
      margin-left:100px;
    }
    span{
      float:right;
      width:200px;
      height:200px;
      border:1px solid green;
    }
  </style>
</head>

<body>
    <div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
    </div>


</body>

</html>

  8. 浮动元素的顶边不能比前方任何一个浮动元素的顶边高。

    <!DOCTYPE html><html><head>  <meta charset="utf-8" />  <style>  </style></head><body>  <div style="width:100px;height:300px;margin-bottom:20px;border:1px solid red;"></div>  <div style="width:200px;height:200px;border:1px solid blue;float:left;"></div>  <div style="width:200px;height:200px;border:1px solid green;float:left;"></div></body></html>
清除浮动

clear属性用来设置自身元素怎么样，而不是设置float元素怎么样。我们经常说清除浮动是不准确的浮动依然是存在的，并没有被清除。

官方给的解释：元素盒子的边不能和前面的浮动元素相邻。

格式： clear:value（不可继承）

  • none，允许任何一边浮动。
  • left，元素左侧抗浮动。
  • right，元素右侧抗浮动。
  • both，两侧抗浮动。

抗：抵抗

清除：干没了。

  1. 自身往那边跑。
  2. 后面的内容怎么办。
撑开父元素的高度

  1. 给后面加上个空的div然后在空div中写上clear:both。

    <!DOCTYPE html><html><head>  <meta charset="utf-8" />  <style>    #f {      border: 1px solid green;    }    .z {      float: left;      width: 100px;      height: 100px;      border: 1px solid pink;    }  </style></head><body>  <div id="f">    <div class="z"></div>    <div class="z"></div>    <div class="z"></div>    <div style="clear:both;"></div>  </div></body></html>

    原理：

    1. 浮动元素不能超过父元素的顶边、左边、右边。
    2. clear是抵抗的意思，如果说clear应用于非浮动元素时，它将移动到所有相关的浮动元素的下方。
    3. 这个时父元素自然要把普通文档流中的元素包裹起来，进而导致父元素的高度撑起来。

    这种问题有一个弊端，加了一个空的div。

    ::after和::before插入的内容属于行内元素。

  2. 在CSS中使用::after来插入一个空的块状元素，然后在其中设置clear:both

    ::before是在开始标签的后面插入，::after是在结束标签的前面插入内容。

    <!DOCTYPE html><html><head>  <meta charset="utf-8" />  <style>    #f {      border: 1px solid green;    }    .z {      float: left;      width: 100px;      height: 100px;      border: 1px solid pink;    }    #f::after {      display: block;      content: '';      clear: both;      /* width: 100px;      height: 100px;      border: 1px solid yellowgreen; */    }  </style></head><body>  <div id="f">    <div class="z"></div>    <div class="z"></div>    <div class="z"></div>  </div></body></html>

是不是还避开了选择器

作业：中午的那两个 写完。

代码三遍。

复习前面的东西。

第八天

内核（渲染引擎：HTML、CSS）

  1. 将HTML元素标签解析为由多个DOM元素对象节点组成的有父子关系的DOM树。

    |-html

    |-|-head

    |-|-body

    ​ |-|-div

    ​ |-|-h3

    ​ |-|-ul

    ​ |-|-li

    <!DOCTYPE html>
<html>

<head>
  <style>
    div {
      width: 260px;
      background-image: url(./bg.gif);
      border: 1px solid transparent;
    }

    div ul {
      margin: 0 auto;
      margin-bottom: 10px;
      padding: 0;
      width: 240px;
      background-color: #FFF;
      /* border: 1px solid pink; */
      list-style-position: inside;
    }

    div ul li {
      margin: 0 auto;
      width: 220px;
      height: 30px;
      line-height: 28px;
      list-style-image: url(./tb.gif);
      border-bottom: 1px dashed #7BA5B6;
    }

    div ul li a {
      margin-left: -1.5px;
      color: #0066CC;
      font-size: 12px;
      text-decoration: none;
    }

    div h3 {
      margin-left: auto;
      margin-right: auto;
      width: 240px;
      /* border: 1px solid blue; */
      border-left: 5px solid #C9E143;
      text-indent: 5px;
      color: #FFF;
    }

    .clear-border {
      border: 0 !important;
    }
  </style>
</head>

<body>
  <div>
    <h3>爱宠知识</h3>
    <ul>
      <li>
        <a href="#">乘飞机可以带宠物吗？</a>
      </li>
      <li>
        <a href="#">如何将宠物快递到外地？</a>
      </li>
      <li>
        <a href="#">宠物托运流程是什么？</a>
      </li>
      <li>
        <a href="#">猫和狗可以一起养吗？</a>
      </li>
      <li class="clear-border">
        <a href="#">适合女生上班族养的狗有哪些？</a>
      </li>
    </ul>
  </div>
</body>

</html>

  2. 根据上面的树状结构提取CSS规则并且重新计算每个节点的样式，形成带样式的DOM渲染树。

  3. 根据渲染树在页面中的大小、位置将元素固定在指定的位置上，这个时候布局属性将会生效。

  4. 布局绘制完成之后开始装饰渲染树：背景、颜色、文本才会生效。

重排：页面生成之后，如果位置发生变化，将要从第三步开始执行，然后执行第四部。

重绘：只是显示样式变、布局不变，将会直接进行第四部。

重排必然会引起重绘。

尽可能避免重排、减少重绘制。

大表格，能不用就不用。

小练习：

  1. 两列效果，左侧宽度固定，右侧内容宽度不固定。

    <!DOCTYPE html>
<html>

<head>
  <style>
    body {
      background-color: #E9FAFF;
    }

    img {
      float: left;
    }

    div {
      border: 3px solid #88C6E5;
      padding: 5px;

      margin-left: 225px;
    }

    div p {
      text-indent: 2em;
    }
  </style>
</head>

<body>
  <img src="./photo.jpg" />
  <div>
    <p>
      圣魂村，如果只是听其名，那么，这绝对是个相当令人惊讶的名字，可实际上，这只不过是法斯诺行省诺丁城南一个只有三百余户的小村而已。之所以名为圣魂，是因为传说中，在百年前这里曾经走出过一位魂圣级别的魂师，从而得名。这也是圣魂村永远的骄傲。
    </p>
    <p>
      圣魂村外，尽是大片的农耕之地，这里出产的粮食和蔬菜，都要供给到诺丁城，诺丁城在法斯诺行省中虽然算不得大城市，但这里毕竟距离与另一帝国接壤处很近，也自然是两大帝国商人交易的起始地之一，诺丁城因此而繁荣，附带的，令城市周围这些村庄中的平民生活也比其他地方要好的多。
    </p>
    <p>
      天刚蒙蒙亮，远处东方升起一抹淡淡的鱼肚白色，毗邻圣魂村的一座只有百余米高的小山包上，却已经多了一道瘦小的身影。
    </p>
    <p>
      那是个只有五、六岁的孩子，显然，他经常承受太阳的温暖，皮肤呈现出健康的小麦色，黑色短发看上去很利落，一身衣服虽然朴素，到也干净。
    </p>
    <p>
      对于他这么大的孩子来说，攀爬这百米高的山丘可并不是什么容易的事，但奇怪的是，当他来到山顶的制高点时却面不红、气不喘，一副怡然自得的样子。
    </p>
    <p>
      紫气的出现，令男孩儿的精神完全集中起来，他甚至不再呼气，只是轻微而徐缓的吸气，同时双眼紧紧的盯视着那抹倏隐倏现的紫色。
    </p>
    <p>
      静坐半晌，男孩儿才再次睁眼，不知是否因为那天边紫气的沾染，他眼眸中竟然闪烁着一层淡淡的紫意，尽管这紫色并没有持续太长时间就悄然收敛，但当它存在的时候，却是那么清晰。
    </p>
  </div>
</body>

</html>

  2. 翻页

    <!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
    }

    div {
      min-width: 670px;
      border: 3px solid #88C6E5;
      line-height: 40px;
      text-align: center;
      color: #085308;
    }

    div::after {
      content: '';
      display: block;
      clear: both;
    }

    div a {
      height: 40px;
      line-height: 40px;
      color: #085308;
      text-decoration: none;
    }

    div a:hover {
      text-decoration: underline;
    }

    div a.prev {
      float: left;
      margin-left: 10px;
    }

    div a.next {
      float: right;
      margin-right: 10px;
    }
  </style>
</head>

<body>
  <div>
    <a href="#" class="prev">上一章（《武魂殿必胜（上）》）</a>
    <span>《武魂殿必胜（中）》</span>
    <a href="#" class="next">下一章（《武魂殿必胜（下）》）</a>
  </div>
</body>

</html>

  3. 页面

    1. 目录结构问题：CSS、JS、Imgs都需要放在单独的一个目录中。

    2. 默认样式问题：

      很多元素都会有默认样式。h标签、p、body，有些不需要的标签的默认样式我们要去掉。

      normalize.css的特点：

      1. 它保护了有价值的默认值。

        h标签、p标签

      2. 修复了浏览器的bug，让页面中的默认样式尽量显示的都一样。

      reset.css，比较凶残。不管你的默认样式有用没用都干掉。

      使用normalize.css的时候要记着把这个css文件放在最前面。

    3. 如果一个盒子是横向占据全屏我们给他叫通栏盒子。

    4. 页面版心：PC端的网页通常是一个固定的宽度且水平居中的盒子。版心用来放置页面中的主要内容。

      现在的项目版心都是按照设计稿来的一半都是在1100以上（1100~1300之间）。

      现在电脑分辨率是1366*768。要保证分辨率低的能看，分辨率高的也能看。

      早起的时候我们一般将版心设置成1000或者960。

      写页面：大-》小、布局-》修饰的其他样式。

      写页面：html->css

      div{
	盒子模型：display、float、position、width、height。
	边界：border
	背景：backgorund
	文本：font-family font-size letter-spacing text-deocration
	其他：不属于上述的内容都写在最后。
}

      假如说我写的html、css发现不合适，我能不能改：能改（男女结婚都能离婚）。

      name是form里面的东西，name用来给服务器端传值。如果没有name那么你服务器得不到值。

      id、class 一般用在CSS、JavaScript。

定位

我们平常写HTML是普通文档流。写float块状元素重叠，行内元素不重叠。

定位指的就是将元素移动到哪里。允许你设置相对于谁（相对于哪个基准，正常的位置、祖辈元素的位置、浏览器窗口位置）来进行移动。

浮动、定位能少用就少用。

格式： position:value

position属性的值用来指定的是定位的基准是什么。

  • static，默认值，正常生成元素框。块状元素独占一行，行内元素水平排列。
相对定位

position:relative，相对于自身本来的位置进行定位。

使用top、bottom、left、right来移动元素。

  • top，指定了定位元素上边界相对于正常位置的上边的偏移量。（正数向下，负数往上）。
  • bottom，指定了定位元素下边界相对于正常位置的下边的偏移量。（正数向上，负数往下）。
  • left，指定了定位元素左边界相对于正常位置的左边的偏移量。（正数向右，负数往左）。
  • right，指定了定位元素右边界相对于正常位置的右边的偏移量。（正数向左，负数往右）。

注意：

  1. 元素相对定位之后，即使该元素移走，本来的位置也不会被占据。
  2. 同时使用left、right时，left生效。
  3. 同时使用top、bottom、top生效。
  4. relative移动时如果按照百分比计算是相对于包含的父元素计算的，不是自身。

第九天

定位

定位：position:value属性，用来确定根据谁来进行定位，确定定位的基准。

移动：top、left、right、bottom。

  • relative：__相对于自身本来在的位置__进行移动。

  • absolute：将元素从文档流中删除，__相对于容纳块__来定位。

    容纳块：position属性的值不是static的最近的祖辈元素（祖辈元素中内边距的外边界）。

    如果到最后都没有找到，找的是__初始容纳块__。初始容纳块你可以理解为是页面的第一屏。

    • 在使用position:absolute的时候会在大部分情况下将父元素的值设置为realtive。

      为什么我们在用position:absolute的时候大多数要将父元素的值设置为relative，是为了__最小权限原则 __。

      将影响降低到最小。

    • position:absolute之后的元素成了一个块状元素。

    • 如果绝对定位中的元素浮动将不会造成绝对定位的元素高度塌陷。

    • 同时使用top、bottom或同时使用left、right或top、bottom、left、right同时使用。

      同时使用四个偏移量来定位，width、height为auto，将会自动计算宽度和高度。

      计算公式：本元素的内容宽度=容纳宽度（内容宽度+padding宽度）- left - margin-left -border-left -padding-left -padding-right - border-right - margin-right -right

  • fixed，固定定位。固定定位的元素从文档流中删除，相对于视口来定位。

    rgba();，通常用来做背景。

    opacity，指定了一个元素的透明度，当这个属性的值被应用到元素上时，将这个元素当成一个整体看待。

    整体包括内容、背景色、前景色、边框。

    opacity的值是从0~1的范围0位完全透明、1为完全不透明。

display:none。

格式： visibility:value

  • visible，元素可见
  • hidden，元素不可见。

display:none和visibility:hidden的区别：display:none对布局不再有影响。但是visibility依然会影响布局。

堆叠顺序

格式：z-index:value

  • auto，可以将auto当做0来处理。

    元素一旦成为定位元素那么，z-index就直接生效了。这个时候值就是auto也就是0。

    <!DOCTYPE html>
<html>

<head>
  <style>
    div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      border: 1px solid red;

    }
  </style>
</head>

<body>
  <div style="background-color:red;">1</div>
  <div style="background-color:green;top:10px">2</div>
</body>

</html>

    定位元素在非定位元素的上面。

  • 数值，值为任何整数（正数、负数），值越大越靠上。

    z-index的值无需连续。

第十天

HTML5是在之前的html4.01的基础上，增加了一些语义化标签、标签属性、本地存储、图形绘制、地理位置。

div span

什么是语义化标签

所谓语义化就是你写的HTML结构，是用相对应的有一定语义的标签表示、标记的，因为HTML本身就是标记语言。

为什么要用语义化标签
  1. HTML 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
  2. 即使在没有样式 CSS 的情况下也能以一种文档格式显示，并且是容易阅读的;
  3. 使阅读源代码的人更容易将网站分块，便于阅读、维护和理解。
section标签

section标签表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6等标签结合使用，标示文档结构。

内容区块：将HTML页面按照逻辑进行分割后的单位。

一个section通常由内容及标题组成。

header标签

header标签表示页面中一个内容区块（section）或整个页面的标题。

header标签是一种具有引导和导航作用的结构标签。放置页面或页面的一个区块的标题。

可以包含logo、搜索表单、菜单。

一个页面中可以有多个header，可以给一个内容区块加一个header标签。

header标签中一般要至少包括一个标题标签。（h1~h6）

footer标签

footer标签可以作为其上层父级内容区块或一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读链接以及版权信息等。

footer标签也是不限制只使用一次。 你可以为一个区块设置footer标签。

https://www.ituring.com.cn/

https://m.ituring.com.cn/

nav标签

nav标签是一个可以用来作为页面导航的链接组，其中的导航标签链接到其他页面或当前页面的其他部分。并不是所有的链接组都要放进nav标签，只需要将主要的、基本的链接组放进nav标签即可。

多个链接放到一起了。

使用场景：

  • 侧边栏导航。
  • 导航菜单
  • 翻页操作：上一页、下一页

你感觉重要的一组的链接可以放在一个nav里面去。

article标签

article标签代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报章杂志中的文章、一篇论坛帖子、一段用户评论或一个独立的插件，或者其他任何独立的内容。

一个article标签通常有自己的标题（标题放在header中），也有footer。

article和section的不同点：

  1. article可以看成是是特殊的section，比section更强调独立。
  2. section强调分段或分块。一个内容块比较独立、完整的时候应该用article，如果想将一整块内容分成几块时应该使用section。
aside标签

aside标签，aside标签用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。

  1. 在article中作为内容的附属信息部分。和当前文章有关的。
  2. 作为全局或站点全局的附属信息部分。
mark标签

定义带有记号的文本。

主要的目的是为了吸引当前用户的注意，因为标示出来的东西和当前的用户操作有关。

abbr缩写

title属性：用来表示这个缩写的全称是什么，值为自定义的值。

鼠标移动到这个标记的文本上的时候会有一个提示框。用来提示给用户、告诉搜索引擎这个缩写是什么意思。

表单新增的标签
<input type="text" autocomplete="off" list="cars">
  <datalist id="cars">
    <option>BMWW</option>
    <option value="BMW2">
    <option value="Ford">
    <option value="Volvo">
    <option value="Benz">
  </datalist>

  • autocomplete用来关闭浏览器自带的提交记录。

    • 如果没有指定该属性的值，将会使用浏览器的默认值。
    • on，显示提交记录
    • off，关闭提交记录。

  • datalist，表示可选的数据的列表，与input标签配合使用制作出输入值的下拉列表。

    它显示的仅仅是符合规则的列表。

    id属性用来给定一个标识。

  • input标签中的list属性用来和datalist标签中的id属性进行绑定。

  • option就是候选的数据列表中的每一项。

表单新增的属性

  • input标签，type属性新增的值。

    • email，表示输入的值是一个email地址。如果输入的值不是合法的email那么不允许提交，并且给出提示。

      email不检查该输入框是否为空。

      • required，如果要检查是否为空需要加上required。

    • url，表示输入的地址必须是url地址。如果不是禁止提交。但是依然不能防止用户没有输入内容。所以还要加上required。

    • number，number表示输入的是数值。在提交时进行检查。

      • min，允许的最小值
      • max，允许的最大值。
      • step，步长，间隔。

    • date，选取年月日。

    • time，时间选取小时和分钟

    • range，输入一段范围的数值。在浏览器中以滚动条的方式显示。

      • min，允许的最小值
      • max，允许的最大值。
      • step，步长，间隔。

    • color，选择颜色。

  • autofocus，自动获得焦点。

    一个页面上应该只有一个input中有autofocus

  • placeholder属性：用来对用户的输入进行提示，提示用户可以输入的内容。

音频、视频

  • 音频标签

    格式：<audio></audio>

    • src：给他一个音频的地址。
    • controls属性：加入系统自带的播放用的控制条。
    • muted属性：如果被设置音频默认将会是静音模式。
    • loop属性：循环播放。

    mp3、ogg、wav。

  • 视频标签

    格式：<video></video>

    • src属性：要播放的视频的地址。
    • controls属性：加入系统自带的播放用的控制条。
    • width属性：设置窗口的宽度
    • height属性：设置窗口的高度。
    • poster属性：给视频设置封面，展示一副图片。
层次选择器（区分出层次-儿子、爸爸-兄弟）
  • E F，后代选择器，选择匹配F，匹配的F元素属于E元素的后代。
  • E>F，子选择器，选择匹配的F元素，匹配的F元素是E元素的子元素。
  • E+F，相邻兄弟选择器，选择匹配的F元素并且F元素紧紧位于E元素的后面。
  • E~F，兄弟选择器，匹配F元素，且位于匹配的E后面的所有F元素。（同属于一个父元素）
属性选择器

这个指的是HTML标签的属性。

  • E[attr]，选择匹配具有attr属性的E元素，你只有定义了attr属性才能被选中。

    也可可以使用E[attr1][attr2]来选择同时具有attr1和attr2两个属性的E元素。

  • E[attr='val']，选择匹配具有attr属性的E元素并且该属性规定了具体的值。（完全匹配，区分大小写）。

  • E[attr *='val']，选择匹配的E元素并且E元素定义了attr属性在它的值的任意位置包含了val。

  • E[attr ^= 'val']，选择匹配的E元素，并且E元素右attr并且它的值以val开头。

  • E[attr $= 'val']，选择匹配的E元素，并且E元素右attr并且它的值以val结尾。

伪类选择器

  • E:first-child，选择父元素的第一个子元素，且元素为E的元素。必须是第一个孩子并且这个孩子还得是E

  • E:first-of-type，选择父元素的第一个E元素。只选择第一个出现的E元素。

  • E:last-child，选择父元素的最后一个子元素，且元素为E的元素。

  • E:last-of-type，选择父元素的最后一个E元素。

  • E;nth-of-type(n)，选择父元素的第n个E元素。

  • E:nth-child(n)，选择父元素的第n个子元素，且元素为E的元素。

    n的情况：

    • 数字

      写n相当于全选，从第0个开始。

      写1、2、3、4等等之类的数字。

    • 关键字

      odd，奇数

      even，偶数

    • 公式

      • Mn，n是字母，m是数字。表示的是n的m倍。

      • n是从0开始算的，但是html是从1开始算的。

      • Mn+x，表示从x开始，每隔M个选择一个。

动态伪类选择器
  • E:focus，选择匹配的E元素，且匹配的元素获得焦点的时候被触发。用于input标签。
  • E:target，选择匹配E的所有元素，并且匹配元素被相关URL指向时才会生效（锚点指向时生效）。
  • E:checked，选择匹配的E元素并且E元素被选择（单选和多选）。
伪元素选择器
  • E::before，选择匹配的E元素并在选择元素的开始标签的后面插入内容。
  • E::after，选择匹配的E元素并在选择元素的结束标签的前面插入内容。

要插入内容就需要使用content属性来指定要插入的内容（这种方法通过CSS插入内容而不是通过HTML标记插入内容）。

content的值：

  • 字符串
  • url(图像地址)，插入一张图
  • attr(HTML的属性的名字)，将对应的属性名的值插入进去。

注意：

  1. content中的内容不会被搜索引擎收录、抓取。
  2. 生成的内容在元素框的内容。
  3. 默认的时候是在这个元素中生成了一个行内元素，可以使用display进行修改。
  4. 只要属性能够被继承，生成的内容会默认继承它父元素的属性的值。

地十一天

css3选择器权重值
  • ID选择器：0,1,0,0
  • 类选择器、属性选择器、伪类选择器：0,0,1,0
  • 标签选择器、伪元素选择器：0,0,0,1
  • 通用选择器：0,0,0,0
  • 层次选择器拆开并且进行相加。
  • 行内样式：1,0,0,0

当你的选择器选择正确、属性名和值都是合法的。如果不好使就得想想是不是权重值的问题。

文字阴影

格式： text-shadow:value

  • none，没有阴影。（默认值）

  • color lrsshadow tbshadow blur

    • color，阴影的颜色。
    • lrsshadow，左右阴影。
    • rbsshadow，上下阴影
    • blur，模糊度。

    如果为负数时左、上

    如果为正数时右、下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bWCGh8XK-1626946116511)(/Volumes/尚硅谷前端/笔记/11/笔记、代码/image-20210709092556322.png)]

<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            font-size: 200px;
            text-shadow: green 10px -10px 10px, red -10px 10px 10px;
        }
    </style>
</head>

<body>
    <h1>李*华</h1>
</body>

</html>

注意： text-shadow可以有多组，多个效果叠加。

圆角属性

元素的边框是直角的，现在可以使用border-radius属性定义一个（或两个）半径，把边角变的圆滑。

格式1：border-radius:value，1个值，将值同时应用在四个角上。

  • px，按照像素进行计算。
  • %，按照元素宽度及元素高度的百分比进行计算。
<!DOCTYPE html>
<html>

<head>
    <style>
        img {
            /* border-radius: 50px; */
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <img src="./873404_1438581411427_873404_1438581409652_1.png" alt="">
</body>

</html>

圆角的原理：生成了指定水平半径和垂直半径的圆或椭圆同时应用在四个角落里。

格式2：border-radius:左上、右下 右上、左下

格式3：border-radius:左上 右上、左下 右下

格式4：border-radius:左上 右上 右下 左下

格式5：border-top-left-radius:value

格式6：border-top-right-radius:value

格式7：border-bottom-right-radius:value

格式8：border-bottom-left-radius:value

盒子阴影

格式：box-shadow:value

  • 左右阴影：负数左边，正数右边。
  • 上下阴影：负数上边，正数下边。
  • 阴影模糊度
  • 阴影颜色
  • [inset]，投影在盒子内部。
裁剪背景

默认的时候背景从内容区经过内边距一直到边框的外边界。

background-clip来控制背景延伸到哪里。

  • border-box，默认值延伸到边框的外边界。
  • padding-box，延伸到内边距的外边界。
  • content-box，将背景限制在内容区域内。
  • text，以文字作为裁剪区域。

<<Read All About It>>

背景的定位基准

默认的时候background-position相对于内边距的外边界来定位，你可以使用background-origin来进行更改。

格式： background-origin:value

value:

  • padding-box，默认值。相对于内边距的外边界了定位。
  • border-box，相对于边框的外边界来定位。
  • content-box，相对于内容区域的外边界来进行定位。

background-clip用来定义背景图延伸到哪里，background-origin用来定义background-position定位的时候应该以谁作为基准。

调整背景背景图的尺寸

background-size，调整背景图的尺寸

value可以是两个值第一个值是横向的尺寸，第二个值是纵向的尺寸。

  • px，像素
  • %，按照元素的宽度和高度来进行计算。
  • cover，等比例缩放完全覆盖容器，背景图有可能超出容器。
  • contain，等比例缩放，背景图始终被包含在容器内。

cover和contain的相同点：都是进行等比例缩放。不同点：cover是铺满整个区域，如果显示比例和显示区域的比例相差很大某些部分不会显示出来（超出了）。contain，它是按照某一边来进行覆盖的，所以有可能会出现有白边的情况。

背景粘附

background-attachment

背景图像默认随着文档一起滚动。可以使用background-attachment来修改这个行为。

value：

  • scroll，默认值。背景图是相对于元素自身固定，并且不随着它的内容滚动。

    给body上设置background-attachment:scroll是一种例外，背景会随着内容的滚动而滚动。

  • fixed，背景图相对于视口固定，所以页面滚动背景不动。

  • local，相对于元素的内容来固定，如果一个元素有滚动条时，背景会随着内容一起滚动。

简写属性

background:image position/size repeat attachment origin clip color

当写多张背景图的时先写的放在上面，后写的放在下面。

第十二天

滤镜

滤镜：主要用来实现图像的各种的特殊效果。

格式：filter:value一般用在图片上。

  • none，默认，没有效果。
  • blur(length)，模糊度。0为不模糊，可以使用px作为单位。
  • grayscale(number);，调整元素的灰度。值为0没有变化，值为1完全变成灰色图像。值可以为小数。
  • opacity(number)，将透明度应用在图片上，0完全透明，1不做任何修改。可以为小数。
  • sepia()，用来调整元素的红褐色，值为100%完全渲染为深褐色，0%无变化。
  • invert()，将所有颜色翻转，0%没有变化，100%时元素为完全翻转。
  • brightness()，调整元素上颜色的亮度。值为0%时为纯黑色、100%时元素没有任何变化。大于100%的颜色亮度会有变化。比以前的颜色更亮。
  • contrast()，设置对比度。0%变成纯灰色，100%没有变化，大于100%对比度越来越大。
  • saturate()，设置包含度。饱和度越高，颜色越鲜艳，饱和度越低颜色越暗淡。调整为0%时候没有饱和度，得到的是灰色。100%时元素没有变化。

filter的value可以有多个方法，多个方法之间使用空格分隔。

rgba、opacity、opacity()

  • filter:opacity()，一般用在图片上，因为filter可以使用多个效果。
  • opacity，用的最多的地方就是动画，用来做整体的淡入淡出。
  • rgba，只是背景透明，里面的内容不透明。所以通常用来做背景的东西。
渐变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZgOBU7mk-1626946116513)(/Volumes/尚硅谷前端/笔记/12/笔记、代码/20210311134010827_325.png)]

渐变指的是从一个颜色到另外一个颜色的平滑过渡，它是图像。

渐变分为线性渐变和径向渐变，线性渐变和径向渐变又分为循环渐变和非循环渐变。

线性渐变

linear Gradient，指的是沿着一条线填充得到的渐变（这条线是贯穿元素中心的一条线，这条线就是梯度线）。

格式：linear-gradient [方向/角度] color1 color2.....

  1. 简单的颜色值，这些颜色可以包含transparent、rgba等等。颜色可以有两个或多个。

  2. 角度的设置

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rNk3H1Hq-1626946116514)(/Volumes/尚硅谷前端/笔记/12/笔记、代码/20210311134103775_6875.png)]

    角度可以用正数也可以用负数

    225度等于-135度

  3. 梯度线的颜色分配。

    梯度线分配颜色的时候是在梯度线90度的地方分散出来了很多的虚拟的线条进行无限的延伸。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WLafMOj3-1626946116517)(/Volumes/尚硅谷前端/笔记/12/笔记、代码/20210311134432105_6693.png)]

  4. 方向

    • to bottom，梯度线方向向下。
    • to top，梯度线方向向上。
    • to left，向左
    • to right，向右
    • to left top，左上
    • to left bottom，左下
    • to right top，右上
    • to right bottom，右下

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MIdMVC86-1626946116520)(/Volumes/尚硅谷前端/笔记/12/笔记、代码/20210311134455428_17299.png)]

    1. 过图像的中心点，将声明的角的相邻的两侧的角连接起来。
    2. 梯度线与那条对角线垂直，指向声明的角。（需要过元素的中心点）。

  5. 颜色值的分配

    默认的时候你的多个颜色的值是平均分配在梯度线上的。第一个颜色为0%，最后一个100%。

  6. 指定颜色的值

    可以指定px或%指定插入颜色的位置，这样可以让颜色不会平均分布在梯度线上。

    如果排布的颜色不到梯度线的末尾，那么最后一个颜色将会一直延伸下去。

    急停的效果。

重复性线性渐变

repeating-linear-gradient，重复性线性渐变在梯度线上不断的循环排布声明的颜色，最后一个颜色的长度用于定义图案的整体长度，超过之后就开始循环。

径向渐变

radial-gradient，沿着一个中心点向四周扩展颜色、进行平滑过渡。

格式： radial-gradient:[大小] [at point] color1 color2.....

  1. 简单的颜色可以使用rgba、transparent。

    默认的时候，径向渐变在中间显示，如果是在方形元素中径向渐变为圆形，在矩形元素中径向渐变为椭圆形。

  2. 梯度射线，梯度射线从渐变的中心向右开始延伸。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qGJQYYUf-1626946116521)(/Volumes/尚硅谷前端/笔记/12/笔记、代码/20210311140320271_17549.png)]

  3. 默认的时候如果有多个颜色值也是平均分配在梯度射线上的。你可以指定位置。

  4. 大小

    在径向渐变中，径向形状可以设置的比图像小。

    大小，一个值或两个值。

    如更是一个值，得到的圆形的渐变，值就是半径。

    如果径向渐变的形状比渐变图像小，最后一个的颜色将一直向外延伸。

  5. at point，默认的时候径向渐变的中心在元素的中心，可以使用at point来更改。

重复性径向渐变

重复性径向渐变repeating-radial-gradient，定义好圆形或椭圆形的尺寸之后再用长度定义颜色在梯度射线上的位置，超出梯度射线之后，就能看到循环渐变。

渐变可以有多个，多个渐变的时候先写的在上面，后写的在下面。

从PSD设计稿中获得渐变的值

  1. 选择移动工具

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tJFKT3i0-1626946116523)(/Volumes/尚硅谷前端/笔记/12/笔记、代码/image-20210710142020393.png)]

  2. 选中元素后选择：自动选择、图层

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AAnw0ZNp-1626946116532)(/Volumes/尚硅谷前端/笔记/12/笔记、代码/image-20210710142119470.png)]

  3. 选中自动定位的图层

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xmGbhbdw-1626946116536)(/Volumes/尚硅谷前端/笔记/12/笔记、代码/image-20210710142153048.png)]

  4. 在定位的图层上选择复制css（右键哦）

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3C2pB1bQ-1626946116540)(/Volumes/尚硅谷前端/笔记/12/笔记、代码/image-20210710142227272.png)]

过渡

过渡是元素从一种样式逐渐改变为另外一种样式的效果。

步骤：

  1. 指定要添加效果的CSS属性
  2. 指定效果的持续时间。
定义过渡的属性

格式：transition-property:value，你只有在这个属性中定义的才会以动画的形式持续一段时间而不是瞬间变化。

  • none，不过渡任何属性

  • all，过渡所有的属性。

    有些属性是不可以过渡的。

    属性值可以使用数值的一般都支持过渡，不是数值是某些关键字但是可以转换为数值的也支持过渡。

  • 其他属性的列表，以逗号分隔的属性的列表。

设置过渡的持续时间

格式： transition-duraction，指定一个状态过渡到另外一个状态需要经过多长时间。

  • 默认的时候是0s，表示没有持续时间。
  • 值的单位可以s（秒）或ms（毫秒），必须带单位。只能是正数。100ms~300ms之间。
  • 如果想让transition-property属性指定的值都使用一个持续时间可以只声明一个值。如果想让其中的多个属性都有自己的持续时间那么可以使用列表：transition-duration: 200ms, 10s;

过渡一种附属效果，锦上添花的东西。

调整过渡的方式

正常情况下，进行过渡的样式是慢速开始，然后加速，然后再慢速结束。

transition-timing-function

  • ease，慢速开始、加速、再慢下来。
  • linear，整个过程保持相同的速度。匀速。
  • ease-in，慢-》快
  • ease-out，快-》慢
  • cubic-bezier()，用来指定一个三次方的贝塞尔曲线。

https://cubic-bezier.com

延迟过渡

格式： transition-delay:value

  • 默认值是0s，过渡立即开始。
  • 其他的和transition-duraction
简写属性

transition:property duraction timing-function delay

transition:property1 duraction1 timing-function1 delay1,property2 duraction2 timing-function2 delay2......

反向过渡

如果你要是在:hover上声明过渡，那么只在鼠标移入时才会被触发过渡，移出事瞬间变为原来的状态。

如果要解决上面的问题要将transtion相关的属性放在这个元素本身上，这样当鼠标离开之后也会有过渡的效果。

<!DOCTYPE html>
<html>

<head>
    <style>
        #yp {
            width: 100px;
            height: 20px;
            border: 1px solid green;

            transition-property: width;
            transition-duration: 1s;
            /* color: red; */
        }

        body:hover #yp {
            width: 800px;
            /* height: 200px; */
            /* transition-property: width, height; */
            /*  transition-property: width, height;
            transition-duration: 200ms, 10s; */
            /*  transition-property: width;
            transition-duration: 1s; */
            /* transition-timing-function: ease-in; */
            /*  */
            /*  transition-timing-function: cubic-bezier(.46, .01, .8, 1.37);
            transition-delay: 1s; */
            /* transition: width 1s ease-in 1s; */
        }
    </style>
</head>

<body>
    <div id="yp">

    </div>
</body>

</html>

第十三天

变形

  • 关于坐标：

    • x轴：正值往右，负值往左。
    • y轴：正值向下，负值向上。

  • 变形属性：transform:value

    • none，默认值，无变形。
    • 剩下的就是一个一个的变形方法。

  • 变形方法：

    • translatex()，沿元素自身的x轴移动元素。

      • px，像素
      • %，相对于自身的宽度来计算（内容区、边框、内边距）。

    • translatey()，沿着自身的y轴移动元素。

      • px，像素

      • %，相对于自身的高度来计算（内容区、边框、内边距）。

      transform在写后面的变形的方法的时候可以写多个。

      transform:translatex(100%) translatey(100%);

      • 多个变形方法一个接一个，中间以空格分开。
      • 多个变形方法一次只处理一个。
      • 多个变形方法你要保证都写对一个错，整个规则都将失效。

      我们可以使用transform:translateX(50%) translateY(50%)来实现垂直、水平居中，它适合不确定自身有多少的时候使用，因为translateX和Y都是相对于自身的宽、高来进行计算的。

      <!DOCTYPE html>
<html>

<head>
    <style>
        img {
            position: absolute;
            top: 50%;
            /* margin-top: -191.5px; */

            left: 50%;
            /*  margin-left: -450px; */
            transform: translateX(-50%) translateY(-50%);
        }
    </style>
</head>

<body>
    <img src="./shigong.jpg" alt="">
</body>

</html>

    • translate(x,y)同时沿着x轴及y轴来进行移动。

      只写一个值的时候y不写的时那么默认是0。

    • scaleX()，在x轴上进行缩放

    • scaley()，在y轴上进行缩放

      它们的值只能是没有单位的数，始终为正数，可以为小数。意思是宽度或高度的倍数。

      经过变形的元素右可能比以前大、有可能比以前小，但是元素在页面上所占的空间与变形之前保持不变。

    • scale()，在x轴和y轴上同时缩放。

      只写一个值将会同时应用在x轴和y轴上。写两个值的时候第一个值给到x第二个值给到y。

    • skewx()，元素在水平方向扭曲，正数的时候元素的左上角和右下角会被’拉扯’。为负数的时候元素的右上角和左下角会被拉扯。

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D1bEGhcj-1626946116541)(/Volumes/尚硅谷前端/笔记/13/笔记、代码/20210314210826634_32019.png)]

    • skewy()，元素在垂直方向扭曲。值为正数左上角和右下角被拉扯。值为负数的时右上角和左下角被拉扯。

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bDoYVobt-1626946116543)(/Volumes/尚硅谷前端/笔记/13/笔记、代码/20210314210842406_28810.png)]

    • rotateZ()、rotate()，沿着z轴旋转指定的角度。

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ply0u6Ct-1626946116545)(/Volumes/尚硅谷前端/笔记/13/笔记、代码/20210314210909608_17006.png)]

      旋转角度之后会修改x轴和y轴的坐标位置。

      一定要注意先后位置。

      <!DOCTYPE html>
<html>

<head>
    <style>
        div {
            width: 200px;
            padding: 10px;
            border: 10px;
            margin: 100px;
            height: 200px;
            background-color: yellow;
        }

        body:hover div {
            /* 先移动，然后再旋转（旋转的时候会修改x和y的坐标） */
            /* transform: translateX(300px) rotate(45deg) ; */
            /* 先旋转，然后再移动（你现在移动的位置是按照旋转之后的x和y在进行移动） */
            transform: rotate(45deg) translateX(300px);
        }
    </style>
</head>

<body>
    <div>z</div>

</body>

</html>

    • 移动原点

      默认时变形都以元素的绝对中心作为变形的旋转，当使用transform-origin可以更改原点的位置。

      transform-origin:value

      值可以分为两个，第一个横向，第二个纵向的。他们相交的点就是移动的原点。

动画

过渡：在一段时间内把某种状态变为另外一种状态。

CSS动画和过渡相同点就是都是在一段时间内发生变化，不同点：动画对变化的方式有更大的控制权，过渡从某种程度上来说只不过是一种简单的动画。

使用步骤：

  1. 定义关键帧
  2. 在元素上使用
  3. 指定动画持续的时间

  • 定义关键帧

    需要定义一个规则这个规则要有一个名字。正常规则是可以重复使用的。

    格式：

    @keyframes 规则名{
}

    在这个规则中要有一个或多个关键帧块，每个关键帧的块包括关键帧选择符（就是动画持续的时间点）、属性、值。有多个关键帧块组成了一个完整的动画。

    @keyframes test{
	0%{
		property1:value1;
	}
	100%{
		property2:value2;
	}
}
    • 0%，100%表示动画播放到0%和100%分别希望某个元素的属性值为什么。
    • 75%，表示动画进行到75%的时候的值。你也可以使用其他的百分比。

  • 在元素上使用动画

    animation-name:value

    • none，没有规则名表示没有动画效果。
    • 写上规则名

  • 设定动画的持续时间

    animation-duration:value

    持续时间必须带上单位s或ms。

    注意：

    1. 如果没有写0%或100%的时，它将使用要应用动画效果属性的原始值自动构建 0%和100%。

      <!DOCTYPE html>
<html>

<head>
    <style>
        div {
            border: 1px solid green;
            width: 100px;
            height: 100px;
            animation-name: test;
            animation-duration: 5s;
            background-color:red;
        }

        @keyframes test {
            0%{
            	background-color:red;
            }
            50% {
                 background-color:green;
            }
            100%{
            	backtorund-color:red;
            }

        }
    </style>
</head>

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

</html>

    2. 0%和100%也可以使用关键字：from和to

    3. 关键帧块的百分比不必按照升序来排列。

    4. 如果你在关键帧块中列出来的属性不支持动画那么将会被直接忽略。

  • 多动画

    animation-name:规则1,规则2....

    如果使用了多个规则那么animation-duraction:时间1,时间2...

  • 延迟播放动画

    animation-delay:value

    默认情况下，动画附加到元素上的时候就开始进行播放没有延迟。我们使用animation-delay来进行延迟。只是延迟进行第一次的动画。

    多次执行动画时，如果每次都需要有延迟可以使用动画相关的JS事件来实现。

  • 动画的迭代次数

    默认的时候只播放一次。

    animation-iteration-count:value

    • 1，默认值。
    • 任何数字，但是不允许设置为负数。
    • infinite，无穷。

  • 设置动画的播放方向

    animation-direction用来定义什么方向播放动画。

    • normal，默认值，动画的每次迭代都从0%向100%播放。
    • reverse，逆序播放，从100%向0%播放。
    • alternate，动画在奇数次正向（0%100%），在偶数次反向播放（100%0%）。
    • alternate-reverse，动画在奇数次反向播放，在偶数次是正向播放。

  • 改变动画的内部时序

    animation-timing-function，用来改变动画的内部时序。

    • ease，慢-》快-》慢
    • linear，匀速。
    • 其他的参考transition-timing-function的值。

    __animation-timing-function__定义的是在每个关键帧块中执行的节奏。

第十四天

关键帧动画

animation-timing-function有一个值step(步数)指的是步进的时序方式。

步数：必须是正数，将动画时长分为步数对应的段数。

使用steps()时，属性是连续不断滑入的（这里面没有过渡，直接就到了某个阶段）

简写格式

格式： animation:name duration timing-function delay iteration-count direction

默认值：

  • durcation:0s
  • timing-function,ease
  • delay，0s
  • iteration-count，1
  • direction，normal。
百分比布局的方式（原始的布局方法）

  1. 左侧固定右侧自适应

    1. aboluste方法。

      <!DOCTYPE html>
<html>

<head>
    <style>
        html,
        body {
            margin: 0;
            height: 100%;
        }

        #content {
            position: relative;
            width: 100%;
            height: 100%;

            background-color: lavender;
        }

        #left {
            position: absolute;
            z-index: 1;
            width: 300px;
            height: 100%;
            background-color: red;
        }

        #right {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: lawngreen;

            /* 把内容顶出来 */
            margin-left: 300px;
        }
    </style>
</head>

<body>
    <div id="content">
        <div id="left">这里是左边</div>
        <div id="right">1这里是右边红伞伞白杆杆吃了一起躺板板这里是右边红伞伞白杆杆吃了一起躺板板这里是右边红伞伞白杆杆吃了一起躺板板这里是右边红伞伞白杆杆吃了一起躺板板</div>
    </div>
</body>

</html>

    2. float方法

      你要先理解：两个float的元素，设置元素的margin为负数，他们是可以重叠的。

      <!DOCTYPE html>
<html>

<head>
    <style>
        html,
        body {
            margin: 0;
            height: 100%;
        }

        div#one {
            float: left;
            width: 300px;
            height: 200px;
            background-color: yellow;
        }

        div#two {

            margin-left:-10px;
            float: left;
            width: 100px;
            height: 190px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="one"></div>
    <div id="two"></div>
</body>

</html>

      前面的例子margin-left:-100%，百分比表示的是父元素的宽度。float中有一个规则：浮动元素必须尽可能的高的放置，但是规范上又没有说这种情况具体应该怎么处理。浏览器对于这种情况，会紧挨着父元素的左边或右边、顶边。

  2. 三列布局

    1. 双飞翼布局

      步骤：

      1. #middle,#left,#right都浮动
      2. 将#left使用margin-left:-100%拉倒了最左边。
      3. 将#right使用margin-left:-200px拉倒的最右边。
      4. 在#c中设置左右外边距是200px，使用横向格式化的公式自动去计算width的值。（让内容不被遮挡）
      <!DOCTYPE html>
<html>

<head>
    <style>
        html,
        body {
            margin: 0;
            height: 100%;
        }

        #content {
            width: 100%;
            height: 100%;
            background-color: yellowgreen;
        }

        #middle {
            float: left;
            width: 100%;
            height: 100%;
            background-color: pink;
        }

        #left {
            width: 200px;
            height: 100%;
            background-color: yellow;
            float: left;
            margin-left: -100%;
        }

        #right {
            width: 200px;
            height: 100%;
            background-color: green;
            float: left;
            margin-left: -200px;
        }

        #content #c {
            height: 100%;
            background-color: indianred;
            /* 依然利用了横向布局规则宽度为auto自动计算 */
            margin-left: 200px;
            margin-right: 200px;
        }
    </style>
</head>

<body>
    <div id="content">
        <div id="middle">
            <div id="c">1这里是右边红伞伞白杆杆吃了一起躺板板这里是右边红伞伞白杆杆吃了一起躺板板这里是右边红伞伞白杆杆吃了一起躺板板这里是右边红伞伞白杆杆吃了一起躺板板@@</div>
        </div>
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>

</html>

    2. 圣杯布局

      <!DOCTYPE html>
<html>

<head>
    <style>
        html,
        body {
            margin: 0;
            height: 100%;
        }

        #content {
            min-width: 400px;
            height: 100%;
            background-color: red;

            /* 主要步骤1 */
            padding-left: 200px;
            padding-right: 200px;
        }

        #middle {
            float: left;
            width: 100%;
            height: 100%;
            background-color: pink;
        }

        #left {
            float: left;
            width: 200px;
            height: 100%;
            background-color: indianred;

            margin-left: -100%;

            /* 主要步骤2 */
            position: relative;
            left: -200px;
        }

        #right {
            float: left;
            width: 200px;
            height: 100%;
            background-color: greenyellow;

            margin-left: -200px;

            /* 主要步骤3 */
            position: relative;
            right: -200px;
        }
    </style>
</head>

<body>
    <div id="content">
        <div id="middle">
            1这里是右边红伞伞白杆杆吃了一起躺板板这里是右边红伞伞白杆杆吃了一起躺板板这里是右边红伞伞白杆杆吃了一起躺板板这里是右边红伞伞白杆杆吃了一起躺板板@@
        </div>
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>

</html>

第十五天

弹性盒布局

弹性布局、弹性盒子、flex布局、伸缩布局、伸缩盒子。

弹性盒子是一种简单、强大的布局方式。

有了它之后可以指明空间的分布方式、内容的对齐方式、元素的视觉顺序。弹性盒子最适合沿着一个方向布置内容。

它的突出特点就是能让元素对不同的屏幕尺寸不同的显示设备做好适应准备。

弹性布局是父元素和子元素之间的关系。

父元素：弹性空间或弹性容器。

子元素：弹性项、弹性元素。

弹性容器

关于弹性容器的属性比较多，大多数用的都是给弹性容器设置的。

在父元素上声明display:flex便激活了弹性盒子布局，弹性容器负责所占空间内的子元素如何排布。

当父元素小于子元素的总宽度的时候将会被自动压缩。

弹性元素

弹性容器的子元素称为弹性元素（只有直接子元素使用弹性盒子布局，子元素的后代不受影响。）

在弹性容器中，各个弹性元素在主轴上面排列，主轴可以横向的可以是纵向的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KZrmThUf-1626946116546)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/20210315222002820_11131.png)]

主轴：内容都沿着主轴的方向流动。默认主轴是水平方向，从左边开始、右边结束。

垂直轴：交叉轴、侧轴、辅轴：弹性元素沿着这个轴的方向指明弹性元素行的方向（垂直轴永远和主轴垂直）。默认的时候垂直轴是从上面开始、下面结束。

设置主轴的方向

flex-direction用来指定在弹性容器中如何摆放元素。定义它就决定了一行中的弹性元素如何排列。从主轴的起始边开始、流向主轴的结束边。

  • row，默认值，主轴的起始边在弹性容器左边，结束边在弹性容器右边。（__样式上类似__于float:left）

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XFpPE5UX-1626946116547)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714092553087.png)]

  • row-reverse，主轴的起始边从弹性容器的右边开始，结束边在弹性容器的左边。（__样式上类似__于float:right）

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-crlmkCQN-1626946116553)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714092730825.png)]

  • column，主轴起始边在上面，结束边在下面。交叉轴变为横向从左边开始右边结束。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NjHWRI9u-1626946116554)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714093024874.png)]

    • column-reverse：主轴的起始边在下边，结束边在上边。交叉轴变为横向从左边开始右边结束。
换行

弹性元素在弹性容器的主轴放不下的时候，默认是不会换行的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FZHBYRWD-1626946116560)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714093655335.png)]

格式： flex-wrap，用来控制换行（用在弹性容器）

  • nowrap，默认时都会沿着主轴在一行上面排列，不会换行。

  • wrap，如果超过弹性容器，将会沿着垂直轴的方向进行换行。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d5yk8ia1-1626946116561)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714094024753.png)]

  • wrap-reverse，如果超过弹性容器，将会沿着垂直轴的反方向进行换行。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dy5YIeRU-1626946116562)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714101525249.png)]

设置弹性元素如何在主轴上分布

默认的时候弹性容器放下全部的弹性元素的时候留下的空白始终现在主轴的结束方向。

可以使用justify-content属性来设置弹性容器在主轴上如何分布各行的弹性元素。

  • flex-start，默认值，弹性元素紧靠主轴的起始边。

  • flex-end，弹性元素紧靠主轴的结束边（有点像text-algin:right）

  • center，将弹性元素作为一个整体，居中显示在主轴。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cTzSN964-1626946116563)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714102119479.png)]

  • space-between，between（在xxx中间）

    每一行的第一个元素放在主轴起始边，最后一个元素放在主轴结束边，剩下相邻的每一对弹性元素之间放置等量的空白。

    空白距离/(元素个数减一) = 相邻之间相差多少。

    <!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            border: 2px solid pink;
            display: flex;
            width: 700px;
            /* justify-content: flex-end; */
            /* justify-content: center; */
            justify-content: space-between;
        }

        #f>div {
            width: 100px;
            height: 100px;
        }

        #f>div:nth-of-type(1) {
            background-color: red;
        }

        #f>div:nth-of-type(2) {
            background-color: green;
        }

        #f>div:nth-of-type(3) {
            background-color: skyblue;
        }

        #f>div:nth-of-type(4) {
            background-color: blue;
        }

        #f>div:nth-of-type(5) {
            background-color: teal;
        }

        #f>div:nth-of-type(6) {
            background-color: #BFC;
        }
    </style>
</head>

<body>
    <div id="f">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>

</html>

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LW05lVVM-1626946116564)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714102231987.png)]

  • space-around，around（环绕）

    把剩下的空间除以该行的弹性元素的个数，每份空间分给元素的两边。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QnYzD3AN-1626946116566)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714102841168.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BJrWbXfo-1626946116566)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714102254100.png)]

  • space-evenly，计算元素总数量，然后在此基础上+1，然后将一行里面的空间分成这面多份，每一行的一个弹性元素的前面放置一份空间，最后一份放置在最后一个弹性元素后面。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nkbHxK04-1626946116568)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714103202167.png)]

    justify-content，即使一行放不下，然后换行了，也会在新开的行上面按照指定的值进行排列。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZyzNVDa5-1626946116569)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714103622170.png)]

设置弹性元素如何在垂直轴上面分布

align-items属性定义的是弹性元素在垂直方向上的对齐方式（在当前行垂直上面的位置分布）

  • flex-start，将各个弹性元素与弹性容器的垂直轴起始边一侧对齐。

  • flex-end，将各个弹性元素与弹性容器的垂直轴结束边一侧对齐。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u97AIunr-1626946116570)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714104119297.png)]

  • center，每一行的弹性元素垂直居中于本行。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p05CWhkS-1626946116571)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714104229506.png)]

  • stretch（默认值），如果弹性元素没有设置高度或高度为auto，将铺满本行的所有高度。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xHRjsL7p-1626946116572)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714104347330.png)]

如果想单独的去修改某个弹性元素的对齐方式，可以在相应的弹性元素上使用align-self属性。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QKWkrkKo-1626946116573)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714104721774.png)]

align-self：value，用在弹性元素上，设置自己垂直对齐的方式。

  • auto，默认值。继承容器的align-items。
  • flex-start，垂直轴起始边对齐。
  • flex-end，垂直轴结束边对齐。
  • center，每一行垂直居中。
  • stretch，没设置高度或高度为auto，占满本行高度。
设置整个弹性元素如何对齐

align-items是每行如何垂直对齐。align-content将整个弹性元素看成一个整体然后对齐。

align-content属性对于单行的弹性盒子模型无效必须让其换行（也就是flex-wrap:nowrap是不行的）

  • flex-start，垂直方向整体靠垂直轴起始边。
  • flext-end，垂直方向整体靠垂直轴结束边。
  • center，看成一个整体，垂直居中。
  • space-between，把第一行里的弹性元素放在垂直轴起始边，最后一行里面的弹性元素放在垂直轴结束边。然后余下的每一行弹性元素之间放置等量的空白。
  • space-around，将余下的空间除以行数的个数，得到每行应该分配到的空间，然后将这个空间分成两份。
  • space-evenly，计算行数，然后+1，就容器的空间分成那么多份。每一行前面放置一份空间，最后一份放置在最后一行的后面。
  • stretch，直接撑满本行高度。

align-content和align-items都存在时，align-items失效。

align-content、align-items区别在于：align-content将所有弹性元素看成一个整体进行操作。align-items是针对每一行的操作。

弹性增长因子

flex-grow，适用于弹性元素（子元素上使用），用来定义有多余的空间时是否允许弹性元素增大，以及增大的比例是什么。

默认是0，其他的时候始终是数字，负数无效。可以是小数。

<!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            border: 2px solid pink;
            display: flex;
            width: 750px;
            height: 100px;
        }

        #f>div {
            width: 100px;
            height: 100px;
        }

        #f>div:nth-of-type(1) {
            background-color: red;
        }

        #f>div:nth-of-type(2) {
            background-color: green;
        }

        #f>div:nth-of-type(3) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div id="f">
        <div>1</div>
        <!-- 将剩下的空间450px分成了一份给2这个div -->
        <!-- 分配了之后将自身设置的100的宽度给覆盖掉了。 -->
        <div style="flex-grow:1;">2</div>
        <div>3</div>
    </div>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            border: 2px solid pink;
            display: flex;
            width: 750px;
            height: 100px;
        }

        #f>div {
            width: 100px;
            height: 100px;
        }

        #f>div:nth-of-type(1) {
            background-color: red;
        }

        #f>div:nth-of-type(2) {
            background-color: green;
        }

        #f>div:nth-of-type(3) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div id="f">
        <!-- 总共是2.5份  也就是将剩余的450分成了2.5份 -->
        <!-- 0.8/2.5*450 + 100-->
        <div style="flex-grow:0.8;">1</div>
        <!-- 1/2.5*450+100 -->
        <div style="flex-grow:1">2</div>
        <!-- 0.7/2.5*450+100 -->
        <div style="flex-grow:0.7">3</div>
    </div>
</body>

</html>

一般来说我们使用flex-grow用来实现等分。

<!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            border: 2px solid pink;
            display: flex;
            width: 750px;
            height: 100px;
        }

        #f>div {
            width: 100px;
            height: 100px;
            flex-grow: 1;
        }

        #f>div:nth-of-type(1) {
            background-color: red;
        }

        #f>div:nth-of-type(2) {
            background-color: green;
        }

        #f>div:nth-of-type(3) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div id="f">
        <div>1</div>

        <div>2</div>

        <div>3</div>
    </div>
</body>

</html>
弹性元素排序

默认的时候弹性元素的显示和排列顺序和在源码中的顺序一致。

order：用于弹性元素。默认的时候弹性元素的顺序都是0。

你可以修改这个值，可以把order改为正数或负数。

order的值越大显示在主轴上越靠后。如果数值相同归在一个排序组中，以源码出现的顺序沿主轴方向显示。

<!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            border: 2px solid pink;
            display: flex;
        }

        #f>div {
            width: 100px;
            height: 100px;
        }

        #f>div:nth-of-type(1) {
            background-color: red;
        }

        #f>div:nth-of-type(2) {
            order:1;
            background-color: green;
        }

        #f>div:nth-of-type(3) {
            background-color: skyblue;
        }

        #f>div:nth-of-type(4) {
            background-color: blue;
        }

        #f>div:nth-of-type(5) {
            background-color: teal;
            align-self: flex-end;
        }

        #f>div:nth-of-type(6) {
            background-color: #BFC;
            order:-1;
        }
    </style>
</head>

<body>
    <div id="f">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>

</html>

order，只是视觉上的变化，在源代码中的顺序没有（但是就好像改变了一样）。

缩减因子

默认的时候宽度之和大于容器会发生收缩，收缩的依据是flex-shrink，并且flex元素压缩的最小宽度不能小于其中内容的宽度。

flex-shrink:value，也是适用于弹性元素。它用来表示如何分配缺少的空间。

缩减因子定义的是空间不够放置所有弹性元素并且元素容器不能增加尺寸并且不允许换行。

默认的时候分配的值是1，其他的时候始终是数字，可以是小数。不能是负数。

<!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            border: 2px solid pink;
            display: flex;
            width: 750px;
        }

        #f>div {
            /* 总共放下要900这个时候只有750px所以少150px */
            width: 300px;
            height: 100px;
            /* 这里设置为0表示的是即使超出了也不压缩 */
            /* flex-shrink: 0; */


            /* 这里默认是1，把缺少的150px分成了3份，每一份是50，就得元素每一个都得拿50px */
            /* flex-shrink: 1; */
        }

        #f>div:nth-of-type(1) {
            background-color: red;
        }

        #f>div:nth-of-type(2) {
            background-color: green;
        }

        #f>div:nth-of-type(3) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div id="f">
        <!-- 150分成了2.5 -->
        <!-- 300-0.7/2.5*150 -->
        <div style="flex-shrink:0.7;">1</div>
        <!-- 300-0.8/2.5*150 -->
        <div style="flex-shrink: 0.8;">2</div>
        <!-- 300-1/2.5*150 -->
        <div style="flex-shrink: 1;">3</div>
    </div>
</body>

</html>
BFC

块级格式化上下文（block-formatting-context），是web页面的可视化的CSS渲染出的一部分。形成了BFC就形成了一个独立区域，区域里面的子元素不会影响到外面的元素。

形成BFC的方法：

  1. 浮动元素：元素的float不是none的元素。
  2. 绝对定位的元素：poistion的值为absolute或fixed。
  3. 内联块：display:inline-block
  4. 具有overflow属性并且值不是visible的元素。
  5. display为flow-root的值。（只是单纯的触发BFC）

1、2、3、4都可以形成BFC但是要加上自己的特性。float触发了BFC还得浮动、poistion触发了BFC还得定位、display:inline-block触发了BFC还得变成行内块状元素、overflow:hidden除了触发BFC还得隐藏。

display:flow-root只是单纯的触发BFC

形成了BFC之后用来做什么：

  1. 爸爸管儿子，让爸爸能够包裹住儿子（父元素上使用），来爸爸抱抱。

    解决float高度塌陷。

    <!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            display: flow-root;
            width: 500px;
            border: 1px solid green;
        }

        #z {
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <div id="f">
        <div id="z"></div>
    </div>
</body>

</html>

    解决父子之间的margin合并问题。

    <!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            background-color: yellow;
            /* border: 1px solid green; */
            /* display: flow-root; */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="f">
        <h1>闫海静真英俊！</h1>
    </div>
</body>

</html>

  2. 兄弟之间划清界限（子元素上使用）

    兄弟元素之间上下折叠问题

    解决float块状元素重叠，行内元素不重叠问题

    <!DOCTYPE html><html><head>    <style>        img {            float: left;        }        #f>div {            border: 1px solid green;            display: flow-root;        }    </style></head><body>    <div id="f">        <img src="./1117.jpg" alt="">        <div>123456</div>    </div></body></html>

    是什么-》怎么形成的-》干什么用的。

居中方法（水平、垂直）

  1. 内联元素水平居中

    text-align:center，对元素（块状元素、行内块状元素）中的inline、inline-block有效。

    <!DOCTYPE html><html><head>    <style>        #f {            display: inline-block;            width: 500px;            height: 500px;            border: 1px solid green;            text-align: center;        }    </style></head><body>    <div id="f">        <!-- 闫海静真英俊！ -->        <img src="./1117.jpg" alt="">    </div></body></html>

  2. 块级元素水平居中（子元素添加margin）

    <!DOCTYPE html><html><head>    <style>        #f {            margin:0 auto;            width: 500px;            height: 500px;            border: 1px solid green;            text-align: center;        }    </style></head><body>    <div id="f">        <!-- 闫海静真英俊！ -->        <img src="./1117.jpg" alt="">    </div></body></html>

  3. 使用flex实现inline、inline-block、block水平居中（父元素中添加）

    <!DOCTYPE html><html><head>    <style>        body {            display: flex;            justify-content: center;        }        #f {            width: 500px;            height: 500px;            border: 1px solid green;            text-align: center;        }    </style></head><body>    <!-- <div id="f">        闫海静真英俊！    </div> -->    <!-- <img src="./1117.jpg" alt=""> -->    闫海静真英俊！</body></html>

  4. 定位实现水平居中（块元素）

    <!DOCTYPE html><html><head>    <style>        #f {            position: relative;            width: 500px;            height: 500px;            border: 1px solid green;        }        #f>#z {            position: absolute;            left: 50%;            margin-left: -51px;            width: 100px;            height: 100px;            border: 1px solid green;        }    </style></head><body>    <div id="f">        <div id="z"></div>    </div></body></html>

  5. transform实现水平居中

    <!DOCTYPE html><html><head>    <style>        #f {            position: relative;            width: 500px;            height: 500px;            border: 1px solid green;        }        #f>#z {            position: absolute;            left: 50%;            transform: translateX(-50%);            width: 100px;            height: 100px;            border: 1px solid green;        }    </style></head><body>    <div id="f">        <div id="z"></div>    </div></body></html>

  6. 单行文本垂直居中

    line-height=height

  7. 多行文本垂直居中

    <!DOCTYPE html><html><head>    <style>        #f {            width: 500px;            height: 500px;            /* 1.移动基线 */            line-height: 500px;            border: 1px solid green;        }        #f>span {            /* 2. 变成行内块状元素 */            display: inline-block;            /* 3. 默认行高会继承 */            line-height: normal;            /* 4. 让其和父元素的x的1/2处对齐 */            vertical-align: middle;        }    </style></head><body>    <div id="f">        <span>闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊</span>    </div></body></html>

  8. 块状元素垂直居中（poistion）

    <!DOCTYPE html><html><head>    <style>        #f {            position: relative;            width: 500px;            height: 500px;            border: 1px solid green;        }        #f>#z {            position: absolute;            top: 50%;            margin-top: -51px;            width: 100px;            height: 100px;            border: 1px solid green;        }    </style></head><body>    <div id="f">        <div id="z"></div>    </div></body></html>

  9. 块状元素垂直居中（transform:translatey()）

    <!DOCTYPE html><html><head>    <style>        #f {            position: relative;            width: 500px;            height: 500px;            border: 1px solid green;        }        #f>#z {            position: absolute;            top: 50%;            transform: translateY(-50%);            width: 100px;            height: 100px;            border: 1px solid green;        }    </style></head><body>    <div id="f">        <div id="z"></div>    </div></body></html>

  10. 块状元素、行内元素、行内块状元素垂直居中（flex，align-items:center）

    <!DOCTYPE html><html><head>    <style>        #f {            width: 500px;            height: 500px;            border: 1px solid green;            display: flex;            align-items: center;        }    </style></head><body>    <div id="f">        闫海静真英俊！    </div></body></html>

  11. display:table-cell

    <!DOCTYPE html><html><head>    <style>        #f {            /*对应的就是html中的th、td*/            display: table-cell;            width: 500px;            height: 500px;            border: 1px solid green;            vertical-align: middle;            text-align: center;        }    </style></head><body>    <div id="f">        闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊        <!-- 闫海静比李培华英俊！ -->    </div></body></html>

l>


是什么-》怎么形成的-》干什么用的。

#### 居中方法（水平、垂直）

1. 内联元素水平居中

`text-align:center`，对元素（块状元素、行内块状元素）中的inline、inline-block有效。

```html
<!DOCTYPE html><html><head>    <style>        #f {            display: inline-block;            width: 500px;            height: 500px;            border: 1px solid green;            text-align: center;        }    </style></head><body>    <div id="f">        <!-- 闫海静真英俊！ -->        <img src="./1117.jpg" alt="">    </div></body></html>

  1. 块级元素水平居中（子元素添加margin）

    <!DOCTYPE html><html><head>    <style>        #f {            margin:0 auto;            width: 500px;            height: 500px;            border: 1px solid green;            text-align: center;        }    </style></head><body>    <div id="f">        <!-- 闫海静真英俊！ -->        <img src="./1117.jpg" alt="">    </div></body></html>

  2. 使用flex实现inline、inline-block、block水平居中（父元素中添加）

    <!DOCTYPE html><html><head>    <style>        body {            display: flex;            justify-content: center;        }        #f {            width: 500px;            height: 500px;            border: 1px solid green;            text-align: center;        }    </style></head><body>    <!-- <div id="f">        闫海静真英俊！    </div> -->    <!-- <img src="./1117.jpg" alt=""> -->    闫海静真英俊！</body></html>

  3. 定位实现水平居中（块元素）

    <!DOCTYPE html><html><head>    <style>        #f {            position: relative;            width: 500px;            height: 500px;            border: 1px solid green;        }        #f>#z {            position: absolute;            left: 50%;            margin-left: -51px;            width: 100px;            height: 100px;            border: 1px solid green;        }    </style></head><body>    <div id="f">        <div id="z"></div>    </div></body></html>

  4. transform实现水平居中

    <!DOCTYPE html><html><head>    <style>        #f {            position: relative;            width: 500px;            height: 500px;            border: 1px solid green;        }        #f>#z {            position: absolute;            left: 50%;            transform: translateX(-50%);            width: 100px;            height: 100px;            border: 1px solid green;        }    </style></head><body>    <div id="f">        <div id="z"></div>    </div></body></html>

  5. 单行文本垂直居中

    line-height=height

  6. 多行文本垂直居中

    <!DOCTYPE html><html><head>    <style>        #f {            width: 500px;            height: 500px;            /* 1.移动基线 */            line-height: 500px;            border: 1px solid green;        }        #f>span {            /* 2. 变成行内块状元素 */            display: inline-block;            /* 3. 默认行高会继承 */            line-height: normal;            /* 4. 让其和父元素的x的1/2处对齐 */            vertical-align: middle;        }    </style></head><body>    <div id="f">        <span>闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊</span>    </div></body></html>

  7. 块状元素垂直居中（poistion）

    <!DOCTYPE html><html><head>    <style>        #f {            position: relative;            width: 500px;            height: 500px;            border: 1px solid green;        }        #f>#z {            position: absolute;            top: 50%;            margin-top: -51px;            width: 100px;            height: 100px;            border: 1px solid green;        }    </style></head><body>    <div id="f">        <div id="z"></div>    </div></body></html>

  8. 块状元素垂直居中（transform:translatey()）

    <!DOCTYPE html><html><head>    <style>        #f {            position: relative;            width: 500px;            height: 500px;            border: 1px solid green;        }        #f>#z {            position: absolute;            top: 50%;            transform: translateY(-50%);            width: 100px;            height: 100px;            border: 1px solid green;        }    </style></head><body>    <div id="f">        <div id="z"></div>    </div></body></html>

  9. 块状元素、行内元素、行内块状元素垂直居中（flex，align-items:center）

    <!DOCTYPE html><html><head>    <style>        #f {            width: 500px;            height: 500px;            border: 1px solid green;            display: flex;            align-items: center;        }    </style></head><body>    <div id="f">        闫海静真英俊！    </div></body></html>

  10. display:table-cell

    <!DOCTYPE html><html><head>    <style>        #f {            /*对应的就是html中的th、td*/            display: table-cell;            width: 500px;            height: 500px;            border: 1px solid green;            vertical-align: middle;            text-align: center;        }    </style></head><body>    <div id="f">        闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊闫海静真英俊        <!-- 闫海静比李培华英俊！ -->    </div></body></html>
周与墨i
关注
尚硅谷web前端HTML5+CSS3笔记
qq_52380174的博客
12-19 4545
HTML/CSS笔记#自用#尚硅谷#李立超
h5(html5)+css3+移动端前端
weixin_58997863的博客
07-12 6621
h5(html5)+css3+移动端前端 知识点详细总结
总结H5+CSS3笔记
Xiao_nan1110的博客
08-19 505
总结H5+CSS3笔记 animation，弹性布局flex，CSS3动画
web学习---H5与CSS3、动画---笔记
IOSSHAN的博客
06-07 365
HTML5添加了很多新的标签 比如video标签，可以播放视频 其中，有些属性： 例如： <video src="video/RPReplay_Final1643010740.MP4" autoplay="autoplay" muted="muted"></video> HTML5新加的input类型：
HTML5+CSS3学习笔记3
xiaohua307的博客
02-17 293
伸缩盒子旧->弹性盒子模型 1.display：box开启盒子模型 2.box-orient排列方式 horizontal水平排列 vertical垂直排列 3.box-pack水平对齐方式 start左 center中 end右 4.box-align垂直对齐方式 start上 center中 end下 5.box-flex分配剩余空间 按等分进行分配，可以为小数 6.box-flex-group 分组 ...
HTML5+CSS3笔记
qq_61368886的博客
12-08 1001
小龙的学习笔记！
Html5 + Css3笔记详细汇总大全
weixin_50637054的博客
04-10 6737
Html5 + Css3笔记详细汇总大全
H5+CSS学习资料+笔记+项目资料
07-13
本资料包是针对H5和CSS3的学习资源集合，旨在帮助初学者快速入门并逐步提升技能。 HTML5是超文本标记语言的最新版本，它在HTML4的基础上做了很多改进和扩展。其中一些重要的知识点包括： 1. **新标签**：HTML5引入...
H5+CSS3社交媒体头像卡片特效.zip
最新发布
10-08
【标题】"H5+CSS3社交媒体头像卡片特效.zip" 涵盖了现代网页设计中的关键元素，即HTML5和CSS3技术的应用。HTML5是超文本标记语言的最新版本，它提供了许多增强用户体验的新特性，如语义化标签、离线存储、媒体元素等...
HTML+CSS+Javascript+H5C3+响应式web设计+Bootstrap--思维导图
04-08
内容概要：思维导图涵盖知识包括HTML+CSS+Javascript+H5C3+响应式web设计+Bootstrap，每个模块包括基础知识点，还有一些注意点，介绍仔细，某些知识点会有图解，代码，以及本人学习过程的笔记。 适合人群： 比较...
尚硅谷-html5
07-15
尚硅谷前端HTML5视频_HTML内容涵盖HTML基础、标签、CSS 选择器、盒子模型、浮动、定位、图片整合、PS 切图等页面相关常用技术。 视频最后包含一个实战项目：将一个 PSD 设计图转换为一个商业网站的首页。让同学们体验前端页面开发的全过程。
力扣1854. 人口最多的年份（差分）
BJERGSEN的博客
08-31 3167
class Solution: def maximumPopulation(self, logs: List[List[int]]) -> int: nums = [0]*101 for birth,death in logs: nums[birth-1950]+=1 nums[death-1950]-=1 for i in range(1,101): nums[i]+=n.
Django接口文档的生成
热门推荐
weixin_44140557的博客
06-30 1万+
Django接口文档两种生成方法 一.django-rest_framework风格接口文档： 1.安装依赖 pip install rest_framework #如果之前有了就跳过这步 pip install coreapi 2.setting.py设置 INSTALLED_APPS = [ ..... 'rest_framework', ] ..... REST_FRAMEWORK = { 'DEFAULT_SCHEMA_CLASS': 'rest_framework.schemas.Au
力扣482. 密钥格式化
BJERGSEN的博客
10-05 1457
482. 密钥格式化 - 力扣（LeetCode） (leetcode-cn.com) class Solution { public String licenseKeyFormatting(String s, int k) { StringBuilder ans = new StringBuilder(); int cnt = 0; for (int i = s.length() - 1; i >= 0; i--) { .
五、二叉树
BJERGSEN的博客
09-28 2309
1. 递归序，每个节点都遍历三遍 public static void f(Node head){ if(head == null){ return; } //1 先序 f(head.left); //2 中序 f(head.right); //3 后序 } 1）先序遍历（头左右）在第一次遍历到节点的时候打印 2）中序遍历（左头右）在第二次遍历到节点的时候打印 3）后序遍历（左右头）在第三次遍历到节点的时候打印...
WiFi、WiMAX、WBMA与3G的比较
jeffcjl的专栏
04-23 3485
第三代移动通信系统（3G）的标准由ITU-R提出，因为其主要工作频段在2000MHz左右，并具有最高速率为2000Kbps的业务才能，一般被称为IMT-2000。3G系统能够满足高速率传输以支撑多媒体业务，它在室内静止环境可达2Mbps、在室内外步行环境可达384Kbps、在室外快速移动环境可达144Kbps。全球主流的3G制式有三种，分离为WCDMA、CDMA2000、TD-SCDMA，目前世界
矩阵的路径最小和 python实现
weixin_44140557的博客
05-19 1万+
矩阵的路径最小和 python实现 数据的算法与结构是每个程序员必须熬过的基础之一，相信大家在解析问题的时候总会迸发灵感想出自己的算法。下面结合算法中的经典问题：矩阵路径和最小，提出问题不同的求解方法，方便初学者更好的理解算法结构以及分析问题的思路。 问题：给定一个矩阵m，从左上角开始每次只能向右或者向下走，最后到达右下角的位置，路径上所有的数字累加起来就是路径和，返回所有路径和中最小的路径和。 方法1：递归寻找所有路径和 （左、上两个方向） 对于这种重复进行操作判断的问题，我们最容易想到的就是递归了，暴
力扣704. 二分查找
BJERGSEN的博客
09-06 550
class Solution: def search(self, nums: List[int], target: int) -> int: left = 0 right = len(nums)-1 while(left<=right): mid = (left+right)//2 if(nums[mid]<target): left = mid+1 .
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】
qq_43754404的博客
01-05 7499
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用，小编自己整理的李立超老师视频的笔记，手打不易，那就望您每年快乐吧。逃） 一、进制 1.十进制（日常使用）： 特点：满10进1 计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 14…19 20 单位数字：10个（0-9） 2.二进制（计算机底层的进制）： 特点：满2进1 计数：0 1 1...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值