H5+CSS3笔记

关于授课（学习）

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

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

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

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

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

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

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

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

当天搞定所学知识点，复习之前知识点。
周四、周日休息时复习前面的知识点。

单标签 `<标签名 />`
双标签  `<标签名 属性1="值1" 属性2="值2".....>要标记出来的内容标签名>`



<html>
  
  <head>head>
  
  <body>body>
html>

head标签中的内容

</code>标签：定义在HTML文档的标题，显示在网页的标题栏上。一个网页中只能有一个标题。 作用： <ol> <li> 显示网页的标题让用户一看就知道网页要表达的意思。 </li> <li> 当在收藏本网页的时候标题会作为默认的内容存在。 </li> <li> 搜索引擎也会用到titile里面的内容。 <pre><code class="prism language-html"><title>“五个一百”上新了，为正能量打call！ |里约奥运会|中国女排_网易政务</title> <title>共庆百年华诞！成都点亮灯光秀献上祝福_腾讯新闻</title> <title>又要涨价！6月28日国内汽柴油价每吨或上调约200元</title> </code></pre> 有些网站会单独的写自己的标题，有些网站它会将格式设置为<code>文章标题-栏目标题-网站名</code>或<code>文章标题|栏目标题|网站名</code> <code><title>李沛华老师的过去|感情故事|破鞋网

字符集

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

发展过程：

美帝国主义发明了电脑，他们要控制电脑。单字节编码ASCII码，只包含英文字母和一些符号。
电脑开始普及，每个国家的人都需要控制电脑。所以商量之后咱们指定自己的一些编码方式ANSI字符集，有各种的编码，中国指定了GB2312和GBK编码。一个汉字占2个字符。
ANSI只能存储自己国家的字符，如果要存储其他的字符怎么办。Unicode字符集，里面有UTF-8、UTF-16编码。UTF-8存储汉字占据3个字节。

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

标签，定义对页面的描述。

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

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

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

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

UTF-8

GBK

GB2312 这些东西是编码。
其他用法
- name属性里面的值是规定好的
  - keywords，用来指定HTML文档的关键字。
  - description，指定网页的描述。
- content属性里面的值是根据name属性的值来写的，自定义的内容。
1. 当name值为keywords时
  
  作用：描述网页中的关键字，给搜索引擎用。
  
  __注意： __
  1. 可以设置多个关键字，每个关键字之间以逗号进行分隔。
  2. 越重要的关键字应该越放在前面。
  编程过程中使用的符号都是英文的。
2. 当name的值为description的时候。
  
  作用：用来设置简短的网页的描述，给搜索引擎用。

其他的头标签

，在里面写一段JavaScript脚本。
，用来写CSS样式。
设置外部文件的链接标志，用来确定本页面和其他文档之间的关系。

body中的内容

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

它有动态效果bgcolor

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

p标签会在每个段落后面加上换行。
标签：定义文字的标题

n指的是数值

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

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

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

语义化的标签

&，加粗文本。

&，斜体文本。

&，文本下划线

&~~，删除线~~

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

__注意： __

第一种只具有显示效果。

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

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

我为啥给搜索引擎看。

搜索引擎中的抓取程序：只认识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中的网页是由一个一个的链接相互连起来的。这种点击可以跳转的东西叫链接。

标签：链接到指定的文档

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

__注意： __

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

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

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

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

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

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

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

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

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

_self，默认值。

_blank，在新窗口打开。

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

分块

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

标记链接

内容

img标签

图像标签

src属性：必须，指向的地址

alt属性：图片不能识别的时候告诉浏览网页的人和搜索引擎这张图片表示什么内容。

width属性：用来设置图像的宽度

height属性：用来设置图像的高度

注意：

如果只是单独设定了宽度或高度，将会进行等比例缩放。

如果同时设定了宽度或高度的时候，图像有可能会失真。

pixel，像素，它不是自然界中的长度单位。px是一种图像中的最小的点。

行内元素和块级元素

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

列表

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

无序列表（没有顺序）

ul标签表示无序列表

ul里面放置一个一个的li标签代表列表的每一项。

ul的子元素必须是li。li里面可以放置其他内容。

有序列表（有顺序）

ol标签表示无序列表

ol里面放置一个一个的li标签代表列表的每一项。

ol的子元素必须是li。li里面可以放置其他内容。

自定义列表，由列表的一项的主题和每一项的具体描述组成。

标签：定义了一个自定义列表。

标签：定义列表项的主题。

标签：描述列表中的项目。

表格

展示数据

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

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

border属性：用来定义边框

width属性：定义表格的宽度

cellspacing属性：单元格与单元格之间的距离。

标题：

表格主体数据：

表格脚注：
注意：

thead、tbody、tfoot中每一行使用tr来表示。

如果说是thead中的行的每个单元格我们使用th来表示

tbody和tfoot中的每一行中的每个单元格使用
标签。

表头：

。
虽然可以省略但是自动会加上的标签：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+要添加光标的位置）

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

完成如下内容

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

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

第三天

内框架

