HTML\HTML5\CSS\CSS3

HTML

html元素

1、行级元素：
水平分布 多个占一行 不可以设置宽高，如：a、span、i、strong、em
2、块级元素：
垂直分布 自己占一行 可以设置宽高，如：div、p、ul、li、h1-h6、table
3、行级块元素：
既可以设置宽高 又可以多个占一行，如：img、button

html语义化

理解：
html中自带了一些标签，这些标签有特定含义，比如：h1-h6代表标题，p代表段落，img代表图片 ；
html5里也推出了一些新的标签：header,footer,nav等这些标签都有特定的含义,使用的时候应按照它的语义来使用。
好处：
1、有一些标签默认会有一些样式，如果浏览器禁止了CSS样式还可以达到突出样式的效果，比如h1；
2、别人阅读你的代码的时候能够根据标签猜出用意，有利于程序员阅读，便于团队开发和维护；
3、浏览器读取方便；
4、有利于搜索引擎优化(SEO:Search Engine Optimization) ， 比如说会根据标签来搜索,可能会重点搜索h1

HTML5

跨域（跨文档消息通信）

1、域名不同：www.a.com ——> www.b.com
2、www.qq.com (主域) ——> news.qq.com (子域)
3、跨端口：localhost:80 ——> localhost:81

新特性

1、用于绘画的 canvas 元素
2、用于媒介回放的 video 和 audio 元素
3、对本地离线存储的更好的支持
4、新的特殊内容元素，比如 article、footer、header、nav、section
5、新的表单控件，比如 calendar、date、time、email、url、search

本地存储

h5提供了sessionStorage、localStorage 和 indexedDB 加强本地存储。

使用之前应该先判断支持情况：
if(window.sessionStorage){
       //浏览器支持sessionStorage
   }
   if(window.localStorage){
       //浏览器支持localStorage
   }

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
具体介绍
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

新的语义化标签

1、header 标签包含引导和导航等，通常包含h1~h6、搜索框、logo等
2、footer标签一般配合address标签(显示地址)，包含作者信息、相关链接等
3、nav标签一般包含多个a标签，构建导航组件
4、aside标签主要装载广告、侧边栏
5、article标签包含文章，一般内嵌header、footer、h1、p标签
6、section标签可以用在以上任一 一个标签中划分组件
7、hgroup顾名思义是h1~h6的集合

新的表单控件

HTML5 拥有多个新的表单输入类型：email、url、number、range、Date pickers (date, month, week, time, datetime, datetime-local)、search、color
具体介绍
表单新增功能
以往input中的name和value要随着form表单一起提交，form表单必须包裹input , 而现在可以通过input的form属性绑定

<form id="testform">
    <input type="text" />  
</form> 
<input form=testform />

placeholder属性： <input type="text" placeholder="请输入密码" />
autofocus属性：页面只能有一个 <input type="text" autofocus />

新的选择器

querySelector、querySelectorAll

canvas画布

canvas 元素

var	cvs = document.getElementById('canvas1'); 
var	cxt = cvs.getContext('2d'); 

历史管理

history.pushState()、window.onpopstate事件

json的方法

JSON.parse()（字符串->对象）、JSON.stringify()（对象->字符串）

CSS

块级格式化上下文 BFC【Box Formatting Context】

BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此
触发条件：
1、html
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex
5、overflow 不为 visible 常用：overflow:hidden;
布局规则：
1、计算BFC的高度时，浮动的元素也参与计算
2、内部的Box会在垂直的方向，一个接一个地放置
3、Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
4、每个元素的margin box 的左边 与 包含块border box的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此
5、BFC的区域不会与float box重叠

CSS选择器

分类： 共11种

类别	示例
id选择器
class选择器
标签选择器
后代选择器	div p
子代选择器	div > p
伪类类选择器	:hover
伪元素选择器	::after(加在内部的后面) ::before(加在内部的前面) 【行元素】
群组(分组)选择器	div,p
属性选择器	div[id]
紧邻的兄弟元素	div+p
后边所有的元素	div ~ p

优先级
1、!important 强制设为最高 【不推荐使用】
2、style 内联样式 【1000】
3、id选择器 【100】
4、class选择器 / 属性选择器 / 伪类选择器 【10】
5、标签选择器 / 伪元素选择器 【1】

定位 position

1、absolute 绝对定位：定位后空间释放，相对于最近已定位的祖先元素
2、relative 相对定位：定位后空间不释放，相对于自己的初始位置
3、fixed 固定定位：定位后空间释放 相对于浏览器的可视窗口
4、static 默认定位：在不设置position属性时位默认定位
5、sticky 粘性定位：产生吸顶效果【CSS3语法】

/*样例*/
h1{
	position:sticky;
    top:50px;
    left:0px;
}
/*效果：【产生滚动条，即能向上滑动页面】h1会向上滑动直到距顶部50px的位置固定*/

