笔记汇总

  学习笔记

一、HTML（标签！）（网页结构）

1. 学习HTML：在需要的地方使用正确的标签，使其语义化（就是不要想着偷懒不记，用以前学的来代替）
2. 有一些标签加了和没加的效果一样，但是可以使我们的代码更具有逻辑性和方便CSS分块控制样式，例如div标签、thead，tbody，tfoot标签等
3. Img标签中：src和alt是必选的，title可选可不选（区别alt title）
4. 相对路径：我们所需要用的图片相对于我们所创造的网页的相对位置。需要注意的是上下级的关系（父子关系和兄弟关系，级别），…/代表的是上一级目录
5. 基本不会使用绝对路径（区分相对和绝对->相对见4，绝对就是他的完整路径），你网站文件一旦移动，则所有的路径都可能会失效
6. 位图：三种图片格式的区别  矢量图（了解）
7. Photoshop（可以掌握一点）
8. 描点链接：#
9. 动态与静态，表单与表格
10. Input：①自闭合标签 ②type类型（然后通过type属性指定表单类型）
11. Input:①三种按钮（name与value不能省）checked默认②上传文件
12. Value：在单行中他的取值是默认的文本框，而多行则直接写在<>这里<>（单行文本框和密码文本框使用的都是input标签，多行文本框使用的是textarea标签。）（几乎都有）
13. Size：在Chrome浏览器中设值只能在4 及以上
14. 表单元素不一定都要放在form标签内。对于要与服务器进行交互的表单元素就必须放在form标签内才有效
15. iframe标签：内嵌框架。内嵌框架，说白了，就是在当前页面再嵌入另外一个网页。
16. 与网址有关href，scr，前者用于超链接处，后者是图片与iframe标签中的
17. 补充：①首行缩进&nbsp（6个代表一个汉字）

          ②块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。

          ③块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素。

（3）行内元素设置width、height、margin-top、margin-bottom、padding-top、padding-bottom无效。

Alt+shift+f:可以格式化

二、CSS（网页的外观）

1．样式：①外部：将HTML与css分写在两个文件中，再用link标签应用（常用）

             ②内部：如果你使用内部样式表，CSS样式必须在style标签内定义，而style标签是放在head标签内的。

             ③行内：与内部一样html与css是写在一个文件里的，只是使用的方式不同（不推荐）

2．相同的Id在同一个网页中只能出现一次，而class可以多次，这样可以使得我们对具有相同class的多个元素，定义相同的CSS样式。id就像你的身份证号，而class就像你的名字。身份证号是唯一的，但是两个人的名字就有可能是一样的。

3．选择器，说白了就是用一种方式把你想要的那个元素选中！只有把它选中了，你才可以为这个元素添加CSS样式

4. 选择器

{

    属性1 : 取值1;

    ……

    属性n : 取值n;

}

①   ID选择器前加#（后代选择器也要用ID）

②   Class选择器前加 .（为两个或多个元素定义相同的样式，建议使用）

③   群组选择器，两个选择器之间必须要用英文逗号（,）隔开（利用率高）

5．对于font-family属性，如果字体类型只有一个英文单词，则不需要加上双引号；如果字体类型是多个英文单词或者中文的，则需要加上双引号（有空格）。注意，这里的双引号是英文双引号，而不是中文双引号

6．怎么这么多英文记

7．首行缩进&nbsp（6个代表一个汉字），css中用当前汉字size的两倍

8．学了css后外观控制基本使用它

9．列表项图表 url（路径）在css中很多都是

10．超链接伪类：必须按照“link、visited、hover、active”的顺序进行

11．鼠标图片后缀名一般都是.cur，定义鼠标是中间是，而不是空格

12．盒子模型：

①所有的元素都可以看成一个盒子

②内容（content是主要的图或字）：内容区有3个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点，width和height这两个属性是针对内容区content而言，并不包括padding部分。当内容过多超出width和height时，可以使用overflow属性来指定溢出处理方式。只有块元素才可以设置width和height，行内元素是无法设置width和height的

③CSS允许给外边距属性指定负数值，当外边距为负值时，整个盒子将向指定负值的相反方向移动，以此可以产生盒子的重叠效果，这就是传说中的“负margin技术”

④文字到边框的距离就是内边距，外边距就是边框与其他元素之间的距离

13.一个元素的上一级为父元素，下一级为子元素，下n级为后代元素，在同一级则为兄弟元素（外边框：如果父与兄弟同时存在，则是与兄弟）

14.内边框从top顺时针

15.浮动：如果你想要实现两列并排或者多列并排效果时，首先考虑的是使用浮动来实现。（用clear：both；在后面加一个空的元素来清理浮动）

16. 默认情况下，固定定位和绝对定位的位置是相对于浏览器而言，而相对定位的位置是相对原始位置而言。

三、css3

