H5新特性

(1)拖拽释放API ondrop:抓住对象后拖放到另一个位置(H5中,任何元素都能够拖放)

(2)自定义属性data-id

(3)语义化更好的标签(header,footer,nav,aside,section,article)

(4)画布(canvas)

img是通过对象形式描述图片

画布是通过专门的API将突破回执在画布

(5)地理 API (获取当前设备的经纬度)

(6)本地离线存储(localStorage)

长久保存网站的数据,保存的数据需要手动清除

(7)seesionStorage

临时存储,数据临时保存统一窗口或者标签页,窗口或者网页关闭数据消失,不需要手动清除

(8)表单控件(calender,date,email,time,url,search,tel,file,number)9

(9)新的技术 (webworker,websocked)

css3新特性

(1)颜色(RGBA)

(2)文字阴影(text-shaow)

(3)边框(boder-radius) 边框阴影(boder-shadow)

(4)盒子模型:box-sizing

(5)背景(background-size,background-origin,background-clip)

(6)渐变(linear-gradient,radial-gradient)

(7)过渡(transition) 可实现属性的渐变

(8)自定义动画 animate @keyfrom

(9)媒体查询 @media screen and (width:800px)

(10)2D/3D转换

transform:

      transform(x,y)  位移(单位:px)
      
      rotate(x,y)     旋转(单位:deg)
      
      scale(x,y)      缩放倍数(没有单位)

(11)字体图标 iconfont

(12)弹性布局 flex

如何使一个盒子水平居中

方法一:定位

父盒子设置相对定位
子盒子设置绝对定位 (top:50% left:50% margin-top:-50% margin-left:-50%)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <style>
    .parent {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      position: relative
    }

    .child {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px
    }
  </style>
  </head>

  <body>
    <div class="parent">
      <div class="child">我是子元素</div>
    </div>
  </body>
</body>

</html>

方法二:margin.auto

父盒子设置相对定位
子盒子设置绝对定位 (margin:auto top:0 left:0 right:0 bottom:0)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <style>
    .parent {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      position: relative
    }

    .child {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      bottom:0;
      right:0
    }
  </style>
  </head>

  <body>
    <div class="parent">
      <div class="child">我是子元素</div>
    </div>
  </body>
</body>

</html>

方法三:display:flex