浮动 float

特点： 脱离文本流 空间释放 宽高是由内容撑起的
问题： 子元素浮动会导致父元素塌陷（父元素高度为0）
解决塌陷带来的影响的方法：
1、给父元素设置固定高度
2、给父元素加 overflow:hidden; 样式 【原理：触发了BFC,内部是独立的区域】
3、在浮动元素后面加一个div class=“clearfix” 给其添加 clear:left /right /both; 样式清除浮动
4、伪元素方式 父元素class=“clearfix” 【在父元素内部的后面加了一个空div】

clearfix ::after{
	content:"",
	display:block; /*设置成块元素*/
	clear:both
}

盒模型

内容： content + padding + border + margin
类型：
1、标准盒模型：width：200px; content
2、怪异盒模型：width：200px; content + padding + border
IE6以及IE6以下浏览器，不写doctype(文档声明)，会表现成怪异盒模型
转化： box-sizing:border-box(表现为怪异盒模型) / content-box(表现为标准盒模型);

外边距合并

父元素和子元素在相同方向设置外边距时，外边距会合并成其中较大的值：
1、父元素加 overflow:hidden; 样式
2、父元素加透明边框【 0px 不好使】
3、父/子元素浮动或定位
两个兄弟元素外边框合并，外边距会合并成其中较大的值：
1、仅给一个元素设置外边距
2、给兄弟元素添加父元素，触发BFC

溢出

overflow: scroll;  /*溢出显示滚动条*/
overflow: hidden; /*单纯文本溢出隐藏*/
/*单行文本溢出省略... */
overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap;
/*单行文本溢出省略... */
text-overflow: ellipsis;
/*强制文本显示在一行 不换行*/
white-space: nowrap;

层级关系

z-index:1;
默认值为0 数字越大，层级越高，显示越在上面

子菜单

.brother-sub{
         display: none;
     }
.main:hover + .brother-sub{
         display: block;
     }

变换

transform: rotate(30deg);   /*默认：绕中心点旋转  */
transform-origin: 200px 200px;  /*设置原点*/
transform: scale(2);   /*缩放：正大负小*/ 
transform: translateY(1000px);  /*位移 X：正右负左  Y：正下负上*/
transform:skew(45deg);   /*扭曲拉伸 */

CSS3

透明度 opacity

img
{
  opacity:0.4;
  filter:alpha(opacity=40); /* IE8 及其更早版本 */
}

边框圆角 border-radius

border: 2px solid #000;
border-radius: 150px;
/*值越大，弧度越大*/

边框阴影

border:1px solid #000;
box-shadow: 3px 5px 3px 10px rgba(0,0,0,0.3);
/*水平 垂直 模糊度 外延值 颜色值*/

文本阴影

text-shadow: 3px 5px 2px green;
/*水平 垂直 模糊度 颜色*/

div元素的不透明级别

background: rgba(255,0,0,0.5);
opacity:0.5;
/*从 0.0 （完全透明）到 1.0（完全不透明）*/

不同浏览器下旋转div元素

div
{
transform:rotate(7deg);

-ms-transform:rotate(7deg); 	/* IE 9 */

-moz-transform:rotate(7deg); 	/* Firefox */

-webkit-transform:rotate(7deg); /* Safari 和 Chrome */

-o-transform:rotate(7deg); 	 /* Opera */
}

背景图片

background: url(../ddd.jpg) no-repeat;   /*背景图片不重复*/
padding:50px;
border: 10px dashed #000;  /*边框：10px 虚线 黑色*/
/*dotted solid double dashed
点状    实线  双线    虚线  */
background-origin:content-box;  /*背景图像相对于内容框来定位*/
/*
content-box   背景图像相对于内容框来定位
border-box    背景图像相对于边框盒来定位	
padding-box   背景图像相对于内边距框来定位
*/

背景图片绘制范围：
background-clip 属性规定背景的绘制区域。
默认值：border-box

/*背景图片的绘制范围为文字范围*/
-webkit-background-clip:text;
/*以区块内的文字作为裁剪区域向外裁剪，
文字的背景即为区块的背景，文字之外的区域都将被裁剪掉*/
-webkit-text-fill-color: transparent;
/*通过将文字设置为透明，
原本 div 的背景就显现出来了，而文字以为的区域全部被裁剪了*/

背景图片的大小
background-size 属性：规定背景图像的尺寸。
background-size:contain;
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
length：
设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
percentage：
以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
cover：
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。

弹性盒模型

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
flex-grow 属性用于设置或检索弹性盒子的扩展比率。

父元素：
display:flex
flex-direction：row | row-reverse | column | column-reverse
横向从左到右排列 |横向相反 | 即纵向从上往下排列 |纵向相反
align-items:flex-start | flex-end | center | baseline | stretch
纵轴垂直对齐方式
justify-content：flex-start | flex-end | center | space-between | space-around
横轴水平对齐方式