1. 文本溢出：①有省略号：固搭overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

2. 断句：word-wrap:break-word与Word-break：前者温柔，后者粗暴些

3. 当x-offset和y-offset都为0时，阴影都是向外发散或者向内发散

4. 背景图片跟普通图片（即img标签）是不同的东西！width和height这两个属性只能用来定义img标签图片的大小，是不能用于控制背景图片的大小。

5. background-origin往往都是配合background-position来使用的，其中background-origin定义background-position相对于什么位置来定位。

6. transform: skew():数值为正，沿x轴方向逆时针旋转，y轴的则是反的

视频教学

1. 只可以在开始标签或者是自结束标签中设置属性<font xxxx></font>or<img xxxx />
2. 属性是一个名值对（x=“y”）x是属性名，y是属性值

属性用来设置标签中的内容如何显示

属性名和标签名或者其他属性名之间应该用空格隔开

有些属性名没有属性值，如果有属性值应该加上英文双/单引号

1. 文档申明用于告诉浏览器这是用的网页的什么版本 <！DOCTYPE html>：html5
2. 二进制：满二进一

0 1 10 11 100 101 110 111 1000  ：单位数字为0 1 每次都加一，如果单位加一等于二，那么另它的等于0，他前面的一位加一，如果又等于2，则重复之前操作。

1. 十六进制：0 1 2 3 4 5 6 7 8 9 a b c d e f /10 11 。。。。1a应为是十六进制所以在需要补充字母
2. <hgroup></hgroup>用于标题分组，是把相关的标题放到一起
3. <Blockquote>用于引用，属于块元素独占一行，自动缩进两格  <q>用于引用是行内元素，自带引号，不换行
4. 块元素中可以放行内元素，行内元素中不可以放块元素，p中不能放块元素，块元素是构架结构（独自成行），行内元素是包裹文字
5. 可有可无的标签：Header、main（只能有一个）、footer用于分区（是代码更清晰），nav（网页导航的），aside（和主体相关的侧边栏），article（独立文章）、section（独立区块）、div（无语义，就用来表示区块，常用）、span（行内元素，一般用于选中元素）
6. 列表由于在各个浏览器中现实不同，其实一般效果都会去掉，列表之间可以互相嵌套  <dl>定义列表（用得不多）<dt>表示定义内容 <dd>对内容进行解释说明，自动缩进两格
7. ①超链接<a herf=“任何网址” target=“属性”></a>行内元素，在a标签中可以嵌套除了他自己外任何元素（包括块元素），绝对路径和相对路径 （一般使用），后者有文件要求，一般使用./（当前页面所在的目录，就是在当下中的文件夹中来找）or../（当前文件所在目录的上一级）开头，如果两者都不写，则相当于使用了./开头，如果是在当前文件夹目录目录里的一个文件夹里：./文件名/目标网页名。

      ② 希望在新的页面打开超链接：target属性  _self默认值，在当前页面打开

                                             _blank在新的页面打开

     ③回到顶部/底部：<a herf=”#”>回到顶部</a>    底部即是最后一个标签的位置，所以需要在其上加上ID属性，eg 上加上<a id=”bottom” herf=”#”>    则上面可变成<a herf=”#bottom”>去底部</a>，同理任意位置，ID不可重复。

1. 图片标签：引入外部图片，自结束标签<img scr=”路径” alt=“描述”>，替换元素，介于块元素和行内元素之间，具有两种特点，不独占一行，描述默认情况下不会显示，当图片无法显示时会显示描述（not all），搜索引擎会识别图片描述  width指定图片宽度  height图片高度（写在括号里，单位是像素，只改一个会同时变以保证比例，一般不建议改变大小 ），png格式适合网页，webp是谷歌新推的图片格式，兼具所有优点，但是兼容性不好，轻易不用，base64将图片格式转换
2. 内联框架：<iframe scr=”路径” frameborder=”0”><iframe>，像当前页面中引入其他页面，一个小窗口， frameborder是添加网页的框架，0就是没有边框
3. 音视频Audio、video ：<audio scr=”” controls ></audio>，音视频文件引入时，默认情况下用户看不见也动不了，需要加上Controls，不需要赋值加上就行，autoplay自动播放（但是大部分浏览器不会自动播放），loop（循环播放），<audio>。。。<source scr=”路径”></audio>也可以表示路径,优势是当浏览器不支持的时候，可以加文字说明，可以的时候文字不出现，不可以的时候显示文字，且可以写多个source来换格式（video用法相同）
4. 一般情况下视频音频不会直接直接放在服务器中，不会放本地中放文件，磁盘有限。可以引进其他网页的视频，可以免广告。
5. Css层叠样式表：设置样式。层叠：网页是立体多层的，我们看到的是最上面的，css可以为每一层设置。
6. Style=“属性名：xx；”
7. 第一种方式（绝对不使用：不能广泛使用且改动麻烦）：在标签内部通过style属性设置元素的样式eg：<p style=”color:red;”>，内联样式或行内样式

