align 属性，flex属性以及线性渐变

最新推荐文章于 2024-04-08 14:40:22 发布

古其

最新推荐文章于 2024-04-08 14:40:22 发布

阅读量391

点赞数 8

文章标签： javascript html css

本文链接：https://blog.csdn.net/2202_75900709/article/details/135148036

版权

1.align 属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items,但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

stretch	- 默认。各行将会伸展以占用剩余的空间。
lex-start	- f - 各行向弹性盒容器的起始位置堆叠。
flex-end	- - 各行向弹性盒容器的结束位置堆叠。
center	- -各行向弹性盒容器的中间位置堆叠。
space-between	- -各行在弹性盒容器中平均分布。
space-around	- - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

2.flex属性

a. flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。

b. flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。

c. flex-direction 属性规定灵活项目的方向。

d. flex-wrap 属性规定灵活项目是否拆行或拆列。

flex-flow:	flex-direction flex-wrap
flex-direction代表的值有：	row\|row-reverse\|column\|column-reverse
flex-wrap代表值有：	nowrap\|wrap\|wrap-reverse

<!-- order弹性子元素，排序，用整数值来定义排列顺序，数值小的排在最前面，
		可以 为负值，属性设置弹性容器内弹性子元素属性
		 -->
		<!-- align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
		注：给子元素设置
		align-self: auto | flex-start | flex-end | center | baseline | stretch
		 - auto
		   如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
		 - flex-start
		   弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
		 - flex-end
		   弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
		 - center
		   弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
		 - baseline
		   如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
		 - stretch
		   如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
		-->

3.background

background ：
[background-color]	[background-image]
[background-position]	[/background-size]
[background-repeat]	[background-attachment]设置背景图像是否固定或者随着页面的其余部分滚动

4.线性渐变（Linear Gradients）

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

默认情况：从上到下
		background-image: linear-gradient(颜色, 颜色,...);
		从左到右to right|left|top|bottom
		background-image: linear-gradient(to right,red,orange);
		对角方式to bottom right
		设置角度90deg
		background-image: linear-gradient(90deg,red,#000);
		使用透明度
		background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
		重复线性渐变
		background-image: repeating-linear-gradient(red,black 20%,green 10%);
		径向渐变（Radial Gradients）- 由它们的中心定义
		 background-image: radial-gradient(形状 大小 at 位置, 颜色, ...,颜色);
		 形状它可以是值 circle 或 ellipse默认值
		 farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
		 closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
		 closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
		 farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
.boss1 {
				width: 300px;
				height: 200px;
				border: 1px solid red;
				background-image: repeating-linear-gradient(red,black 20%,green 10%);
</style>
	</head>
	<body style="height: 2000px;">
<div class="boss1"></div>
	</body>
</html>

运行成果：