CSS元素定位&弹性布局（20210706）

最新推荐文章于 2023-06-28 13:32:29 发布

Ichitei

最新推荐文章于 2023-06-28 13:32:29 发布

阅读量645

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_44572001/article/details/118538909

版权

标记定位

1.静态定位（默认static）

将页面上的标记，按照html的书写顺序，依据文档流从上到下，从左到右，依次排列。
内联标记不独占一行，块级标记独占一行。

2.相对定位（relative）

以自身为基准，设置坐标，不脱离文档流
相对于自己原来的位置调整，不释放原空间
坐标： left，top，right，bottom

.d2{//类选择器
	position: relative;
	/* left: 30px;
	top: 100px; */
	right: 50px;
	bottom: 10px;
}

3.绝对定位（absolute）

以父标记为基准，设置坐标，脱离文档流（标准流），到达绝对平面，释放原空间。
绝对平面在标准流之上，可以形成遮挡效果。
绝对定位的参考基准
1.设置了定位属性的父标记（父标记也为relative或absolute定位）
2.body标记
坐标： left，top，right，bottom

.d1{//父标记（类选择器）
	position: relative;
}
.d2{//子标记（类选择器）
	position: absolute;
	left: 30px;
	top: 20px;
}

4.固定定位（fixed）

以浏览器窗口为基准，设置坐标，脱离文档流，释放原空间。
固定定位的标记会永远出现在浏览器的一个位置。例：广告，回到顶部栏；

.d2{//类选择器
	position:fixed ;
	right:20px;
	top:30px;
}

5.z-index

该样式的值是一个整形数，就表示脱离标准流标记所在的层级。
值越大，所在的层级越靠上。

.d1{//类选择器
	background-color: red;
	z-index: 10;
}

弹性布局（display: flex）

1.主轴与侧轴

弹性盒子中默认存在两根轴，一个是水平方向的主轴，一个是垂直方向的侧轴。

在这里插入图片描述

2.flex-direction

设置主轴方向
属性值：row横向（默认），column纵向

.parent{//父标记类选择器
	display: flex;
	flex-direction: column；
	//修改主轴为纵向
}

注意：在弹性容器中，以前的“块状标记独占一行”，“内联标记不独占一行”，“标记水平排列时需要浮动”等等规则，一律不再有效。

3.flex-wrap：换行

由于弹性布局中的子标记能自动伸缩，所以，当父容器此次小于子标记整体尺寸时，子标记不会自动换行，而是自动收缩。
属性值：wrap；

.parent{//父标记类选择器
	display: flex;
	flex-wrap: wrap；
	//使自动收缩的子标记换行
}

4.justify-content

设置子标记主轴方向对齐方式
属性值：flex-start（默认）：左（上）对齐(主轴开始方向)；flex-end：右（下）对齐(主轴结束方向)；center：居中；
space-between：两端对齐，子标记之间间距都相等；
space-around：每个子标记两侧的间距相等；

.parent{//父标记类选择器
	display: flex;
	justify-content: space-around；
	//设置主轴方向每个子标记两侧的间距相等
}

5.align-items与align-content

设置子标记侧轴方向对齐方式
属性值：flex-start（默认）：上（左）对齐(侧轴开始方向)；flex-end：下（右）对齐(侧轴结束方向)；center：居中；

.parent{//父标记类选择器
	display: flex;
	align-items: flex-end；
	//设置主轴方向每个子标记两侧的间距相等
}

“align-items:center”：平分空间后，每一行都在各自范围内居中；
“align-content:center”：不平分空间，多行作为一个整体居中。

在这里插入图片描述

6.flex样式

如果想让每个子标记所占空间不一致，那么可以使用flex给子标记分配空间。
flex样式设置在子标记上。
设置了flex的子标记的width，height失效。

<body>
    <div class="son" style="flex:0 0 400px;">1</div>//固定大小：400px
    <div class="son" style="flex:1;">2</div>//比例：三分之一
    <div class="son" style="flex:2;">3</div>//比例：三分之二
</body>

flex:0 0 400px 分析
第一个值：子元素自动扩大值
第二个值：子元素自动缩小值
第三个值：子元素尺寸（auto或者%或者px或者其他长度单位都可以）

Ichitei

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS元素定位&弹性布局（20210706）

标记定位：1.静态定位；2.相对定位；3.绝对定位；4.固定定位；5.z-index。弹性布局：1.主轴与侧轴；2.flex-direction；3.flex-wrap；4.justify-content；5.align-items与align-content；6.flex
复制链接

扫一扫