第二种（可以同时为多个设置样式）：在head标签里写：直接<style>......</style>,需要选择器来选择目标，eg：p{color：red;font-size:60px;}

第三种（外部样式表，可以在多个网页中引用，最佳）：可以将css样式编写到一个外部的css文件中，然后通过link标签（在head中，不需要style了）来引入外部的css文件 <link rel=”stylesheet” href=”路径”>，想使用就可以应用，使用缓存机制，加快加载速度。

1. 在style中因该遵循css语法，/*...*/注释（HTML是<！--...-->）
2. p{color：red;font-size:60px;}其中P是选择器（选中指定的元素），大括号叫做声明块，声明是个名值对结构，样式名：样式值；（最后一个分号可以不写）
3. 选择器：①元素选择器：与标签名相关 p{}、h1{}、div{}，但是会选中所有

②ID选择器，根据ID属性值选中一个，#sulei{}（注意ID是不可重复的，一个名字只能有一个）<p id=”sulei”>....</p>

③class选择器（类选择器）：用法相似，但是可以选中多个（一个名字可以用在多个上）.sulei{}注意其中命名class名字的时候class=“sulei abc cde”,其中三个都是名字，用哪个都可以选中此标签，使用空格隔开就行

④通配选择器：可以选中页面中所有元素，语法 *{}，所有的都会变

⑤交集选择器：作用就是选中同时复合多个条件的元素 选择器1选择器2选择器n eg：div .sulei{]（中间没有空格要满足所有条件才会选中）注意必须使用元素选择器开头！！！！

⑥并集选择器：选择器1，选择器2，选择器n{...}满足一个都行

⑦关系选择器：父（元素）子（元素）级，兄弟级（拥有同一父元素），祖先后代级（直接包含与间接包含，同级的关系，注意只要级别大一点都是祖先元素，例如父元素也是祖先元素，子元素也是后代元素 ）

<div class=“box”>

    .............

<p title=”father”>

    ..............

<span>.....</span>

</p>

<span>.........</span>

</div>

例如：子元素选择器：选中div的子元素span（父元素>子元素）div.box>span {....}

      后代元素选择器：选中指定元素内的指定后代元素 例选中div中的span（祖先元素 后代元素） div span{....}

      兄弟元素选择器：1.作用：选中下一个兄弟元素。前一个+后一个{....} p+span{...}，必须是紧挨着的下一个，如果下一个不是span也无法选中。

1. 作用：选中之后的所有符合条件的兄弟 前一个~后一个{...}

                  属性选择器：title用于标签内，光标移动到的时候显示值,如果想选中有title属性的标签：p[title]{..}p标签中有title都可以选中，[属性名=属性值]，（不需要引号）就需要指定的属性值，[属性值^=属性值]选择以属性值开头的元素（例如abc，abcdef就是以abc开头的），[属性名$=属性值],就是结尾的。[属性名*=属性值]，有就行

                  伪类选择器：伪类：xxx；伪元素：：xxx；就是不存在的类，用来描述特殊状态，比如鼠标选中时，一般使用冒号开头

                :first-child，是指第一个子元素，同理last-child：最后一个，nth-child（n）：选中第n个,要是写的是n，则全选，2n（even）表示选偶数，2n+1(odd)奇数,这些伪类都是依据所有的子元素进行排序，eg：first必须考虑想选中的是不是所有元素当中第一个

Fist（last、nth）-of-type：同类中进行排序

