1.支持简写的样式
1.1 Background 属性
background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position];
| 值 |
描述 |
默认值 |
| background-color |
背景颜色 |
transparent |
| background-image |
背景图像 |
none |
| background-repeat |
重复背景图像 |
repeat |
| background-attachment |
设置固定的背景图像 |
scroll |
| background-position |
背景图像的位置 |
0% 0% |
background: #00FF00 url(bgimage.gif) no-repeat fixed top left;
1.2 Padding属性
padding：padding-top padding-right padding-bottom padding-left;
| 值 |
描述 |
默认值 |
| padding-top |
元素上内边距 |
0 |
| padding-right |
元素右内边距 |
0 |
| padding-bottom |
元素下内边距 |
0 |
| padding-left |
元素左内边距 |
0 |
//值个数不一样代表的意思不一样
padding: 3px 2px 1px 7px;
//上：3px 右：2px 下：1px 左：7px
padding: 3px 2px 1px;
//上：3px 右：2px 下：1px 左：2px
padding: 3px 2px;
//上：3px 右：2px 下：3px 左：2px
padding: 3px；
//上：3px 右：3px 下：3px 左：3px
1.3 Margin属性
margin：margin-top margin-right margin-bottom margin-left;
| 值 |
描述 |
默认值 |
| margin-top |
元素上外边距 |
0 |
| margin-right |
元素右外边距 |
0 |
| margin-bottom |
元素下外边距 |
0 |
| margin-left |
元素左外边距 |
0 |
//值个数不一样代表的意思不一样
margin: 3px 2px 1px 7px;
//上：3px 右：2px 下：1px 左：7px
margin: 3px 2px 1px;
//上：3px 右：2px 下：1px 左：2px
margin: 3px 2px;
//上：3px 右：2px 下：3px 左：2px
margin: 3px；
//上：3px 右：3px 下：3px 左：3px
1.4 Border属性
border：[border-width] [border-style] [border-color];
//所有边框
border-left：[border-width] [border-style] [border-color];
//左边框
border-right：[border-width] [border-style] [border-color];
//右边框
border-top：[border-width] [border-style] [border-color];
//上边框
border-bottom：[border-width] [border-style] [border-color];
//下边框
| 值 |
描述 |
默认值 |
| border-width |
边框的宽度 |
0 |
| border-style |
边框的样式 |
none |
| border-color |
边框的颜色 |
不指定 |
border:5px solid blue;
border-width border-style border-color 单独使用也可以简写,类同Padding Margin
1.5 Outline属性,位于边框边缘的外围
outline：[outline-color] [outline-style] [border-width];
| 值 |
描述 |
默认值 |
| outline-color |
轮廓边框的颜色 |
invert |
| outline-style |
轮廓边框的样式 |
none |
| outline-width |
轮廓边框的宽度 |
medium |
outline:#0F0 none thick;
1.6 Font属性
font:[font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
| 值 |
描述 |
默认值 |
| font-style |
字体样式 |
normal |
| font-variant |
小型大写字母文本 |
normal |
| font-weight |
字体粗细 |
normal |
| font-size |
字体尺寸 |
medium |
| line-height |
字体行高 |
normal |
| font-family |
字体类型 |
不指定 |
font:italic bold 12px/20px arial,sans-serif;
1.7 Transition 属性
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
| 值 |
描述 |
默认值 |
| transition-property |
过渡效果的 CSS 属性 |
all |
| transition-duration |
过渡效果时间 |
0 |
| transition-timing-function |
速度曲线 |
ease |
| transition-delay |
延迟时间 |
0 |
transition: width 2s;
1.8 Animation属性
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction];
| 值 |
描述 |
默认值 |
| animation-name |
规定需要绑定到选择器的 keyframe 名称 |
none |
| animation-duration |
完成动画所花费的时间 |
0 |
| animation-timing-function |
速度曲线 |
ease |
| animation-delay |
延迟时间 |
0 |
| animation-iteration-count |
播放的次数 |
1 |
| animation-direction |
是否应该轮流反向播放动画 |
normal |
animation:mymove 5s infinite;
2.包含多个值的样式
2.1 Box-Shadow属性
box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset];
| 值 |
描述 |
默认值 |
| h-shadow |
水平阴影的位置 |
0 |
| v-shadow |
垂直阴影的位置 |
0 |
| blur |
模糊距离 |
0 |
| spread |
阴影的尺寸 |
0 |
| color |
阴影的颜色 |
#000 |
| inset |
内部阴影(inset)、外部阴影(outset) |
inset |
box-shadow: 10px 10px pink 50px 20px inset;
box-shadow 向框添加一个或多个阴影时，该属性是由逗号分隔的阴影列表
2.2 Border-Image 属性
border-image：[border-image-source] [border-image-slice] [border-image-width] [border-image-outset] [border-image-repeat]
| 值 |
描述 |
默认值 |
| border-image-source |
边框的图片的路径 |
none |
| border-image-slice |
图片边框向内偏移 |
100% |
| border-image-width |
图片边框的宽度 |
1 |
| border-image-outset |
边框图像区域超出边框的量 |
0 |
| border-image-repeat |
平铺(repeated)、铺满(rounded)或拉伸(stretched) |
stretch |
border-image:url(border.png) 30 30 round;
2.3 Text-Shadow属性
text-shadow: h-shadow v-shadow [blur] [color];
| 值 |
描述 |
默认值 |
| h-shadow |
水平阴影的位置 |
0 |
| v-shadow |
垂直阴影的位置 |
0 |
| blur |
模糊距离 |
0 |
| color |
阴影的颜色 |
#000 |
text-shadow: 5px 5px 5px #FF0000;
text-shadow 向框添加一个或多个阴影时，该属性是由逗号分隔的阴影列表
3.Flex 弹性布局
Flex布局的元素称为 flex container。它的所有子元素称为 flex item。
概念图
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
Flex以后，子元素的 float、clear和vertical-align属性将失效
3.1 Flex Container属性
| 值 |
描述 |
值 |
| flex-direction |
主轴的方向 |
row（默认值）：主轴为水平方向，起点在左端。<br />row-reverse：主轴为水平方向，起点在右端。<br />column：主轴为垂直方向，起点在上沿。<br />column-reverse：主轴为垂直方向，起点在下沿。 |
| flex-wrap |
如何换行 |
nowrap（默认）：不换行。<br />wrap：换行，第一行在上方。<br />wrap-reverse：换行，第一行在下方 |
| flex-flow |
[flex-direction] [flex-wrap] |
row nowrap （默认） |
| justify-content |
主轴上对齐方式 |
flex-start（默认值）：左对齐<br />flex-end：右对齐<br />center： 居中<br />space-between：先两端对齐，后项目之间间隔相等。<br />space-around：项目之间间隔相等。 |
| align-items |
交叉轴上对齐方式 |
flex-start：上对齐。<br />flex-end：下对齐。<br />center：居中。<br />baseline: 项目的第一行文字的基线对齐。<br />stretch（默认值）：占满整个容器的高度。 |
| align-content |
多轴的对齐方式 |
3.2 Flex Item属性
| 值 |
描述 |
默认值 |
| order |
排列顺序。数值越小，排列越靠前 |
0 |
| flex-grow |
放大比例 |
0 |
| flex-shrink |
缩小比例 |
1 |
| flex-basis |
占据的main size
|
auto |
| flex |
[flex-grow] [flex-shrink] [flex-basis] |
0 1 auto |
| align-self |
单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。 |
auto |
引用
网友评论