【鸿蒙开发从0到1 day04】

一.盒子阴影

用来给盒子的周围设置阴影效果

运行结果:

二.标准流

指的是标签在页面中默认的排布规则

1.浮动

作用:让元素水平排列
属性名: float
属性值:left左对齐 right 右对齐

特点:
浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
浮动后的盒子脱标,不占用标准流的位置

运行结果:

三.Flex布局

Flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。Flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

1.Flex-组成

设置方式： 给父元素设置display：flex，子元素可以自动挤压或拉伸组成部分：

	弹性容器-父元素
	弹性盒子-子元素
	主轴：默认在水平方向，弹性盒子会沿着主轴排列
	侧轴/交叉轴： 默认在垂直方向

运行结果：

2.主轴的对齐方式

属性名： justify_content
flex-start（左对齐）
默认值，弹性盒子从起点开始依次排列

flex-end（右对齐）
弹性盒子从终点开始依次排列

center（居中对齐）
弹性盒子沿主轴居中排列

space-between（两端对齐）
弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间

space-around（盒子两侧的间距相等）
弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧

space-evenly（盒子与盒子之间的间距相等）
弹性盒子沿主轴均匀排列，弹性盒子与客器之间间距相等

3.侧轴对齐方式

属性名：
align-item：（弹性容器的设置）
align-self： （弹性黑子设置）

stretch
弹性盒子沿着侧轴线被拉伸至铺戏容器（弹性盒子没有设置高度则默认拉伸至父级元素的高度，其他效果与flex-start一致)

center
弹性盒子沿侧轴居中排列

flex-start（默认）
弹性盒子从起点开始依次排列
flex-end
弹性盒子从终点开始依次排列

4.对指定的弹性盒子设置侧轴排列方式（align-self）

运行结果：

5.修改主轴方向

主轴默认是水平方向的，弹性盒子会沿着主轴排列
 侧轴默认是垂直方向
       
修改主轴方向：
       属性名flex-direction
        -column：主轴从水平改成垂直
        -row水平方向，主轴的默认方向

运行结果：

6.弹性盒子换行

运行结果：

我们看到此处的弹性盒子的宽被压缩了，会影响我们的布局，我们这个时候就需要对弹性盒子做一个换行
属性名flex-wrap：wrap

运行结果：
align-items：flex-end 他在此处实际是对每一行做底部对齐的操作

7.行对齐方式

align-content控制多行侧轴(垂直方向)的对齐方式.配合flex-wrap使用
作用：它是用来在使用wrap换行之后，用行对齐方式控制行与行之间的对齐方式

 	align-content: flex-start; 垂直顶部对齐
    align-content: flex-end;垂直底部对齐
    align-content: center; 垂直居中
    align-content: space-between; 两端对齐
    align-content: space-around; 两侧外边距相同对齐
    align-content: space-evenly; 盒子之间的间隔都相同

8.弹性盒子的伸缩比

弹性盒子伸缩比
属性名： flex
取值:份数，当第一个div设置flex：2，第二个设置flex：1
就是把盒子容器剩余的部分分成三等份，div1占2份，div2占1份

运行结果：

九.定位

作用：灵活的改变盒子在网页中的位置
实现：
实现模式：position
边偏移量：设置盒子的位置 （left right top bottom）

1.相对定位

position：relative
不脱标占用自己原来的位置
显示模式特点保持不变
设置边偏移量则相对自己原来位置移动

运行结果：

2.绝对定位

使用场景：子级绝对定位，父级相对定位（子绝父相）

特点:
脱标，不占位
显示模式具备行内块特点
设置边偏移则相对最近的已经定位的祖先元素改变位置
·如果祖先元素都未定位，则相对浏览器可视区改变位置

如果给父级设置了相对定位，那么子级的绝对定位就不会相对于浏览器进行偏移，而是相对于父级元素进行偏移

运行结果：

3.span标签脱标宽高生效

span标签
    在标准流中，span属于行内元素，
    但是一旦脱标就没有此特性，宽高也会生效

    弹性盒子也会使得宽高生效

运行结果：

4.固定定位

position：fixed
场景: 元素的位置在网页滚动时，不会改变
·特点：
脱标：不占位
显示模式具备行内块的特点
设置边偏移量相对浏览器窗口改变位置

运行结果：

5.改变定位元素的层级

z-index：数字，数字越大，优先级越高
当几个盒子叠在一起的时候，我们可以改变层叠的位置

运行结果:

十.精灵图

css精灵，也叫css雪碧，是一种网页图片应用处理方式，把网页中的一些小图片整合到一张大图中
优点：减少服务器被请求的次数，减轻服务器的压力

第一步：设置一个区域
第二步：设置背景图
第三步：调整方位（background-position）

运行结果：

十一.总结

本章主要学了盒子阴影,盒子浮动,标准流中的浮动以及flex布局,页面布局中常用到的定位,父相子绝(相对定位绝对定位),固定定位,用来减轻服务器压力的精灵图。