：not（：nth-of-type(n）否定伪类：将选中的除去

 

22.超链接伪类：1.访问过和没访问过

2.:link用来表示没访问过的链接（正常链接），:visited用来表示访问过的（只能改颜色 ）

               3.：hover用来改变鼠标移动到链接上

               4.:active用来展示鼠标点击时

23. 伪元素，页面中特殊的位置，伪元素使用::开头，  ：：first-letter首字母，first-line第一行，selection选中时样式 ，::before元素开始前的位置，::after元素结束（这两必须结合content来使用，content：‘abc’ color:red;而且不能选中，只是个样式）

24.样式的继承：我们为一个元素设置样式，同时也会被他的后代继承（在他标签里面），背景和布局相关不会被继承

25.选择器权重：不同选择器选择相同样式设置不同的值，由优先级决定。

             在{xx:xx !important}（慎用）>（内联：直接在标签内设置style）行内选择器1000>ID选择器100>类和伪类选择器10>元素选择器1> 通配0>继承（没有优先级）     ，比较优先级时，需要将其相加，谁高就优先显示（越详细的内容优先级越高），但是选择器再多也不能越级。如果优先级相同，则先使用靠下的样式.

1. 像素和百分比：px像素（越小越清晰），百分比可以设置父元素的百分比、
2. 大小单位Em和rem：是相对于字体大小来的计算的（会根据字体的大小的改变而改变），相对于HTML中根元素字体大小
3. 颜色：①rgb值 （0-255之间或百分数），语法：RGB（红色，绿色，蓝色），eg：background-color（255,0，0），QQ截图可以看到图片rgb值,rgba有4个值，最后那个是不透明度（0-1，1表示完全不透明）十六进制的颜色：#颜色，颜色浓度通过00-ff，一共有六位，如果两位两位重复（aabbcc），则可以简写 ②hsl值（色相0-360 ，饱和度0%-100% ，亮度0%-100%）
4. 文档流：布局，在网页中最底下的一层叫做文档流，是网页基础。元素默认在文档流中排序，所以分为在文档刘中和不在文档流中！①块元素在文档流中独占一行自上向下排列，默认宽度是父元素，默认高度是被子元素撑开 ②行内元素不会独占一行，自左向右水平排列，如果一行满了就会换到下一行，同书写习惯，行内元素的默认宽度和高度都是被内容撑开
5. 盒子模型：将不同的盒子摆放到不同的位置，每一个盒子都有几个部分组成

①内容区（content）：装的东西内容，元素中的所有子元素和文本内容都是在内容区中排列

②边框（border）：属于盒子的边缘，要设置边框至少需要设置三个样式

③内边距（padding）：内容与边框的距离

④外边距（margin）：两个盒子之间的距离，

一二三决定盒子的大小所以计算大小时需要将它们一起计算（可见狂大小），四决定盒子的位子

重点：1.width与height设置内容区大小

2.边框样式：border-（xx(eg:top）)-width边框宽度（xpx），border-color颜色，border-style样式 （实线虚线solid），边框的大小会影响盒子大小。边框：上 右 下 左（若不设全，左右，上下相同） solid实线，dotted点状虚线，dashed虚线，double双线

     3.边框简写：border：大小 颜色 样式（顺序可以变）。

     4.内边距：padding，一共有四个方向（top,bottom），内边距大小会影响到盒子大小，背景颜色也会延伸到内边剧中，但他的子元素如果有颜色不会延伸到内边剧中。padding：上 右 下 左

    5.外边距：用于布局；同样有四个方向，元素尽量向左上排，移动左上的时候移动自己，移右下的时候移动别人（挤别的元素），设置负值则向相反的方向走。

    6.水平方向的布局： 子元素的margin-left+border-left+padding-left+width+右边一样=父元素的总宽度（必须成立），计算结果不成立，则称为过度约束，等式会自动调节，浏览器自动补完右边缺的，自动填margin-right使之成立。如果在（width，margin-left，margin-right）中设置一个auto值，则他们会补齐（width的值默认为auto）；如果将一个外边距和宽度设成auto，则宽度回调成最大，外边距则为0；如果将三个值都...则外边距为零；如果两个外边距为auto则他两值一样（利用这个来设置子元素在父元素中水平居中）。

7.垂直方向的布局：如果父元素没设置大小则由他的子元素（内容）来将其撑大，大小超过会溢出。 为防止溢出在父元素中设置overflow元素（可选值visible，hidden：删减，scroll：垂直滚动条，auto：根据需要生成滚动条）

8.外边距的折叠（垂直重叠）：相邻的垂直方向外边距会重叠，兄弟元素会取最大值（一正一负取和），父子元素间相邻（就像如果有边框外边距就被隔开就不是相邻了）外边距：子元素的上外边距改变会传递给父元素，同时改变影响布局需要改变。解决就是要不不用，要不就把外边距隔开。

9.行内元素盒模型：行内元素不能设置width和height，有内容决定，padding、border、margin可以设置，但垂直方面不影响布局（不影响下面元素的位子）

Display：用来设置元素显示的类型  可选值：inline将元素设置为行内元素 block：设置为块元素，inline-block：行内块元素（不分行且可以设置块元素特质），none：影藏一个元素（位置都没了）-》visibility：hidden（隐藏但是位置还在）。

1. 浏览器默认样式：一般会去掉
2. 图片列表：<a  ...><img ...></a>图片链接
3. 导航栏：元素名：hover，让一个文字在父元素中垂直居中，只需将line-height设置为一个和父元素height一样的值，设置padding会将内容撑高。
4. 盒子的大小:由边框、内边距、和内容区组成，内边距也会有颜色。Box-sizing有content-box：height和width设置内容区，border-box：height和width设置总盒子大小
5. 轮廓 和圆角；outline用法与border一样，但是不会影响可见框大小， box-shadow:用来设置元素阴影，不会影响布局，默认情况在元素正下方，第一个值：水平和第二个值：上下（正负）偏移量，第三个值：模糊半径 颜色
6. Border-radius：用来设置圆角，大小px是圆的半径 可以同时设置四个方向（左上顺时针开始）50%就是圆形。
7. 浮动：（主要让页面中的元素可以水平排列）使元素可以向他的父元素左侧或右侧移动。Float 可选值：none left right 注意设置浮动后，元素水平布局等式不需强制成立了。会从文档流中脱离不会占据文档的位子，所以之后的元素会自动向上占据他的位子，如果想让之后的与他并列可以也给他设置相同的浮动。

特点：会从文档流中脱离不会占据文档的位子

      元素可以向他的父元素左侧或右侧移动

      不会从父元素中脱离

      水平：移动时不会超过他前边的其他浮动元素

      垂直：不会超过他上边的兄弟元素，最多一样高

1. 浮动的特点：文字不会被盖住，会自动环绕，所以可以设置环绕效果

         一些元素的特点会改变：

                块元素不在独占一行，高度宽度被内容陈开

                行内元素会变成块元素，特点与块元素一样

脱离文档流以后不需要再区分行内和块了

1. 导航条：float:left;可以使链接在同一水平。行高line-height和height设置一样高会是内容垂直居中。Margin不设置可见框的大小，padding可以。布局尽量使用块元素。Margin：0（上下） auto（左右）居中
2. 简单布局：垂直排列直接块元素，水平排列设置浮动（都要设置）
3. 高度塌陷和bfc:父元素的高度一般不写死，根据内容改变。在浮动布局中，父元素的高度默认被子元素撑开，子元素浮动后，脱离文档流，导致父元素高度塌陷

，其下元素高度上移。

1. clear与：：after伪元素可以使父元素的高度不塌 
2. class中加clearfix,并设置clear：：before， clear：：before{content：’ ’; clear:both; display:table;} 可以解决外边距重叠（用overflow：hidden）和高度坍塌
3. 定位：position：static；元素没有开启定位。Relative：相对定位。Absolute：绝对定位。Fixed：固定定位。
4. 相对定位：开启定位才有元素偏移量（设置元素自己位子，并且完全不影响别人，与margin区别就是这里。t、b、l、r）。定位元素就是开启定位的元素，定位位置就是参照元素自己原来的位置。相对定位会提升元素的层级，可以覆盖别的元素（没有脱离文档流，块或行内的性质没有变）。原来的位置还占着，但是实体移动了。
5. 绝对定位：元素从文档流中脱离，会改变元素性质，行内变成块元素。快的宽度被内容撑开，提升元素层级。相对于包含块进行定位的。

一般情况下：包含块是指离当前元素最近的祖先块元素。

绝对定位时：包含块离他最近的开启了定位的祖先元素，若都没开，则相对于根元素定位（HTML：根元素、初始包含块）

1. 固定定位：大部分特点与绝对定位相同，不同的是固定定位永远参照浏览器的视口（可以看见的窗口）定位，比如转动滚动条的时候，元素固定不动
2. 粘滞定位：sticky。与相对定位特点一致，只不过到达某一高度后将其固定。
3. 水平布局：9个值相加=包含块内容区宽度。需要添加left和right两个值，如果发生了过度约束，且没有auto，则自动调整right的值来使等式满足。可设置auto的值：margin、width、left、right。将t、b、l、r四个值全部设置成0，然后让margin：auto；就会使元素双居中（包含块中）。
4. 元素的层级：都开了定位的元素，可以使用z-index属性来指定元素层级，他需要一个整数做参数，值越大层级越高越先显示。如果层级一样，优先显示靠下的元素。祖先元素不会盖住后代元素。
5. 轮播图块元素如果不指定宽度，margin；0 auto；不会使他居中（此时他站了一行）。Overflow：hidden；隐藏超出的部分。Background-clip：content-box；将背景颜色只设置到内容区，边框和内边距不再有颜色
6. 字体族：color：设置字体颜色。Font-size：字体大小（em:相当于当前元素的一个font-size，rem：相当于根元素的一个font-size，px）font-family：字体；名字间有空格的需要加一个单引号，字体间用，隔开，并优先使用第一个。@font-face{font-family：自己起个名字；src:url（字体路径）}可以将服务器中的字体直接使用。（速度，版权）
7. 图标字体：
8. 文本样式：文本水平对齐text-align，可选值：left，right，center，justify（两端对齐），垂直对齐vertical-align可选值，baseline（默认基线对齐），top，bottom，middle，还可以直接写数字px。图片的基线会与边框有距离，给他设置非基线对齐即可。
9. 其他样式：text-decoration：可选值：underline（下划线），none，line-through（删除线），overline（上划线）可以同时选颜色和样式。
10. 省略内容：white-space，设置网页如何处理空白。可选值：normal，nowrap（不换行），pre（保留空白，即显示你所写的任意样式）。要省略就要设置nowrap，然后overflow：hidden；（记得写宽度），text-overflow：ellipsis；（文本后加省略号） 三个都不能少。
11. Line-height：没有设置高度，使文字垂直居中，文本内容撑开。脱离文本流后无法撑起高度。
12. 下拉框：设置
    1. display:none

 

将会隐藏它以及所有的后代元素

占据的空间消失，浏览器不会解析该元素

visibility:hidden

可以理解为透明度为0

占据的空间仍存在，浏览器仍然会解析该元素

visibility具有继承性，父元素设置visibility:hidden，子元素也会继承该属性，当子元素重新设置visibility:visible，元素又会重新显示，而display:none不会

 

1. 背景图：background-image：url（路径），设置图片背景。可以同时设置背景颜色和背景图片。图片小于元素，会自动将页面铺满（很多张），如果大于将会有一部分隐藏。Background-repeat：设置背景重复方式。可选值：repeat默认值，沿着x,y轴重复。Repeat-x, Repeat-y，no-repeat。

Background-postion：用来设置图片的位置，通过t\b\r\l\c设置，九宫格，设置两个值，中间有空格，如果只设置一个值，则默认第二个值为center。也可以设置偏移量：background-postion：水平偏移量 垂直偏移量（px）。

1. 背景二：正常情况下边框下也会有背景。

background-clip可用来设置背景范围。可选：border-box：默认值，背景在边框里。Padding-box：背景不会出现在边框里，只出现在内容区和内边距，content-box：内容区。

Background-origin：背景图片偏移量计算的原点。可选值：padding-box：默认值，background-position从内边距开始算，原点在内边距。Content-box，border-box。

Background-size：宽度 高度（px）如果只写一个，后面相当于auto，把持比例不变。可选值：Cover（保持比例不变，将元素铺满）。Contain：图片比例不变，将图片在元素中完整显示。overflow：auto；（出现滚动条，显示隐藏内容，但不会对整体背景图有影响），

background-attachment：背景图片是否跟随元素移动。可选值：scroll：默认值，背景图随元素移动。Fixed：固定在页面中。

可以直接background：加所有;（没有顺序）。

1. a:link（未点击时图片）；a:hover;a:visited;（访问后）a:active（点击时）。

解决图片换状态时闪烁问题（雪碧图应用）：将多个图保存成为一个大图片，让后通过调整background-position来移动到想要的位子。

雪碧图使用：（一次性加载多个图片，加快速度）确定要使用的图标

1. 测量图标大小
2. 根据测量结果创建一个元素（定宽 高）
3. 将雪碧图设置为元素的背景图
4. 设置偏移量来显示图片

线性渐变：设置一些复杂的背景颜色，可以实现从一个颜色向另一个颜色过度（沿直线）。！渐变是图片，需要用background-image来设置。Background- image：Liner-gradient（to方向，颜色1（可以加xxpx,表示从xx位置往上是颜1），颜色2，…）从前到后，默认向下。Deg表示度数。Repeating- liner-gradient:平铺效果

1. 径向渐变（放射性效果）与上使用相同radial-gradient：渐变形状根据元素的形状来计算的。（正方-圆形，长方-椭圆）。手动设置大小：（xxpx, xxpx, at xxpx,xxpx，（指定位置） ，颜色…），
2. 父级display: flex，然后子元素设置flex-direction，flex-direction，justify-content，align-items，align-content中的任何一个即可。

①    flex-direction 容器内元素的排列方向(默认横向排列)

1：flex-direction: row; 沿水平主轴让元素从左向右排列

2：flex-direction: column; 让元素沿垂直主轴从上到下垂直排列

3：flex-direction: row-reverse;沿水平主轴让元素从右向左排列

②    flex-wrap 容器内元素的换行(默认不换行)

1：flex-wrap:  nowrap; (默认)元素不换行,比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50%；

2：flex-wrap: wrap; 元素换行,比如：一个div宽度100%，设置此属性，第二个div就在第二行了；

③    justify-content 元素在主轴（页面）上的排列

1：justify-content : center;元素在主轴（页面）上居中排列

2：justify-content : flex-start;元素在主轴（页面）上由左或者上开始排列

3：justify-content : flex-end;元素在主轴（页面）上由右或者下开始排列

4：justify-content : space-between;元素在主轴（页面）上左右两端或者上下两端开始排列

5：justify-content : space-around;每个元素两侧的间隔相等。所以，元素之间的间隔比元素与边框的间隔大一倍。

④align-items 元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式

 

1：align-items : flex-start; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界（靠上对齐）。

2：align-items : flex-end; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。（靠下对齐）

3：align-items : center; 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（居中对齐）

4：align-items : baseline; 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。（靠上对齐）

④    align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）

 

1：align-content: flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。

2：align-content: flex-end; 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠。

3：align-content: stretch; 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。

4：align-content: center; 默认值。元素被拉伸以适应容器。

5：align-content: space-between;元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。

6：align-content: space-around;元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。

1. 表格：HTML中加框。<table border=”1” width= …><>table（表格整体），table中tr表示表格中的一行，有几个tr就有几行。在tr中td表示一个单元格，有…。（单元格默认情况下只占应该的大小），<td colspan=”2”><>：横向合并格，rowspan：纵向。
2. 长表格：table中有thead、tbody、tfoot，将他分为位置固定的三个部分。
3. 表格样式：border-spacing：xpx；设置边框之间的距离。Border-collapse：collapse；设置边框合并。Tr:nth-child(2n+1):{}，可以为指定行设置样式（例奇数行odd），若果表格中没有使用tbody，而是直接使用tr那么浏览器会自动创建tbody，将所有tr放入其中，所以此时，tr是tbody的子元素，所以不能table>tr选中tr。默认情况下，元素在td中是垂直居中的，可以通过vertical-align：来修改。在其他中也可以运用，display：table-cell（将元素设置为单元格），td中可以用的可以用（vertical-align可用，但是text-align不可用，用margin：0 auto）。
4. 表单：用于提交数据。<form active=”地址” >  Form的属性：action：要提交的服务器地址。

提交按钮：<input type=”submit”  value=“框中名字”>，文本框：<input type=”text”>（行内元素），注意：数据要提交必须为元素指定一个name。密码框：<input type=”password”>，单选按钮：<input type=”radio” name=“相同的名字才有效”value=“给服务器看选了什么”checked=”默认选择”>。多选框 <input type=”CheckBox” name=“”value=’’> 下拉列表 <select name=“”><option （selected 默认选中）value=””>选项1<><…>

68.表单补充：<input type=”reset”  value=“”>重置按钮   <input type=”button”  value=“”>普通按钮   （input可以被button替换，不同的是input是自闭和）。<input type=”color” >颜色选择<input type=”email” >邮件 autocomplete=“off”关闭自动补全。 Readonly：只读，数据可提交disable：禁用，不可交。 Autofocus：自动获取焦点

69. *{margin: 0; padding: 0}作用是Reset（重置）浏览器默认样式

     70.过渡（还是要用到hover）：transition：想变的元素 时间s；一个属性变化时切换方式

              Transition-property：指定要过渡的属性用，隔开（all就是所有）

              Transition-duration：效果持续时间（1s=1000ms）也可以分别指定时间，用，隔开

              Transition-Timing-function:：过渡的时序函数，指定过渡的执行方式

                          可选值：ease（默认，慢速开始，先加速后减速）linear（匀速）ease-in、、、贝塞尔曲线，steps（n）（分n步执行过渡效果，不流畅）end\start（时间结束\开始执行过渡）；

              Transition-delay:过渡效果延迟，等待一段时间后开始

              Transition：同时设置，如果要加延迟，则第一个时间得是持续时间，其余没要求

     71．动画：和过度类似（动态效果），不过过渡需要在某个属性发生变化的时候触发，动画自动。需要设置关键帧（设置动画执行的每一个步骤）。

@keyframes 名字{

from{}开始位置

to{}结束位置

}

.box1{

           Animation-name：名字；

           Animation-duration：xx s;（动画执行时间）

           Animation-delay:            延迟

           Animation- Timing-function:      速度

           Animation-iteration-count：      动画执行次数     可选值：infinite无限执行 n

           Animation-direction：           动画运行方向      可选值：normal（默认从form到to）,reverse（反向执行），alternate（f-t来回）, alternate-reverse（t-f来回）

           Animation-play-state：          动画执行状态       可选：running（默认） paused（暂停）

           Animation-fill-mode：           填充              可选：none（结束回到原来位置），forwards（结束位置） backwards（延时等待时，就处于from状态）

}

 

  72．雪碧图：from{position：0 0；} to{ position：-xxpx 0}  Animation{ run 1s steps(n) infinite}

  73. 平移变形：transform：translate元素变形效果 平移 translateX/Y/Z（xxpx，）沿xx平移，弗莱明左手定则。注意不会把别人挤走，百分比是相当与自身（例宽度）计算的。Left：50%；相对于父元素移动到一半处，但此时并非完全居中，可用到translatex/y（-50%）在移动他自己本身的50%。

  74.z轴平移：就是调整与人眼间的距离，距离越大，离人越近。立体效果，近大远小。默认情况下，网页不支持透视，大小不变。所以要设置网页视距（人眼距网页距离）。Html{ perspective：xxpx；}。

  75.旋转：transform：rotatex/y/z（xxdeg）,deg是角度，1turn（一圈）。先转再平移，和先平移再转的视觉不一样。钥匙箱转的时候看不见背面，可以加backface-visibility：hidden；

  76.做表：转的时候沿中心点转。可以外面加一个容器旋转。absolute设置居中，t/b/l/r全部设置为0，然后margin设为auto，就会在同样设置了定位的父元素中居中了。

  77.立方体图片：opacity：0-1.0；为整个元素设置透明效果。用x/y的方向来转，然后z来移动，分开他们。父元素容器转动的时候，默认2D转，如果想要立体，设置transform-style:preserve-3d;

  78.缩放：transform：scalex/y（n）；大于1，放大n倍，小于1，缩小n倍。Scale（），双方向缩放。Transform-origin：xxpx xxpx;（变形的原点）

  79.弹性（伸缩）盒子：flex：用于布局，代替浮动。（浮动会高度塌陷，而他不会）使元素具有弹性，然他可以随页面的大小改变而改变。

弹性容器：选择一个元素作为弹性容器，通过display来设置容器。Display：flex（块级弹性容器）Display：inline-flex（行内弹性容器），给容器设置后，就会具有弹性，不用给每一个子元素设置。

弹性元素：弹性容器的子元素是弹性元素，一个元素可以同时是….。

给容器设置Flex-direction：指定容器中弹性元素的排列方式。可选值：row（默认，横着写）  row-reverse（反向横着）  column（自上向下） column-reverse（自下向上）

主轴：弹性元素的排列方式称为主轴

辅轴：与主轴方向垂直的

弹性元素的属性：

flex-grow: n; 指定弹性元素的伸展系数  当父元素有多余空间时，子元素如何伸展。父元素的剩余空间按比例分配

flex-shrink：；指定弹性元素收缩系数，当父元素空间不足时，对子元素按比例收缩，为0时就不会收缩，直接溢出。如果元素没有容器大，会带动容器缩小

80. 会动的导航条： flex-grow：给每个弹性元素都设，会让他们平均分配。List-style：none和text-decortion：none

81. 弹性容器样式：flex-wrap：设置弹性元素是否在容器中自动换行。可选值：nowrap（默认值，不换），wrap（沿辅轴方向换行），wrap-reverse：（沿辅轴反方向换行）

  Flex-flow：wrap和direction的简写属性；

  Justify-content：如何分配主轴上的空白空间（即元素没占到的空间分配，会让他们中间产生间隙）（主轴上的元素如何排列），可选值：flex-start：元素沿主轴起边排列。Flex-end：沿终边排列 center：居中排列  space-around：空白分布到元素两侧  space-evenly：空白分布到元素单侧（每测距离一样）。Align-items：元素在辅轴上如何对齐，可选值：stretch（默认值，将元素长度设置为相同的值）flex-start：元素不会拉伸，按辅轴的起边对齐。 flex-end：按辅轴的终边对齐 center：中间对齐    baseline：文字对齐

82.弹性元素样式：flex-shrink：元素缩减系数：计算复杂，根据缩减系数和元素大小来计算

                flex-basis；元素基础长度，指定长度（之前设的都不算了），根据主轴横纵向来分别设置宽高。默认值auto，参考自身宽高。

                Flex：增长 缩减 基础；（简写）默认值initial（0 1 auto），auto（1 1 auto）none（0 0 auto）相当于没有弹性

                Order：n;（排列顺序）

83.淘宝导航条：flex：auto；自动增长宽度适应屏幕，空间有多大就变多大（不用）。

84.像素：css像素和物理像素。物理像素：屏幕是由发光小点构成。Css像素：编写网页时如设置宽高的px是css像素，浏览器在显示时，将css转换为物理。默认情况下，PC端一个..等于一个..。

视口：浏览器显示区域。通过查看视口大小来观察css像素和物理像素的比值，默认宽度1920px（css，同物理）此时为1:1。放大网页视口css像素减小（物理像素大小不变），所以比例也会改变

     85. 手机像素：在不同的屏幕中，单位像素不同，越小越清晰。默认情况，移动端的视口为980px（css子像素），确保PC端网页可以在移动段正常显示，如果超过，会自动缩放。

     86. 完美视口：默认情况移动端像素比：980/移动端宽度。编写移动页面时，必须有一个合理的像素比。通过改变调整视口大小来改变。<meta name=”viewport” content=”width=’100px”>（此例是将width改为100px）,要加*{margin：0；padding：0；}来清除样式。每一款移动设备都有最佳视口，找到即可。

总结：写移动端的页面要加上：<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

87. vw单位：不同的设备的完美视口不同，所以在移动端写网页的时候不能用px来写。百分比也不行，因为参照物会变。Vw是视口的宽度，100vw=一个视口的宽度。

88. vw适配：1rem=1html的字体大小。网页中最小字体大小是12px（比他小就变成12，除了0以外）。

89. 背景图片跟普通图片（即img标签）是不同的东西！width和height这两个属性只能用来定义img标签图片的大小，是不能用于控制背景图片的大小。