</code>标签：创建包含另外一个文档框架。 <ul> <li> src属性：载入框架时要载入的文档地址。 </li> <li> frameborder属性：规定是否显示边框，1位显示。0不显示。 </li> <li> width属性：用来设置iframe的宽度 </li> <li> height属性：用来设置iframe的高度 </li> <li> name属性：给这个iframe起一个名字。 看见这个名字能让看你代码的人猜出来表示什么。 团队干活。。。 </li> </ul> 外框架标签（<code>frameset</code>）为什么不建议使用，是因为生成外框架标签的HTML文档中不能出现body。 a链接中的target的值可以是<code>_parent</code>，它的意思是在父层HTMl窗口打开。 <h4>表单</h4> 总的纲要：表单：就是用来向服务器传递数据的。 表单：东西多，乱。 <ul> <li> <code><form></code>标签：告诉浏览器这个双标签中包含的内容是表单的内容。 <ul> <li>method属性：提交数据的方法。默认使用get将使用URL的查询字符串来传参，POST将URL和数据分开来进行传输。</li> <li>action属性：告诉浏览器你提交的数据应该提交到哪里去。</li> </ul> </li> <li> <code>input</code>标签：定义输入框，让用户输入内容。 <ul> <li> type属性：定义输入框的类型（根据type的值来配合使用那些属性） <ul> <li> text值，表示一个文本输入框。 <ul> <li> value属性：默认值。 </li> <li> name属性：传递到服务器上的标识。 </li> <li> maxlength属性：表示的是最大的输入字符数。 </li> <li> <code>disabled</code>属性：禁用此输入框。 <code>disabled="disabled"</code>可以简写为<code>disabled</code> </li> <li> <code>readonly</code>属性：表示输入框只读。 <code>readonly="readonly"</code>可以简写为<code>readonly</code> disbaled和readoly都不能改变输入框里面的，那么他们的区别：disabled的输入框的值不会被传递到服务器端，而readyonly的输入框的值虽然也不能更改，但是可以传递到服务器。 </li> </ul> </li> <li> <code>password</code>：表示一个密码框 password输入的密码是明文的，没有经过加密的。 <ul> <li>name属性：传递到服务器端的标识。</li> <li>value属性：用来设置输入框的默认值。</li> </ul> </li> <li> <code>radio</code>，表示一个单选框，只能选择一个。 <ul> <li>name属性：传递到服务器的标识，给单选框分组。</li> <li>value属性：因为用户不能输入某些值，所以我给他指定好选中之后传递到服务器上的值是什么。</li> <li>checked属性：默认选中该单选按钮。</li> </ul> </li> <li> <code>checkbox</code>：复选框，多选框 <ul> <li> name属性：传递到服务器上的标识。 </li> <li> value属性：传递到服务器上的值。 </li> <li> checked属性：默认选中该复选框。 <code>checked="checked"</code>也可以写为<code>checked</code> </li> </ul> </li> <li> <code>file</code>，上传矿。 <ul> <li> name属性：传递到服务器的标识。 </li> <li> multiple属性：用来多文件上传。 <code>multiple="multiple"</code>可以直接写为<code>multiple</code>。 </li> </ul> </li> <li> submit，提交按钮。 <ul> <li>value属性：用来设置按钮显示的值。</li> </ul> </li> <li> image：图像按钮用图片替代submit按钮原来的样式。 <ul> <li>src属性：指明要当做图片按钮的图片所在的位置。</li> <li>width属性：设置图片按钮的宽度</li> <li>height属性：设置图片按钮的高度</li> </ul> </li> <li> reset：重置按钮，重置所有input标签所属的内容。 将会留下默认值。 </li> </ul> </li> <li> label标签：为input标签定义标注。 <ul> <li>for属性：用来和input进行绑定，值为要标注的input输入框的id的值。</li> </ul> label(for属性值) = input(id属性值) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zjsf97V2-1626946116477)(/Volumes/尚硅谷前端/笔记/3/20210216111413434_27255.png)] </li> </ul> </li> <li> select标签：定义一个下拉列表 <ul> <li> name属性：下拉列表叫什么名字，传递给服务器的标识 </li> <li> disabled属性：禁用这个下拉列表。 <code>disabled="disabled"</code>，也可以简写为<code>disabled</code> </li> </ul> </li> <li> option标签：用来定义下拉列表中的每一项。 <ul> <li>value属性：选中后传递给服务器的值。</li> <li>disbaled，将指定的option选择禁用。</li> <li>selected属性：默认选中某一项。</li> </ul> </li> <li> <code><optgroup></code>标签：对option进行分组。 <ul> <li>label属性：说明这个分组的描述。</li> <li>disbaled属性：将整个分组禁用掉。</li> </ul> </li> <li> 多选下拉列表 <ol> <li> multiple属性：是否可以多选。 多选要按ctrl键 </li> <li> size属性：显示几个值。 </li> </ol> </li> <li> textarea，用来输入大段的文字（文本域） <ul> <li>input中type=text用来输入小段文字（不允许出现换行）</li> <li>textarea用来输入大段文字并且其中可以出现换行。</li> <li>textarea标签的默认值放在两个标签之间，没有value属性。</li> <li>name属性：传递给服务器的标识。</li> </ul> </li> <li> <code><button></code>标签：用来表示一个按钮 <ul> <li>type属性：定义按钮的类型：值可以是button，submit、reset。</li> </ul> 我们用button用的最多的场景是在JavaScript中。操作BOM、DOM的时候。<code><button type="button"></code> </li> </ul> <h4>无意义的标签</h4> 这里所说的无意义指的是没有语义。我们用它来进行布局。 <ul> <li>div，无意义的块状元素标签。</li> <li>span，无意义的行内元素标签。</li> </ul> HTML4讲完了。CSS2-》HTML5-》CSS3 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tspFOFNz-1626946116478)(/Volumes/尚硅谷前端/笔记/3/20210216111438594_31713.png)] <h4>CSS</h4> CSS不特殊说明都是重点。 CSS（Cascading style sheet）修饰用的。层叠样式表，主要用来控制网页的样式和布局。 使样式、布局和标记能够分离。 解耦 完全不耦合代表没有关系。（只能是低耦合不能没有耦合） 灵活、容易维护。 <h4>CSS的基本语法</h4> 选择-》改变（改变的是选择的这个东西的属性） <pre><code class="prism language-html">选择器{ 属性1:值1; 属性2:值2; ... 属性:值n; } 选择器{属性1:值1;属性2:值2......} </code></pre> <ul> <li>选择器：告诉浏览器应该将修改后的内容应用到那些元素上面。</li> <li>声明：告诉浏览器如何渲染选择的元素。两部分组成 <ul> <li>属性：属性是cSS预先定义好的，通常这些属性由一个或多个单词组成。</li> <li>值：对应的属性要设置的值。</li> </ul> </li> </ul> __注意： __ <ol> <li>每个声明（属性:值）一对数据后面加上分好。</li> <li>属性名和值不要横着写。</li> </ol> 为了更好实验： <ul> <li>选择器（HTML选择器、标签选择器），将HTML标签名作为选择器来使用。</li> <li><code>font-size:value</code>，设置字体大小，单位<code>px</code></li> <li><code>color:value</code>，设置字体的颜色。</li> </ul> <h4>CSS中的颜色表示</h4> <ol> <li> 十六进制的数字（6位），总共分成3组（红、绿、蓝）。 如果三组中每一组的两个字符都相同那么可以进行简写。 <code>#FF4400</code>可以简写为<code>#f40</code> <code>#AAEEBB</code> 可以简写为<code>#AEB</code> <code>#FF4100</code>不可以简写（三组中所有的每两位字符都要相同） </li> <li> 颜色关键字 </li> <li> rgb颜色值：<code>rgb(红,绿,蓝)</code>，值为0~255之间的值。值越小颜色越深。 </li> <li> rgba颜色值：<code>rgba(红,绿,蓝,透明度)</code>，透明度在0~1之间。0位完全透明。可以使用.n来表示透明度。 </li> </ol> <h4>CSS的使用方式</h4> <ul> <li> 内联方式（行内样式），在HTML标签中使用style属性来设置CSS样式。 因为是在某个标签上直接使用style属性所以这个就相当于使用选择器了。 格式：<code><标签名 style="属性1:值1;属性2:值2....">被标记出来的内容</标签名></code> 特点：仅作用于本标签。 </li> <li> 内嵌方式：在head标签中使用style标签。 <ul> <li> 格式： <pre><code class="prism language-css"><style> 选择器{ 属性1:值1; 属性2:值2; ... 属性:值n; } </style> </code></pre> <code>type="text/css"</code>可写可不写。 </li> <li> 特点：作用在当前整个页面。 </li> </ul> </li> <li> 外部链接：使用<code><link /></code>标签 格式：<code><link href="文件名.css" type="text/css" rel="stylesheet"/></code> <ul> <li> href属性：你要链接的这个文档来自于哪里。 这个链接到html中的文档应该是.css结尾的，而且在这个css中应该只包含样式规则。 </li> <li> rel属性：（relation，关系），指当前文档与被链接文档之间的关系。 </li> <li> type属性：规定被链接文档的MIME类型，也就是加载的数据的类型。 </li> </ul> <code><link href="./xxx.css" rel="stylesheet" type="text/css"/></code>，现在我要链接xxx.css进来，这个.css文件和我之间的关系（它是我的样式表），它的数据格式是文本类型的css。 特点：一个css文件可以被多个HTML引入，达到复用的效果。 注意：以上三种方式，当样式冲突的时候，采用就近原则。哪个属性离被修饰的内容近就使用哪个。如果没有冲突就采用叠加效果。 </li> </ul> <h4>CSS特性</h4> <ul> <li>层叠性：CSS样式允许重复声明，相互覆盖。</li> <li>继承性：被包含的元素右外层元素的效果（有些可以继承有些不能被继承）</li> </ul> <h4>CSS的注释符</h4> <pre><code>/* 要注释掉的内容。 */ </code></pre> <code>shift+alt+a</code>来进行注释 也可以<code>ctrl+/</code> 所有语言中都有注释符 <pre><code class="prism language-html"># // 单行注释 /* */ 多行注释 </code></pre> <h1>第四天</h1> <h4>选择器</h4> <ul> <li> 标签选择器，直接引用HTMl的标签名。设置标签的默认样式。 </li> <li> <code>*</code>，通用选择器，选择文档中的所有HTML标签。 </li> <li> 类选择器 男人、女人、老人、小孩，是不是具有相同的一些特征。 空调：制冷、制热、除湿。。。。 将有相同特征的一些标签归到一类里面。 CSS中使用<code>.类名</code>作为选择器。 HTML中使用<code>class="类名"</code> __注意： __ <ol> <li>类名区分大小写。</li> <li>可以使用<code>标签名.类名</code>方式选择只具有指定<code>类名</code>的标签。</li> <li>一个标签中可以有多个类。<code>test</code></li> <li>我们可以使用<code>.class1.class2</code>这种方式来匹配同时拥有class1和class2类名的元素。只有其中一个类时是无法匹配到的。而且这种用法<code>类名</code>的先后顺序可以相互颠倒。</li> </ol> </li> <li> chrome调试工具的使用 调用调试工具：F12或<code>右键->检查</code> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u0S0nNDR-1626946116480)(/Volumes/尚硅谷前端/笔记/4/image-20210629093139942.png)] <ul> <li> 注释掉的代码在调试器中的表现 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YMDcQKTQ-1626946116481)(/Volumes/尚硅谷前端/笔记/4/image-20210629093320257.png)] </li> <li> 无效的属性名和属性值 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yaEyQtln-1626946116483)(/Volumes/尚硅谷前端/笔记/4/image-20210629093542255.png)] </li> <li> 缺少分号在chrome中的表现。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S8bE4zzJ-1626946116485)(/Volumes/尚硅谷前端/笔记/4/image-20210629093727248.png)] </li> <li> 默认样式 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5anLeKJ0-1626946116486)(/Volumes/尚硅谷前端/笔记/4/image-20210629093907810.png)] </li> <li> 继承下来的样式 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rGp0vye9-1626946116488)(/Volumes/尚硅谷前端/笔记/4/image-20210629094007875.png)] </li> <li> 暂时调试代码 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gr7OC89c-1626946116490)(/Volumes/尚硅谷前端/笔记/4/image-20210629094108442.png)] </li> </ul> </li> <li> id选择器 <ol> <li>HTML使用id属性指定一个值。</li> <li>css中使用<code>#id的值</code>来作为选择器</li> </ol> ID的值是具有唯一性的，在一个HTML文档中，一个ID值能且只能使用一次。 类选择器相当于名字（这个名字可以多个人拥有），ID相当于身份证号。 </li> <li> 组合选择器 <code>选择器1,选择器2,选择器3.....</code> </li> <li> 后代选择器 格式：<code>E F</code>，后代选择器，选择匹配的F元素，且匹配的F元素被包含在匹配的E元素的内部。 </li> <li> 链接伪类选择器 只能用在HTML标签中的A标签中。它有两种状态已经访问、没有访问。 <ul> <li><code>a:link</code>，匹配a标签，并且a标签定义了href并且这个地址没有被访问过。</li> <li><code>a:visited</code>，匹配a标签，并且a标签定义了href并且这个地址已经被访问过。</li> </ul> 访问过之后就在缓存中了，再打开也是访问过。同一个浏览器中的多个a链接指向了同一个地址也会受到影响。 如果要删除已经访问过的记录（缓存）<code>ctrl+shift+del</code> 不同浏览器的缓存是不一样的。 </li> <li> 动态伪类选择器 <ul> <li><code>E:active</code>，选择匹配的e元素，且匹配的元素被激活的那一刹那被选中。</li> <li><code>E:hover</code>，选择匹配的E元素，且用户鼠标移动到匹配的元素上的时候被选中。</li> </ul> 这两个选择器不一定非要用在a链接上也可以用在其他的地方。 如果要给a链接应用上面的4个选择器必须要遵守一个<code>爱/恨原则</code>，<code>link->visited->hover->active</code>（<code>Love/HAte</code>） 一般在用的时候先写整个a的样式，然后在写hover的样式。 伪：假的。伪军、伪娘。 基于特征不是根据属性、名字、内容获得。 </li> </ul> <h4>权重值</h4> 同一个元素可能会被多个选择器选择，它们又应用了相同的规则（选择了同一个元素的多个选择器之间的同一个属性产生了冲突），这个时候要计算权重值。 权重值分为4部分：<code>0,0,0,0</code> <ul> <li>id选择器：<code>0,1,0,0</code></li> <li>类选择器、伪类选择器：<code>0,0,1,0</code></li> <li>标签选择器：<code>0,0,0,1</code></li> <li>通用选择器<code>0,0,0,0</code></li> <li>行内样式：<code>1,0,0,0</code></li> </ul> 你需要知道当你的选择器选择正确设置的属性也正确但是就是不生效，这个时候应该想到权重值。 注意： <ol> <li>数值越大，权重越高。</li> <li>如果说权重相同时最后一个样式胜出。</li> <li>如果要忽略权重值时，需要在被保护的属性后面加上<code>!important</code>，这样就可以避免它被覆盖。能少用就少用。</li> </ol> 不要记死代码，记特点。 <h4>字体</h4> <ul> <li> 字体：字体就是文字的外在特征。样式，文字的衣服。 文字的诞生： <ol> <li>设计师设计。</li> <li>字体制作人员制作、修改</li> <li>技术编码、添加指令</li> <li>测试：校对、测试</li> <li>生产包装、上市。</li> </ol> windows的字体放在<code>C:\Windows\Fonts</code> 字体分为：免费使用和商业使用。 </li> <li> 字体的组成 我们认为的字体可能不单纯，它不是一个单纯的字体。而是许多字体的变形组成，这些变形用来描述粗体、斜体、正常字体等等 </li> <li> 字体的类型 字体、字体族分类： <ul> <li> 衬线字体，笔画开始、结束的地方有额外装饰笔画粗细有不同的地方。 </li> <li> 非衬线字体，没有额外的装饰，笔画粗细差不多 </li> <li> 等宽字体，等宽字体是针对英文而言每个英文字母占据同等的宽度。 i M 占据的是相同的宽度。 </li> <li> 手写字体 </li> <li> 奇幻字体 </li> </ul> </li> </ul> <code>'Fira Code','Anonymous Pro','Source Code Pro Semibold',Consolas, 'Courier New', monospace</code> <h4>字体系列</h4> 格式：<code>font-family:value</code> value指的是字体名或字体族的名字。 __注意： __ <ol> <li>常见的中文字体在设置时可以使用<code>宋体</code>、<code>微软雅黑</code>，但是一般我们不这样用，我们用的是他们的英文名字。（中英文对照，见表）</li> <li>如果你设置的字体包含空格那么我们应该使用引号括起来。</li> <li>为了保证用户体验，看到的效果是比较好的效果，我们会设置多个，定义了多个字体，每个字体之间使用逗号进行分隔。浏览器根据这个字体列表检索客户端系统中的字体，按照从左到右的顺序进行使用，先找到的就先使用了。如果说到列表最后都没有找到指定的字体那么会使用浏览器默认字体。</li> </ol> <h4>字体大小</h4> 没有用CSS给文本指定一种文本尺寸，web浏览器会使用它预先设定好的默认值。大部分浏览器是16px，也叫基准文本尺寸。 格式：<code>font-size:value</code> <ul> <li> px，像素。 网页中最小的字号是12px，但是0px可以生效。 </li> <li> em，相对于从父元素继承下来的大小来计算。1em=1个设置的大小。 </li> <li> rem，它的值基于根元素的文本尺寸来进行定义。 根元素是<code><html></html></code> </li> </ul> <h4>字体粗细</h4> 格式：<code>font-weight:value</code> <ul> <li> normal，正常字体。 </li> <li> bold，粗体。 </li> <li> bolder，更粗。 </li> <li> lighter，更细。 </li> <li> 100900，使用100900作为关键字（因为字体或字体族都映射了9级粗度） 100~900有没有效果要看这个字体族是否安装了各种字体的变体。 有些100\200\300没变化呢，实际上这符合CSS的规范只要一个关键字对应的变形不会比前一个关键字对应变形更细，都是允许的。 通常400等于normal。 bold通常是700。 如果字体、字体族中没有设定粗细、浏览器会自行计算，生成粗细。 </li> </ul> <h4>字体风格</h4> 格式：<code>font-style:value</code> <ul> <li>normal，默认值。</li> <li>italic，显示成斜体。</li> </ul> <h4>字体简写格式</h4> 格式：<code>font:style weight size family</code> __注意： __ <ol> <li>style和weight他们的顺序可以颠倒。</li> <li>size和family他们的值必须写，而且顺序不能颠倒。</li> </ol> <h4>字体颜色</h4> 格式： <code>color:value</code> <ul> <li>十六进制的值</li> <li>rgb颜色</li> <li>rgba颜色</li> <li>颜色关键字</li> </ul> <h4>字体下划线</h4> 格式：<code>text-decoration:value</code> <ul> <li>underline，文本的下划线。</li> <li>none，标准的文本。</li> <li>overline，上划线</li> <li>line-through，贯穿线</li> </ul> <h4>字符间距</h4> 格式：<code>letter-spacing:value</code> <ul> <li>px，像素</li> <li>em，按照当前字体大小来计算。</li> </ul> <h4>盒子模型的基本元素</h4> <ul> <li>width，设置元素的宽度</li> <li>height，设置元素的高度</li> <li>background-color:用来设置元素的背景色</li> <li>border:设置元素的边框</li> </ul> <h4>元素的显示模式</h4> <ul> <li> 块级元素（block） <ul> <li>独占一行。</li> <li>块状元素可以设置宽度和高度，即使设置了宽度也是独占一行。</li> <li>默认情况下块状元素宽度自动填满父元素宽度。</li> <li>当我自己设置宽度、高度的时候可以比父元素设置的大，也可以比父元素设置的小。只不过我们通常设置的比父元素要小。</li> </ul> 常用元素：div、h1~h6、p、ul、ol、form… </li> <li> 内联元素、行内元素（inline） <ul> <li>不会自己独占一行，多个相邻的行内元素排列在同一行。一行放不下换行。宽度随着内容的变化而变化。</li> <li>行内元素不能设置宽度和高度。</li> </ul> 常用的行内元素：span、b、strong、i、em… </li> <li> 行内块状元素（inline-block） 在内部表现为块状元素，可以设置宽度和高度、在外部排列方式类似于内联元素水平排列。 常用元素：img、表单元素 </li> </ul> <h4>更改显示类型</h4> 格式： <code>display:value</code> <ul> <li>block，显示为块状元素。</li> <li>inline，显示为内联元素。</li> <li>inline-block，显示为内联块状元素。</li> <li>none，隐藏元素。</li> </ul> 块-》一行一行内容（inline、inline-block） <h3>文本缩进</h3> 格式：<code>text-indent:value</code> <ul> <li>px，像素</li> <li>em，字体大小</li> </ul> 为了应对字体大小变化之后也随之缩进2个字符那我们经常用的是em这个单位。 __注意： __ <ol> <li><code>text-indent</code>，适用于块状元素和行内块状元素。</li> <li>文本缩进只会影响第一行，其他行不会受到影响。</li> </ol> <h4>换行</h4> 格式：<code>white-space</code>，用来处理元素内文本是否允许换行。 <ul> <li> normal，默认值。CJK文本遇到容器边界自动换行，非CJK文本按照word-break的值决定。 CJK（china，japan，korea） </li> <li> nowrap，超出容器边界不换行。 </li> </ul> 格式：word-break:value，用来表明怎么样进行单词内的断句。 <ul> <li>none，浏览器根据默认设置来决定。</li> <li>break-all，如果使用了break-all之后换行会出现在任何字符之间。</li> </ul> <h4>隐藏内容</h4> 格式：<code>overflow:value</code> <ul> <li>visible，超出元素框的内容是可见的。</li> <li>hidden，超出元素矿的内容被隐藏。</li> <li>scroll，多出的内容出现滚动条。</li> <li>auto，浏览器自己决定，通常具有不确定性。</li> </ul> <h4>水平对齐</h4> 格式： <code>text-algin:value</code> <ul> <li>left，默认，文字放在左边。</li> <li>right，文字放在右边。</li> <li>center，文字放在中间。</li> </ul> text-algin能应用在块状元素和行内块状元素上，对其中的行内块状元素和行内元素生效。 有问题，先找原因。然后才有解决方案 这种作业做不出来就不做。。。 当天的代码最少敲三遍。搞明白，熟练。着重研究当天的内容。 对于学习：慢就是快。 <h1>第五天</h1> 问题：给父元素设置了color，color具有继承性，但是为什么a链接没有改变颜色。 继承下来的内容没有自身设置的优先级高（即使是系统自带的样式也比继承下来的优先级要高） <ul> <li>h标签和a标签： <ul> <li>h标签默认对字号进行了设置，会覆盖继承下来的字号。</li> <li>a标签默认对字体颜色进行了设置，所以会覆盖继承下来的颜色。</li> </ul> </li> </ul> <h4>内联盒子模型</h4> 块级元素中通常放置的是一行一行的行内元素，内联盒子模型决定了这一行一行的行内元素该如何摆放。 <code>这是个普通的文字em!</code> 上面的代码实际上在一行上面形成了3个内联盒子。 内联盒子的类型： <ul> <li>如果内容被其他的行内元素包含，属于具名内联盒子。</li> <li>如果是光秃秃的文字，属于匿名内联盒子。</li> </ul> 内联盒子的组成：内容区域、半行间距（上半行间距、下半行间距） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vtVH2GvJ-1626946116492)(/Volumes/尚硅谷前端/笔记/5/image-20210630101542597.png)] 行框盒子（line box），每一行都是一个行框盒子，每个行框盒子是一个一个的内联盒子组成的。 <code>这是个普通的文字em!</code> 行框的上边界位于本行的最高的内联盒子的上边界。行框的底部放在最低的内联盒子的下边界。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KBJwciTu-1626946116493)(/Volumes/尚硅谷前端/笔记/5/image-20210630102005599.png)] <h4>行高</h4> 我们用的时候是将line-height放在块状元素上，这个时候他表示的是每行（每个行框）的最小行框高度。 格式：<code>line-height:value</code>，定义行高（继承性） <ul> <li>normal，默认值，跟用户的浏览器走。</li> <li>px，像素。</li> </ul> 既然是最小行框高度，就说明我可以设置的比它大。 line-height的值也可以是<code>数值</code>，将数值作为行高的值，它会根据当前元素的fonts-size来计算大小，是当前font-size的多少倍。 比如当前是50px的fonts-size，line-height设置的是1.5那么这个时候<code>line-height=1.5*50=75px;</code> 上面说的是line-height的第一个功能：调整行与行之间的距离。 不设置块状元素高度的情况下，line-height改变会撑高盒子，盒子中的文字与盒子始终是垂直居中的。这种情况下<code>line-height设置的高度=height</code> 撑开盒子的是行高不是内容。 当我设置了块状元素的高度的情况下，line-height改变只会改变文字的垂直方向的位置，不会改变块状元素的高度。 既然块状元素不设置高度时line-height可以撑高元素，那我反过来想知道具体高度，也能确定出来line-height然后让文本垂直居中。 当想让一个文本垂直居中与当前元素的时候，行高等于元素的高度。（单行文本垂直居中） <h4>垂直对齐方式</h4> 基线：<code>baseline</code>，基线是内联盒子中小写英文字母的<code>x</code>的下边缘，是为了排列整齐用的。基线是其他线的根本。 格式：<code>vertical-algin:value</code> <ul> <li> baseline，默认值，默认的时候都是基线对齐。 如果是图片，其中底端与父元素的基线对齐。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OIx5QBkq-1626946116495)(/Volumes/尚硅谷前端/笔记/5/image-20210630111238844.png)] </li> <li> bottom，将内联盒子的底边与行框的底边对齐。 </li> <li> top，将内联盒子的顶边与行框的顶边对齐。 </li> <li> middle，元素的垂直中心线和父元素的x-height的1/2处对齐。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qclZfYyG-1626946116496)(/Volumes/尚硅谷前端/笔记/5/image-20210630112317620.png)] </li> </ul> <h4>vertical-align中使用问题</h4> <ol> <li> 在一行当中一个高的元素占据了整行的高度<code>verticla-algin</code>对其不会有影响就是因为没有空间。这个时候还要对齐，所以说将会导致父元素的基线产生移动。 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 块状元素只包含一张图片时会有不知名的空白 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cyyDSGWO-1626946116499)(/Volumes/尚硅谷前端/笔记/5/image-20210630113107812.png)] 问题分析： <ol> <li>在HTML5的文档声明中，内联元素的所有解析和渲染如果每个行框盒子前面有一个<code>空白节点</code>（叫幽灵节点），这个空白节点透明、不占据任何宽度也没有办法通过JS脚本获得。但是只在HTML5中使用<code><!DOCTYPE html></code>声明的时候才会有。</li> <li>根据上面所说有一个<code>空白的节点</code>空白就是内容有内容默认就采用<code>vertical-align:middle</code>对齐。图片是行内块状元素会和基线的底部对齐。既然是有空白节点有内容那么就会分为内容区、上下半行间距。最终导致有这个空白的原因是上、下半行间距。</li> </ol> 解决方法： <ul> <li> 第一种方法：图片块状化，让其没有基线对齐。 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 方法二：将图片改为顶部、底部、middle对齐。 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> 1. __根据渲染树在页面中的大小、位置将元素固定在指定的位置上，这个时候布局属性将会生效。__ 2. __布局绘制完成之后开始装饰渲染树：背景、颜色、文本才会生效。__ 重排：页面生成之后，如果位置发生变化，将要从第三步开始执行，然后执行第四部。重绘：只是显示样式变、布局不变，将会直接进行第四部。重排必然会引起重绘。尽可能避免重排、减少重绘制。 </body> </html> </code></pre> </li> </ul> </li> <li> 对齐问题。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KvMVojYs-1626946116500)(/Volumes/尚硅谷前端/笔记/5/image-20210630114832207.png)] 一个inline-block的元素，如果里面没有内容，则该元素的基线是元素的底部。如果里面有内容基线是里面最后一行内联元素的基线。 </li> </ol> <h4>line-height和vertical-align的具体应用</h4> 垂直居中。 <ol> <li> 已知宽度、高度情况下，图片水平、垂直居中。 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 已知高度情况下，多行文本垂直居中。 <pre><code class="prism language-html"> </code></pre> </li> <li> 当使用<code>vertical-align:middle</code>时只是近似垂直居中。 为什么： <ol> <li><code>vetical-align:middle</code>将元素的垂直中心线和父元素的x-height的1/2处对齐。</li> <li>但是字体设计的时候不会正好占据内容区的1/2处，一般来说都会有下沉。</li> <li>这个时候字体设置的越大，内容区就会越大，字体位置的偏差就会越大。</li> </ol> 解决方法：要设置完全垂直居中：将父元素的字体大小设置为0，当你设置为0的时候所有内容区内的线都会在同一条线上。 </li> </ol> <h4>盒子模型</h4> 文档中的每个元素都会生成一个矩形框，我们成为元素框。这个框用来描述在文档布局中所占的位置。 这些元素框默认的时候是不会重叠的。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2opSq3Ww-1626946116501)(/Volumes/尚硅谷前端/笔记/5/20210223153552612_15593.png)] <ul> <li> 内容区：用来存放具体的内容。 <ul> <li>宽度：用来定义内容区的宽度。</li> <li>高度：用来定义内容区的高度。</li> </ul> </li> <li> 内边距：用来定义内容区和边框的距离。 </li> <li> 边框：是内容区或内边距周围的一条或多条线段。 </li> <li> 外边距：定义元素和元素之间的距离。就是在元素周围添加额外的空白。 <code>margin:0 auto;</code> </li> </ul> <h4>宽度</h4> 元素的宽度指的是从内容区左边界到右边界的距离。 格式：<code>width:value</code>，适用于块状元素、行内块状元素。（不能继承） <ul> <li>auto，默认值。没有特定的宽度。 <ul> <li>对于块状元素来说，宽度默认是父元素的宽度。</li> <li>对于行内元素来说，宽度默认是内容的宽度。</li> </ul> </li> <li>px，像素</li> <li>%，相对于包含的块元素的宽度来设置。</li> </ul> <h4>高度</h4> 元素高度指的是从内容区上边界到下边界的距离。 格式：<code>height:value</code>（不能继承） <ul> <li> 内容区：用来存放具体的内容。 <ul> <li>宽度：用来定义内容区的宽度。</li> <li>高度：用来定义内容区的高度。</li> </ul> </li> <li> 内边距：用来定义内容区和边框的距离。 </li> <li> 边框：是内容区或内边距周围的一条或多条线段。 </li> <li> 外边距：定义元素和元素之间的距离。就是在元素周围添加额外的空白。 <code>margin:0 auto;</code> </li> </ul> <h4>宽度、高度的最大值和最小值</h4> <ul> <li>元素的内容区可以使用min-width和min-height定义最小值。（大于等于）</li> <li>元素的内容区可以使用max-width和max-height定义大值。（小于等于）</li> </ul> <h4>内边距</h4> 适用于所有的元素（块状、行内、行内块状），元素默认的时候没有内边距（内边距为0）。 <ul> <li> 内边距使用padding属性： <ul> <li>px，像素。</li> <li>%，使用百分比来设置内边距，水平（left、right）、垂直（top、bottom）都相对于__父级元素__的内容区的__宽度__来计算。</li> </ul> </li> <li> 简写格式： <ul> <li>一个值：<code>padding:top/right/bottom/left</code></li> <li>两个值：<code>padding:top/botom left/right</code></li> <li>三个值：<code>padding:top right/left bottom</code></li> <li>四个值：<code>padding:top right bottom left</code>（顺时针）</li> </ul> </li> <li> 简写格式：(单边的内边距) <ul> <li>padding-top</li> <li>padding-right</li> <li>padding-bottom</li> <li>padding-left</li> </ul> 默认情况下增加内边距会撑开盒子。因为width和height是盒子内容区的宽度高度之外的内边距、边框是在这个上面增加。 </li> </ul> <h4>行内元素&行内块状元素的内边距。</h4> 行内元素上设置左、下内边距可以正常生效。 行内元素上设置上、下内边距对行高没有影响，但是内边距确实生效了。 行内块状元素可以设置内边距，并且都有正常的效果。 <h4>边框</h4> border:1px solid green; 边框一共有三要素：宽度（border-width）、样式（border-style）、颜色（border-color） <ul> <li>边框宽度：border-width，如果没有设置具体宽度由某个浏览器决定一般2px或3px。</li> <li>样式：border-style，默认为none，所以即使有边框宽度也看不到边框。</li> <li>颜色：border-color，默认的边框颜色是使用的元素自身的文本颜色。</li> </ul> <h4>边框样式</h4> <ul> <li>取值 <ul> <li>none，没有样式。当没有样式的时候即使有其他的值也不会显示出来边框。</li> <li>solid，实线。</li> </ul> </li> <li>简写格式： <ul> <li>一个值，<code>border-style：top/right/bottom/left</code>。</li> <li>两个值，<code>border-style:top/bottom left/right</code></li> <li>三个值：<code>border-style:top left/right bottom</code></li> <li>四个值：<code>border-style:top right bottom left</code></li> </ul> </li> <li>单边样式： <ul> <li><code>border-top-style:value</code></li> <li><code>border-right-style:value</code></li> <li><code>border-bottom-style:value</code></li> <li><code>border-left-style:value</code></li> </ul> </li> </ul> <h4>边框宽度</h4> <ul> <li>简写格式： <ul> <li>一个值，<code>border-width：top/right/bottom/left</code>。</li> <li>两个值，<code>border-width:top/bottom left/right</code></li> <li>三个值：<code>border-width:top left/right bottom</code></li> <li>四个值：<code>border-width:top right bottom left</code></li> </ul> </li> <li>单边样式： <ul> <li><code>border-top-width:value</code></li> <li><code>border-right-width:value</code></li> <li><code>border-bottom-width:value</code></li> <li><code>border-left-width:value</code></li> </ul> </li> </ul> <h4>边框颜色</h4> <ul> <li> 简写格式： <ul> <li>一个值，<code>border-color：top/right/bottom/left</code>。</li> <li>两个值，<code>border-color:top/bottom left/right</code></li> <li>三个值：<code>border-color:top left/right bottom</code></li> <li>四个值：<code>border-color:top right bottom left</code></li> </ul> </li> <li> 单边样式： <ul> <li><code>border-top-color:value</code></li> <li><code>border-right-color:value</code></li> <li><code>border-bottom-color:value</code></li> <li><code>border-left-color:value</code></li> </ul> 边框颜色可以设置成透明，transparent。当用它的时候即使设置了边框也看不到。 透明和没有一样吗？ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JeUshCYE-1626946116503)(/Volumes/尚硅谷前端/笔记/5/20210223192950174_7241.png)] </li> </ul> <h4>简写格式</h4> 格式： <code>border-top:width style color</code> 格式： <code>border-right:width style color</code> 格式： <code>border-bottom:width style color</code> 格式： <code>border-left:width style color</code> width、style、color的顺序是可以改变的。 <h4>整个边框</h4> 格式： <code>border:width style color</code> 缺点就是宽度、样式、颜色同时应用到了四边上。 <h4>内联元素的边框</h4> 行内元素上设置的上边框和下边框对行高没有影响。行内元素上设置的左边框和右边框会将周围的文本推开。 <h1>第六天</h1> <h4>外边距</h4> CSS中任何元素的外边距都可以使用margin。外边距是添加在边框外边界的外侧的距离。 浏览器会给很多元素提供预设的一些样式，其中就包括外边距。比如p标签的上下、body的上右下左。 <ul> <li> 外边距取值 <ul> <li>auto，自动。</li> <li>px，像素。</li> <li>%，百分比数值相对于父元素的内容区域的宽度来计算。</li> </ul> </li> <li> 简写格式： <ul> <li><code>margin:top/right/bottom/left</code>（一个值）</li> <li><code>margin:top/bottom left/right</code>（两个值）</li> <li><code>margin:top left/right bottom</code>（三个值）</li> <li><code>margin:top right bottom left</code>（四个值）</li> </ul> </li> <li> 单外边距 <ul> <li><code>margin-top</code></li> <li><code>margin-right</code></li> <li><code>margin-bottom</code></li> <li><code>margin-left</code></li> </ul> margin的值可以设置为负数，这样有可能使元素从父元素中冒出来。 内容区用来放置内容的。 </li> </ul> <h4>外边距折叠</h4> 普通的块状元素的上下外边距会产生折叠。 元素的外边距产生折叠将会折叠为最大的那个外边距。 天塌了有个高的顶着 <ul> <li> 情况一：兄弟之间 兄弟1的下外边距和兄弟2的上外边距。 解决方法：给第一个元素的<code>display:inline-block</code>。 我更倾向于只设置上或下一边的外边距。 </li> <li> 情况二：父子之间 解决方法：父元素设置边框、内边距。或父元素设置<code>overflow:hidden;</code> </li> </ul> 产生边距折叠的原因：margin之间直接接触没有阻隔。 <h4>行内元素的外边距</h4> 行内元素上设置的上下外边距对行高没有影响，左右外边距可以正常使用。 <h4>横向auto</h4> 容纳块：离的最近的块状元素 容纳块公式：<code>容纳块宽度=子元素的margin-left + 子元素的border-left + 子元素的 padding-left + 子元素的width + 子元素padding-right + 子元素border-right + 子元素的margin</code> 七个属性：子元素的width、子元素的margin-left、margin-right可以设置为auto，其他的都必须为具体指或使用默认值（0）。 <ul> <li> 情况一：width、margin-left、margin-right两个设置为具体值，一个为auto。必须要满足容纳块公式。 <pre><code class="prism language-html"><!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> </code></pre> <hr> <pre><code class="prism language-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> </code></pre> </li> <li> 情况二：width、margin-left、margin-right两个为auto。 <ul> <li> margin-left、margin-right为auto，两个的外边距相等。 (减完之后剩下的距离/2)等于margin-left和margin-right的距离。 margin:0 auto; margin:0 auto 0 auto; margin-left:auto; margin-right:auto; <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 某一边的外边距和width设置为auto时，那个为auto的外边距会被设置为0。width被设置为填满容纳块所需要的值。 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 三个都为auto。两边的外边距为0。width要多宽就有多宽。 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> width、margin-left、margin-right都设置为auto之外的值，这个时候交过渡约束，这种情况下一般来说margin-right看不到效果。 </li> </ul> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4qYoCXdd-1626946116504)(/Volumes/尚硅谷前端/笔记/6/20210302065733455_10097.png)] </li> </ul> <h4>纵向auto</h4> 块状元素的高度： <ul> <li>如果你的内容设置了高度，并且指定了块状元素的高度，块状元素的高度大于内容的高度，这个时候多出来内容看起来像是内边距。</li> <li>如果设定的高度比其中的内容的高度小，最终要看overflow的值。</li> </ul> 纵向和横向一样的。height、margin-top、margin-bottom可以设置为auto。 <ul> <li> margin-top或margin-bottom为auto。就是自动计算为0. <pre><code class="prism language-html"><!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> </code></pre> </li> <li> margin-top、margin-bottom都为具体的值。height的值为auto，它是不会被自动拉开。 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> height设置为了auto之外的值，margin-top和margin-bottom设置为auto。二者都会被计算为0。 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 某一边外边距和height为auto，外边距为auto那个等于0，height被设置行高撑开的高度。 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> height、margin-top、margin-bottom都位置为具体的值。设置的是多少就是多少。 <pre><code class="prism language-html"><!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> </code></pre> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KbM5PM65-1626946116506)(/Volumes/尚硅谷前端/笔记/6/20210302203902468_17813.png)] 除了height为auto时要看里面的内容，其他的margin-top、margin-bottom为auto时基本上都是为0。 <h4>调整宽度和高度的计算方式</h4> 默认情况下，width、height等于内容区的宽度和高度。但是我们可以使用box-sizing来调整。 box-sizing适用于所有可以设置width和height的元素。 <ul> <li>content-box，默认值。内容区宽度等于width，内容区高度等于height。内边距、边框都在这个上面增加。（w3c盒子模型的计算方式）</li> <li>border-box，宽度、高度等于<code>内容区+内边距+边框</code>，相应的内容区将会缩小。（IE盒子模型，也叫怪异盒子模型）</li> </ul> 以前我媳妇一个月给我3000吃饭钱+500买衣服+1000买烟的钱。 4500 现在3000叫生活费：3000-500-1000 我吃饭的钱越来越少。 <h4>背景色</h4> 格式：<code>background-color:value</code>（不可继承的） <ul> <li> transparent，透明（默认值）元素的默认背景色都是透明的。 body和html都不是整个页面，body由内容（行高）撑开，html由body撑开。 先给body设置了红色（整个页面变成了红色），又给html设置了绿色（整个页面变成了绿色） <ol> <li>整个的层次为<code>body->html->页面画布</code></li> <li>最终整体的背景颜色由<code>页面画布</code>决定。</li> <li>画布颜色的决定规则：有html颜色就用html的颜色，html没有颜色就用body的颜色，如果都没有则使用画布本身的颜色（这个时候页面最终的颜色由浏览器自己决定，但是一般浏览器都会设置为白色）。</li> </ol> </li> <li> 其他类型的颜色的值。 可以给图片可以加背景，图片的本身就是内容区。 <pre><code class="prism language-html"><!DOCTYPE html><html><head> <style> img { background-color: yellow; padding: 10px; } </style></head><body> <img src="./img/brand_07.png" alt=""></body></html> </code></pre> 背景包括内容区、内边距、边框，不会延伸到外边距区域的。 背景色是在前景色的后面：前景色：边框颜色、文字颜色。 </li> </ul> <h4>背景图</h4> 格式：<code>background-image:url('背景图的地址')</code>（不可继承的） 背景图的大小和盒子的大小没有关系：背景图如果比盒子大显示一部分，如果比盒子小开始平铺。 有背景图、背景色可以同时存在但是背景图压在了背景色上面。 <h4>背景重复的方式</h4> 格式：<code>background-repeat:value</code> value的值： <ul> <li>repeat，默认值，横向平铺、纵向平铺。</li> <li>repeat-x，横向平铺。</li> <li>repeat-y，纵向平铺。</li> <li>no-repeat，不重复。</li> </ul> <h4>背景定位</h4> <code>background-position:value</code>（不可继承） <ul> <li> 关键字 <ul> <li>left</li> <li>right</li> <li>top</li> <li>bottom</li> <li>center</li> </ul> 我们在使用的时候通常使用两个值：第一个指定横向位置，第二个指定纵向位置。 如果只写一个关键字的时候，另外一个假定为center。 如果为两个横向（left right）或留个纵向（top bottom）那么整个值将会被忽略。 </li> <li> px，像素。 相对于哪里来进行定位。 第一个值为横向的偏移量、第二个值为纵向的偏移量。 默认的时候背景图的位置是在内边距的外边界的左上角来进行定位。 x轴的正数往右走，负数往左走。 y轴的正数往下走，负数往上走。 负数：x的负数往左走，y的负数往上走。 如果背景图比盒子大将会显示一部分。 </li> </ul> <h4>精灵图、雪碧图（css sprites）</h4> 是一种网页图片的应用处理方式，允许将一个页面中很多零星的小图片包含到一张大图里面去，当访问页面的时候就不会一张一张的去请求显示图片。 有点：服务器的请求链接数是有限的，为了减少对服务器的压力，提升网页的加载速度将一张一张的小图拼在一张大图中，一次下载。 <pre><code class="prism language-html">@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;} </code></pre> <h4>background的简写属性</h4> 格式： <code>backgorund:image position repeat color</code> </li> </ul> <h4>图标字体</h4> 图标字体也是一种字体，和宋体、微软雅黑。。。。 <code>https://www.iconfont.cn/</code> <code>github</code>，全球最大的男性交友社区。 托管的程序，写程序大多数都是男的。 阿里矢量字体库登录：github、微博。 404 没找到 200 成功 304 读取浏览器缓存 403 有这个东西但是不给你。 500 服务器错误。 复制、粘贴、改引入的文件的路径。 <ol> <li> 定义图标字体 我们写的字体是依赖客户端的字体的，css3中引入了一种可以从web服务器下载字体技术<code>@font-face</code>，确保用户看到CSS中预设的这些字体。 <pre><code class="prism language-css">@font-face { font-family: 'iconfont';//下载下来的字体叫什么名字。 src: url('iconfont.woff2') format('woff2'),//引入的字体的资源。 url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype');} </code></pre> </li> <li> 使用图标字体 <pre><code class="prism language-css">.iconfont { font-family: "iconfont" !important;//你定义的.iconfont类用什么字体。 font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased;//CSS3中的属性让字体抗锯齿，让字体看起来更加清晰。 -moz-osx-font-smoothing: grayscale;} </code></pre> </li> <li> 使用这个类，然后里面放置相应的编码。 <code>3</code> </li> </ol> 黄色多就偏嫩绿色，蓝色多就会变成深绿色。 <h4>厂商前缀（供应商前缀）</h4> 如果在源码中发现类似<code>_webkit_</code>开头的代码，这种东西叫厂商前缀也叫供应商前缀。浏览器厂商通过它标记实验性或专属的属性。 <ul> <li><code>-moz-</code>，火狐浏览器</li> <li><code>-ms-</code>，微软</li> <li><code>-o-</code>，欧朋浏览器</li> <li><code>-webkit-</code>，safari和chrome浏览器</li> </ul> <pre><code class="prism language-css">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; } </code></pre> <h1>第七天</h1> <code>#sprites div:hover span.huafei</code> <code>div:hover</code>选中的是被移动上去的<code>div</code>。 <code>span.huafei</code>，有没有一个span标签类名为<code>huafei</code>。 <hr> <code>div.jiudian:hover span</code> 还是区分出来你<code>hover</code>的是哪个<code>jiudian</code>的这个<code>div</code>被<code>hover</code>的时候他下面的<code>span</code> <hr> <h4>列表</h4> 每个列表（ul、ol）都会给自己设置一定的默认样式。(上下margin：16px，左边padding：40px)。 所以我们用的时候会将默认样式清除： <pre><code class="prism language-html"><!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> </code></pre> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mVqztZTc-1626946116507)(/Volumes/尚硅谷前端/笔记/7/image-20210703104907502.png)] 每个列表项目都是块状元素再加上一个标识，但是__前面的标识不参与文档布局__，它只是附加在列表的一侧（不管列表在哪里都会随着列表移动） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bL9X4HI3-1626946116508)(/Volumes/尚硅谷前端/笔记/7/image-20210703105448775.png)] <ul> <li> 列表的类型 <code>list-style-type:value</code> <ul> <li>none，没有标记。</li> <li>disc，实心圆</li> <li>decimal，数字</li> <li>其他的自行百度，记不住。我也不记。</li> </ul> </li> <li> 设置列表标记的位置。 <code>list-style-position</code>用来规定列表的记号是在标记盒子中还是在内容盒子中。 <ul> <li>outside，在标记盒子中。</li> <li>inside，在内容盒子中。</li> </ul> </li> <li> 使用图片标记列表前面的记号。 <code>list-style-image:url()</code> </li> </ul> 简写格式：<code>list-style:type image positioin</code> 他们三个的顺序可以调换而且还是可选的。 <h4>表格</h4> 格式：<code>border-collapse:value</code>（可继承的），写到table元素上，继承到td。 <ul> <li>separate，分离边框。</li> <li>collapse，边框折叠。</li> </ul> <h4>浮动</h4> 文档流：文档流指的是HTMl中元素在计算布局、排版过程中的机制。文档源代码在书写的时候是有顺序的上->下，从左->右。 解释的代码的时候从上到下，从左到右来解释。解释的时候如果行内元素就在一行，如果是块状元素就独占一行。 浮动的出现就是为了打破上面所说的正常文档流而实现文字环绕效果。浮动本质就是为了实现文字环绕。 格式：<code>float:value</code>（不可继承） <ul> <li>none，无浮动。</li> <li>left，元素向左浮动，其他内容包围在浮动元素的右边。</li> <li>right，元素向右浮动，其他内容包围在浮动元素的左边。</li> </ul> 形成文字环绕的原理： <ol> <li>父元素高度塌陷，让跟随的内容可以和浮动元素在一条水平线上。</li> <li>块状元素和浮动元素会重叠，但是块状元素中的行框盒子和浮动元素不会重叠。</li> </ol> <h4>float属性的规则</h4> <ol> <li> 子元素浮动将会导致父元素高度塌陷。 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 浮动元素的位置，要考虑在它之前的块元素或浮动元素。 正常的块元素是在浮动元素之前，浮动元素将重开一行。 <pre><code class="prism language-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;"></div> <div style="background-color:blue;float:left;"></div> </body> </html> </code></pre> 正常元素在浮动元素之后，正常元素将不再考虑它之前的浮动元素（就像浮动元素不存在） <pre><code class="prism language-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> </code></pre> </li> <li> 浮动之后的元素将会变成一个块状元素。 </li> <li> 浮动元素的上下外边距不会折叠。 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 浮动元素的后代也浮动时，将扩大范围，包含浮动元素的后代（子浮动，父也浮动将不会导致父塌陷） <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 元素向左浮动时，后面的元素在前一个浮动元素的右边。元素向右浮动时，后面的元素在前一个浮动元素的左边。 <pre><code class="prism language-html"><!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> </code></pre> 后面的浮动元素不与前一个浮动元素在一行，那么将会重启一行。 </li> <li> 浮动元素不会超过父元素的顶边、左边、右边。 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 浮动元素的顶边不能比前方任何一个浮动元素的顶边高。 <pre><code class="prism language-html"><!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> </code></pre> </li> </ol> <h4>清除浮动</h4> clear属性用来设置自身元素怎么样，而不是设置float元素怎么样。我们经常说清除浮动是不准确的浮动依然是存在的，并没有被清除。 官方给的解释：元素盒子的边不能和前面的浮动元素相邻。 格式： <code>clear:value</code>（不可继承） <ul> <li>none，允许任何一边浮动。</li> <li>left，元素左侧抗浮动。</li> <li>right，元素右侧抗浮动。</li> <li>both，两侧抗浮动。</li> </ul> 抗：抵抗 清除：干没了。 <ol> <li>自身往那边跑。</li> <li>后面的内容怎么办。</li> </ol> <h4>撑开父元素的高度</h4> <ol> <li> 给后面加上个空的div然后在空div中写上<code>clear:both</code>。 <pre><code class="prism language-html"><!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> </code></pre> 原理： <ol> <li>浮动元素不能超过父元素的顶边、左边、右边。</li> <li>clear是抵抗的意思，如果说clear应用于非浮动元素时，它将移动到所有相关的浮动元素的下方。</li> <li>这个时父元素自然要把普通文档流中的元素包裹起来，进而导致父元素的高度撑起来。</li> </ol> 这种问题有一个弊端，加了一个空的div。 <code>::after</code>和<code>::before</code>插入的内容属于行内元素。 </li> <li> 在CSS中使用::after来插入一个空的块状元素，然后在其中设置<code>clear:both</code> ::before是在开始标签的后面插入，::after是在结束标签的前面插入内容。 <pre><code class="prism language-html"><!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> </code></pre> </li> </ol> 是不是还避开了选择器 作业：中午的那两个写完。 代码三遍。 复习前面的东西。 <h1>第八天</h1> 内核（渲染引擎：HTML、CSS） <ol> <li> 将HTML元素标签解析为由多个DOM元素对象节点组成的有父子关系的DOM树。 |-html |-|-head |-|-body |-|-div |-|-h3 |-|-ul |-|-li <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 根据上面的树状结构提取CSS规则并且重新计算每个节点的样式，形成带样式的DOM渲染树。 </li> <li> 根据渲染树在页面中的大小、位置将元素固定在指定的位置上，这个时候布局属性将会生效。 </li> <li> 布局绘制完成之后开始装饰渲染树：背景、颜色、文本才会生效。 </li> </ol> 重排：页面生成之后，如果位置发生变化，将要从第三步开始执行，然后执行第四部。 重绘：只是显示样式变、布局不变，将会直接进行第四部。 重排必然会引起重绘。 尽可能避免重排、减少重绘制。 大表格，能不用就不用。 小练习： <ol> <li> 两列效果，左侧宽度固定，右侧内容宽度不固定。 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 翻页 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 页面 <ol> <li> 目录结构问题：CSS、JS、Imgs都需要放在单独的一个目录中。 </li> <li> 默认样式问题： 很多元素都会有默认样式。h标签、p、body，有些不需要的标签的默认样式我们要去掉。 <code>normalize.css</code>的特点： <ol> <li> 它保护了有价值的默认值。 h标签、p标签 </li> <li> 修复了浏览器的bug，让页面中的默认样式尽量显示的都一样。 </li> </ol> <code>reset.css</code>，比较凶残。不管你的默认样式有用没用都干掉。 使用normalize.css的时候要记着把这个css文件放在最前面。 </li> <li> 如果一个盒子是横向占据全屏我们给他叫通栏盒子。 </li> <li> 页面版心：PC端的网页通常是一个固定的宽度且水平居中的盒子。版心用来放置页面中的主要内容。 现在的项目版心都是按照设计稿来的一半都是在1100以上（1100~1300之间）。 现在电脑分辨率是1366*768。要保证分辨率低的能看，分辨率高的也能看。 早起的时候我们一般将版心设置成1000或者960。 写页面：大-》小、布局-》修饰的其他样式。 写页面：<code>html->css</code> <pre><code class="prism language-html">div{ 盒子模型：display、float、position、width、height。边界：border 背景：backgorund 文本：font-family font-size letter-spacing text-deocration 其他：不属于上述的内容都写在最后。 } </code></pre> 假如说我写的html、css发现不合适，我能不能改：能改（男女结婚都能离婚）。 name是form里面的东西，name用来给服务器端传值。如果没有name那么你服务器得不到值。 id、class 一般用在CSS、JavaScript。 </li> </ol> </li> </ol> <h4>定位</h4> 我们平常写HTML是普通文档流。写float块状元素重叠，行内元素不重叠。 定位指的就是将元素移动到哪里。允许你设置相对于谁（相对于哪个基准，正常的位置、祖辈元素的位置、浏览器窗口位置）来进行移动。 浮动、定位能少用就少用。 格式： <code>position:value</code> position属性的值用来指定的是定位的基准是什么。 <ul> <li>static，默认值，正常生成元素框。块状元素独占一行，行内元素水平排列。</li> </ul> <h4>相对定位</h4> <code>position:relative</code>，相对于自身本来的位置进行定位。 使用top、bottom、left、right来移动元素。 <ul> <li>top，指定了定位元素上边界相对于正常位置的上边的偏移量。（正数向下，负数往上）。</li> <li>bottom，指定了定位元素下边界相对于正常位置的下边的偏移量。（正数向上，负数往下）。</li> <li>left，指定了定位元素左边界相对于正常位置的左边的偏移量。（正数向右，负数往左）。</li> <li>right，指定了定位元素右边界相对于正常位置的右边的偏移量。（正数向左，负数往右）。</li> </ul> 注意： <ol> <li>元素相对定位之后，即使该元素移走，本来的位置也不会被占据。</li> <li>同时使用left、right时，left生效。</li> <li>同时使用top、bottom、top生效。</li> <li>relative移动时如果按照百分比计算是相对于包含的父元素计算的，不是自身。</li> </ol> <h1>第九天</h1> <h4>定位</h4> 定位：<code>position:value</code>属性，用来确定根据谁来进行定位，确定定位的基准。 移动：top、<code>left</code>、<code>right</code>、<code>bottom</code>。 <ul> <li> <code>relative</code>：__相对于自身本来在的位置__进行移动。 </li> <li> <code>absolute</code>：将元素从文档流中删除，__相对于容纳块__来定位。 容纳块：<code>position</code>属性的值不是static的最近的祖辈元素（祖辈元素中内边距的外边界）。 如果到最后都没有找到，找的是__初始容纳块__。初始容纳块你可以理解为是页面的第一屏。 <ul> <li> 在使用position:absolute的时候会在大部分情况下将父元素的值设置为<code>realtive</code>。 为什么我们在用position:absolute的时候大多数要将父元素的值设置为relative，是为了__最小权限原则 __。 将影响降低到最小。 </li> <li> <code>position:absolute</code>之后的元素成了一个块状元素。 </li> <li> 如果绝对定位中的元素浮动将不会造成绝对定位的元素高度塌陷。 </li> <li> 同时使用top、bottom或同时使用left、right或top、bottom、left、right同时使用。 同时使用四个偏移量来定位，width、height为auto，将会自动计算宽度和高度。 计算公式：<code>本元素的内容宽度=容纳宽度（内容宽度+padding宽度）- left - margin-left -border-left -padding-left -padding-right - border-right - margin-right -right</code> </li> </ul> </li> <li> fixed，固定定位。固定定位的元素从文档流中删除，相对于视口来定位。 <code>rgba();</code>，通常用来做背景。 <code>opacity</code>，指定了一个元素的透明度，当这个属性的值被应用到元素上时，将这个元素当成一个整体看待。 整体包括内容、背景色、前景色、边框。 opacity的值是从0~1的范围0位完全透明、1为完全不透明。 </li> </ul> <code>display:none</code>。 格式： <code>visibility:value</code> <ul> <li>visible，元素可见</li> <li>hidden，元素不可见。</li> </ul> <code>display:none</code>和<code>visibility:hidden</code>的区别：display:none对布局不再有影响。但是visibility依然会影响布局。 <h4>堆叠顺序</h4> 格式：<code>z-index:value</code> <ul> <li> auto，可以将auto当做0来处理。 元素一旦成为定位元素那么，z-index就直接生效了。这个时候值就是auto也就是0。 <pre><code class="prism language-html"><!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> </code></pre> 定位元素在非定位元素的上面。 </li> <li> 数值，值为任何整数（正数、负数），值越大越靠上。 z-index的值无需连续。 </li> </ul> <h1>第十天</h1> HTML5是在之前的html4.01的基础上，增加了一些语义化标签、标签属性、本地存储、图形绘制、地理位置。 div span <h4>什么是语义化标签</h4> 所谓语义化就是你写的<code>HTML</code>结构，是用相对应的有一定语义的标签表示、标记的，因为HTML本身就是标记语言。 <h4>为什么要用语义化标签</h4> <ol> <li>HTML 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;</li> <li>即使在没有样式 CSS 的情况下也能以一种文档格式显示，并且是容易阅读的;</li> <li>使阅读源代码的人更容易将网站分块，便于阅读、维护和理解。</li> </ol> <h4>section标签</h4> <code>section</code>标签表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与<code>h1</code>、<code>h2</code>、<code>h3</code>、<code>h4</code>、<code>h5</code>、<code>h6</code>等标签结合使用，标示文档结构。 内容区块：将HTML页面按照逻辑进行分割后的单位。 一个section通常由内容及标题组成。 <h4>header标签</h4> <code>header</code>标签表示页面中一个内容区块（<code>section</code>）或整个页面的标题。 header标签是一种具有引导和导航作用的结构标签。放置页面或页面的一个区块的标题。 可以包含logo、搜索表单、菜单。 一个页面中可以有多个header，可以给一个内容区块加一个header标签。 header标签中一般要至少包括一个标题标签。（<code>h1~h6</code>） <h3>footer标签</h3> <code>footer</code>标签可以作为其上层父级内容区块或一个根区块的脚注。<code>footer</code>通常包括其相关区块的脚注信息，如作者、相关阅读链接以及版权信息等。 footer标签也是不限制只使用一次。你可以为一个区块设置footer标签。 <code>https://www.ituring.com.cn/</code> <code>https://m.ituring.com.cn/</code> <h4>nav标签</h4> <code>nav</code>标签是一个可以用来作为页面导航的链接组，其中的导航标签链接到其他页面或当前页面的其他部分。并不是所有的链接组都要放进<code>nav</code>标签，只需要将主要的、基本的链接组放进<code>nav</code>标签即可。 多个链接放到一起了。 使用场景： <ul> <li>侧边栏导航。</li> <li>导航菜单</li> <li>翻页操作：上一页、下一页</li> </ul> 你感觉重要的一组的链接可以放在一个nav里面去。 <h4>article标签</h4> <code>article标签</code>代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报章杂志中的文章、一篇论坛帖子、一段用户评论或一个独立的插件，或者其他任何独立的内容。 一个article标签通常有自己的标题（标题放在header中），也有footer。 article和section的不同点： <ol> <li>article可以看成是是特殊的section，比section更强调独立。</li> <li>section强调分段或分块。一个内容块比较独立、完整的时候应该用article，如果想将一整块内容分成几块时应该使用section。</li> </ol> <h4>aside标签</h4> <code>aside</code>标签，<code>aside</code>标签用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。 <ol> <li>在article中作为内容的附属信息部分。和当前文章有关的。</li> <li>作为全局或站点全局的附属信息部分。</li> </ol> <h4><code>mark</code>标签</h4> 定义带有记号的文本。 主要的目的是为了吸引当前用户的注意，因为标示出来的东西和当前的用户操作有关。 <h4>abbr缩写</h4> <code>title属性</code>：用来表示这个缩写的全称是什么，值为自定义的值。 鼠标移动到这个标记的文本上的时候会有一个提示框。用来提示给用户、告诉搜索引擎这个缩写是什么意思。 <h4>表单新增的标签</h4> <pre><code class="prism language-html"><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> </code></pre> <ul> <li> <code>autocomplete</code>用来关闭浏览器自带的提交记录。 <ul> <li>如果没有指定该属性的值，将会使用浏览器的默认值。</li> <li>on，显示提交记录</li> <li>off，关闭提交记录。</li> </ul> </li> <li> <code>datalist</code>，表示可选的数据的列表，与input标签配合使用制作出输入值的下拉列表。 它显示的仅仅是符合规则的列表。 <code>id</code>属性用来给定一个标识。 </li> <li> <code>input</code>标签中的list属性用来和datalist标签中的id属性进行绑定。 </li> <li> <code>option</code>就是候选的数据列表中的每一项。 </li> </ul> <h4>表单新增的属性</h4> <ul> <li> input标签，type属性新增的值。 <ul> <li> email，表示输入的值是一个email地址。如果输入的值不是合法的email那么不允许提交，并且给出提示。 email不检查该输入框是否为空。 <ul> <li><code>required</code>，如果要检查是否为空需要加上<code>required</code>。</li> </ul> </li> <li> url，表示输入的地址必须是url地址。如果不是禁止提交。但是依然不能防止用户没有输入内容。所以还要加上<code>required</code>。 </li> <li> number，number表示输入的是数值。在提交时进行检查。 <ul> <li>min，允许的最小值</li> <li>max，允许的最大值。</li> <li>step，步长，间隔。</li> </ul> </li> <li> date，选取年月日。 </li> <li> time，时间选取小时和分钟 </li> <li> range，输入一段范围的数值。在浏览器中以滚动条的方式显示。 <ul> <li>min，允许的最小值</li> <li>max，允许的最大值。</li> <li>step，步长，间隔。</li> </ul> </li> <li> color，选择颜色。 </li> </ul> </li> <li> <code>autofocus</code>，自动获得焦点。 一个页面上应该只有一个input中有<code>autofocus</code> </li> <li> <code>placeholder属性</code>：用来对用户的输入进行提示，提示用户可以输入的内容。 </li> </ul> <h4>音频、视频</h4> <ul> <li> 音频标签 格式：<code><audio></audio></code> <ul> <li><code>src</code>：给他一个音频的地址。</li> <li><code>controls</code>属性：加入系统自带的播放用的控制条。</li> <li><code>muted</code>属性：如果被设置音频默认将会是静音模式。</li> <li>loop属性：循环播放。</li> </ul> <code>mp3</code>、<code>ogg</code>、<code>wav</code>。 </li> <li> 视频标签 格式：<code><video></video></code> <ul> <li>src属性：要播放的视频的地址。</li> <li><code>controls</code>属性：加入系统自带的播放用的控制条。</li> <li>width属性：设置窗口的宽度</li> <li>height属性：设置窗口的高度。</li> <li>poster属性：给视频设置封面，展示一副图片。</li> </ul> </li> </ul> <h4>层次选择器（区分出层次-儿子、爸爸-兄弟）</h4> <ul> <li><code>E F</code>，后代选择器，选择匹配F，匹配的F元素属于E元素的后代。</li> <li><code>E>F</code>，子选择器，选择匹配的F元素，匹配的F元素是E元素的子元素。</li> <li><code>E+F</code>，相邻兄弟选择器，选择匹配的F元素并且F元素紧紧位于E元素的后面。</li> <li><code>E~F</code>，兄弟选择器，匹配F元素，且位于匹配的E后面的所有F元素。（同属于一个父元素）</li> </ul> <h4>属性选择器</h4> 这个指的是HTML标签的属性。 <ul> <li> <code>E[attr]</code>，选择匹配具有attr属性的E元素，你只有定义了attr属性才能被选中。 也可可以使用<code>E[attr1][attr2]</code>来选择同时具有attr1和attr2两个属性的E元素。 </li> <li> <code>E[attr='val']</code>，选择匹配具有attr属性的E元素并且该属性规定了具体的值。（完全匹配，区分大小写）。 </li> <li> <code>E[attr *='val']</code>，选择匹配的E元素并且E元素定义了attr属性在它的值的任意位置包含了val。 </li> <li> <code>E[attr ^= 'val']</code>，选择匹配的E元素，并且E元素右attr并且它的值以val开头。 </li> <li> <code>E[attr $= 'val']</code>，选择匹配的E元素，并且E元素右attr并且它的值以val结尾。 </li> </ul> <h4>伪类选择器</h4> <ul> <li> <code>E:first-child</code>，选择父元素的第一个子元素，且元素为E的元素。必须是第一个孩子并且这个孩子还得是E </li> <li> <code>E:first-of-type</code>，选择父元素的第一个E元素。只选择第一个出现的E元素。 </li> <li> <code>E:last-child</code>，选择父元素的最后一个子元素，且元素为E的元素。 </li> <li> <code>E:last-of-type</code>，选择父元素的最后一个E元素。 </li> <li> <code>E;nth-of-type(n)</code>，选择父元素的第n个E元素。 </li> <li> <code>E:nth-child(n)</code>，选择父元素的第n个子元素，且元素为E的元素。 n的情况： <ul> <li> 数字 写n相当于全选，从第0个开始。 写1、2、3、4等等之类的数字。 </li> <li> 关键字 odd，奇数 even，偶数 </li> <li> 公式 <ul> <li> Mn，n是字母，m是数字。表示的是n的m倍。 </li> <li> n是从0开始算的，但是html是从1开始算的。 </li> <li> Mn+x，表示从x开始，每隔M个选择一个。 </li> </ul> </li> </ul> </li> </ul> <h4>动态伪类选择器</h4> <ul> <li><code>E:focus</code>，选择匹配的E元素，且匹配的元素获得焦点的时候被触发。用于input标签。</li> <li><code>E:target</code>，选择匹配E的所有元素，并且匹配元素被相关URL指向时才会生效（锚点指向时生效）。</li> <li><code>E:checked</code>，选择匹配的E元素并且E元素被选择（单选和多选）。</li> </ul> <h4>伪元素选择器</h4> <ul> <li><code>E::before</code>，选择匹配的E元素并在选择元素的开始标签的后面插入内容。</li> <li><code>E::after</code>，选择匹配的E元素并在选择元素的结束标签的前面插入内容。</li> </ul> 要插入内容就需要使用content属性来指定要插入的内容（这种方法通过CSS插入内容而不是通过HTML标记插入内容）。 content的值： <ul> <li><code>字符串</code></li> <li><code>url(图像地址)</code>，插入一张图</li> <li><code>attr(HTML的属性的名字)</code>，将对应的属性名的值插入进去。</li> </ul> 注意： <ol> <li>content中的内容不会被搜索引擎收录、抓取。</li> <li>生成的内容在元素框的内容。</li> <li>默认的时候是在这个元素中生成了一个行内元素，可以使用display进行修改。</li> <li>只要属性能够被继承，生成的内容会默认继承它父元素的属性的值。</li> </ol> <h1>地十一天</h1> <h4>css3选择器权重值</h4> <ul> <li>ID选择器：<code>0,1,0,0</code></li> <li>类选择器、属性选择器、伪类选择器：<code>0,0,1,0</code></li> <li>标签选择器、伪元素选择器：<code>0,0,0,1</code></li> <li>通用选择器：<code>0,0,0,0</code></li> <li>层次选择器拆开并且进行相加。</li> <li>行内样式：<code>1,0,0,0</code></li> </ul> 当你的选择器选择正确、属性名和值都是合法的。如果不好使就得想想是不是权重值的问题。 <h4>文字阴影</h4> 格式： <code>text-shadow:value</code> <ul> <li> none，没有阴影。（默认值） </li> <li> <code>color lrsshadow tbshadow blur</code> <ul> <li>color，阴影的颜色。</li> <li>lrsshadow，左右阴影。</li> <li>rbsshadow，上下阴影</li> <li>blur，模糊度。</li> </ul> 如果为负数时左、上 如果为正数时右、下 </li> </ul> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bWCGh8XK-1626946116511)(/Volumes/尚硅谷前端/笔记/11/笔记、代码/image-20210709092556322.png)] <pre><code class="prism language-html"><!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> </code></pre> 注意： text-shadow可以有多组，多个效果叠加。 <h4>圆角属性</h4> 元素的边框是直角的，现在可以使用border-radius属性定义一个（或两个）半径，把边角变的圆滑。 格式1：<code>border-radius:value</code>，1个值，将值同时应用在四个角上。 <ul> <li>px，按照像素进行计算。</li> <li>%，按照元素宽度及元素高度的百分比进行计算。</li> </ul> <pre><code class="prism language-html"><!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> </code></pre> 圆角的原理：生成了指定水平半径和垂直半径的圆或椭圆同时应用在四个角落里。 格式2：<code>border-radius:左上、右下右上、左下</code> 格式3：<code>border-radius:左上右上、左下右下</code> 格式4：<code>border-radius:左上右上右下左下</code> 格式5：<code>border-top-left-radius:value</code> 格式6：<code>border-top-right-radius:value</code> 格式7：<code>border-bottom-right-radius:value</code> 格式8：<code>border-bottom-left-radius:value</code> <h4>盒子阴影</h4> 格式：<code>box-shadow:value</code> <ul> <li>左右阴影：负数左边，正数右边。</li> <li>上下阴影：负数上边，正数下边。</li> <li>阴影模糊度</li> <li>阴影颜色</li> <li><code>[inset]</code>，投影在盒子内部。</li> </ul> <h4>裁剪背景</h4> 默认的时候背景从内容区经过内边距一直到边框的外边界。 <code>background-clip</code>来控制背景延伸到哪里。 <ul> <li>border-box，默认值延伸到边框的外边界。</li> <li>padding-box，延伸到内边距的外边界。</li> <li>content-box，将背景限制在内容区域内。</li> <li>text，以文字作为裁剪区域。</li> </ul> <code><<Read All About It>></code> <h4>背景的定位基准</h4> 默认的时候background-position相对于内边距的外边界来定位，你可以使用<code>background-origin</code>来进行更改。 格式： <code>background-origin:value</code> value: <ul> <li>padding-box，默认值。相对于内边距的外边界了定位。</li> <li>border-box，相对于边框的外边界来定位。</li> <li><code>content-box</code>，相对于内容区域的外边界来进行定位。</li> </ul> <code>background-clip</code>用来定义背景图延伸到哪里，<code>background-origin</code>用来定义<code>background-position</code>定位的时候应该以谁作为基准。 <h4>调整背景背景图的尺寸</h4> <code>background-size</code>，调整背景图的尺寸 value可以是两个值第一个值是横向的尺寸，第二个值是纵向的尺寸。 <ul> <li>px，像素</li> <li>%，按照元素的宽度和高度来进行计算。</li> <li>cover，等比例缩放完全覆盖容器，背景图有可能超出容器。</li> <li>contain，等比例缩放，背景图始终被包含在容器内。</li> </ul> cover和contain的相同点：都是进行等比例缩放。不同点：cover是铺满整个区域，如果显示比例和显示区域的比例相差很大某些部分不会显示出来（超出了）。contain，它是按照某一边来进行覆盖的，所以有可能会出现有白边的情况。 <h4>背景粘附</h4> <code>background-attachment</code> 背景图像默认随着文档一起滚动。可以使用background-attachment来修改这个行为。 value： <ul> <li> scroll，默认值。背景图是相对于元素自身固定，并且不随着它的内容滚动。 给body上设置background-attachment:scroll是一种例外，背景会随着内容的滚动而滚动。 </li> <li> fixed，背景图相对于视口固定，所以页面滚动背景不动。 </li> <li> local，相对于元素的内容来固定，如果一个元素有滚动条时，背景会随着内容一起滚动。 </li> </ul> <h4>简写属性</h4> <code>background:image position/size repeat attachment origin clip color</code> 当写多张背景图的时先写的放在上面，后写的放在下面。 <h1>第十二天</h1> <h4>滤镜</h4> 滤镜：主要用来实现图像的各种的特殊效果。 格式：<code>filter:value</code>一般用在图片上。 <ul> <li>none，默认，没有效果。</li> <li><code>blur(length)</code>，模糊度。0为不模糊，可以使用px作为单位。</li> <li><code>grayscale(number);</code>，调整元素的灰度。值为0没有变化，值为1完全变成灰色图像。值可以为小数。</li> <li><code>opacity(number)</code>，将透明度应用在图片上，0完全透明，1不做任何修改。可以为小数。</li> <li><code>sepia()</code>，用来调整元素的红褐色，值为100%完全渲染为深褐色，0%无变化。</li> <li><code>invert()</code>，将所有颜色翻转，0%没有变化，100%时元素为完全翻转。</li> <li><code>brightness()</code>，调整元素上颜色的亮度。值为0%时为纯黑色、100%时元素没有任何变化。大于100%的颜色亮度会有变化。比以前的颜色更亮。</li> <li><code>contrast()</code>，设置对比度。0%变成纯灰色，100%没有变化，大于100%对比度越来越大。</li> <li><code>saturate()</code>，设置包含度。饱和度越高，颜色越鲜艳，饱和度越低颜色越暗淡。调整为0%时候没有饱和度，得到的是灰色。100%时元素没有变化。</li> </ul> <code>filter</code>的<code>value</code>可以有多个方法，多个方法之间使用空格分隔。 <code>rgba</code>、<code>opacity</code>、<code>opacity()</code> <ul> <li><code>filter:opacity()</code>，一般用在图片上，因为filter可以使用多个效果。</li> <li><code>opacity</code>，用的最多的地方就是动画，用来做整体的淡入淡出。</li> <li><code>rgba</code>，只是背景透明，里面的内容不透明。所以通常用来做背景的东西。</li> </ul> <h4>渐变</h4> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZgOBU7mk-1626946116513)(/Volumes/尚硅谷前端/笔记/12/笔记、代码/20210311134010827_325.png)] 渐变指的是从一个颜色到另外一个颜色的平滑过渡，它是图像。 渐变分为线性渐变和径向渐变，线性渐变和径向渐变又分为循环渐变和非循环渐变。 <h4>线性渐变</h4> <code>linear Gradient</code>，指的是沿着一条线填充得到的渐变（这条线是贯穿元素中心的一条线，这条线就是梯度线）。 格式：<code>linear-gradient [方向/角度] color1 color2.....</code> <ol> <li> 简单的颜色值，这些颜色可以包含transparent、rgba等等。颜色可以有两个或多个。 </li> <li> 角度的设置 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rNk3H1Hq-1626946116514)(/Volumes/尚硅谷前端/笔记/12/笔记、代码/20210311134103775_6875.png)] 角度可以用正数也可以用负数 225度等于-135度 </li> <li> 梯度线的颜色分配。 梯度线分配颜色的时候是在梯度线90度的地方分散出来了很多的虚拟的线条进行无限的延伸。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WLafMOj3-1626946116517)(/Volumes/尚硅谷前端/笔记/12/笔记、代码/20210311134432105_6693.png)] </li> <li> 方向 <ul> <li>to bottom，梯度线方向向下。</li> <li>to top，梯度线方向向上。</li> <li>to left，向左</li> <li>to right，向右</li> <li>to left top，左上</li> <li>to left bottom，左下</li> <li>to right top，右上</li> <li>to right bottom，右下</li> </ul> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MIdMVC86-1626946116520)(/Volumes/尚硅谷前端/笔记/12/笔记、代码/20210311134455428_17299.png)] <ol> <li>过图像的中心点，将声明的角的相邻的两侧的角连接起来。</li> <li>梯度线与那条对角线垂直，指向声明的角。（需要过元素的中心点）。</li> </ol> </li> <li> 颜色值的分配 默认的时候你的多个颜色的值是平均分配在梯度线上的。第一个颜色为0%，最后一个100%。 </li> <li> 指定颜色的值 可以指定px或%指定插入颜色的位置，这样可以让颜色不会平均分布在梯度线上。 如果排布的颜色不到梯度线的末尾，那么最后一个颜色将会一直延伸下去。 急停的效果。 </li> </ol> <h4>重复性线性渐变</h4> <code>repeating-linear-gradient</code>，重复性线性渐变在梯度线上不断的循环排布声明的颜色，最后一个颜色的长度用于定义图案的整体长度，超过之后就开始循环。 径向渐变 <code>radial-gradient</code>，沿着一个中心点向四周扩展颜色、进行平滑过渡。 格式： <code>radial-gradient:[大小] [at point] color1 color2.....</code> <ol> <li> 简单的颜色可以使用rgba、transparent。 默认的时候，径向渐变在中间显示，如果是在方形元素中径向渐变为圆形，在矩形元素中径向渐变为椭圆形。 </li> <li> 梯度射线，梯度射线从渐变的中心向右开始延伸。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qGJQYYUf-1626946116521)(/Volumes/尚硅谷前端/笔记/12/笔记、代码/20210311140320271_17549.png)] </li> <li> 默认的时候如果有多个颜色值也是平均分配在梯度射线上的。你可以指定位置。 </li> <li> 大小 在径向渐变中，径向形状可以设置的比图像小。 大小，一个值或两个值。 如更是一个值，得到的圆形的渐变，值就是半径。 如果径向渐变的形状比渐变图像小，最后一个的颜色将一直向外延伸。 </li> <li> <code>at point</code>，默认的时候径向渐变的中心在元素的中心，可以使用<code>at point</code>来更改。 </li> </ol> <h4>重复性径向渐变</h4> 重复性径向渐变<code>repeating-radial-gradient</code>，定义好圆形或椭圆形的尺寸之后再用长度定义颜色在梯度射线上的位置，超出梯度射线之后，就能看到循环渐变。 渐变可以有多个，多个渐变的时候先写的在上面，后写的在下面。 <h4>从PSD设计稿中获得渐变的值</h4> <ol> <li> 选择移动工具 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tJFKT3i0-1626946116523)(/Volumes/尚硅谷前端/笔记/12/笔记、代码/image-20210710142020393.png)] </li> <li> 选中元素后选择：自动选择、图层 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AAnw0ZNp-1626946116532)(/Volumes/尚硅谷前端/笔记/12/笔记、代码/image-20210710142119470.png)] </li> <li> 选中自动定位的图层 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xmGbhbdw-1626946116536)(/Volumes/尚硅谷前端/笔记/12/笔记、代码/image-20210710142153048.png)] </li> <li> 在定位的图层上选择复制css（右键哦） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3C2pB1bQ-1626946116540)(/Volumes/尚硅谷前端/笔记/12/笔记、代码/image-20210710142227272.png)] </li> </ol> <h4>过渡</h4> 过渡是元素从一种样式逐渐改变为另外一种样式的效果。 步骤： <ol> <li>指定要添加效果的CSS属性</li> <li>指定效果的持续时间。</li> </ol> <h4>定义过渡的属性</h4> 格式：<code>transition-property:value</code>，你只有在这个属性中定义的才会以动画的形式持续一段时间而不是瞬间变化。 <ul> <li> none，不过渡任何属性 </li> <li> all，过渡所有的属性。 有些属性是不可以过渡的。 属性值可以使用数值的一般都支持过渡，不是数值是某些关键字但是可以转换为数值的也支持过渡。 </li> <li> 其他属性的列表，以逗号分隔的属性的列表。 </li> </ul> <h4>设置过渡的持续时间</h4> 格式： <code>transition-duraction</code>，指定一个状态过渡到另外一个状态需要经过多长时间。 <ul> <li>默认的时候是0s，表示没有持续时间。</li> <li>值的单位可以s（秒）或ms（毫秒），必须带单位。只能是正数。100ms~300ms之间。</li> <li>如果想让transition-property属性指定的值都使用一个持续时间可以只声明一个值。如果想让其中的多个属性都有自己的持续时间那么可以使用列表：<code>transition-duration: 200ms, 10s;</code></li> </ul> 过渡一种附属效果，锦上添花的东西。 <h4>调整过渡的方式</h4> 正常情况下，进行过渡的样式是慢速开始，然后加速，然后再慢速结束。 <code>transition-timing-function</code> <ul> <li>ease，慢速开始、加速、再慢下来。</li> <li>linear，整个过程保持相同的速度。匀速。</li> <li><code>ease-in</code>，慢-》快</li> <li><code>ease-out</code>，快-》慢</li> <li><code>cubic-bezier()</code>，用来指定一个三次方的贝塞尔曲线。</li> </ul> <code>https://cubic-bezier.com</code> <h4>延迟过渡</h4> 格式： <code>transition-delay:value</code> <ul> <li>默认值是0s，过渡立即开始。</li> <li>其他的和<code>transition-duraction</code></li> </ul> <h4>简写属性</h4> <code>transition:property duraction timing-function delay</code> <code>transition:property1 duraction1 timing-function1 delay1,property2 duraction2 timing-function2 delay2......</code> <h4>反向过渡</h4> 如果你要是在:hover上声明过渡，那么只在鼠标移入时才会被触发过渡，移出事瞬间变为原来的状态。 如果要解决上面的问题要将transtion相关的属性放在这个元素本身上，这样当鼠标离开之后也会有过渡的效果。 <pre><code class="prism language-html"><!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> </code></pre> <h1>第十三天</h1> <h4>变形</h4> <ul> <li> 关于坐标： <ul> <li>x轴：正值往右，负值往左。</li> <li>y轴：正值向下，负值向上。</li> </ul> </li> <li> 变形属性：<code>transform:value</code> <ul> <li>none，默认值，无变形。</li> <li>剩下的就是一个一个的变形方法。</li> </ul> </li> <li> 变形方法： <ul> <li> <code>translatex()</code>，沿元素自身的x轴移动元素。 <ul> <li>px，像素</li> <li>%，相对于自身的宽度来计算（内容区、边框、内边距）。</li> </ul> </li> <li> <code>translatey()</code>，沿着自身的y轴移动元素。 <ul> <li> px，像素 </li> <li> %，相对于自身的高度来计算（内容区、边框、内边距）。 </li> </ul> transform在写后面的变形的方法的时候可以写多个。 <code>transform:translatex(100%) translatey(100%);</code> <ul> <li>多个变形方法一个接一个，中间以空格分开。</li> <li>多个变形方法一次只处理一个。</li> <li>多个变形方法你要保证都写对一个错，整个规则都将失效。</li> </ul> 我们可以使用<code>transform:translateX(50%) translateY(50%)</code>来实现垂直、水平居中，它适合不确定自身有多少的时候使用，因为<code>translateX</code>和<code>Y</code>都是相对于自身的宽、高来进行计算的。 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> <code>translate(x,y)</code>同时沿着x轴及y轴来进行移动。 只写一个值的时候y不写的时那么默认是0。 </li> <li> <code>scaleX()</code>，在x轴上进行缩放 </li> <li> <code>scaley()</code>，在y轴上进行缩放 它们的值只能是没有单位的数，始终为正数，可以为小数。意思是宽度或高度的倍数。 经过变形的元素右可能比以前大、有可能比以前小，但是元素在页面上所占的空间与变形之前保持不变。 </li> <li> <code>scale()</code>，在x轴和y轴上同时缩放。 只写一个值将会同时应用在x轴和y轴上。写两个值的时候第一个值给到x第二个值给到y。 </li> <li> <code>skewx()</code>，元素在水平方向扭曲，正数的时候元素的左上角和右下角会被’拉扯’。为负数的时候元素的右上角和左下角会被拉扯。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D1bEGhcj-1626946116541)(/Volumes/尚硅谷前端/笔记/13/笔记、代码/20210314210826634_32019.png)] </li> <li> <code>skewy()</code>，元素在垂直方向扭曲。值为正数左上角和右下角被拉扯。值为负数的时右上角和左下角被拉扯。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bDoYVobt-1626946116543)(/Volumes/尚硅谷前端/笔记/13/笔记、代码/20210314210842406_28810.png)] </li> <li> <code>rotateZ()</code>、<code>rotate()</code>，沿着z轴旋转指定的角度。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ply0u6Ct-1626946116545)(/Volumes/尚硅谷前端/笔记/13/笔记、代码/20210314210909608_17006.png)] 旋转角度之后会修改x轴和y轴的坐标位置。 一定要注意先后位置。 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 移动原点 默认时变形都以元素的绝对中心作为变形的旋转，当使用transform-origin可以更改原点的位置。 <code>transform-origin:value</code> 值可以分为两个，第一个横向，第二个纵向的。他们相交的点就是移动的原点。 </li> </ul> </li> </ul> <h4>动画</h4> 过渡：在一段时间内把某种状态变为另外一种状态。 CSS动画和过渡相同点就是都是在一段时间内发生变化，不同点：动画对变化的方式有更大的控制权，过渡从某种程度上来说只不过是一种简单的动画。 使用步骤： <ol> <li>定义关键帧</li> <li>在元素上使用</li> <li>指定动画持续的时间</li> </ol> <ul> <li> 定义关键帧 需要定义一个规则这个规则要有一个名字。正常规则是可以重复使用的。 格式： <pre><code class="prism language-html">@keyframes 规则名{ } </code></pre> 在这个规则中要有一个或多个关键帧块，每个关键帧的块包括关键帧选择符（就是动画持续的时间点）、属性、值。有多个关键帧块组成了一个完整的动画。 <pre><code class="prism language-html">@keyframes test{ 0%{ property1:value1; } 100%{ property2:value2; } } </code></pre> <ul> <li>0%，100%表示动画播放到0%和100%分别希望某个元素的属性值为什么。</li> <li>75%，表示动画进行到75%的时候的值。你也可以使用其他的百分比。</li> </ul> </li> <li> 在元素上使用动画 <code>animation-name:value</code> <ul> <li>none，没有规则名表示没有动画效果。</li> <li>写上规则名</li> </ul> </li> <li> 设定动画的持续时间 <code>animation-duration:value</code> 持续时间必须带上单位s或ms。 注意： <ol> <li> 如果没有写0%或100%的时，它将使用要应用动画效果属性的原始值自动构建 0%和100%。 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 0%和100%也可以使用关键字：<code>from</code>和<code>to</code> </li> <li> 关键帧块的百分比不必按照升序来排列。 </li> <li> 如果你在关键帧块中列出来的属性不支持动画那么将会被直接忽略。 </li> </ol> </li> <li> 多动画 <code>animation-name:规则1,规则2....</code> 如果使用了多个规则那么<code>animation-duraction:时间1,时间2...</code> </li> <li> 延迟播放动画 <code>animation-delay:value</code> 默认情况下，动画附加到元素上的时候就开始进行播放没有延迟。我们使用animation-delay来进行延迟。只是延迟进行第一次的动画。 多次执行动画时，如果每次都需要有延迟可以使用动画相关的JS事件来实现。 </li> <li> 动画的迭代次数 默认的时候只播放一次。 <code>animation-iteration-count:value</code> <ul> <li>1，默认值。</li> <li>任何数字，但是不允许设置为负数。</li> <li><code>infinite</code>，无穷。</li> </ul> </li> <li> 设置动画的播放方向 <code>animation-direction</code>用来定义什么方向播放动画。 <ul> <li>normal，默认值，动画的每次迭代都从0%向100%播放。</li> <li>reverse，逆序播放，从100%向0%播放。</li> <li>alternate，动画在奇数次正向（0%100%），在偶数次反向播放（100%0%）。</li> <li>alternate-reverse，动画在奇数次反向播放，在偶数次是正向播放。</li> </ul> </li> <li> 改变动画的内部时序 <code>animation-timing-function</code>，用来改变动画的内部时序。 <ul> <li>ease，慢-》快-》慢</li> <li>linear，匀速。</li> <li>其他的参考<code>transition-timing-function</code>的值。</li> </ul> __animation-timing-function__定义的是在每个关键帧块中执行的节奏。 </li> </ul> <h1>第十四天</h1> <h4>关键帧动画</h4> <code>animation-timing-function</code>有一个值<code>step(步数)</code>指的是步进的时序方式。 步数：必须是正数，将动画时长分为步数对应的段数。 使用<code>steps()</code>时，属性是连续不断滑入的（这里面没有过渡，直接就到了某个阶段） <h4>简写格式</h4> 格式： <code>animation:name duration timing-function delay iteration-count direction</code> 默认值： <ul> <li><code>durcation</code>:0s</li> <li><code>timing-function</code>,ease</li> <li><code>delay</code>，0s</li> <li><code>iteration-count</code>，1</li> <li><code>direction</code>，normal。</li> </ul> <h4>百分比布局的方式（原始的布局方法）</h4> <ol> <li> 左侧固定右侧自适应 <ol> <li> <code>aboluste</code>方法。 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> float方法 你要先理解：两个float的元素，设置元素的margin为负数，他们是可以重叠的。 <pre><code class="prism language-html"><!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> </code></pre> 前面的例子<code>margin-left:-100%</code>，百分比表示的是父元素的宽度。float中有一个规则：<code>浮动元素必须尽可能的高的放置</code>，但是规范上又没有说这种情况具体应该怎么处理。浏览器对于这种情况，会紧挨着父元素的左边或右边、顶边。 </li> </ol> </li> <li> 三列布局 <ol> <li> 双飞翼布局 步骤： <ol> <li><code>#middle</code>,<code>#left</code>,<code>#right</code>都浮动</li> <li>将<code>#left</code>使用<code>margin-left:-100%</code>拉倒了最左边。</li> <li>将<code>#right</code>使用<code>margin-left:-200px</code>拉倒的最右边。</li> <li>在<code>#c</code>中设置左右外边距是200px，使用横向格式化的公式自动去计算width的值。（让内容不被遮挡）</li> </ol> <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 圣杯布局 <pre><code class="prism language-html"><!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> </code></pre> </li> </ol> </li> </ol> <h1>第十五天</h1> 弹性盒布局 弹性布局、弹性盒子、flex布局、伸缩布局、伸缩盒子。 弹性盒子是一种简单、强大的布局方式。 有了它之后可以指明空间的分布方式、内容的对齐方式、元素的视觉顺序。弹性盒子最适合沿着一个方向布置内容。 它的突出特点就是能让元素对不同的屏幕尺寸不同的显示设备做好适应准备。 弹性布局是父元素和子元素之间的关系。 父元素：弹性空间或弹性容器。 子元素：弹性项、弹性元素。 <h4>弹性容器</h4> 关于弹性容器的属性比较多，大多数用的都是给弹性容器设置的。 在父元素上声明<code>display:flex</code>便激活了弹性盒子布局，弹性容器负责所占空间内的子元素如何排布。 当父元素小于子元素的总宽度的时候将会被自动压缩。 <h4>弹性元素</h4> 弹性容器的子元素称为弹性元素（只有直接子元素使用弹性盒子布局，子元素的后代不受影响。） 在弹性容器中，各个弹性元素在主轴上面排列，主轴可以横向的可以是纵向的。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KZrmThUf-1626946116546)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/20210315222002820_11131.png)] 主轴：内容都沿着主轴的方向流动。默认主轴是水平方向，从左边开始、右边结束。 垂直轴：交叉轴、侧轴、辅轴：弹性元素沿着这个轴的方向指明弹性元素行的方向（垂直轴永远和主轴垂直）。默认的时候垂直轴是从上面开始、下面结束。 <h4>设置主轴的方向</h4> <code>flex-direction</code>用来指定在弹性容器中如何摆放元素。定义它就决定了一行中的弹性元素如何排列。从主轴的起始边开始、流向主轴的结束边。 <ul> <li> <code>row</code>，默认值，主轴的起始边在弹性容器左边，结束边在弹性容器右边。（__样式上类似__于<code>float:left</code>） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XFpPE5UX-1626946116547)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714092553087.png)] </li> <li> <code>row-reverse</code>，主轴的起始边从弹性容器的右边开始，结束边在弹性容器的左边。（__样式上类似__于<code>float:right</code>） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-crlmkCQN-1626946116553)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714092730825.png)] </li> <li> <code>column</code>，主轴起始边在上面，结束边在下面。交叉轴变为横向从左边开始右边结束。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NjHWRI9u-1626946116554)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714093024874.png)] <ul> <li><code>column-reverse</code>：主轴的起始边在下边，结束边在上边。交叉轴变为横向从左边开始右边结束。</li> </ul> </li> </ul> <h4>换行</h4> 弹性元素在弹性容器的主轴放不下的时候，默认是不会换行的。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FZHBYRWD-1626946116560)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714093655335.png)] 格式： <code>flex-wrap</code>，用来控制换行（用在弹性容器） <ul> <li> nowrap，默认时都会沿着主轴在一行上面排列，不会换行。 </li> <li> wrap，如果超过弹性容器，将会沿着垂直轴的方向进行换行。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d5yk8ia1-1626946116561)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714094024753.png)] </li> <li> wrap-reverse，如果超过弹性容器，将会沿着垂直轴的反方向进行换行。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dy5YIeRU-1626946116562)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714101525249.png)] </li> </ul> <h4>设置弹性元素如何在主轴上分布</h4> 默认的时候弹性容器放下全部的弹性元素的时候留下的空白始终现在主轴的结束方向。 可以使用<code>justify-content</code>属性来设置弹性容器在主轴上如何分布各行的弹性元素。 <ul> <li> flex-start，默认值，弹性元素紧靠主轴的起始边。 </li> <li> flex-end，弹性元素紧靠主轴的结束边（有点像text-algin:right） </li> <li> center，将弹性元素作为一个整体，居中显示在主轴。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cTzSN964-1626946116563)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714102119479.png)] </li> <li> <code>space-between</code>，<code>between</code>（在xxx中间） 每一行的第一个元素放在主轴起始边，最后一个元素放在主轴结束边，剩下相邻的每一对弹性元素之间放置等量的空白。 空白距离/(元素个数减一) = 相邻之间相差多少。 <pre><code class="prism language-html"><!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> </code></pre> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LW05lVVM-1626946116564)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714102231987.png)] </li> <li> <code>space-around</code>，<code>around</code>（环绕） 把剩下的空间除以该行的弹性元素的个数，每份空间分给元素的两边。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QnYzD3AN-1626946116566)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714102841168.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BJrWbXfo-1626946116566)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714102254100.png)] </li> <li> <code>space-evenly</code>，计算元素总数量，然后在此基础上+1，然后将一行里面的空间分成这面多份，每一行的一个弹性元素的前面放置一份空间，最后一份放置在最后一个弹性元素后面。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nkbHxK04-1626946116568)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714103202167.png)] justify-content，即使一行放不下，然后换行了，也会在新开的行上面按照指定的值进行排列。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZyzNVDa5-1626946116569)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714103622170.png)] </li> </ul> <h4>设置弹性元素如何在垂直轴上面分布</h4> align-items属性定义的是弹性元素在垂直方向上的对齐方式（在当前行垂直上面的位置分布） <ul> <li> <code>flex-start</code>，将各个弹性元素与弹性容器的垂直轴起始边一侧对齐。 </li> <li> <code>flex-end</code>，将各个弹性元素与弹性容器的垂直轴结束边一侧对齐。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u97AIunr-1626946116570)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714104119297.png)] </li> <li> center，每一行的弹性元素垂直居中于本行。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p05CWhkS-1626946116571)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714104229506.png)] </li> <li> stretch（默认值），如果弹性元素没有设置高度或高度为auto，将铺满本行的所有高度。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xHRjsL7p-1626946116572)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714104347330.png)] </li> </ul> 如果想单独的去修改某个弹性元素的对齐方式，可以在相应的弹性元素上使用align-self属性。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QKWkrkKo-1626946116573)(/Volumes/尚硅谷前端/笔记/15/笔记、代码/image-20210714104721774.png)] <code>align-self：value</code>，用在弹性元素上，设置自己垂直对齐的方式。 <ul> <li>auto，默认值。继承容器的align-items。</li> <li>flex-start，垂直轴起始边对齐。</li> <li>flex-end，垂直轴结束边对齐。</li> <li>center，每一行垂直居中。</li> <li>stretch，没设置高度或高度为auto，占满本行高度。</li> </ul> <h4>设置整个弹性元素如何对齐</h4> <code>align-items</code>是每行如何垂直对齐。<code>align-content</code>将整个弹性元素看成一个整体然后对齐。 <code>align-content</code>属性对于单行的弹性盒子模型无效必须让其换行（也就是<code>flex-wrap:nowrap</code>是不行的） <ul> <li>flex-start，垂直方向整体靠垂直轴起始边。</li> <li>flext-end，垂直方向整体靠垂直轴结束边。</li> <li>center，看成一个整体，垂直居中。</li> <li>space-between，把第一行里的弹性元素放在垂直轴起始边，最后一行里面的弹性元素放在垂直轴结束边。然后余下的每一行弹性元素之间放置等量的空白。</li> <li>space-around，将余下的空间除以行数的个数，得到每行应该分配到的空间，然后将这个空间分成两份。</li> <li>space-evenly，计算行数，然后+1，就容器的空间分成那么多份。每一行前面放置一份空间，最后一份放置在最后一行的后面。</li> <li>stretch，直接撑满本行高度。</li> </ul> align-content和align-items都存在时，align-items失效。 <code>align-content</code>、<code>align-items</code>区别在于：<code>align-content</code>将所有弹性元素看成一个整体进行操作。<code>align-items</code>是针对每一行的操作。 <hr> <h4>弹性增长因子</h4> <code>flex-grow</code>，适用于弹性元素（子元素上使用），用来定义有多余的空间时是否允许弹性元素增大，以及增大的比例是什么。 默认是0，其他的时候始终是数字，负数无效。可以是小数。 <pre><code class="prism language-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"> <div>1</div>   <div style="flex-grow:1;">2</div> <div>3</div> </div> </body> </html> </code></pre> <pre><code class="prism language-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">   <div style="flex-grow:0.8;">1</div>  <div style="flex-grow:1">2</div>  <div style="flex-grow:0.7">3</div> </div> </body> </html> </code></pre> 一般来说我们使用flex-grow用来实现等分。 <pre><code class="prism language-html"><!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> </code></pre> <h4>弹性元素排序</h4> 默认的时候弹性元素的显示和排列顺序和在源码中的顺序一致。 <code>order</code>：用于弹性元素。默认的时候弹性元素的顺序都是0。 你可以修改这个值，可以把order改为正数或负数。 <code>order</code>的值越大显示在主轴上越靠后。如果数值相同归在一个排序组中，以源码出现的顺序沿主轴方向显示。 <pre><code class="prism language-html"><!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> </code></pre> order，只是视觉上的变化，在源代码中的顺序没有（但是就好像改变了一样）。 <h4>缩减因子</h4> 默认的时候宽度之和大于容器会发生收缩，收缩的依据是<code>flex-shrink</code>，并且flex元素压缩的最小宽度不能小于其中内容的宽度。 <code>flex-shrink:value</code>，也是适用于弹性元素。它用来表示如何分配<code>缺少的空间</code>。 缩减因子定义的是空间不够放置所有弹性元素并且元素容器不能增加尺寸并且不允许换行。 默认的时候分配的值是1，其他的时候始终是数字，可以是小数。不能是负数。 <pre><code class="prism language-html"><!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">   <div style="flex-shrink:0.7;">1</div>  <div style="flex-shrink: 0.8;">2</div>  <div style="flex-shrink: 1;">3</div> </div> </body> </html> </code></pre> <h4>BFC</h4> 块级格式化上下文（<code>block-formatting-context</code>），是web页面的可视化的CSS渲染出的一部分。形成了BFC就形成了一个独立区域，区域里面的子元素不会影响到外面的元素。 形成BFC的方法： <ol> <li>浮动元素：元素的float不是none的元素。</li> <li>绝对定位的元素：<code>poistion</code>的值为<code>absolute</code>或<code>fixed</code>。</li> <li>内联块：<code>display:inline-block</code></li> <li>具有<code>overflow</code>属性并且值不是<code>visible</code>的元素。</li> <li><code>display</code>为<code>flow-root</code>的值。（只是单纯的触发BFC）</li> </ol> 1、2、3、4都可以形成BFC但是要加上自己的特性。float触发了BFC还得浮动、<code>poistion</code>触发了<code>BFC</code>还得定位、<code>display:inline-block</code>触发了BFC还得变成行内块状元素、<code>overflow:hidden</code>除了触发BFC还得隐藏。 <code>display:flow-root</code>只是单纯的触发<code>BFC</code> 形成了BFC之后用来做什么： <ol> <li> 爸爸管儿子，让爸爸能够包裹住儿子（父元素上使用），来爸爸抱抱。 解决float高度塌陷。 <pre><code class="prism language-html"><!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> </code></pre> 解决父子之间的<code>margin</code>合并问题。 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 兄弟之间划清界限（子元素上使用） 兄弟元素之间上下折叠问题 解决float块状元素重叠，行内元素不重叠问题 <pre><code class="prism language-html"><!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> </code></pre> 是什么-》怎么形成的-》干什么用的。 </li> </ol> <h4>居中方法（水平、垂直）</h4> <ol> <li> 内联元素水平居中 <code>text-align:center</code>，对元素（块状元素、行内块状元素）中的inline、inline-block有效。 <pre><code class="prism language-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> </code></pre> </li> <li> 块级元素水平居中（子元素添加margin） <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 使用<code>flex</code>实现inline、inline-block、block水平居中（父元素中添加） <pre><code class="prism language-html"><!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>   闫海静真英俊！</body></html> </code></pre> </li> <li> 定位实现水平居中（块元素） <pre><code class="prism language-html"><!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> </code></pre> </li> <li> transform实现水平居中 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 单行文本垂直居中 <code>line-height=height</code> </li> <li> 多行文本垂直居中 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 块状元素垂直居中（<code>poistion</code>） <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 块状元素垂直居中（<code>transform:translatey()</code>） <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 块状元素、行内元素、行内块状元素垂直居中（<code>flex</code>，<code>align-items:center</code>） <pre><code class="prism language-html"><!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> </code></pre> </li> <li> <code>display:table-cell</code> <pre><code class="prism language-html"><!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> </code></pre> </li> </ol> l> <pre><code> 是什么-》怎么形成的-》干什么用的。 #### 居中方法（水平、垂直） 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> </code></pre> <ol start="2"> <li> 块级元素水平居中（子元素添加margin） <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 使用<code>flex</code>实现inline、inline-block、block水平居中（父元素中添加） <pre><code class="prism language-html"><!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>   闫海静真英俊！</body></html> </code></pre> </li> <li> 定位实现水平居中（块元素） <pre><code class="prism language-html"><!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> </code></pre> </li> <li> transform实现水平居中 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 单行文本垂直居中 <code>line-height=height</code> </li> <li> 多行文本垂直居中 <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 块状元素垂直居中（<code>poistion</code>） <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 块状元素垂直居中（<code>transform:translatey()</code>） <pre><code class="prism language-html"><!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> </code></pre> </li> <li> 块状元素、行内元素、行内块状元素垂直居中（<code>flex</code>，<code>align-items:center</code>） <pre><code class="prism language-html"><!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> </code></pre> </li> <li> <code>display:table-cell</code> <pre><code class="prism language-html"><!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> </code></pre> </li> </ol> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1704276999721267200"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(H5+CSS3笔记)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1773583062202908672.htm" title="新网师的精神肤色（幕布笔记）" target="_blank">新网师的精神肤色（幕布笔记）</a> 悦读书香 <div>王子老师的《极简100小妙招》收到已经几天了，之前大概的浏览了全书，今天起给自己定了一个计划，必须每天学习极简小妙招里面的一个妙招，并加以运用。一、今天要打卡什么内容因有完成每天学习极简小妙招的计划，所以今天晚饭吃的比较简单，草草吃完以后带着小宝到广场溜达一圈，急忙赶回来学习极简小妙招。再重看的时候不知道自己要学点什么，打卡哪一招，感觉哪个都简单，就看这一环节像王子老师说的“一看就会”，但做这一环</div> </li> <li><a href="/article/1773545802220765184.htm" title="C++学习笔记（lambda函数）" target="_blank">C++学习笔记（lambda函数）</a> __TAT__ <a class="tag" taget="_blank" href="/search/C%26amp%3BC%2B%2B/1.htm">C&C++</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>C++learningnote1、lambda函数的语法2、lambda函数的几种用法1、lambda函数的语法lambda函数的一般语法如下：[capture_clause](parameters)->return_type{function_body}capture_clause：需要捕获的变量，但要求该变量必须在这个作用域中。通常的捕获方式有以下几种：[]：不捕获任何变量[&]：按引用捕获变</div> </li> <li><a href="/article/1773499616306724864.htm" title="读书笔记《穿越寒冬》" target="_blank">读书笔记《穿越寒冬》</a> 如雪般飞舞 <div>各位好，我们今天来讲一本书，名字叫作《穿越寒冬》。看起来特别应景，大家觉得现在创业的状况不景气，大家都在忍受着寒冬的煎熬。但实际上，这本书的英文名字并不是这个意思，它的英文名叫作“如何创立一家新公司，并且能够活下来”。我在整个读完了以后，我发现这本书真正要翻译得好，它的名字应该叫作《创业生存手册》。这个书的作者，来自硅谷的霍夫曼船长。霍夫曼船长写过一本让创业者觉得特别贴心的书，叫作《让大象飞》它和</div> </li> <li><a href="/article/1773475780618158080.htm" title="2018-11-18成长小组学习笔记" target="_blank">2018-11-18成长小组学习笔记</a> 实验中学45 <div>因为嗓子“罢工”，我面对众人只能借“微笑”代言。在开始授课前，绣霞老师先反馈上次作业的情况，提到“接纳”需是真正发自内心的完全接纳，而不是口头上的接纳，内心却是排斥的。提到一个“问题”孩子恰恰对家爱的更加“深沉”，夫妻间的问题不能影响到孩子，对孩子更好的爱不是你为他做的更多，而是给他自由、健康成长的空间。图片发自App一、孩子：家庭的一面镜子夫妻成了彼此的“投射”，婚姻便“吵的不可开交”，婚姻便成</div> </li> <li><a href="/article/1773458565772673024.htm" title="【鸿蒙HarmonyOS开发笔记】ArkUI常用组件介绍汇总（更新中）" target="_blank">【鸿蒙HarmonyOS开发笔记】ArkUI常用组件介绍汇总（更新中）</a> 温、 <a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99HarmonyOS%E5%BC%80%E5%8F%91%E7%AC%94%E8%AE%B0/1.htm">鸿蒙HarmonyOS开发笔记</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/1.htm">学习记录</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a> <div>概述此文总结开发中用到的一些常用组件，便于查阅，此文持续更新，闲的没事就更线性布局（Row/Column）不多介绍了，最常用的布局组件，两者除了方向不一样，别的都一样方便起见下面只写Column常用属性排列方向上的间距：spaceColumn({space:20}){Row().width('90%').height(50).backgroundColor(0xF5DEB3)Row().width</div> </li> <li><a href="/article/1773437213028188160.htm" title="安卓笔记本 - Handler Message MessageQueue Looper" target="_blank">安卓笔记本 - Handler Message MessageQueue Looper</a> SocialException <div>不爱写字，一张图解决。Handler,Message,MessageQueue,Looper工作原理</div> </li> <li><a href="/article/1773436409693143040.htm" title="枚举使用笔记" target="_blank">枚举使用笔记</a> 万变不离其宗_8 <a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E7%AC%94%E8%AE%B0/1.htm">项目笔记</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>1.java枚举怎么放在方法上面的注释里面/***保存*@paramuserId用户id*@paramtype见枚举{@linkcom.common.enums.TypeEnum}*@return*/voidsave(LonguserId,Stringtype);</div> </li> <li><a href="/article/1773420547133210624.htm" title="ruoyi使用笔记" target="_blank">ruoyi使用笔记</a> 万变不离其宗_8 <a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E7%AC%94%E8%AE%B0/1.htm">项目笔记</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E5%8F%82%E8%80%83%E7%AC%94%E8%AE%B0/1.htm">代码参考笔记</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.限流处理@RateLimiter@PostMapping("/createOrder")@ApiOperation("创建充值订单")@RateLimiter(key=CacheConstants.REPEAT_SUBMIT_KEY,time=10,count=1,limitType=LimitType.IP)publicRcreateOrder(@RequestBodyFormform){/</div> </li> <li><a href="/article/1773411736095883264.htm" title="数据管理知识体系指南（第二版）-第五章——数据建模和设计-学习笔记" target="_blank">数据管理知识体系指南（第二版）-第五章——数据建模和设计-学习笔记</a> 键盘上的五花肉 <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%B2%BB%E7%90%86/1.htm">数据治理</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%BB%93%E5%BA%93/1.htm">数据仓库</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%B2%BB%E7%90%86/1.htm">数据治理</a> <div>目录5.1引言5.1.1业务驱动因素5.1.2目标和原则5.1.3基本概念5.2活动5.2.1规划数据建模5.2.2建立数据模型5.2.3审核数据模型5.2.4维护数据模型5.3工具5.3.1数据建模工具5.3.2数据血缘工具5.3.3数据分析工具5.3.4元数据资料库5.3.5数据模型模式5.3.6行业数据模型5.4方法5.4.1命名约定的最佳实践5.4.2数据库设计中的最佳实践5.5数据建模和</div> </li> <li><a href="/article/1773351821931249664.htm" title="Java学习笔记01" target="_blank">Java学习笔记01</a> .wsy. <a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%B8%B8/1.htm">日常</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>1.1Java简介Java的前身是Oak，詹姆斯·高斯林是java之父。1.2Java体系Java是一种与平台无关的语言，其源代码可以被编译成一种结构中立的中间文件（.class，字节码文件）于Java虚拟机上运行。1.2.3专有名词JDK提供编译、运行Java程序所需要的种种工具及资源。JRE是运行Java所依赖的环境的集合。JVM是一个虚构出来的计算机，通过在实际的计算机上仿真模拟各种计算机功</div> </li> <li><a href="/article/1773340139582455808.htm" title="《老子》笔记19 2018-10-28" target="_blank">《老子》笔记19 2018-10-28</a> 海上明月共 <div>第二十二章[原文]曲则全，枉则直，洼则盈，敝则新，少则得，多则惑。是以圣人抱一为天下式。不自见，故明；不自是，故彰，不自伐，故有功；不自矜，故长。夫唯不争，故天下莫能与之争。古之所谓"曲则全"者，岂虚言哉？诚全而归之。[译文]委曲便会保全，屈枉便会直伸；低洼便会充盈，陈旧便会更新；少取便会获得，贪多便会迷惑。所以有道的人坚守这一原则作为天下事理的范式，不自我表扬，反能显明；不自以为是，反能是非彰明</div> </li> <li><a href="/article/1773321618093834240.htm" title="以客户为中心的企业设计（咨询执业笔记）" target="_blank">以客户为中心的企业设计（咨询执业笔记）</a> 觉者看世界 <div>以客户为中心的企业设计（咨询执业笔记）——何伏全案咨询知名专家数字经济大行其道，过剩的风险资本自由流动，股权市场日益强势，这些力量综合在一起，产生出诸多不合理的企业设计。这些事实使得企业设计的再创造越来越需要一种约束力，许多公司和投资者未能熟谙这种约束力，或者未能将其基本原理运用于具体的商业行为中，因此付出了沉重的代价。无利润区的确存在，并且已在全球蔓延，有愈演愈烈之势。它席卷了数以千计的公司，涉</div> </li> <li><a href="/article/1773229599585533952.htm" title="【Git安装及使用学习笔记】" target="_blank">【Git安装及使用学习笔记】</a> 可可西里啊 <a class="tag" taget="_blank" href="/search/%E9%9B%B6%E9%9B%B6%E6%95%A3%E6%95%A3%E7%9A%84%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">零零散散的学习笔记</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/qt5/1.htm">qt5</a> <div>Git学习笔记Git安装Git创建本地版本库以及提交文件使用Git提交代码到码云使用Git从码云拉取代码参考博客Git安装这里参考Git详细安装教程（详解Git安装过程的每一个步骤）Git创建本地版本库以及提交文件1.查看git版本信息：git--version2.设置对应用户名与邮箱地址gitconfig--globaluser.name"your_usernamegitconfig--glob</div> </li> <li><a href="/article/1772793810569461760.htm" title="读书笔记|《穆斯林的葬礼》" target="_blank">读书笔记|《穆斯林的葬礼》</a> 飞舞的微辰 <div>她从来也没有打算对过去的恩怨进行报偿或是惩罚，只是想把该记住的都记住，该忘却的都忘却。事业的追求，并不一定要什么头衔和称号来满足，你爱上了一种东西，愿意用全部心血去研究它，掌握它，从中得到乐趣，并且永远也不舍得丢其它，这是事业心，是比什么都重要的......人生在世，谁也管不了谁；生儿育女，不是为了父母，是为了儿女自己，各人的路，让他们自己去闯吧。七尺之躯，一抔黄土，穆斯林们一个个都离去了，什么都</div> </li> <li><a href="/article/1772787481222119424.htm" title="C#学习笔记" target="_blank">C#学习笔记</a> 2301_79022588 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>一、事件派发器在C#中，事件派发器通常是指事件委托和事件处理程序的组合，用于实现一种观察者设计模式。它允许对象在状态发生变化时通知其他对象，从而实现对象之间的解耦。事件派发器的基本组成部分：事件委托（EventDelegate）：事件委托是一种特殊的委托，用于封装可以被调用的方法。它定义了事件的签名，即指定了事件处理程序方法的参数和返回类型。通常，事件委托声明在事件派发器类的外部，并且使用dele</div> </li> <li><a href="/article/1772736200734474240.htm" title="遇见美好｜期待越来越好的自己｜复盘日记Day137" target="_blank">遇见美好｜期待越来越好的自己｜复盘日记Day137</a> 沫ma的1001页 <div>遇见美好｜期待越来越好的自己｜复盘日记Day1372021年7月21日星期三晴喜马拉雅(沫沫成长记）亲子共读：Day42阅读学习践行Day.17/21晨间日记Day.17/21昨日晚安：23:02今日早安：05:00早起：Day806❥今日运动｜跑步0Km（未完成）❥今日自我成长｜学习新知识1.听书＋书写笔记,小花生阅读打卡2..阅读学习，听音频＋写作业3.时间管理2.0线上践行，听课+写作业4.</div> </li> <li><a href="/article/1772700920866471936.htm" title="D43+1组棉布+《一个人的朝圣》读书笔记" target="_blank">D43+1组棉布+《一个人的朝圣》读书笔记</a> 棉布家的小橘子 <div>前几天读了《一个人的朝圣》，感受到信念、目标对一个人是多么重要。哈罗德因为奎妮的一封告别信，步行横跨英格兰去探望她。因为有了目标和信念他才能坚持下去。而奎妮也一直在等他。一路哈罗德回忆儿子戴维，回忆自己小时候的遭遇，回忆与妻子莫琳的种种。想通了许多事情，与其说他要去拯救奎妮不如说在拯救自己。哈罗德与父母哈罗德的童年是不幸的，爸爸妈妈根本没有想当父母却生下了他。妈妈离家出走，爸爸开始找不同的阿姨，在</div> </li> <li><a href="/article/1772681873261133824.htm" title="Java学习笔记04：Java_数组" target="_blank">Java学习笔记04：Java_数组</a> JasonYangQ <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>文章目录1.数组1.1数组介绍1.2数组的定义格式1.2.1第一种格式1.2.2第二种格式1.3数组的动态初始化1.3.1什么是动态初始化1.3.2动态初始化格式1.3.3动态初始化格式详解1.4数组元素访问1.4.1什么是索引1.4.2访问数组元素格式1.4.3示例代码1.5内存分配1.5.1内存概述1.5.2java中的内存分配1.9数组的静态初始化1.9.1什么是静态初始化1.9.2静态初始</div> </li> <li><a href="/article/1772594886269272064.htm" title="JavaScript快速入门笔记之二（变量、常量、数据类型）" target="_blank">JavaScript快速入门笔记之二（变量、常量、数据类型）</a> eshineLau <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>JavaScript快速入门笔记之二（变量、常量、数据类型）1、变量何时使用变量：程序中的一切数据都要保存在变量中，反复使用如何使用变量：2种情况：赋值和取值赋值：2步：1.1创建变量：——声明——创建一个新的空变量语法：var变量名;强调：仅声明，未赋值的变量，默认值是undefined命名：1.不能以数字开头2.不能用保留字。3.一般采用驼峰命名1.2赋值：将数据保存到变量中语法：变量名=数据</div> </li> <li><a href="/article/1772517786749304832.htm" title="2018.1.28笔记 - 草稿" target="_blank">2018.1.28笔记 - 草稿</a> 宫晓杰 <div>远离离电子屏幕。正常情况下，褪黑素水平会从晚上七八点开始逐渐升高，并在清晨时分逐渐下降。但休斯顿大学的一项研究显示，在夜里盯着手机屏幕会干扰这一过程，使我们更加清醒，影响体内昼夜节律。在休斯顿大学的这项研究中，在两周的实验期间，受试者按要求在入睡前三小时戴上短波光线屏蔽眼镜，结果夜间的体内褪黑素水平上升了58%。</div> </li> <li><a href="/article/1772509845434466304.htm" title="生信星球学习小组第80期 Day3笔记--ZJUSKY" target="_blank">生信星球学习小组第80期 Day3笔记--ZJUSKY</a> ZJUSKY <div>Conda简介Conda是一个开源的软件包管理系统和环境管理系统，用于安装多个版本的软件包及其依赖关系，并在它们之间轻松切换。简单来说Conda就是Linux系统下的应用商店，你可以在通过Conda下载，安装很多软件。这里我们推荐miniconda,它只包含了最基本的内容，python和conda，以及相关的必须依赖项。精简的miniconda足够满足日常生信使用。下载miniconda推荐使用清</div> </li> <li><a href="/article/1772495599967469568.htm" title="第四期【践行总结】第7周—真诚" target="_blank">第四期【践行总结】第7周—真诚</a> 记录我的生活 <div>践行时间：20181022——20181028本周践行真诚：不采用任何有害的欺骗行为，想问题和说话都要公平公正。【目标】1.不背后议论人，管好自己的嘴巴。2.对待孩子也要真诚，但可以说善意的谎言。3.长养同理心，真正站在对方角度思考问题。【百日目标践行】1.看书：«让孩子像孩子那样长大»80页«活法»50页2.：点评文2个：得到精品课复盘笔记1个：怎样高效管理你的精力第2节家有俩娃系列2则3.运动</div> </li> <li><a href="/article/1772473292440010752.htm" title="【编译原理】一篇就够了——学习笔记与课程实验超详细整理" target="_blank">【编译原理】一篇就够了——学习笔记与课程实验超详细整理</a> 一棵___大树 <a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/1.htm">编译原理</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">学习笔记</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>⭐⭐⭐⭐⭐⭐Github主页https://github.com/A-BigTree更多学习笔记链接https://github.com/A-BigTree/college_assignment编译原理实验https://github.com/A-BigTree/college_assignment/compiler_Experiment如果可以，麻烦各位看官顺手点个star~如果文章对你有所帮助</div> </li> <li><a href="/article/1772464985230868480.htm" title="blog-engine-06-pelican 静态网站生成支持 markdown 和 reST 语法" target="_blank">blog-engine-06-pelican 静态网站生成支持 markdown 和 reST 语法</a> 老马啸西风 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>拓展阅读blog-engine-01-常见博客引擎jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman对比blog-engine-02-通过博客引擎jekyll构建githubpages博客实战笔记blog-engine-02-博客引擎jekyll-jekyll博客引擎介绍blog-engine-02-博客引擎jekyll-jekyl</div> </li> <li><a href="/article/1772461172675641344.htm" title="读书笔记-《如何抑制女性写作》-20210215" target="_blank">读书笔记-《如何抑制女性写作》-20210215</a> 关七666 <div>性别歧视和对性别的偏见，原来不仅仅是在中国，世界各地都需要改变。女性写作被认为是不正常的，没人看，或者否则其作者身份，认为是她们身边的男性写的，亦或者是它自行完成。为什么作者需要区分性别，是男性写的就是大作，是女性写的就是造作。这本书，揭示的是过去20世纪的女性作家们面对的种种非议。</div> </li> <li><a href="/article/1772458394720993280.htm" title="Java学习笔记：atomic的实现原理？" target="_blank">Java学习笔记：atomic的实现原理？</a> 曲钟人散 <div>在多线程的场景中，我们需要保证数据安全，就会考虑同步的方案，通常会使用synchronized或者lock来处理，使用了synchronized意味着内核态的一次切换。这是一个很重的操作。有没有一种方式，可以比较便利的实现一些简单的数据同步，比如计数器等等。concurrent包下的atomic提供我们这么一种轻量级的数据同步的选择。classMyThreadimplementsRunnable{</div> </li> <li><a href="/article/1772421212207644672.htm" title="九月目标达成训练营" target="_blank">九月目标达成训练营</a> yuqiong_819a <div>1设立九月微目标【9月微目标】写作商业案例笔记45个【微目标分解】公司案例40个/每天2个，上午完成。行业笔记5个。1，9月第一周科技公司主题10个，2,9月第二周消费和服务业主题12个3，9月第三周智能制造4,9月第四周其他行业【目标达成阻碍】过度思考和找资料耽误进度，陪娃容易陷入时间黑洞，【解决方法PlanB】每周工作想清楚重点，细分目标;高质量陪娃也要目标管理～每天一个故事一个游戏【非达成不</div> </li> <li><a href="/article/1772407208080900096.htm" title="网络安全（黑客）—2024自学笔记" target="_blank">网络安全（黑客）—2024自学笔记</a> 羊村最强沸羊羊 <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前言一、什么是网络安全网络安全可以基于攻击和防御视角来分类，我们经常听到的“红队”、“渗透测试”等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。无论网络、Web、移动、桌面、云等哪个领域，都有攻与防两面性，例如Web安全技术，既有Web渗透，也有Web防御技术（WAF）。作为一个合格的网络安全工程师，应该做到攻守兼备，毕竟知己知彼，才能百战百胜。二、怎样规划网络安全如果你</div> </li> <li><a href="/article/1772402788408557568.htm" title="2021.1.4每日嘉许" target="_blank">2021.1.4每日嘉许</a> d1e00ea6f4b4 <div>1嘉许自己早起给孩子做饭，站桩，心情愉悦2嘉许自己和老师聊天，说出自己的困惑，收到了老师的指点，心情舒畅3嘉许自己认真听梅琼老师讲的一致性沟通案例会并记笔记4嘉许自己做午饭和孩子一起吃，5嘉许自己给公公改手机套餐6嘉许自己做晚饭，老公和朋友都说好吃，我很满足，看到了自己的价值感7嘉许老公下班就立马回家8嘉许老公腰不舒服去找地方拔罐9嘉许老公和朋友一起聊天10嘉许孩子早上自己起床，自己骑车去学校11</div> </li> <li><a href="/article/1772367933570351104.htm" title="Python学习笔记07" target="_blank">Python学习笔记07</a> 正文01 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>第十三章，面向对象初识对象生活中数据的组织学校开学，要求学生填写自己的基础信息，一人发一张白纸，让学生自己填我叫林军杰，今年31岁.来自山东省，我是男的，中国人内容混乱改为登记表，打印出来让学生自行填写：姓名林军杰姓别男国籍中国籍贯山东省年龄31整洁明了程序中数据的组织在程序中简单使用变量来记录学生信息student_1={"姓名"："周杰轮"，"性别"："男"，"国籍"："中国"，"籍贯"："台</div> </li> <li><a href="/article/71.htm" title="Linux的Initrd机制" target="_blank">Linux的Initrd机制</a> 被触发 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>Linux 的 initrd 技术是一个非常普遍使用的机制，linux2.6 内核的 initrd 的文件格式由原来的文件系统镜像文件转变成了 cpio 格式，变化不仅反映在文件格式上， linux 内核对这两种格式的 initrd 的处理有着截然的不同。本文首先介绍了什么是 initrd 技术，然后分别介绍了 Linux2.4 内核和 2.6 内核的 initrd 的处理流程。最后通过对 Lin</div> </li> <li><a href="/article/198.htm" title="maven本地仓库路径修改" target="_blank">maven本地仓库路径修改</a> bitcarter <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>默认maven本地仓库路径：C:\Users\Administrator\.m2 修改maven本地仓库路径方法：     1.打开E:\maven\apache-maven-2.2.1\conf\settings.xml     2.找到       &nbsp</div> </li> <li><a href="/article/325.htm" title="XSD和XML中的命名空间" target="_blank">XSD和XML中的命名空间</a> darrenzhu <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/xsd/1.htm">xsd</a><a class="tag" taget="_blank" href="/search/schema/1.htm">schema</a><a class="tag" taget="_blank" href="/search/namespace/1.htm">namespace</a><a class="tag" taget="_blank" href="/search/%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4/1.htm">命名空间</a> <div>http://www.360doc.com/content/12/0418/10/9437165_204585479.shtml http://blog.csdn.net/wanghuan203/article/details/9203621 http://blog.csdn.net/wanghuan203/article/details/9204337 http://www.cn</div> </li> <li><a href="/article/452.htm" title="Java 求素数运算" target="_blank">Java 求素数运算</a> 周凡杨 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%B4%A0%E6%95%B0/1.htm">素数</a> <div>网络上对求素数之解数不胜数，我在此总结归纳一下，同时对一些编码，加以改进，效率有成倍热提高。第一种：   原理: 6N(+-)1法         任何一个自然数，总可以表示成为如下的形式之一： 6N，6N+1，6N+2，6N+3，6N+4，6N+5 (N=0，1，2，…)   </div> </li> <li><a href="/article/579.htm" title="java 单例模式" target="_blank">java 单例模式</a> g21121 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>想必单例模式大家都不会陌生，有如下两种方式来实现单例模式：   class Singleton { private static Singleton instance=new Singleton(); private Singleton(){} static Singleton getInstance() { return instance; }</div> </li> <li><a href="/article/706.htm" title="Linux下Mysql源码安装" target="_blank">Linux下Mysql源码安装</a> 510888780 <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>1.假设已经有mysql-5.6.23-linux-glibc2.5-x86_64.tar.gz (1)创建mysql的安装目录及数据库存放目录       解压缩下载的源码包，目录结构，特殊指定的目录除外：           </div> </li> <li><a href="/article/833.htm" title="32位和64位操作系统" target="_blank">32位和64位操作系统</a> 墙头上一根草 <a class="tag" taget="_blank" href="/search/32%E4%BD%8D%E5%92%8C64%E4%BD%8D%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">32位和64位操作系统</a> <div>32位和64位操作系统是指：CPU一次处理数据的能力是32位还是64位。现在市场上的CPU一般都是64位的，但是这些CPU并不是真正意义上的64 位CPU，里面依然保留了大部分32位的技术，只是进行了部分64位的改进。32位和64位的区别还涉及了内存的寻址方面，32位系统的最大寻址空间是2 的32次方= 4294967296（bit）= 4（GB）左右，而64位系统的最大寻址空间的寻址空间则达到了</div> </li> <li><a href="/article/960.htm" title="我的spring学习笔记10-轻量级_Spring框架" target="_blank">我的spring学习笔记10-轻量级_Spring框架</a> aijuans <a class="tag" taget="_blank" href="/search/Spring+3/1.htm">Spring 3</a> <div>一、问题提问：     → 请简单介绍一下什么是轻量级？     轻量级（Leightweight）是相对于一些重量级的容器来说的，比如Spring的核心是一个轻量级的容器，Spring的核心包在文件容量上只有不到1M大小，使用Spring核心包所需要的资源也是很少的，您甚至可以在小型设备中使用Spring。 &nbsp</div> </li> <li><a href="/article/1087.htm" title="mongodb 环境搭建及简单CURD" target="_blank">mongodb 环境搭建及简单CURD</a> antlove <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/Install/1.htm">Install</a><a class="tag" taget="_blank" href="/search/curd/1.htm">curd</a><a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a><a class="tag" taget="_blank" href="/search/mongo/1.htm">mongo</a> <div>一搭建mongodb环境 1. 在mongo官网下载mongodb 2. 在本地创建目录 "D:\Program Files\mongodb-win32-i386-2.6.4\data\db" 3. 运行mongodb服务 [mongod.exe --dbpath "D:\Program Files\mongodb-win32-i386-2.6.4\data\</div> </li> <li><a href="/article/1214.htm" title="数据字典和动态视图" target="_blank">数据字典和动态视图</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%AD%97%E5%85%B8/1.htm">数据字典</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E8%A7%86%E5%9B%BE/1.htm">动态视图</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E5%92%8C%E5%AF%B9%E8%B1%A1%E6%9D%83%E9%99%90/1.htm">系统和对象权限</a> <div>数据字典（data dictionary）是 Oracle 数据库的一个重要组成部分，这是一组用于记录数据库信息的只读（read-only）表。随着数据库的启动而启动,数据库关闭时数据字典也关闭   数据字典中包含   数据库中所有方案对象（schema object）的定义(包括表，视图，索引，簇，同义词，序列，过程，函数，包，触发器等等) 数据库为一</div> </li> <li><a href="/article/1341.htm" title="多线程编程一般规则" target="_blank">多线程编程一般规则</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a> <div>       如果两个工两个以上的线程都修改一个对象，那么把执行修改的方法定义为被同步的，如果对象更新影响到只读方法，那么只读方法也要定义成同步的。        不要滥用同步。如果在一个对象内的不同的方法访问的不是同一个数据，就不要将方法设置为synchronized的。 </div> </li> <li><a href="/article/1468.htm" title="将文件或目录拷贝到另一个Linux系统的命令scp" target="_blank">将文件或目录拷贝到另一个Linux系统的命令scp</a> bijian1013 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a><a class="tag" taget="_blank" href="/search/scp/1.htm">scp</a> <div>一.功能说明        scp就是security copy，用于将文件或者目录从一个Linux系统拷贝到另一个Linux系统下。scp传输数据用的是SSH协议，保证了数据传输的安全，其格式如下：        scp 远程用户名@IP地址：文件的绝对路径</div> </li> <li><a href="/article/1595.htm" title="【持久化框架MyBatis3五】MyBatis3一对多关联查询" target="_blank">【持久化框架MyBatis3五】MyBatis3一对多关联查询</a> bit1129 <a class="tag" taget="_blank" href="/search/Mybatis3/1.htm">Mybatis3</a> <div>以教员和课程为例介绍一对多关联关系，在这里认为一个教员可以叫多门课程，而一门课程只有1个教员教，这种关系在实际中不太常见，通过教员和课程是多对多的关系。   示例数据：   地址表：   CREATE TABLE ADDRESSES ( ADDR_ID INT(11) NOT NULL AUTO_INCREMENT, STREET VAR</div> </li> <li><a href="/article/1722.htm" title="cookie状态判断引发的查找问题" target="_blank">cookie状态判断引发的查找问题</a> bitcarter <a class="tag" taget="_blank" href="/search/form/1.htm">form</a><a class="tag" taget="_blank" href="/search/cgi/1.htm">cgi</a> <div>先说一下我们的业务背景： 1.前台将图片和文本通过form表单提交到后台，图片我们都做了base64的编码，并且前台图片进行了压缩 2.form中action是一个cgi服务 3.后台cgi服务同时供PC，H5，APP 4.后台cgi中调用公共的cookie状态判断方法（公共的，大家都用，几年了没有问题）问题：（折腾两天。。。。） 1.PC端cgi服务正常调用，cookie判断没</div> </li> <li><a href="/article/1849.htm" title="通过Nginx,Tomcat访问日志(access log)记录请求耗时" target="_blank">通过Nginx,Tomcat访问日志(access log)记录请求耗时</a> ronin47 <div>一、Nginx通过$upstream_response_time $request_time统计请求和后台服务响应时间 nginx.conf使用配置方式： log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_r</div> </li> <li><a href="/article/1976.htm" title="java-67- n个骰子的点数。把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。" target="_blank">java-67- n个骰子的点数。把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class ProbabilityOfDice { /** * Q67 n个骰子的点数 * 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 * 在以下求解过程中，我们把骰子看作是有序的。 * 例如当n=2时，我们认为（1，2）和（2，1）是两种不同的情况 */ private stati</div> </li> <li><a href="/article/2103.htm" title="看别人的博客，觉得心情很好" target="_blank">看别人的博客，觉得心情很好</a> Cb123456 <a class="tag" taget="_blank" href="/search/%E5%8D%9A%E5%AE%A2/1.htm">博客</a><a class="tag" taget="_blank" href="/search/%E5%BF%83%E6%83%85/1.htm">心情</a> <div>   以为写博客，就是总结，就和日记一样吧，同时也在督促自己。今天看了好长时间博客:    职业规划:    http://www.iteye.com/blogs/subjects/zhiyeguihua      android学习:    1.http://byandby.i</div> </li> <li><a href="/article/2230.htm" title="[JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析" target="_blank">[JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析</a> comsci <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C%E6%B5%81/1.htm">工作流</a> <div>     我们已经不满足于仅仅跳跃一次，通过对引擎的升级，今天我测试了一下循环反馈模式，大概跑了200圈，引擎报一个溢出错误      在一个流程图的结束节点中嵌入一段方程，每次引擎运行到这个节点的时候，通过实时编译器GM模块，计算这个方程，计算结果与预设值进行比较，符合条件则跳跃到开始节点，继续新一轮拓扑分析，直到遇到</div> </li> <li><a href="/article/2357.htm" title="JS常用的事件及方法" target="_blank">JS常用的事件及方法</a> cwqcwqmax9 <a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>事件描述 onactivate 当对象设置为活动元素时触发。 onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。 onbeforeactivate 对象要被设置为当前元素前立即触发。 onbeforecut 当选中区从文档中删除之前在源对象触发。 onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即</div> </li> <li><a href="/article/2484.htm" title="正则表达式验证日期格式" target="_blank">正则表达式验证日期格式</a> dashuaifu <a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a><a class="tag" taget="_blank" href="/search/IT%E5%85%B6%E5%AE%83/1.htm">IT其它</a><a class="tag" taget="_blank" href="/search/java%E5%85%B6%E5%AE%83/1.htm">java其它</a> <div> 正则表达式验证日期格式 function isDate(d){ var v = d.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i); if(!v) { this.focus(); return false; } } <input value="2000-8-8" onblu</div> </li> <li><a href="/article/2611.htm" title="Yii CModel.rules() 方法、validate预定义完整列表、以及说说验证" target="_blank">Yii CModel.rules() 方法、validate预定义完整列表、以及说说验证</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>public array rules () {return} array 要调用 validate() 时应用的有效性规则。 返回属性的有效性规则。声明验证规则，应重写此方法。每个规则是数组具有以下结构：array('attribute list', 'validator name', 'on'=>'scenario name', ...validation </div> </li> <li><a href="/article/2738.htm" title="UITextAttributeTextColor = deprecated in iOS 7.0" target="_blank">UITextAttributeTextColor = deprecated in iOS 7.0</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a> <div>In this lesson we used the key "UITextAttributeTextColor" to change the color of the UINavigationBar appearance to white. This prompts a warning "first deprecated in iOS 7.0." Ins</div> </li> <li><a href="/article/2865.htm" title="判断一个数是质数的几种方法" target="_blank">判断一个数是质数的几种方法</a> EmmaZhao <a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>质数也叫素数，是只能被1和它本身整除的正整数，最小的质数是2，目前发现的最大的质数是p=2^57885161-1【注1】。判断一个数是质数的最简单的方法如下： def isPrime1(n): for i in range(2, n): if n % i == 0: return False return True 但是在上面的方法中有一些冗余的计算，所以</div> </li> <li><a href="/article/2992.htm" title="SpringSecurity工作原理小解读" target="_blank">SpringSecurity工作原理小解读</a> 坏我一锅粥 <a class="tag" taget="_blank" href="/search/SpringSecurity/1.htm">SpringSecurity</a> <div>   SecurityContextPersistenceFilter   ConcurrentSessionFilter   WebAsyncManagerIntegrationFilter   HeaderWriterFilter   CsrfFilter   LogoutFilter   Use</div> </li> <li><a href="/article/3119.htm" title="JS实现自适应宽度的Tag切换" target="_blank">JS实现自适应宽度的Tag切换</a> ini <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>效果体验：http://hovertree.com/texiao/js/3.htm   该效果使用纯JavaScript代码，实现TAB页切换效果，TAB标签根据内容自适应宽度，点击TAB标签切换内容页。 HTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"</div> </li> <li><a href="/article/3246.htm" title="Hbase Rest API : 数据查询" target="_blank">Hbase Rest API : 数据查询</a> kane_xie <a class="tag" taget="_blank" href="/search/REST/1.htm">REST</a><a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a> <div>hbase（hadoop）是用java编写的，有些语言（例如python）能够对它提供良好的支持，但也有很多语言使用起来并不是那么方便，比如c#只能通过thrift访问。Rest就能很好的解决这个问题。Hbase的org.apache.hadoop.hbase.rest包提供了rest接口，它内嵌了jetty作为servlet容器。   启动命令：./bin/hbase rest s</div> </li> <li><a href="/article/3373.htm" title="JQuery实现鼠标拖动元素移动位置（源码+注释）" target="_blank">JQuery实现鼠标拖动元素移动位置（源码+注释）</a> 明子健 <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81/1.htm">源码</a><a class="tag" taget="_blank" href="/search/%E6%8B%96%E5%8A%A8/1.htm">拖动</a><a class="tag" taget="_blank" href="/search/%E9%BC%A0%E6%A0%87/1.htm">鼠标</a> <div>欢迎讨论指正！   print.html代码： <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <title>发票打印</title> &l</div> </li> <li><a href="/article/3500.htm" title="Postgresql 连表更新字段语法 update" target="_blank">Postgresql 连表更新字段语法 update</a> qifeifei <a class="tag" taget="_blank" href="/search/PostgreSQL/1.htm">PostgreSQL</a> <div>下面这段sql本来目的是想更新条件下的数据，可是这段sql却更新了整个表的数据。sql如下： UPDATE tops_visa.visa_order SET op_audit_abort_pass_date = now() FROM tops_visa.visa_order as t1 INNER JOIN tops_visa.visa_visitor as t2 ON t1. </div> </li> <li><a href="/article/3627.htm" title="将redis,memcache结合使用的方案?" target="_blank">将redis,memcache结合使用的方案?</a> tcrct <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a> <div>公司架构上使用了阿里云的服务，由于阿里的kvstore收费相当高，打算自建，自建后就需要自己维护，所以就有了一个想法，针对kvstore(redis)及ocs(memcache)的特点，想自己开发一个cache层，将需要用到list，set，map等redis方法的继续使用redis来完成，将整条记录放在memcache下，即findbyid，save等时就memcache，其它就对应使用redi</div> </li> <li><a href="/article/3754.htm" title="开发中遇到的诡异的bug" target="_blank">开发中遇到的诡异的bug</a> wudixiaotie <a class="tag" taget="_blank" href="/search/bug/1.htm">bug</a> <div>今天我们服务器组遇到个问题：我们的服务是从Kafka里面取出数据，然后把offset存储到ssdb中，每个topic和partition都对应ssdb中不同的key，服务启动之后，每次kafka数据更新我们这边收到消息，然后存储之后就发现ssdb的值偶尔是-2,这就奇怪了，最开始我们是在代码中打印存储的日志，发现没什么问题，后来去查看ssdb的日志，才发现里面每次set的时候都会对同一个key</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>