web知识点（一）

LocalStorage、sessionStorage、cookie的区别

共同点：都是保存在浏览器端，且同源的

区别：

• 1 cookie数据始终在同源的http请求中携带,cookie是在浏览器和服务器间来回传递，而sessionStorage和localStorage不会主动把数据发送给服务器。
• 2 存储数据的大小不同，cookie数据不会超过4k,每次http请求都会携带cookie，sessionStorage和localStorage储存大小比cookie大。
• 3 数据的有效期不同，当前浏览器窗口关闭前有效，localStorage：始终有效，只要不手动清除，cookie只在设置cookie的过期时间之前有效。
• 4 作用域不同，sessionStorage不在不同的窗口中共享，而localStorage、cookie在所有同源窗口是共享的

transform,transition,animation的作用

• transform:描述了元素的静态样式，本事不会呈现动画效果，可以结合transition和animation使用实现动画效果（旋转rotate，扭曲shew,缩放scale，移动translate）
• transition样式过渡，从一种效果逐渐改变为另一种效果（是一种复合属性），property（css属性）,duration(过渡效果花费时间),delay(动画延迟时间)
• animation动画是由@keyframes，可以循环，能改变运动轨线。

盒子水平垂直居中

• 方法一：使用定位

.box{
 position:relative;
 width:500px;
 height:500px;
}
.child{
 position:absolte;
 width:100px;
 height:100px;
 margin-left:50%;
 margin-top:50%;
 left:-50%;
 top:-50%;
}

• 方法二使用margin：auto;实现
• 方法三使用display:flew

.box{
	width:500px;
	height:500px;
	display:flew;
	justify-content:centetr;
    align-items:center;
}
.child{
	width:100px;
    height:100px;
}

• 方法四 使用transform实现

.box{
 	position:relative;
 	width:500px;
 	height:500px;
}
.child{
	position:absolte;
    left:50%;
    top:50%;
	transform:translateX(-50%);
 	transform:transitionY(-50%);
 }

display:none和visibility：hidden;区别

display:none;是该元素会隐藏，所占空间会消失

visibility:hidden;设置下，虽然元素不可见，但元素所占领空间还存在，会被子元素继承

浮动所引起的问题，如何清除浮动

浮动定位将元素排除在普通流之外，就是说元素脱离文档流，不占用空间，影响父元素的高度无法被撑开，影响其他元素的排列

	//使用css中的clear:both;{放置一个空的div}
    //给父元素设置伪元素
    .clearfix:after{
    	content:'',
        height:0,
        line-height:0;
        display:block;
        visibility:hidden;
        clear:both;
    }
    .clearfix{
    	zoom:1; //兼容性问题
    }