密钥
localStorage用于永久性保存整个网站的数据的,要手动清除,可跨页面保存
sessionStorage用于临时性保存同一窗口(或标签页)的数据,在关闭窗口或标签页后将会删除这些数据,只在当前页面
cookie控制失效时间
共同点:用于保存数据
不同点:
1.存储内存大小不同(localStorage和sessionStorage可存5mb,cookie存4k)
2.cookie自己封装,存在头部。localStorage和sessionStorage有自带的可用,存在值里
sessionStorage | 功能 |
---|---|
sessionStorage.getItem(key) | 获取数据 |
sessionStorage.removeItem(key) | 删除数据 |
sessionStorage.clear() | 删除所有数据 |
localStorage | 功能 |
localStorage.setItem(key,value) | 存储数据 |
localStorage.getItem(key) | 获取数据 |
localStorage.removeItem(key) | 删除数据 |
localStorage.clear() | 清空 数据 |
盒子模型
1.IE盒子模型
box-sizing:border-box; 也称为怪异盒子模型·
2.标准盒子模型
box-sizing: content-box;
flex
用于指定子元素分配空间,使用时要定义父级
<style>
.boss {
display: flex;
height: 200px;
}
.box1 {
flex: 2;
background-color: red;
}
</style>
<body>
<div class="boss">
<div class="box1">11111</div>
<div class="box2">22222</div>
</div>
</body>
图中flex:2;代表box1在屏幕中占2份
flex-direction
用于指定子元素在父元素的位置,给父元素设置
<style>
.boss {
display: flex;
flex-direction:row;
height: 200px;
}
.box1 {
flex:2;
background-color: red;
}
.box2 {
flex: 8;
background-color: orange;
}
.box3 {
flex: 2;
background-color: green;
}
</style>
<body>
<div class="boss">
<div class="box1">11111</div>
<div class="box2">22222</div>
<div class="box3">33333</div>
</div>
</body>
值
row 横向从左到右排列(左对齐),默认排列方式
row-reverse 反转横向排列(右对齐,从后往前排,最后的在最前面)
column 纵向排列
column-reverse 反转纵向排列 ,从后往前排,最后的在最前面
align-items 设置或检索弹性盒子元素在纵轴向上的对齐方式,给父元素设置
<style>
.boss {
display: flex;
flex-direction:row;
align-items: stretch;
height: 200px;
width:200px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: orange;
}
.box3 {
background-color: green;
}
</style>
<body>
<div class="boss">
<div class="box1">11111</div>
<div class="box2">22222</div>
<div class="box3">33333</div>
</div>
</body>
值
flex-start 弹性盒子纵向靠紧的起始边界
flex-end 弹性盒子纵向靠紧的最下面
center 弹性盒子纵向靠紧的居中位置
baseline 效果和flex-start一样
stretch 效果和flex-start一样
justify-content(重要)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线对齐,内容对齐
<style>
.boss {
display: flex;
justify-content: center;
height: 200px;
width:200px;
}
.box1 {
height: 100px;
width:100px;
background-color: red;
}
.box2 {
height: 100px;
width:100px;
background-color: orange;
}
.box3 {
height: 100px;
width:100px;
background-color: green;
}
</style>
<body>
<div class="boss">
<div class="box1">11111</div>
<div class="box2">22222</div>
<div class="box3">33333</div>
</div>
</body>
值
flex-start 从最开始的行头排放,默认值
flex-end 从行头最尾部开始排放
center 弹性项目居中
space-between 弹性项目平均分布在该行上,相邻项目有间隔
space-around 弹性项目平均分布在该行上,相邻项目有间隔,两边留有一半的间隔空间
两个同时使用,可以实现垂直水平居中
justify-content: center;
align-items: center;
flex-wrap
用于指定子元素换行方式
nowrap 弹性容器为单行,子选项可能会溢出。默认值
wrap 弹性容器为多行,子选项溢出会断到下一行
wrap-reveres 反转 wrap 排列
单行设置
<style>
h1 {
overflow:hidden;/*溢出隐藏*/
white-space: nowrap;/* 强制显示在同一行 */
text-overflow: ellipsis;/* 省略号 */
width:200px;
}
</style>
<body>
<h1>牛牛牛牛牛牛牛牛牛牛</h1>
</body>
用以上代码写在多文字或数字,只会显示几个,多的省略。如牛牛牛…
多行设置
<style>
h1 {
overflow:hidden;/*溢出隐藏*/
width:200px;
display:-webkit-box;/*对象作为弹性盒子模型显示 */
-webkit-box-orient:vertical;/* 设置伸缩盒子对象的子元素的排列方式 */
-webkit-line-clamp:3;/*设置 块元素包含的文本行数 */
}
</style>
<body>
<h1>牛牛牛牛牛牛牛牛牛牛</h1>
</body>
align-content
用于修改flex-wrap,类似于align-items(对齐方式),但是是设置各行的对齐
stretch 默认值,各行会伸展占用剩余的空间
flex-start 盒子在起始位堆叠
flex-end 盒子在结束位置堆叠
center 盒子在中间位置
space-between 各行在盒子中平均分布
space-around 各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半
flex-flow
是 flex-direction 和 flex-wrap 属性的复合属性
flex-flow 用于设置或检索子元素排列方式。
flex-direction 属性规定灵活项目的方向。
flex-wrap 属性规定灵活项目是否拆行或拆列。
order
排序,用整数值来定义排列顺序,数值小的排在最前面,可以为负数。给子元素设置
align-self
在纵向对齐方式,给子元素设置
auto 如没有父元素,则计算值为’stretch’。
flex-start 排在最上面
flex-end 排在最下面
center 居中位置
baseline 如弹性盒子元素的行内轴与纵轴为同一条,则该值与’flex-start’等效。
stretch 如值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,与’flex-start’等效