迁移html和css之四

五十一、display: flex;与justify-content实现均匀分布

html：

	
	  
条目1
	  
条目2
	  
条目3
	

css:

.box {
	  display: flex;
	  justify-content: space-between;
	}
	section{
		border:1px solid black;
	}

效果：

现象解释：

display: flex 启用弹性布局。

justify-content: space-between,表示水平均匀分布子元素。第一个项目位于左边缘，而最后一个项目位于右边缘。

justify-content属性介绍：

功能：

用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。与之相对的可以使用 align-content 属性对齐交叉轴上的各项（垂直）。

语法格式：

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

属性值解释：

flex-start默认值。项目位于容器的开头。

flex-end项目位于容器的结尾。

center项目位于容器的中心。

space-between项目位于各行之间留有空白的容器内。

space-around项目位于各行之前、之间、之后都留有空白的容器内。

initial设置该属性为它的默认值。

inherit从父元素继承该属性。

 

 

五十二、css实现文字水平和垂直居中

最终效果如下所示：

html代码：

	  w s我是div的内容 w s
	

css：

解释：

display: flex 启用弹性布局的意思。

justify-content: center 将子元素水平居中。

align-items: center 将子元素垂直居中。

 

五十三、linear-gradient() 函数使用实例

linear-gradient的语法

linear-gradient(direction, color-stop1, color-stop2, ...);

linear-gradient的功能

        linear-gradient() 函数用于创建一个线性渐变的 "图像"，为了达到创建一个线性渐变的效果，你需要设置一个方向（或者指定为一个角度，比如to left,to right,to top,to bottom left,0deg,180deg等）以及一个起始点和n个(n>=1)终点从而达到渐变效果。

举两个例子，案例效果图：

 

HTML的代码是两个div：

	box1

box2

css代码：

       div{
	  width:300px;
	  height:200px;
	}
	.box1{
	  background:linear-gradient(to bottom right, blue , lightblue); /* 左上到右下方 */
	}
	.box2{
	  background:linear-gradient(60deg, red , lime); /* 逆时针算度数 */
	}

好了，这就是线性渐变css函数linear-gradient() 的用法，通过这个css函数我们来做个渐变文本的例子。

乐之者java