CSS笔记（3）前端cssweb

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 项目将收缩多少:

1 2 3 4 5 6 7 8 9 10
flex-basis 属性规定 flex 项目的初始长度:

1 2
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

1 2
【CSS笔记（3）】align-self 属性规定弹性容器内所选项目的对齐方式，它将覆盖容器的 align-items 属性所设置的默认对齐方式:

1 2 3 4