1. 渐变

线性渐变

由上到下，从红色开始，渐变到黄色：

#grad {
  background-image: linear-gradient(red, yellow);
}

由左到右，彩虹色：

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

径向渐变

由中心开始向外渐变：

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

2. 文本

空白处理

white-space 属性指定元素内部空白的处理方式. 此处禁用元素内的文本换行：

p {
  white-space: nowrap;
}

文本溢出

text-overflow 属性规定应如何向用户呈现未显示的溢出内容：

hidden：裁剪掉.
ellipsis：显示....

p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis; 
}

单词换行

word-wrap 属性使长文字能够被折断并换到下一行.

p.test {
  width: 11em; 
  border: 1px solid #000000;
  word-wrap: break-word;
}

书写模式

writing-mode 属性规定文本行是水平放置（horizontal-tb）还是垂直放置（vertical-rl）.

span.test2 {
  writing-mode: vertical-rl; 
}

3. 多列

div {
  column-count: 3;            /* 创建3列 */
  column-gap: 40px;            /* 列间间隔 */
  column-rule-style: solid;    /* 列间实线分隔 */
  column-rule-width: 1px;    /* 分隔线宽度 */
  column-rule-color: lightblue;    /* 分隔线颜色 */
}

也可简写为：

div {
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid lightblue;
}

4. 调整大小

resize 属性指定元素是否可以以及如何被用户调整大小：

horizontal：只能水平调整；
vertical：只能垂直调整；
both：可水平、垂直调整；
none：不能调整.

div {
  resize: vertical;
  overflow: auto;
}

5. 弹性布局

将元素的 display 属性设置为 flex. 弹性容器的直接子元素会自动成为弹性项目.

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

堆叠方向

flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目：

row：按行（水平）；
column：按列（垂直）；
row-reverse：按行，但是反向堆叠；
column-reverse：按列，但是反向堆叠；

.flex-container {
  display: flex;
  flex-direction: row;
}

是否换行

flex-wrap 属性规定是否应该对 flex 项目换行：

wrap：换行；
nowrap：不换行；

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

水平对齐

justify-content 属性用于对齐 flex 项目：

flex-start：与容器的开头对齐；
flex-end：与容器的末端对齐；
center：居中对齐；
space-around：显示项目之间、之前、之后的空格；
space-between：显示项目之间的空格；

.flex-container {
  display: flex;
  justify-content: space-around;
  background-color: DodgerBlue;
}

垂直对齐

align-items 属性用于垂直对齐 flex 项目：

flex-start：与容器的顶部对齐；
flex-end：与容器的底部对齐；
center：居中对齐；
stretch：拉伸 flex 项目以填充容器（默认）；
baseline：使各 flex 项目按基线对齐；

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
  background-color: DodgerBlue;
}

弹性项目属性

order 属性规定 flex 项目的顺序:
```
    1
    2
    3 
```
flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少:
```
  1
  2
```

flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少:

flex-basis 属性规定 flex 项目的初始长度:
```
  1
  2
```
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
```
    1
    2
```
align-self 属性规定弹性容器内所选项目的对齐方式，它将覆盖容器的 align-items 属性所设置的默认对齐方式:
```
    1
    2
    3
    4
```

CSS笔记（3）

1. 渐变

2. 文本

3. 多列

4. 调整大小

5. 弹性布局

你可能感兴趣的:(前端cssweb)