CSS+C3+H5笔记

一、CSS定位

1.相对定位

• 给元素设置 position:relative 即可实现相对定位。
• 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
• 参考点：相对自己原来的位置

特点：

1. 不会脱离文档流，不会对其他元素产生任何影响。

2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

默认规则是：

• 定位的元素会盖在普通元素之上。都发生定位的两个元素，后写的元素会盖在先写的元素之上。
• left 不能和 right 一起设置， top 和 bottom 不能一起设置。
• 相对定位的元素，也能继续浮动，但不推荐这样做。
• 相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。

2.绝对定位

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

特点：

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

3.固定定位

• 给元素设置 position: fixed 即可实现固定定位。
• 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
• 参考点：参考它的视口

特点：

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

4.粘性定位

• 给元素设置 position:sticky 即可实现粘性定位。
• 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置，不过最常用的是 top 值。
• 离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先

特点：

• 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
• 最常用的值是 top 值。
• 粘性定位和浮动可以同时设置，但不推荐这样做。
• 粘性定位的元素，也能通过 margin 调整位置，但不推荐这样做。

5.定位层级

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

6.定位的特殊应用

让定位元素的宽充满包含块

• 块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为 0 。
•  高度想与包含块一致， top 和 bottom 设置为 0 。

让定位元素在包含块中居中

方案一：

方案二：

二、CSS布局

1.版心

• 在 PC 端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页
• 的版心。
• 版心的宽度一般是 960 ~ 1200 像素之间。
• 版心可以是一个，也可以是多个。

2.常用布局名词

3.重置默认样式

方案一：使用全局选择器

方案二：reset.css

方案三：Normalize.css

三、C3简介

1.概述

CSS3 是 CSS2 的升级版本，它在 CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。

2.私有前缀

代码中的 -webkit- 就是私有前缀

3.常见浏览器私有前缀

四、C3基本语法

1.C3新增长度单位

2.C3新增颜色设置方式

CSS3 新增了三种颜色设置方式，分别是： rgba 、 hsl 、 hsla

3.C3新增选择器

CSS3 新增的选择器有：动态伪类、目标伪类、语言伪类、 UI 伪类、结构伪类、否定伪类、伪元素；

4.C3新增盒模型相关属性

 box-sizing 怪异盒模型

 resize 调整盒子大小

box-shadow 盒子阴影

5.C3 新增背景属性

6.C3新增边框属性

7.C3新增文本属性

8.Web字体

五、H5简介

HTML5 是新一代的 HTML 标准，2014年10月由万维网联盟（ W3C ）完成标准制定。

优势：

1. 针对 JavaScript ，新增了很多可操作的接口。

2. 新增了一些语义化标签、全局属性。

3. 新增了多媒体标签，可以很好的替代 flash 。

4. 更加侧重语义化，对于 SEO 更友好。

5. 可移植性好，可以大量应用在移动设备上。

六、H5新增语义化标签

1. 新增布局标签

2. 新增状态标签

3.新增列表标签

4.新增文本标签

七、新增表单功能

1. 表单控件新增属性

2. input 新增属性值

3. form 标签新增属性

八、新增多媒体标签

1. 视频标签

<video> 标签用来定义视频，它是双标签。

2. 音频标签

九、HTML5兼容性处理