父盒子设置flex即可

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <style>
    .parent {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .child {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
    }
  </style>
  </head>

  <body>
    <div class="parent">
      <div class="child">我是子元素</div>
    </div>
  </body>
</body>

</html>

方法四:位移

父盒子设置相对定位
子盒子设置固定定位(top: 50% left: 50% transform: translate(-50%,-50%))

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <style>
    .parent {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      position: relative;
    }

    .child {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  </style>
  </head>

  <body>
    <div class="parent">
      <div class="child">我是子元素</div>
    </div>
  </body>
</body>

</html>

如何实现双飞翼(圣杯)布局

方法一:利用定位实现两侧固定中间自适应

父盒子设置左右的padding值
左右盒子的width设置父盒子的padding值, 然后分别定位到padding处
中间盒子自适应

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>





  </style>
</body>


</html>

方法二:利用flex布局实现两侧固定中间自适应

中间盒子设置display:flex
两边盒子设置固定的宽高
中间盒子设置 flex:1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>





  </style>
</body>


</html>

方法三:利用bfc块级格式化上下文,实现两侧固定中间自适应

左右盒子固定宽高,进行浮动
中间盒子设置:overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>





  </style>
</body>


</html>

css3盒子模型

1.概念:可以用来对元素进行布局.包括内边距,外边距,边框,实际内容等

2.分类: 标准盒子模型(w3c标准)+怪异盒子模型(IE标准)

3.区别

标准盒子:

width:content的宽度

height:content的高度

盒子大小:content+padding+border+margin

怪异盒子:

width:content+padding+border

height:content+padding+border

盒子大小:width(content+padding+border)+margin

css3的选择器的优先级

优先级:继承

如何实现双飞翼(圣杯)布局

方法一:利用定位实现两侧固定中间自适应

父盒子设置左右的padding值
左右盒子的width设置父盒子的padding值, 然后分别定位到padding处
中间盒子自适应

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>





  </style>
</body>


</html>

方法二:利用flex布局实现两侧固定中间自适应

中间盒子设置display:flex
两边盒子设置固定的宽高
中间盒子设置 flex:1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>





  </style>
</body>


</html>

方法三:利用bfc块级格式化上下文,实现两侧固定中间自适应

左右盒子固定宽高,进行浮动
中间盒子设置:overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>





  </style>
</body>


</html>

css3盒子模型

1.概念:可以用来对元素进行布局.包括内边距,外边距,边框,实际内容等

2.分类: 标准盒子模型(w3c标准)+怪异盒子模型(IE标准)

3.区别

标准盒子:

width:content的宽度

height:content的高度

盒子大小:content+padding+border+margin

怪异盒子:

width:content+padding+border

height:content+padding+border

盒子大小:width(content+padding+border)+margin

css3的选择器的优先级

优先级:继承<通配符<标签选择器<类选择器<id选择器<行内式<!important

H5input元素type的属性

button:定义可点击的按钮

checkbox:多选框

color:颜色

date:日期(带有calender控件)

month:月份(带有calender控件)

time:时分秒

email:email的地址字段

file:供文件上传

hidden:隐藏字段

image:定义图像作为提交按钮

number:数字字段

password:密码

radio:单选框

search:搜索文本字段

submit:提交按钮

text:文本

url:url的文本字段

css3中的属性继承

1.可以继承的属性

字体系列:font-size/style/family/weight
文本系列:color line-height text-align
元素的可见:visibility
列表布局属性:list-style

2.不能继承的属性

文本属性:text-decoration vertical-align
盒子模型:width height padding border margin
背景属性:background-color/image background
定位属性:position float top bottom right left

px,em,rem的区别

(1)px,是绝对单位.相对于显示器分辨率而言(图像长度单位)

(2)em,是相对单位.相对于当前对象文字的大小而言(相对长度单位)

(3)rem,是相对单位.相对于HTML根元素文字的大小

区别:

(1)px是无法调整的单位

(2)em,rem可以进行缩放

display:none与visibility:hidden的区别

(1)相同点:都可以隐藏元素

(2)不同点

display:none是不占空间的;会引起回流和重绘
visibility:hidden是占空间的;会引起重绘;而且它的子元素有继承性,也会全部隐藏

position的值都有哪些?

(1)静态定位:static 不脱标 (top,right,left,bottom不生效)

(2)相对定位:relative 占位置;相对于自身移动

(3)绝对定位:absolute 不占位置;相对于最近一级带有定位的父元素移动

(4)固定定位:fixed 不占位置;相对于浏览器窗口移动

为什么会出现浮动?会引起什么问题,如何清除浮动?

(1)概念:浮动的元素不占位置,脱离文档流(脱标).

(2)为什么清除浮动:

子元素浮动后,不占位置,父元素的高度无法被撑开,影响和父元素同级的元素
与浮动元素同级的非浮动元素会跟着浮动
第一个元素浮动,之前的元素也需要浮动,不然会影响页面结构

(3)清除浮动的方法

父盒子设置overflow:hidden
父盒子设置双伪元素
父盒子设置高度

如何解决margin塌陷

(1)什么是塌陷

两个盒子,上一个盒子设置margin-bottom,下一个盒子设置margin-top,此时margin会重复,最大值生效
两个父子盒子,子盒子设置margin-top,父盒子也会受到影响,同时产生上边距

(2)解决办法

给父元素设置border
给父元素设置padding值
给父元素设置 overflow: hidden
转换为行内块元素
设置浮动 (注意:浮动绝对定位固定定位的盒子不会有嵌套块级元素塌陷问题.)

::before与::after的双冒号的区别,作用

(1)概念: css3中::表示伪元素 :表示伪类

(2)区别

相同点(作用相同):伪元素和伪类都是在元素内容前后加上指定的内容,向选择器加特殊效果

不同点:

::before是在元素前面加入伪元素 ::after是在元素后面加入伪元素
伪类不互斥,可以叠加使用
伪元素选择器中只能使用一次,并且只能出现在开始和结尾

css3新增伪类,伪元素有哪些?

1.伪类

nth:child(n):父元素的第n个子元素

nth:last-child():父元素的最后一个子元素

nth:first-child():父元素的第一个子元素

:disabled :禁用状态下的表单控件

:checked :表单的单选框和多选框的默认选中状态

2.伪元素

::before 在某元素之前插入内容
::after 在某元素后面插入内容

BFC是什么?

(1)含义:(Block formatting context),块级格式化上下文.是一个独立的渲染区域 (规定如何布局)

(2)布局规则

内部的盒子会在垂直方向,一个接一个放置
内部盒子的垂直方向的距离由margin决定
BFC的区域不会与浮动盒子重叠
BFC是页面上独立的容器,容器内的元素不会影响外部的元素

(3)哪些元素会生成BFC

根元素
固定定位/绝对定位的元素
行内块元素

JavaScript的基本数据类型和引用数据类型

1.基本数据类型

string:字符串类型展示文本内容

number:数字类型用于计算

Boolean:布尔类型用于判断

null:空值

undefined:未定义的值

2.引用数据类型

Function: 函数

Array: 数组

Object:对象

null和undefined的区别

相同点

(1)值相同

(2)转布尔类型都是false

不同点

(1)含义不同:null是空值 undefined是未定义的值

(2)转数字类型的值不同: null转数字类型是0,undefined转数字类型是NaN

(3)数据类型不同,是两个不同的数据类型

JavaScript数据检测方法?

(1)typeof

检测不出来null和Array的数据类型,检测出来都是 object
使用object.prototype.toString.call可以检测出来全部的数据类型

(2)instanceof

实例对象 instanceof 构造函数:检测右边构造函数的prototype在不在左边实例对象的原型链中

day by day

H5新特性

css3新特性

如何使一个盒子水平居中

如何实现双飞翼(圣杯)布局

css3盒子模型

如何实现双飞翼(圣杯)布局

css3盒子模型

css3的选择器的优先级

H5input元素type的属性

css3中的属性继承

px,em,rem的区别

display:none与visibility:hidden的区别

position的值都有哪些?

为什么会出现浮动?会引起什么问题,如何清除浮动?

如何解决margin塌陷

::before与::after的双冒号的区别,作用

css3新增伪类,伪元素有哪些?

BFC是什么?

JavaScript的基本数据类型和引用数据类型

null和undefined的区别