盒模型
盒模型就是把元素用一个矩形盒子表示,包括content,padding,border,margin,盒模型分为标准盒模型和IE盒模型
标准盒模型:width = content
IE盒模型:width = content+padding +border
//标准盒模型 box-sizing:content-box; //IE盒模型 box-sizing:border-box;
BFC
BFC是一个特殊的块,块内部元素和外部不会互相影响
形成BFC块的条件:
- float属性不为none
- overflow属性不为visible
- position:absolute|fixed
- display:inline-block;
BFC的应用
- 清除浮动,BFC在计算高度的时候,浮动元素也会计算进去
- 解决margin重叠问题
- 自适应布局,消除文字环绕,BFC不与浮动元素重叠
清除浮动的方式
- 创建BFC块,给父元素添加属性,overfow:hidden | float:left .....
- 浮动元素后面添加空div,并设置属性clear:both
- 父元素添加伪类
.clearfix:after{display:block;clear:both;content:'';visibility:hidden;height:0;}
.clearfix{zoom:1}
多元素浮动参差不齐
利用clear属性,给最左一列元素增加属性clear:left
.left{clear:left}
利用display:inline-block
//最外层容器font-size设置为0,目的是去除inline-block元素间默认间距; // 内层元素设置display:inline-block,同时重置font-size,并且设置vertical-align:top向上对齐 .wrapper{font-size:0}; .item{float:left;dispaly:inline-clock;verticle-align:top;font-size:12px}
实现水平垂直居中
.box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
自适应布局
//左边左浮动,右边加个overflow:hidden; .left{200px;background:red;float:left;} .right{background:blue;overflow:hidden;} //左边左浮动,右边加个margin-left; .left{200px;background:red;float:left;} .right{background:blue;margin-left:200px} //左边绝对定位,右边加个margin-left; .left{200px;background:red;position:absolute;} .right{background:blue;margin-left:200px} //左右两边绝对定位,右边加个width,top,left,right .left{200px;background:red;position:absolute;} .right{background:blue;position:absolute;left:200px;top:0;right:0;}
弹性盒布局
任何一个容器都可以指定为Flex布局, 行内元素也可以使用Flex布局, Webkit内核的浏览器,必须加上-webkit前缀 .box{ display: -webkit-flex; /* Safari */ display: flex; } 注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。 容器的属性 flex-direction 决定主轴方向 row(默认水平) | row-reverse | column | column-reverse flex-wrap 决定如何换行 nowrap(默认不换行) | wrap | wrap-reverse(换行,第一行在下方) flex-flow flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap justify-content 主轴对齐方式 flex-start(默认左对齐) | flex-end | center | space-between | space-around align-items 交叉轴对齐方式 flex-start | flex-end | center | baseline | stretch(默认沾满整个容器高度); align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用 flex-item属性 order 排序 ,越小越靠前,默认0 flex-grow 放大比例,默认为0 flex-shrink 缩小比例,默认为1 flex-basis 占据的主轴空间 flex 是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选 align-self 覆盖agn-items属性 auto(默认继承align-item) | flex-start | flex-end | center | baseline | stretch
H5新特性
1.新增语义化标签 header、footer、section、nav、article、aside、time、main
2.增强表单 新增input类型:number、tel、email、time、week、month、url、range 新增表单元素:datalist、progress、meter、keygen、output 新增表单属性:autofocus、required、placeholder、min/max、
3.视频和音频标签 音频:
<audio controls> //controls属性提供添加播放、暂停和音量控件。
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。 //浏览器不支持时显示文字
</audio>
视频:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
4.Canvas绘图 canvas学习地址
5.Svg绘图
6.地理定位
7.拖放API
8.webWorker Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新县城之间数据交换的接口:postMessage、onmessage。
9.webStoreage localStorage、sessionStorage
10.webSoket WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。 特点: (1)握手阶段采用HTTP协议,默认端口是80和443 (2)建立在TCP协议基础之上,和http协议同属于应用层 (3)可以发送文本,也可以发送二进制数据。 (4)没有同源限制,客户端可以与任意服务器通信。 (5)协议标识符是ws(如果加密,为wss),如ws://localhost:8023
CSS3新特性
//边框 border-radius box-shadow border-image不支持IE //背景 background-size : width height/百分比/contain/cover background-origin: padding-box|border-box|content-box;//背景定位区域 background-clip: border-box|padding-box|content-box;//背景裁剪区域 //文本 text-shadow: 5px 5px 5px #FF0000; word-wrap:break-word;长单词换行 //字体 @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } div { font-family:myFirstFont; } //2D转换 Chrome 和 Safari 需要前缀 -webkit-。 Internet Explorer 9 需要前缀 -ms- 火狐加需要前缀-moz- 欧朋需要前缀-o- transform translate(x,y)x,y轴平移 translateX()、translateY() rotate(angle)正时针旋转 scale(x,y)收缩 scaleX() scaleY() skew(x-angle,y-angle)倾斜角度 //3D转换 transform Opera 不支持 3D 转换(它只支持 2D 转换) translate3d(x,y,z) scale3d(x-angle,y-anlge,z-angle) rotate3d(x,y,z,angle) 过渡(元素从一个状态到另一个状态的过程) Safari 需要前缀 -webkit-。 trnasition-property过渡的属性名 trnasition-duration过渡时间 transition-timing-function过渡时间曲线 transition-delay过渡延迟,默认0 transition:all 1s linear 0;简写 //动画 //定义动画 @keyframes name动画名称{ from{属性} 为动画开始 to{属性} 动画结束 } @keyframes name动画名称{ 0%{}动画开始 25%{} 50%{} 75%{} 100%{}动画结束 } //引用动画 animation: animation-name @keyframs规定的动画名称 animation-duration 规定动画完成时间 animation-timing-function动画速度曲线 animation-delay 规定动画开始时间 animation-iteration-count规定动画播放次数,默认1,infinite无限 animation-direction规定动画是否在下一周期逆向播放,默认nomal alternate逆向播放 //简写 animation:name 2s linear 2s infinite alternate