1.支持簡寫的樣式
1.1 Background 屬性
background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position];
| 值 |
描述 |
默認(rèn)值 |
| background-color |
背景顏色 |
transparent |
| background-image |
背景圖像 |
none |
| background-repeat |
重復(fù)背景圖像 |
repeat |
| background-attachment |
設(shè)置固定的背景圖像 |
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;
| 值 |
描述 |
默認(rèn)值 |
| padding-top |
元素上內(nèi)邊距 |
0 |
| padding-right |
元素右內(nèi)邊距 |
0 |
| padding-bottom |
元素下內(nèi)邊距 |
0 |
| padding-left |
元素左內(nèi)邊距 |
0 |
//值個數(shù)不一樣代表的意思不一樣
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;
| 值 |
描述 |
默認(rèn)值 |
| margin-top |
元素上外邊距 |
0 |
| margin-right |
元素右外邊距 |
0 |
| margin-bottom |
元素下外邊距 |
0 |
| margin-left |
元素左外邊距 |
0 |
//值個數(shù)不一樣代表的意思不一樣
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];
//下邊框
| 值 |
描述 |
默認(rèn)值 |
| 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];
| 值 |
描述 |
默認(rèn)值 |
| 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];
| 值 |
描述 |
默認(rèn)值 |
| font-style |
字體樣式 |
normal |
| font-variant |
小型大寫字母文本 |
normal |
| font-weight |
字體粗細(xì) |
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];
| 值 |
描述 |
默認(rèn)值 |
| 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];
| 值 |
描述 |
默認(rèn)值 |
| animation-name |
規(guī)定需要綁定到選擇器的 keyframe 名稱 |
none |
| animation-duration |
完成動畫所花費的時間 |
0 |
| animation-timing-function |
速度曲線 |
ease |
| animation-delay |
延遲時間 |
0 |
| animation-iteration-count |
播放的次數(shù) |
1 |
| animation-direction |
是否應(yīng)該輪流反向播放動畫 |
normal |
animation:mymove 5s infinite;
2.包含多個值的樣式
2.1 Box-Shadow屬性
box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset];
| 值 |
描述 |
默認(rèn)值 |
| h-shadow |
水平陰影的位置 |
0 |
| v-shadow |
垂直陰影的位置 |
0 |
| blur |
模糊距離 |
0 |
| spread |
陰影的尺寸 |
0 |
| color |
陰影的顏色 |
#000 |
| inset |
內(nèi)部陰影(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]
| 值 |
描述 |
默認(rèn)值 |
| border-image-source |
邊框的圖片的路徑 |
none |
| border-image-slice |
圖片邊框向內(nèi)偏移 |
100% |
| border-image-width |
圖片邊框的寬度 |
1 |
| border-image-outset |
邊框圖像區(qū)域超出邊框的量 |
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];
| 值 |
描述 |
默認(rèn)值 |
| 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。
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）隔心。
Flex以后，子元素的 float尚胞、clear和vertical-align屬性將失效
3.1 Flex Container屬性
| 值 |
描述 |
值 |
| flex-direction |
主軸的方向 |
row（默認(rèn)值）：主軸為水平方向硬霍，起點在左端。<br />row-reverse：主軸為水平方向笼裳，起點在右端唯卖。<br />column：主軸為垂直方向，起點在上沿躬柬。<br />column-reverse：主軸為垂直方向拜轨，起點在下沿。 |
| flex-wrap |
如何換行 |
nowrap（默認(rèn)）：不換行允青。<br />wrap：換行橄碾，第一行在上方。<br />wrap-reverse：換行颠锉，第一行在下方 |
| flex-flow |
[flex-direction] [flex-wrap] |
row nowrap （默認(rèn)） |
| justify-content |
主軸上對齊方式 |
flex-start（默認(rèn)值）：左對齊<br />flex-end：右對齊<br />center： 居中<br />space-between：先兩端對齊法牲，后項目之間間隔相等。<br />space-around：項目之間間隔相等琼掠。 |
| align-items |
交叉軸上對齊方式 |
flex-start：上對齊拒垃。<br />flex-end：下對齊。<br />center：居中瓷蛙。<br />baseline: 項目的第一行文字的基線對齊悼瓮。<br />stretch（默認(rèn)值）：占滿整個容器的高度。 |
| align-content |
多軸的對齊方式 |
3.2 Flex Item屬性
| 值 |
描述 |
默認(rèn)值 |
| order |
排列順序艰猬。數(shù)值越小横堡，排列越靠前 |
0 |
| flex-grow |
放大比例 |
0 |
| flex-shrink |
縮小比例 |
1 |
| flex-basis |
占據(jù)的main size
|
auto |
| flex |
[flex-grow] [flex-shrink] [flex-basis] |
0 1 auto |
| align-self |
單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性姥宝。 |
auto |
引用
