【前端学习笔记04-H5/CSS3 自用】

内容来自于B站BV1p84y1P7Z5《尚硅谷禹神前端入门html+css零基础教程》P139-178，仅作笔记自用。

一、CSS2

1.1 相对定位 position:relative

参考点：相对于自己原来的位置，

特点：不脱离文档流；定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

默认规则：

定位的元素会盖在普通元素之上。
都定位的两个元素，后写的元素居上。
3.left 和 right 不能一起设置， top 和 bottom 不能一起设置。

注：相对定位元素可浮动或调整 margin 位置，但不推荐；绝大多数情况下，相对定位，会与绝对定位配合使用。

1.2 绝对定位 position:absolute

参考点：参考它的包含块。

包含块：

对不脱离文档流的元素，包含块=父元素，
对脱离文档流的元素，包含块=第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）

特点：

脱离文档流，会对后面的兄弟元素、父元素有影响。
left 和 right 不能一起设置， top 和 bottom 不能一起设置。
绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
无论（行内、行内块、块级）元素设置为绝对定位之后，都变成了定位元素。

定位元素：默认宽、高都被内容所撑开，且能自由设置宽高。

注：绝对定位元素可调整 margin 位置，但不推荐。

1.3 固定定位 position:fixed

参考点：参考它的视口。

特点：

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

注：固定定位元素可调整 margin 位置，但不推荐。

1.4 粘性定位 position:sticky

最常用的是 top 值。

参考点：离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。

特点：

不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
粘性定位和浮动可以同时设置，但不推荐。粘性定位元素可调整 margin 位置，但不推荐。

1.5 定位层级 z-index

可以通过 css 属性 z-index 调整元素的显示层级。属性值是数字，值越大层级越高；只有定位元素设置 z-index 才有效。如果元素没有覆盖掉 z-index 值小的元素，那么请检查其包含块的层级。

1.6 固定/绝对定位的特殊应用

发生固定 / 绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。发生相对定位后，元素依然是之前的显示模式。

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

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

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

方案一：

left:0;
right:0;
top:0;
bottom:0;
margin:auto;

方案二：

left: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;

注意：该定位的元素必须设置宽高！！！

1.7 布局重置默认样式

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

(二)常用布局名词：

(三) 重置默认样式

方案一：全局选择器

* {
margin: 0;
padding: 0;
......
}

可用在简单demo中，实际开发中不会用。

方案二：reset.css (最常用)

选择到具有默认样式的元素，清空其默认的样式。

方案三：Normalize.css

Normalize.css 是一种最新方案，在清除默认样式的基础上，保留了一些有价值的默认样式。

官网地址：http://necolas.github.io/normalize.css/

优点：

保护了有价值的默认样式，而不是完全去掉它们。
为大部分HTML元素提供一般化的样式。
新增对 HTML5 元素的设置。
对并集选择器的使用比较谨慎，有效避免调试工具杂乱。

二、HTML5新增标签

注：IE 浏览器必须是 9 及以上版本才支持 HTML5 ，且 IE9 仅支持部分 HTML5 新特性。

2.1 布局标签

2.2 状态标签 meter progress

(1) meter 标签

语义：定义已知范围内的标量测量。也被称为 gauge （尺度），双标签。

常用属性：

(2) progress 标签

语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签。

常用属性：max , value

2.3 列表标签

2.4 文本标签 ruby rt mark

ruby : 包裹需要注音的文字。

rt : 写注音， rt 标签写在 ruby 的里面。

<ruby>
    <span>魑魅魍魉</span>
    <rt>chī mèi wǎng liǎng </rt>
</ruby>

mark : W3C 建议 mark 用于标记搜索结果中的关键字。

2.5 表单功能

1. 表单控件新增属性

2. input 新增属性值

3. form 标签新增属性 novalidate

如果给 form 标签设置了该属性，表单提交的时候不再进行验证。

2.6 多媒体标签 video audio

(1) <video> 标签定义视频，<audio> 标签定义音频，双标签。

(2) <video> 属性：

<audio> 属性：

2.7 全局属性(了解即可)

2.8 H5兼容性处理

添加元信息，让浏览器处于最优渲染模式。

<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">

使用 html5shiv 让低版本浏览器认识 H5 的语义化标签。

<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->

lt	小于
lte	小于等于
gt	大于
gte	大于等于
!	逻辑非

示例：

