弹性盒子的九种类型（笔记）

最新推荐文章于 2024-06-14 09:42:20 发布

GU-MU-C

最新推荐文章于 2024-06-14 09:42:20 发布

阅读量63

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/g_xlike/article/details/133681590

版权

密钥

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’等效

GU-MU-C

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
弹性盒子的九种类型（笔记）

stretch 如值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，与’flex-start’等效。justify-content（重要）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线对齐，内容对齐。space-around 弹性项目平均分布在该行上，相邻项目有间隔，两边留有一半的间隔空间。用于修改flex-wrap，类似于align-items（对齐方式），但是是设置各行的对齐。align-items 设置或检索弹性盒子元素在纵轴向上的对齐方式，给父元素设置。
复制链接

扫一扫