背景属性 布局

背景颜色绘制区域——background-clip属性

• background-clip: border-box; 背景被裁剪到边框区域，在内容区、内填充区、边框区域显示，默认值

• background-clip: padding-box; 背景被裁剪到内填充区域，在内容区、内填充区显示

• background-clip: content-box; 背景被裁剪到内容区域，仅在内容区域显示

2、渐变

从一种颜色到其他颜色的过渡（两种及两种以上颜色）

1）线性渐变 linear-gradient

线型渐变 ： 从一个方向到另一个方向的渐变

• 语法

​
1、使用起始位置关键字 
​
- to right  方向自左向右
​
- to top  方向自下而上
​
- to bottom 方向自上而下
​
- to left  方向自右而左
​
- to right top  方向朝向右上角
- to right bottom  方向朝向右下角
- to top left 方向朝向左上角
- to left bottom方向朝向左下角
​
​
 2、使用角度
- 0deg 相当于  to top
- 90deg 相当于 to right
​

• 重复线性渐变

2）径向渐变 radial-gradient

径向渐变 ： 一个点到四周的渐变

3、多列布局

1、元素被分隔的列数——column-count属性

• column-count: n; 元素内容被划分的列数，没有单位

2、列的宽度——column-width属性

• column-width: npx; 分列之后每一列的宽度

3、列间距——column-gap属性

• column-gap: npx; 两列之间的间隔为npx

• column-gap: normal; 两列之间间隔为常规间隔，W3C建议值为1em

4、列与列之间的分割线——column-rule属性

• 语法

二、弹性盒子 重点

1、什么是弹性盒子？

• 弹性盒子是CSS3的一种新的布局模式。

  引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和空白空间的分配

• • 操作方便，布局简单，移动端使用广泛

  • PC端浏览器支持情况较差

  • IE11或更低版本中，不支持或部分支持

  • 在盒模型中较为灵活

• 弹性盒模型的内容包括：弹性容器、弹性子元素——项目

• 原理：为父元素设置flex属性，控制子元素的位置及排列方式

• 应用场景 : 移动端

2、设置弹性盒子——display属性

• display: flex; 将对象作为块级弹性伸缩盒显示

• display: inline-flex; 将对象作为内联块级弹性伸缩盒显示

• 注意：

将容器设置为flex布局之后，子元素中的float、clear、vertical-align属性都会失效

弹性子元素-类似于行内块元素，如果不设置宽高，由内容撑开；即使是行内元素也可以设置宽高

3、基本概念

• flex容器、项目——弹性子元素

• 默认在容器中有两根轴线

  • 默认主轴方向——x轴方向，水平向右（左侧为主轴起点，右侧为主轴终点）

  • 默认交叉轴方向——y轴方向，水平向下（上方为交叉轴起点，下方交叉轴终点）

  弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

  注意: 主轴不一定是x轴,还可以是y轴,有一边是主轴,另外 一边就是侧轴

4、容器属性——添加弹性容器上

• flex-direction属性：设置主轴的方向，子元素的排列方向

  • flex-direction: row; 默认值，主轴方向为水平方向，起点在左端

  • flex-direction: row-reverse; 主轴方向为水平方向，起点在右端

  • flex-direction: column; 主轴方向为垂直方向，起点在上方

  • flex-direction: column-reverse; 主轴方向垂直方向，起点在下方

• justify-content 属性：设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,

  • justify-content: flex-start; 默认值，主轴顶端对齐

  • justify-content: flex-end; 主轴的末端对齐

  • justify-content: center; 居中对齐，子元素位于弹性容器的中心

  • justify-content: space-between; 两端对齐，子元素和子元素之间有空白空间,项目之间的间隔都相等。

  • justify-content: space-around; 四周对齐，子元素之前、之间、之后都留有空白空间，且空间自行分配,项目之间的间隔比项目与边框的间隔大一倍。

  • justify-content: space-evenly;平均对齐 弹性项目平均分布在该行上,相邻项目的间隔，项目与容器之间空间相等

• align-items属性：弹性子元素在（侧轴）交叉轴上的对齐方式

  • align-items: stretch; 默认值，如果弹性子元素没有高度或高度为auto，将占满整个容器的高度

  • align-items: flex-start;子元素在侧轴顶端对齐

  • align-items: flex-end; 子元素在侧轴末端对齐

  • align-items: center; 子元素在侧轴中间对齐

  • align-items: baseline; 子元素在第一行文字的基线对齐

5、弹性盒水平垂直居中

- 水平垂直居中的元素的父元素上设置相关属性
    - display: flex;
    - justify-content: center; 主轴上子元素的对齐方式
    - align-items: center; 交叉轴上子元素的对齐方式