<!--[if IE 8]>仅IE8可见<![endif]-->
<!--[if gt IE 8]>仅IE8以上可见<![endif]—>
<!--[if lt IE 8]>仅IE8以下可见<![endif]—>
<!--[if gte IE 8]>IE8及以上可见<![endif]—>
<!--[if lte IE 8]>IE8及以下可见<![endif]—>
<!--[if !IE 8]>非IE8的IE可见<![endif]-->

三、CSS3 (部分)

3.1 私有前缀

W3C 标准所提出的某个 CSS 特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核，使用私有前缀来测试该 CSS 特性，在浏览器正式支持该 CSS 特性后，就不需要私有前缀了。

举例：

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;

查询 CSS3 兼容性的网站：https://caniuse.com/

3.2 box-sizing 怪异盒模型

可选值	含义
content-box	width 和 height 设置的是盒子内容区的大小。（默认值）
border-box	width 和 height 设置的是盒子总大小。（怪异盒模型）

3.3 resize 调整盒子大小

使用 resize 属性可以控制是否允许用户调节元素尺寸。

3.4 box-shadow 盒子阴影

语法：默认值 none 表示没有阴影

box-shadow: h-shadow v-shadow blur spread color inset;

/* 写两个值，含义：水平位置、垂直位置 */
box-shadow: 10px 10px;
/* 写三个值，含义：水平位置、垂直位置、颜色 */
box-shadow: 10px 10px red;
/* 写三个值，含义：水平位置、垂直位置、模糊值 */
box-shadow: 10px 10px 10px;
/* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */
box-shadow: 10px 10px 10px red;
/* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */
box-shadow: 10px 10px 10px 10px blue;
/* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */
box-shadow: 10px 10px 20px 3px blue inset;

3.5 opacity 不透明度

作用：为整个元素添加透明效果，值是 0 ~ 1 之间的小数，0 是完全透明，1 表示完全不透明。

opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。

rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。

3.6 background-origin 背景图原点

padding-box ：从 padding 区域开始显示背景图像。—— 默认值
border-box ：从 border 区域开始显示背景图像。
content-box ：从 content 区域开始显示背景图像。

3.7 background-clip 背景图外裁剪

border-box ：从 border 区域开始向外裁剪背景。 —— 默认值
padding-box ：从 padding 区域开始向外裁剪背景。
content-box ：从 content 区域开始向外裁剪背景。
text ：背景图只呈现在文字上。

注：若值为 text ，那么 backgroun-clip 要加上 -webkit- 前缀。

3.8 background-size 背景图尺寸

3.9 backgorund 复合属性

background: color url repeat position / size origin clip

origin 和 clip 的值如果一样，只写一个值，则 origin 和 clip 都设置；如果设置了两个值，前面是 origin ，后面是 clip 。
size 的值必须写在 position 值的后面，并且用 / 分开。

3.10 多背景图

background: url(../images/bg-lt.png) no-repeat,
            url(../images/bg-rt.png) no-repeat right top,
            url(../images/bg-lb.png) no-repeat left bottom,
            url(../images/bg-rb.png) no-repeat right bottom;

3.11 border-radius 圆角

4.1 text-shadow 文本阴影

text-shadow: h-shadow v-shadow blur color;

4.2 white-space 文本换行

4.3 text-overflow 文本溢出

4.4 text-decoration 文本修饰

4.5 文本描边

5.1 线性渐变

多个颜色之间的渐变，默认从上到下渐变。

background-image: linear-gradient(red,yellow,green);

使用关键词设置线性渐变的方向。

background-image: linear-gradient(to top,red,yellow,green);
background-image: linear-gradient(to right top,red,yellow,green);

使用角度设置线性渐变的方向。

background-image: linear-gradient(30deg,red,yellow,green);

调整开始渐变的位置。

background-image: linear-gradient(red 50px,yellow 100px ,green 150px);

5.2 径向渐变

多个颜色之间的渐变，默认从圆心四散。（注意：不一定是正圆，要看容器本身宽高比）

使用关键词调整渐变圆的圆心位置。

background-image: radial-gradient(at right top,red,yellow,green);

使用像素值调整渐变圆的圆心位置。

background-image: radial-gradient(at 100px 50px,red,yellow,green);

调整渐变形状为正圆。

background-image: radial-gradient(circle,red,yellow,green);

调整形状的半径。

background-image: radial-gradient(100px,red,yellow,green);
background-image: radial-gradient(50px 100px,red,yellow,green);