HTML+CSS----------HTML5+CSS3
html回忆录
1、网页的组成：图片、文字、超链接、视频、音频等
2、网页中web标准三层组成:结构(html)、表现(css)、行为(JS).
3、Chrome浏览器的内核：Blink；苹果内核：webkit;
4、HTML是超文本标记语言，是描述网页的一种语言，是一种标记，不是一种语言，是一套标记标签。
5、超文本指的是超越文本的限制，超级文本链接
6、内核渲染HTML和CSS
7、
8、 文档头部
9、 网站标题
10、
11、
12、 网页的主体
13、
14、
15、单标签：a img h1~h6 hr br input
16、双标签：span ul li ol strong em div table form …
17、Img图像标签 alt 图片不能正常显示时的替换文本 title 鼠标悬停时的提示文本。
18、相对路径：相对路径是相当于当前的HTML文档的位置而言的 先找到HTML文档所在的位置 根据HTML文档位置判断是上级还是下级路径
19、下一级路径 / / / 上一级路径： …/ …/
20、绝对路径：绝对网络地址可以使用\ \ \ 反方向的斜杠
21、锚点定位 当前页跳转 创建锚点链接分为两步：
1）使用相应的id名标注跳转目标的位置。第二季
2）使用链接文本 创建链接文本即被点击的
22、 base标签
-
base可以设置整体链接的状态 -
base写到之间 -
把所有的连接都默认添加target=”_blank”
23、pre预格式化文本
24、 < > 空格
25、表格:展示数据用的 table > t r > td; th表头 caption 表格标题 th tbody tfooter
26、table 属性borde 默认是无边框 cellspacing 设置单元格与单元格之间的空白间距 cellpadding 设置单元内容与单元格边框之间的空白间距。width height 设置表格的高度和宽度 align 表格在网页中的水平方式。通常border width height 都为0;
27、合并单元格：跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
28、顺序 先上 后下 先左 后右
29、合并单元格三部曲
-
先确定是跨行还是跨列 -
根据先上 后下 先左 后右的原则找到目标单元格 然后写上合并方式，还有合并的数量 -
删除多余的单元格 即是单元格合并后多余的部分；
30、a标签不能继承属性color a标签里面不能嵌套a标签 p标签不能包含div
30、列表是用来布局的 容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表
31、无序列表 各个列表项之间没有顺序级别之分，是并列的 ul > li
32、ul中只能嵌套li 直接在ul标签中输入其他标签或者文字的做法是不被允许的
33、li 相当于一个容器，可容纳所有的元素
34、无序列表会带有自己样式属性，放下那个样式，让css取消掉。
* {
margin 0;
Padding:0;
}
35、ol li 有序列表
36、自定义列表 dl>dt+dd; dd是对dt的解释说明 最常用的就是网页最底部的布局
37、
38、 - 名词1
39、 - 名词1解释1
40、 - 名词1解释2
41、 - 名词2
42、 - 名词2解释1
43、 - 名词2解释2
44、
45、表单 是为了收集用户信息 input
46、表单域form submit 和 reset要配合表单域
47、在HTML中一个完整的表单通常由表单控件、提示信息和表单域3个部分构成
Input属性：text 单行文本框； password 密码输入框；radio 单选按钮 checkbox 复选框；button 普通按钮 submit 提交按钮 reset 重置 file文件域
Image 图像形式的提交按钮 必须要有src属性， file 文件域 上传文件用的（上传头像）
48、checked=checked 定义选择控件的默认选中项
49、label 标签为 input 元素定义标注（标签）
作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
1、第一种用法就是用label直接包括input表单。
2、第二种用法 for 属性规定 label 与哪个表单元素绑定
40、textarea控件 可以轻松创建多行文本框输入 resize: none;
41、select>option 默认选中selected=selected； select至少包含一行option。
42、form 表单域 实现用户信息的收集和传递，form中所有的内容都会被提交给服务器。
43、
属性：action url地址 用于指定并处理表单数据的服务器程序的url地址
method：get/post 用于设置表单数据的提交方式
name：名称 用于指定表单的名称，以区分同一页面中的多个表单；
注意：每个表单都应该有自己表单域。我们现在做页面，不写看不到效果，但是 如果后面学 ajax 后台交互的时候，必须需要 form表单域。
44、一个标签的多个属性之间用空格隔开
45、拓展：
46、:用于定义表格的头部 用来放标题之类的东西
47、:用于定义表格的主题， 放数据主体
48、放表格的脚注之类的
49、以上标签都是放到table标签中
CSS展望录
1、CSS层叠样式表： 引入css样式表
2、CSS的最大贡献就是： 让 HTML 从样式中脱离， 实现了 HTML 专注去做 结构呈现，样式交给css 结构**(html)与样式(css)相分离**
3、CSS的主要作用版面的布局和外观显示样式
4、引入CSS样式表：
1、行内式(内联样式表)
<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容
任何HTML标签都拥有style属性，用来设置行内式
Style其实就是标签的属性 样式属性和值之间是: 多组属性值之间用;隔开
2、内部样式表(内嵌样式表)
是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
3、外部样式表(外链表) 将所有的样式表放在一个或者多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。
4、link是一个单标签
link标签需要放在head头部标签中，并且指定link标签的三个属性；type="text/css"可以省略。
5、总结CSS样式规则：
1、选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。
2、属性和属性值以“键值对”的形式出现。
3、属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4、属性和属性值之间用英文“:”连接。
5、多个“键值对”之间用英文“;”进行区分。
5、CSS选择器：找到特定的HTML页面元素
6、选择器的分类：标签选择器、类选择器、id选择器、伪类选择器 通配符选择器。
7、标签选择器：标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
作用：标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签
优点：是能快速为页面中同类型的标签统一样式
缺点：不能设计差异化样式。
标签选择器， 页面同选起。 直接写标签， 全部不放弃。
8、类选择器
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
9、使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
* {
margin: 0;
padding: 0;
}
10、多类名选择器：
各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下，还是较多使用的
11、font字体
font: font-style font-weight font-size font-family; 按照这个顺序，不可以随意跟换位置，字号和字体必须同时出现，各个属性值之间用空格隔开。
可以给文本分别指定style weight size family(字体，微软雅黑)
其中不需要设置的属性可以省略(默认值)，但必须保留font-size和font-family属性，否则font将不起作用。
font-style：normal 默认值，浏览器会显示标准的字体样式 font-style:normal; italic浏览器会显示斜体字体样式
font-weight：400 等同于 normal，而 700 等同于 bold 默认是normal
谷歌默认浏览器字体大小是16px;
12、CSS的外观属性：
1、color用于定义文本颜色。三种方式：预定义的颜色值(pink) 十六进制 #fff RGB代码
2、text-align：文本水平对齐方式：left center right 行内元素和块盒子里面的行内元素
特别注意不是让盒子居中对齐，是让盒子里的内容居中对齐
3、line-height：行间距 就是行与行之间的间距，字符的垂直间距，通常称为行高。通常情况下比字体大7，8个像素即可。
4、text-indent：设置首行文本缩进 建议使用em作单位 1em就是一个字的宽度 。
5、text-decoration：文本装饰 none underline overline line-through(后面两个基本不用)。
13、CSS符合选择器：后代选择器 子元素选择器 交集选择器 并集选择器 链接伪类选择器 :linked 未访问的链接 :visited 已访问的链接 :hover 鼠标移动到链接上 :active 选定的链接 尽量不要颠倒顺利 否则会引起错误 lvha
14、并集选择器：通常用于集体声明 ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思
15、标签显示模式display：块级元素div ol ul li 行内元素 span a 行内块元素 img input
16、块级元素：1.独占一行 2.可以设置宽度、高度、内、外边距都可以控制 3.宽度默认是容器的(父级)100% 4.是一个容器及盒子，里面可以放行内 元素和块级元素。
17、行内块元素：1.相邻行内元素在一行上，一行可以显示多个。2.宽、高设置是无效的 3.默认宽度就是它本身内容的宽度 4.行内元素只能容纳文本或者其他行内元素。
18、行内块元素：1.和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙，一行可以显示多个。2.默认宽度就是它本身内容的宽度3.高度、行高、外边距内边距都可以控制。
19、标签显示模式转换display：inline-block block inline
20、行高等于高度可以使单行文本垂直居中。行高大于高度文字偏下，行高小于高度文字偏上。
21、CSS背景(background)
22、background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url(image.jpg) repeat-y scroll center top ;
background-color:背景颜色值 默认是透明的 transparent；
background-image: none 默认没有背景图片|url(url 使用绝 对或相对地址指定背景图像) 背景图片后面的地址，url不要加引号
background-repeat : repeat | no-repeat | repeat-x | repeat-y 默认是repeat
background-position : length || length
length 百分数 | 由浮点数字和单位标识符组成的长度值
background-position : position || position
position:top | center | bottom | left | center | right 方位名词
注意：1、必须先指定background-image属性
2、position 后面是x坐标和y坐标。 可以使用方位名词或者 精确 单位
3、如果指定两个值，两个值都是方位名字，则两个值前后顺序无关， 比如left top和top left效果一致
4、如果只指定了一个方位名词，另一个值默认居中对齐
5、如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y
6、如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
7、如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
背景附着：background-attachment : scroll 滚动 | fixed 固定
23、背景透明(CSS3)
背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
background: rgba(0, 0, 0, .3);
24、CSS三大特性 层叠性 继承性 优先级
css层叠性：所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同 一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
原则：样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式 ； 样式不冲突，不会层叠
css继承性：子标签会继承父标签的某些样式，如文本颜色和字号
想要设置一个可继承的属性，只需将它应用于父元素即可
注意：恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
可以继承的：text- ; color ; font- ; line- ; a不能继承color
css优先级：概念：
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，
-
选择器相同，则执行层叠性
-
选择器不同，就会出现优先级的问题。
权重：
继承的权重为零：
权重计算公式
继承或者 * 0,0,0,0
每个元素（标签选择器） 0,0,0,1
每个类，伪类 0,0,1,0
每个ID 0,1,0,0
每个行内样式 style="" 1,0,0,0
每个!important 重要的 无穷大
1） 如果选中了，那么以上面的公式来计权重。谁大听谁的。
2） 如果没有选中，那么权重是0，因为继承的权重为0.
展示超大背景图片的正确打开方式：水平居中垂直靠上
25、盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器
盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
盒子里面的文字和图片等元素是 内容区域
盒子的厚度 我们成为 盒子的边框
盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
border ： none 没有 solid 单实线 dashed边框为虚线 dotted 边框为点线
border-top/right/bottom /left 可以分别指定每个边框的粗细 样式 颜色
border-collapse:collapse 合并边框 不叠加 表示相邻边框合并在一起。
padding：边框与内容之间的距离 简写的时候四个数值是顺时针 上右下左、padding 会使边框和内容有距离，同时也会撑开这个盒子；
！！特殊情况，当这个盒子没有宽度时，则不会出现撑开这个盒子的情况！！
26、块级盒子水平居中：
盒子必须指定了宽度（width） 然后就给左右的外边距都设置为auto
27、margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离
28、文字居中与盒子居中的区别
1、盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和 行内块居中对齐
2、块级盒子水平居中 左右margin 改为 auto
29、插入图片和背景图片的区别
1、插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
2、背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position 超大图定位 top center
30、外边距合并的问题：
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
1、相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
解决方案：尽量给只给一个盒子添加margin值。
2、嵌套块元素垂直外边距的合并（塌陷）
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
父元素的上外边距会与子元素的上外边距发生合并
合并后的外边距为两者中的较大者
解决方案：
可以为父元素定义上边框。
可以为父元素定义上内边距
可以为父元素添加overflow:hidden。 绝对定位和固定定位 float；
31、去掉列表默认样式 li { list-style : none ;}
32、圆角边框(CSS3)
boder-radius:length; 可以为数值或者百分比的形式
技巧：让一个正方形变成圆圈 boder-radius: 50%;
矩形用高度的一半，精确单位
boder-top-right-radius:分别给左上角 右上角 左下角 右下角 先写上下 再决定左右 分别指定每个角的边框。
33、盒子阴影(CSS3)
box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
前两个属性必写；外阴影(outset)是默认的但是不能写 内阴影inset eg: box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
34、float 浮动
35、CSS布局的三种机制：普通流 浮动和定位；
普通流（标准流）块级元素会独占一行，从上向下顺序排列；
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；常用元素：span、a、i、em
浮动：让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示
定位：将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效
36、元素的浮动是指设置浮动属性的元素会：1、脱离标准普通流的控制2、移动到指定位置 浮动中间没有间隙
作用：1、让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段
2、可以实现盒子的左右对齐等等。
3、浮动最早是用来控制照片，实现文字环绕图片的效果。
37、float :left right none;
38、 浮：漂浮在普通流的上面，脱离标准流。俗称脱标
漏：浮动的盒子，把自己原来的位置漏给下面的标准流的盒子，就是不占有原来的位置，是脱离标准流的 脱标。
特：float属性会改变元素display属性 相当于转换为行内块元素 但是元素之间没有空白缝隙。
39、浮动元素与父盒子的关系
子盒子的浮动会参照父盒子对齐，不会与父盒子的边框重叠，也不会超过父盒子的内边距
浮动元素与兄弟盒子的关系：
在一个父级盒子中，如果前一个兄弟盒子是：
浮动的，那么当前盒子会与前一个盒子的顶部对齐；
普通流，那么当前盒子会显示在前一个兄弟盒子下方。
39、浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题
40**、清除浮动的原因：因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响下面的标准流。**
41**、清除浮动的本质：清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0** 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
42**、清除浮动的方法：**
1**、额外标签法：**
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如
，或则其他标签br等亦可。**2**、父级添加overflow属性方法**
可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。
3、使用after伪元素清除浮动
4、:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了
.clearfix:after { content: “”; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {zoom: 1;} / IE6**、7** 专有 */
5、清除浮动总结： 什么清除浮动？
1、父级没有高度 2**、子盒子浮动了、3、影响下面的布局了** 就应该清除浮动
43**、css属性的书写规范：**
display**：布局属性** 块元素还是行内元素
1**，布局定位属性** 建议第一个是display
2**，自身属性** 盒子自身的属性
3**，文本属性**
4**，其他属性**
44**、布局流程：**
1 必须确定页面的版心（可视区）
2 分析页面中的行模块 以及每个行模块的列模块。页面布局，本质就是一行行罗列而成
3 制作HTML结构。先结构后面再样式
4 然后运用盒子模型的原理：通过DIV+CSS布局来控制页面的各个模块。
46、定位 position**：**
47、CSS布局的三种机制：标准流 浮动 定位
将盒子定在某一个位置 自由的漂浮在其他盒子**(包括标准流和浮动)的上面**
标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）
48、定位=定位模式+边偏移
49、在CSS中通过 top botom left right 属性来定义元素的位偏移（方位名字）
50、定位的盒子有边偏移才有价值。一般情况下，凡是有定位的地方必定有位偏移。
51、定位模式 定位**=定位模式+边偏移**
选择器 {
position:**属性值;**
}
eg:div {
position**：relative**
}
top:100px;
52、static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位；
53、静态定位 static
静态定位是元素的默认定位方式，无定位的意思。
静态定位按照标准流特性摆放位置，他没有边偏移。
静态定位在布局是时我们几乎不用的
54、相对定位 相对于自己之前的位置 保留原来的位置 不脱标
绝对定位 相对父级移动位置 完全脱标不占有位置 脱标 父级没有定位，则以浏览器为准定位。将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
子绝父相 —— 子级是绝对定位，父级要用相对定位
55、固定定位 完全脱标 不占有位置 在浏览器的可视口
56、定位居中：
1**、left:50%** 父级元素的一半
2**、margin-left:-100px;** 向左移动自身宽度的一半 注意为负数
57、新浪导航头部使用固定时需要注意的两个事项：
1**、为了保证在浏览器窗口放大或者缩小的时候，头部的导航栏始终都显示在内容的正上方，给固定定位的头部导航栏一个通栏的** 不给宽度 给width：100%；
2**、由于头部是固定定位，脱流不占有位置，为了保证网页内容能够完全展示出来，要给网页主体一个margin-top值** 值得大小就是固定导航栏的height。
58、学成网实现固定：
59、1、版心宽度的一半 left:50%;
60、2、自身的宽度加上版心的一半 再适当调节 margin-left:负数；
61、3-2、相对定位 relative
62、相对定位是元素相对于它原来在标准流中的位置来说的
特点：
1**、相对于自己原来在标准流中的位置移动的**
2**、原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。**
63、绝对定位 absolute
64、绝对定位是元素以带有定位的父级元素来移动的
1**、完全脱标–完全不占位置**
2**、父元素没有定位，则以浏览器为准定位；**
3**、父元素有定位** 子绝父相
65、子绝父相 —— 子级是绝对定位，父级要用相对定位。
66、堆叠定位 z-index**；** 调整盒子的堆叠顺序；
67、在使用定位布局时，可能出现盒子重叠的情况。加了定位的盒子，默认后来居上，后面的盒子会压住前面的盒子。
68、z-index堆叠顺序的特性如下：
1**、属性值：正整数、负整数或0** 默认值为0，数值越大 盒子越靠上；
2**、如果属性值相同，则按照书写顺序，后来居上；**
3**、数字后面不能加单位**
69、注意：z-index只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
70、定位改变display属性：
1**、可以使用inline-block转换为行内块**
2**、可以用浮动float默认转换为行内块(类似** 浮动是脱标的**)**
3**、绝对定位和固定定位也和浮动类似，默认转换的特性** 转换为行内块。
71、所以 一个行内的盒子，如果添加了浮动，固定定位和绝对定位，不用转换，就可以给这个盒子直接设置官渡和高度等。
72、定位的扩展:
绝对定位的盒子居中：
注意：绝对定位**/固定定位的盒子不能通过设置margin:auto设置水平居中**
居中的方法 ：
1**、left:50%;让盒子的左侧移动到父级元素的水平中心位置**
2**、-100px;** 让盒子向左移动自身宽度的一半。
！！！！！！重点 牢记！！！！！！！
margin**值：margin-left:影响当前盒子** margin-right:**影响后面盒子的布局；**
text-align:center:**块级元素里面的内容和行内元素** 水平居中显示
margin:0 auto; 块级盒子水平居中
line-height:height 单行文本垂直居中**;**
vertical-align: 只针对行内块和行内元素 设置图片文字对齐 middle baseline top bottom 默认是**baseline。**
圆角矩形设置四个角：
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
如果4个角，数值相同：border-radius:20px;
简写：border-radius: 左上角 右上角 右下角 左下角; 顺时针
----------CSS高级技巧----------
1、元素的显示与隐藏
display:none; 隐藏元素 display:block; 显示元素 不保留原来的位置
2、
visibility: 可见性 保留原来的位置
visibility:visible 对象可视 visibility:hidden; 对象隐藏
3、overflow: 溢出
overflow:hidden; 不显示超过对象尺寸的内容，超出的部分隐藏掉 overflow:scroll; 不管超出内容否，总是显示滚动条 overflow:auto;超出自动显示滚动条，不超出不显示滚动条 overflow:visible; 不剪切内容也不添加滚动条
4、鼠标样式：
5、cursor:default 默认小白 pointer 小手 move 移动 text 文本 not-allowed 禁止
6、outline 轮廓线
outline : outline-color ||outline-style || outline-width
最直接的写法是 ： outline: 0; 或者 outline: none;
7、防止拖拽文本域resize; resize:none;
8、vertical-align:垂直对齐
9、有宽度的块级元素居中对齐，是margin: 0 auto;
10、让文字居中对齐，是 text-align: center; 块元素
11、vertical-align 垂直对齐，它只针对于行内元素或者行内块元素
12、图片表单和文字对齐：
13、vertical-align:baseline默认 middle top bottom
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。
就是图片底侧会有一个空白缝隙
给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐
给img 添加 display：block; 转换为块级元素就不会存在问题了
14、溢出文字省略号显示
1、white-space:nowrap 强制文本在一行内显示
2、overflow：hidden 超出的部分隐藏
3、text-overflow:ellipsis; 文字用省略号代替超出的部分
15、精灵图
为了有效减少服务器发送和接受请求的次数，提高页面的加载速度。
15、滑动门
导航栏内容
* {
padding:0;
margin:0;
}
body{
background: url(images/wx.jpg) repeat-x;
}
.father {
padding-top:20px;
}
li {
padding-left: 16px;
height: 33px;
float: left;
line-height: 33px;
margin:0 10px;
background: url(./images/to.png) no-repeat left ;
}
a {
padding-right: 16px;
height: 33px;
display: inline-block;
color:#fff;
background: url(./images/to.png) no-repeat right ;
text-decoration: none;
}
li:hover,
li:hover a {
background-image:url(./images/ao.png);
}
1、a 设置 背景左侧，padding撑开合适宽度。
2、span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
3、之所以a包含span就是因为 整个导航都是可以点击的。
margin 负值之美：
突出显示 定位
只有position 元素在可以使用z-index；
position float 标准流
CSS三角：
步骤：1、宽度高度为0 2、4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了 3、为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;
品优购项目总结：
1、网站ico图标：
2、使用ico图标：首先把favicon.ico这个图标放到根目录下(和html文档在一个目录里)，在html里面，head之间加上引入代码：
3、
4、制作ico图片 1、首先切成图片 借助第三方网站http://www.bitbug.net/ 比特虫
5、ico是显示在浏览器中的网页图标，是图标形式不是一个图片 位置是放在head标签中间。 一定要把文件放在根目录下。
6、网站的三大优化标签 title description keyword；
7、
Eg：
8、字体图标：http://icomoon.io
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
9、注意上面文件路径问题：
10、logo 的优化：
1、logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要
2、h1里面放一个链接，可以返回首页的，给链接一个大小和logo的背景图片
3、链接里面要放文字(网站名)，为了搜索引擎收录我们，但文字不要显示出来
a、要用text-indent移动到盒子外面(text-indent:-9999px) 然后overflow:hidden 淘宝
b、直接给font-size:0; 就看不到文字了 京东的做法
3、最后给链接一个title属性加上网站的名字 这样鼠标就放到logo上，就可以看到文字提示了。
11、注意在css文件中使用照片 文档时的路径问题。
12、布局就是div+css div！！！！！
13、SEO(搜索引擎)优化 ：TDK titlle description keywords
14、alt 和 title alt 是图片不能正常现实的替换文本 title 是鼠标经过时的提示文本。
15、title 与 h1 的区别
常用命令行：
1、win+r打开命令行
2、cmd是command的缩写.即命令提示符（CMD）
3、盘符：就可以进入某个盘符 eg:C:可以进入C盘；
4、文件类
dir 列出目录中所有文件
cd 切换文件夹(目录)
cd 目录名 可以进入指定目录，目录名可以是绝对路径也可以是相对路径
cd …/ 返回上一层目录 cd ./ 当前目录 cd / 返回根目录(盘符下)
md/mkdir 创建文件夹
md newdir 新建一个名称为newdir的目录 eg: md andy
rd/rmdir 删除文件夹
rd newdir 删除目录，如果目录中有其他内容会提示目录不是空的
rd / S newdir 删除目录，如果目中有其他内容会提示newdir,是否确认(Y/N)?,输入Y按回车删除
rd /S ?Q newdir 静默删除目录，如果目录中有其他内容，不提示直接删除(此操作危险)
创建文件
cd./>文件 比如cd./>index.html 这样就可以创建一个html页面
删除文件
del 文件名 比如 del index.html
小技巧： 小工具 notepad calc
自动补全
在敲出文件/目录前几个字母后，按下tab键
如果有以这前几个字母开头的文件/目录，系统会自动补全
如果补全的文件/目录不是想要的可以继续按tab键，切换到下一个文件/目录，知道找到想要的为止
曾经使用过的命令
按上/下光标键可以在曾经使用过的命令间来回切换
如果不想执行当前的命令可以按ctrl + c 中断r
cls 清屏 （CLear Screen）
exit 退出
快捷键 ctrl + c 终止当前操作
H5介绍
html的一个版本
方法 属性 标签 动画 特效 语义化标签
- 支持 谷歌 火狐 苹果 欧朋 ie9(选择性支持) 以上
写法 结构更简洁
语义化标签 可以复用
头部 header
导航 nav
主体 main
文章 article
侧边栏 aside
底部 footer
手动创建标签 document.createElement(“header”); 转成块元素
直接引入第三方库 html5shiv.js
ie注释 cc:ie
H5新增表单 type 属性:
邮箱 email @ 域名
电话 tel 移动端调取数字键盘 数字 number 默认值 value 最大 max
最小 min
搜索 search 网络地址 url 加 http:// https://
范围 : range
默认值 value
最大 max
最小 min
拾色器 color 日期相关
时间 time
日期 date
时间+日期 datetime safari支持
时间+日期 datetime-local
月份 month
星期 week
表单其他属性:
提示占位 placeholder="提示文字" 自动获取光标 autofocus 只能设置一个
自动补全 autocomplete = "on / off" 1.必须成功提交过一次 2. 必须设置name属性
多选 multiple 邮箱填写用逗号隔开 验证正则pattern="正则表达式" 必填 required
关联表单之外的表单:
-
1.关联的表单 2.被关联 input form ="form" 关联要关联表单的id值 可输入的下拉框 兼容性: input设置list 值是datalist的id值 datalist 设置 id属性 - value是实际值 默认值 - label 提示值 - option 可以写单标签 - input的type类型是url http:// 表单事件: 1.oninput 实时触发 只要值修改就触发事件 2.oninvalid 验证失败触发 3.setCustomValidity('修改的提示信息') 修改提示信息用的 进度条 progress - 最大值 max - 默认值 value 度量器 meter - 最大值 max - 最小值 min - 较高 high - 较低 low - 默认值 value fieldset legend --提示文字 多媒体: 音频: audio -src 路径 -controls 控制器 -autoplay 自动播放 -loop 循环播放 -muted 静音 视频 : -src 路径 - controls 控制器 - autoplay 自动播放 - loop 循环播放 - muted 静音 width 宽度 只设置一个 另一边会等比例缩放 - height 高度 只设置一个 另一边会等比例缩放 - poster="图片路径" 第一帧 注意 : 谷歌浏览器今年1月份 提出 不支持多媒体文件自动播放 减少流量 拦截广告 修改浏览器配置 Chrome://flags/#autoplay-policy 各个浏览器支持的视频格式不一致 source 单标签 - src 路径 - type ="video/flv"DOM获取元素
1.获取单个元素 document.querySelector(‘选择器’
2.获取多个元素 document.querySelectorAll(‘选择器’)
类样式操作 classList:
1.添加 元素.classList.add('类名') 一次只能添加一个
2.移除 元素.classList.remove('类名')
3.切换 元素.classList.toggle('类名')
4.检测是否包含 元素.classList.contains('类名') 返回值是一个布尔值
5.获取指定项 元素.classList.item(2)括号内是数值
自定义属性:
1.以data- 开头 2.不要使用字符 大写字符 数字 保留字或者关键字 汉字 多个字符 用- 链接获取 dataset['nameAdd'] 出现多个字符用驼峰命名法 获取
网络监听 在线 online 离线 offline
全屏:
开启全屏 requestFullScreen
元素.requestFullScreen()
兼容处理 :
谷歌 元素.webkitRequestFullScreen()
火狐 元素.mozRequestFullScreen()
IE 元素.msRequestFullScreen()
欧朋 元素.oRequestFullScreen()
退出全屏 cancelFullScreen: document.cancelFullScreen()
兼容性: 谷歌 元素.webkitCancelFullScreen() 火狐 元素.mozCancelFullScreen()
IE 元素.msCancelFullScreen() 欧朋 元素.oCancelFullScreen()
检测全屏 document.fullscreenElement 返回值 是一个布尔值
只有火狐是严格遵守的驼峰命名 mozFullScreenElement
FileReader:
1.结构中 上传控件 绑定onchange事件
2.在onchange事件处理程序中
创建文件读取对象 var reader = new FileReader(); reader 就产生了完整的事件模型
onabort:读取文件中断片时触发 onerror:读取错误时触发 onload:文件读取成功完成时触发
onloadend:读取完成时触发，无论成功还是失败 onloadstart:开始读取时触发
onprogress:读取文件过程中持续触发
上传的文件会存储在files里面 files[0]
reader.readAsDataURL(files[0]) 读取路径 无返回值
上传成功之后 onload方法里面读取 reader.result 动态修改图片的路径
拖拽: 元素可以被拖拽 必须添加 draggable=‘true’
被拖拽元素:
开始被拖拽 ondragstart 结束被拖拽 ondragend
持续拖拽 ondarg 拖拽离开 ondragleave 鼠标离开被拖拽元素的原始位置
目标元素:
拖拽进入 ondragenter 拖拽离开 ondragleave
持续拖拽 ondragover – 阻止掉浏览器的默认行为 e.preventDefault / return false
拖拽结束 ondrop
拖拽解决方式一（遗留全局变量的问题）
绑定事件给document e.target 定义全局变量接收事件源 拖拽开始存储
目标元素拖拽结束的时候追加全局变量存储的数据
拖拽解决方式二 最终:
在被拖拽元素拖拽开始ondragstart 存储 e.dataTransfer.setData(“text/html”, e.target.id); – 字符串
在目标元素拖拽结束ondrop事件中获取 e.dataTransfer.getData(“text/html”);
地理定位:
navgator.geolocation.getCurrentPosition(success,err,{})
成功之后获取的参数 :
position.coords.latitude 纬度
position.coords.longitude 经度
position.coords.accuracy 精度
position.coords.altitude 海拔高度
百度地图开放平台
web存储(会话存储): 特点 : 都不能跨浏览器访问
sessionStorage: 大小 : 5M 活动范围: 当前页面 生命周期 : 关闭当前页面就消失
存储位置 : 当前浏览器页面的内存中
API: 设置 - window.sessionStorage.setItem(k,v); 获取 - window.sessionStorage.getItem(k);
移除 - window.sessionStorage.removeItem(k); 清空 - window.sessionStorage.clear();
localStorage 大小 : 20M 活动范围: 当前浏览器的所有页面
生命周期 : 永久有效,除非手动删除 存储位置 : 硬盘
API:设置 - window.localStorage.setItem(k,v); 获取 - window.localStorage.getItem(k);
移除 - window.localStorage.removeItem(k); 清空 - window.localStorage.clear();
HTML5缓存: HTML文件中在html的开始标签 manifest=“以.appcache” 结尾 创建以.appcache结尾的文件
1.第一句必写 CACHE MANIFEST 2.实时从服务器获取 NETWORK: 3.缓存 CACHE:
4.加载失败的文件用对应的文件代替 FALLBACK:
5.注意 - (#) 注释 (*)缓存的所有文件 (/) 获取失败的所有文件
多媒体综合案例: 暂停属性 paused 视频总时长 duration 当前播放的事件 currentTime
方法:播放 play() 暂停 pause()
事件:oncanplay 视频可以播放的时候触发 ontimeupdate 视频播放时间修改就会触发 onended 视频结束
时间转换:时 time/3600 分 time % 3600 / 60 秒 time % 60
渐进增强:先满足低版本浏览器 优雅降级:先满足高版本浏览器
属性选择器:
1.检测某个元素包含某个属性 li[class]{}
2.检测某个元素某个属性是否等于某个值 li[class=a]{}
3.检测某个元素某个属性是否以a开头 li[class^=a]{}
4.检测某个元素某个属性是否以a结束 li[class$=a]{}
5.检测某个元素某个属性是否包含a li[class*=a]{}
兄弟伪类: 只能往下找
一个 li+p: 相邻 指定元素
多个 li ~ p 指定元素
父元素的伪类 :
查找的类型必须是指定的类型 :
第一个 li:first-child{} 匹配不准确 li:first-of-type{} --匹配类型
最后一个 li:last-child{} li:last-of-type{} 第几个 li:nth-of-type(3){}
奇数 li:nth-of-type(odd) li:nth-of-type(2n+1 / 2n-1)
偶数 li:nth-of-type(even) li:nth-of-type(2n)
前5个 li:nth-of-type(-n+5){} 后5个 li:nth-last-of-type(-n+5){} 空 li:empty{}
目标伪类: 元素:target{}
伪元素 before 和 after 不能使用js操作
1.content 属性必写 2.默认是行内元素 转块 / 浮动/定位
3.before 插入到内容之前 4.after是插入到内容之后
div::before {
/必须添加content属性，否则后期不可见/
content: “”;
/默认是行级元素，如果想设置宽高，就必须转换为块级元素/
position: absolute;
width: 20px;
height: 20px;
}
其他伪元素:
首字 p::first-letter{} 首行 p::first-line{}
默认选中样式 p::selection{} — 只能改样式 不能改大小
颜色表示方式:
1.rgb(122,133,2) hsl(0-360,0%-100%,0%-100%); 色相 饱和度 亮度
颜色透明 :
opacity : 0 - 1 rgba() 父元素透明,不会影响到子元素
hsl(0-360,0%-100%,0%-100%,0-1) 父元素透明,不会影响到子元素
文本阴影:
text-shadow : 水平偏移值 垂直的偏移值 阴影的模糊度 阴影的颜色 ,水平偏移值 垂直的偏移值 阴影
的模糊度 阴影的颜色 > 0 向右 >0 向下 最小值是0 添加多个阴影用逗号隔开
盒子模型内减:
box-sizing:content-box 宽度就是内容的宽 不计算 padding 和border
box-sizing:border-box 宽度是内容+padding + border
边框圆角:
border-radius: 10px 四个角都生效:
border-radius: 10px 20px ; 左上角/右下角 右上角/左下角
border-radius: 10px 20px 30px ; 左上角 右上角/左下角 右下角
border-radius: 10px 20px 30px 40px 左上角 右上角 右下角 左下角
边框阴影★★★★★:
box-shadow: 水平偏移值 垂直偏移值 模糊度 阴影的缩放 阴影颜色 inset(内阴影);
0 向右 >0 向下 最小值是0
线性渐变;
1.使用background属性添加
2.background:linear-gradient(方向[可选] , 起始颜色 位置 ,结束颜色 位置 , , )
3.方向 : to top 0deg to right 90deg to bottom 180deg -- 默认值 to left 270deg
径向渐变:
1.使用background属性添加:
2.background:radial-gradient(形状,大小,坐标,起始颜色 位置,结束颜色 位置 , ,)
3.形状 如果是正方形, 形状是circle 不是正方形,ellipse (椭圆) --默认值
4.大小 最远角 - 默认值 farthest-corner 最近角 - closest-corner
最远边 - farthest-side 最近边 - closest-side
坐标 at 水平位置 垂直位置
方位词 top bottom left right center 数值 10px 20px
重复渐变:
重复线性渐变:
repeating-background:linear-gradient(方向[可选] , 起始颜色 位置 ,结束颜色 位置 , , )
重复径向渐变:
repeating-radial-gradient(形状,大小,坐标,起始颜色 位置,结束颜色 位置 , ,)
背景平铺:
background-repeat: round 会将背景图片缩放,完整展示 会平铺 :
background-repeat: space 不会缩放背景图,产生间距
背景定位2;
背景附着 background-attachment: fixed; --- 背景图固定不动
background-attachment: scroll 当滚动容器的时候,背景图是会跟随滚动的 ,当滚动容器内容的时候是不会跟随滚动的
background-attachment: local 背景图会跟随滚动
背景图片大小 background-size:
background-size: 数值 计算图片的原始比例 失真
background-size:百分比 计算图片的原始比例 百分比是相对于 父容器的
background-size: contain 背景图会完整展示 等比例缩放 可能造成空白区域:
1.背景图大于容器 将图片缩小
2.背景图小于容器 将图片放大
background-size: cover 容器会被填满 背景图片溢出 显示不完整 等比例适应整个容器:
1.背景图大于容器 显示不完整 将图片缩小
2.背景图小于容器 显示不完整 将图片放大
背景原点 background-origin:
1.background-origin :border-box 背景图从边框开始显示
2.background-origin :padding-box 背景图从padding开始显示 -默认值
3.background-origin :content-box 背景图从content开始显示
背景裁切 background-clip :特点 - 裁掉的是谁,显示的是谁及以内的内容
1.background-clip:border-box 显示边框及以内的内容
2.background-clip:padding-box 显示padding及以内的内容
3.background-clip :content-box 显示content及以内的内容
过渡 - transition 执行完毕之后会回到原始位置:
1.过渡属性名称 transition-property : 属性名
2.过渡时长transition-duration: 2s 单位是s
3.运动曲线: transition-timing-function: linear / ease / ease-in / ease-in-out
4.过渡延时:transition-delay: 2s 单位是s
5.步长:steps(60)
6.联写 transition: 属性名 执行时长 运动曲线 延时; 为所有样式添加过渡 写 all
注意: steps 和运动曲线只能同时出现一个
2D转换 transform 执行完毕之后会回到原始位置:
位移 translate:
1.transform : translate(10px) 沿着X轴移动10px 参照自身的起始位置
2.transform : translate(10px,20px) 沿着 X轴移动10px 沿着Y轴移动20px
3.transform:translateX(10px) 沿着X轴移动10px
4.transform:translateY(10px) 沿着Y轴移动10px
缩放 scale > 1 就放大 < 1就缩小
1.transform:scale(2) x和y方向都进行缩放
2.transform:scale(2,1) 第一个参数代表x 第二个参数代表y
3.transform:scaleX(2) x方向的缩放
4.transform:scaleY(2) Y方向的缩放
旋转 rotate:
1.transform:rotate(30deg) 沿着Z轴旋转 角度是正数 顺时针旋转 角度是负数 逆时针旋转
2.transform: rotateX(30deg) 沿着X轴旋转 单杠
3.transform: rotateY(30deg) 沿着y轴旋转 钢管
斜切 skew:
1.transform:skew(30deg) X轴方向 角度是正的 向相反的方向斜切
2.transform:skew(30deg,30deg) X/Y
3.transform:skewX(30deg) X
4.transform:skewY(30deg) Y
修改旋转的中心:
transform-origin : 方位词(left bottom left right center) 具体的像素值; 第二个值不写 默认是center
3d转换★: 注意:transform会影响定位
3d位移:transform :translate3d(x,y,z) 3个值缺一不可
3d缩放: transform:scale3d(x缩放,y方向的缩放,z方向的缩放)
3d旋转:transform:rotate3d(x方向的矢量,y方向的矢量,z方向的矢量,旋转的角度)
动画（关键帧动画）:
动画定义:
@keyframes 动画名称 {0% {处理的程序} 100% {处理的程序} }
@keyframes 动画名称 {from {处理的程序} to{处理的程序}}
动画使用:
animation-name: 动画名称
设置执行时长 animation-duration： 2s 单位是s
设置动画的执行次数 animation-iteration-count : 数值 /无限执行 infinite 如果配合来回交替使用 执行的此时是写的数值的一半
设置来回交替 animation-direction：alternate
设置延时 animation-delay: 2s 单位是s
设置结束时的状态:
a.animation-fill-mode： forwards; 会保留结束状态，在添加延时的情况下，不会立即渲染动画的初始样式
b.animation-fill-mode：backwards 不会保留动画的结束状态，在添加延时的情况下，会立即渲染动画的初始样式
c.animation-fill-mode:both 会保留结束状态 ，在添加延时的情况下，会立即渲染动画的初始样式
设置运动曲线：animation-timing-function： linear ease ease-in
设置播放状态 ：animation-play-state： running(默认值播放) 、 paused(暂停)
联写 ：animation: name duration timing-function delay iteration-count direction fill-mode;
animation-timing-function中steps 和 运动曲线只能出现一个
字体图标 阿里巴巴
多列布局:设置列数 column-count：4
- 设置列与列之间的间隙 column-gap : 100px
- 设置列与列的分界线 column-rule : 1px solid red;
- 设置列宽 column-width : 100px； 取大优先
- 跨列显示 column-span : 1 （默认值） /all(跨整列)
伸缩盒子:
父元素设置:
设置父元素为伸缩盒子 display:flex ； 子元素变为伸缩项
调整主轴方向上子元素的显示方式 justify-content
1.flex-start 父容器的左侧开始显示 默认值
2.flex-end 父容器的右侧开始显示
3.center 父容器的中间显示
4.space-between 两端对齐 中间的子元素平均分配剩余空间
5.space-around 所有子元素平均分配剩余空间
控制子元素是否换行 flex-wrap :
1.nowrap 不换行 默认值 2.wrap 换行 3. wrap-reverse 换行并翻转
调整主轴方向 flex-direction:
1.row 水平方向 从左到右 2.row- reverse 水平方向 从右到左
3.column 垂直方向 从上到下 4.column-reverse 垂直方向 从下到上
既调整换行显示 也调整主轴方向 flex-flow : flex-wrap属性值 flex-direction的属性值
控制子元素在侧轴的显示方式 align-items :
1.flex-start 顶对齐 2.flex-end 底对齐 3.center 居中对齐
4. stretch 拉伸 子元素不设置高度 默认值 5.baseline 基线对象
子元素设置:
定义扩展比例 flex-grow:0（默认值）:
计算 当前元素的flex-grow值 / 所有兄弟元素的flex-grow的和定义收缩比例flex-shrink:1(默认值是1)
计算 当前元素的flex-shrink值 / 所有兄弟元素的flex-shrink的和flexnumber
flex：数值
当前元素的flex值 / 所有兄弟元素的flex的和
设置单个子元素在侧轴的显示方式 align-self
flex-start 顶对齐 flex-end 底对齐 center 居中对齐
stretch 拉伸 子元素如果不设置高度 默认值 baseline 基线对象