子元素： flex-group：份数
垂直水平都居中：
display: flex;
align-items: center;
justify-content: center;

固定自适应

1、左侧固定，右侧自适应
(1)、左侧浮动，调右侧的margin ：

*{
	margin: 0;
	padding: 0;
}
#left{
	width: 200px;
    height: 300px;
    background: #f00;
    float: left;
}
#right{
	height: 300px;
    background: #0000ff;
    margin-left:200px;
}

(2)、弹性盒模型：

*{
	margin: 0;
	padding: 0;
}
body{
	display: -webkit-flex;
}
#left{
	width: 200px;
    height: 300px;
    background: #f00;
    margin-right: 10px;
}
#right{
	height: 300px;
    background: #0000ff;
    flex-grow: 1;
}

(3)、调右侧的margin：

*{
	margin: 0;
	padding: 0;
}
#left{
	width: 200px;
    height: 300px;
    background: #f00;
}
#right{
	height: 300px;
    background: #0000ff;
    margin-top:-300px;
    margin-left:210px;
}

2、左侧、右侧固定，中间自适应
(1)、左侧左浮，右侧右浮，中间调margin：

*{
	margin: 0;
    padding: 0;
}
#left{
	width: 200px;
    height: 300px;
    background: #f00;
    float: left;
}
#right{
	width: 200px;
    height: 300px;
    background: #0000ff;
    float:right;
}
#center{
	height: 300px;
    background: #ffbb77;
    margin:0 210px ;
}

(2)、弹性盒模型：

body{
	display: flex;
}
#center{
	height: 300px;
    background: #ffbb77;
    flex-grow: 1;
    margin:0 10px;
}

3、上下固定，中间自适应
(1)、定位（绝对定位）：

*{
	margin: 0;
    padding: 0;
}
#top{
	position: absolute;
	top:0px;
	width:100%;
}
#center{
    position: absolute;
    top:50px;
    bottom:50px;
    /* width:100%; */
    left:0;
    right:0;
}
#bottom{
	position: absolute;
    bottom:0px;
    width:100%;
}

(2)、弹性盒模型：

*{
	margin: 0;
    padding: 0;
}
html{
	height:100%;
}
body{
	height: 100%;
    display: flex;
    flex-direction: column;
}
#top{
	height: 50px;
    background: #ff0000;
}
#center{
	background: #ccc;
    flex-grow: 1;
}
#bottom{
	height: 50px;
    background: #0000ff;
}

水平垂直居中

1、弹性盒模型

#parent{
	width:100%;
    height:100%;
    background: #cccccc;
    display: flex;
    align-items: center;       /* 垂直 */
	justify-content:center;    /* 水平 */
}

2、变换——平移（2D）

#parent{
	width:100%;
    height:100%;
    background: #cccccc;
    position: relative;    
}
#child{
    width: 200px;
    height: 200px;
    background: #ff0000;
    position: absolute;
    left:50%;
    top:50%;
    /* margin-top:-100px;
    margin-left:-100px; */
    /* 自己宽高的50% */
            
	/* transform: translateX(-50%) translateY(-50%); */
	transform: translate(-50%,-50%);
}

变换

transform: rotateX(-30deg); 
transform: rotateY(30deg);
transform: rotateZ(30deg); 

transform: translateZ(-200px);

transform-style：

/* 指定子元素定位在三维空间内  维持3D效果 */
transform-style: preserve-3d;

动画

过渡与动画的区别： transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果

CSS中的过渡 transition

transition: width 2s linear 1s;
/*属性 执行时间 运动方式 延迟时间 */

CSS3中的动画 animation

/*forwards 设置对象状态为动画结束时的状态 */
animation: run 2s ease 2s 3 forwards;
@keyframes run{
	0%{
    	}
	100%{
		width:800px;
        }
}

属性详解：

属性	描述	取值
name	动画名	none为默认值，将没有任何动画效果，其可以用来覆盖任何动画
duration	整个动画执行时间	默认值为0，意味着动画周期为0，也就是没有任何动画效果
timing-function	运动方式	与transition-timing-function一样
delay	延迟时间	在开始执行动画时需要等待的时间
iteration-count	执行次数	默认为1，如果为infinite，则无限次循环播放
direction	方向	默认为nomal，每次循环都是向前播放(0-100)，另一个值为alternate，动画播放为偶数次则向前播放，如果为奇数次就反方向播放
play-state	动画的播放状态	默认为running，播放；paused，暂停
fill-mode	动画时间外属性	默认值为none，动画结束时回到动画没开始时的状态；forwards，动画结束后继续应用最后关键帧的位置，即保存在结束状态；backwards，让动画回到第一帧的状态；both：轮流应用forwards和backwards规则