共计 2846 个字符,预计需要花费 8 分钟才能阅读完成。
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 我的项目的程序:<div class="flex-container"> <div style="order: 3">1</div> <div style="order: 1">2</div> <div style="order: 2">3</div> </div>
-
flex-grow
属性规定某个 flex 我的项目绝对于其余 flex 我的项目将增长多少:<div class="flex-container"> <div style="flex-grow: 1">1</div> <div style="flex-grow: 2">2</div> </div>
-
flex-shrink
属性规定某个 flex 我的项目绝对于其余 flex 我的项目将膨胀多少:<div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-shrink: 2">3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div style="flex-shrink: 2">8</div> <div>9</div> <div>10</div> </div>
-
flex-basis
属性规定 flex 我的项目的初始长度:<div class="flex-container"> <div>1</div> <div style="flex-basis:200px">2</div> </div>
-
flex
属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。<div class="flex-container"> <div>1</div> <div style="flex: 0 0 200px">2</div> </div>
-
align-self
属性规定弹性容器内所选项目标对齐形式,它将笼罩容器的 align-items 属性所设置的默认对齐形式:<div class="flex-container"> <div style="align-self: center">1</div> <div style="align-self: flex-start">2</div> <div style="align-self: flex-end">3</div> <div>4</div> </div>