inline元素的特點: 和其他元素都在一行上;高不可改變;寬度就是它的文字或圖片的寬度,不可改變。
a標簽的相關偽類:
a:link /*超鏈接文字格式*/
a:visited /*瀏覽過的鏈接文字格式*/
a:active /*按下鏈接的格式*/
a:hover /*鼠標轉到鏈接*/
注釋:在 CSS 定義中,a:hover 必須位于 a:link 和 a:visited 之后,這樣才能生效!
注釋:在 CSS 定義中,a:active 必須位于 a:hover 之后,這樣才能生效!
vertical-align屬性:
vertical-align:top; /*垂直向上對齊*/
vertical-align:bottom; /*垂直向下對齊*/
vertical-align:middle; /*垂直居中對齊*/
vertical-align:baseline; /*底邊對齊*/```
**文字顯示部分后+...:**
white-space : nowrap;
text-overflow : ellipsis;
overflow : hidden; ```
文字或單詞換行: word-break: break-all;
display相關屬性:
display:block;
display:inline;
display:inline-block;
display:table //使該元素按table樣式渲染
display:table-row //使該元素按tr樣式渲染
display:table-cell //使該元素按td樣式渲染
display:table-row-group //使該元素按tbody樣式渲染
display:table-header-group //使該元素按thead樣式渲染
display:table-footer-group //使該元素按tfoot樣式渲染
display:table-caption //使該元素按caption樣式渲染
display:table-column //使該元素按col樣式渲染
display:table-column-group //使該元素按colgroup樣式渲染
target屬性使用: **
#idname/.classname/html
元素名如:div :target { css樣式 }
** ForExample:
div:target{background:#ccc;}
<div><a href="#sa">aaa</a><a href="#sd">vvv</a></div>
<div id="sa" style="height:3000px;">aaa</div>
<div id="sd" style="height:300px;">vvv</div>```
**transform相關屬性:**
```transition:```描述動畫過程 --> 例: ```transition:transform .5s(時間) ease-in(變化方式),background .5s ease-in;```
transform:描述動畫結果
transform-origin:x y; 動畫原點位置
scale(number):縮放
rotate(deg):旋轉, --> rotateX() X軸旋轉; rotateY() Y 軸旋轉
translate(x,y):位移 --> translateZ() translateX() translateY()
transition-delay:時間延遲```
animation屬性:
animation:名稱 時間 播放次數(shù) 動畫方式;
animation-delay:延遲時間
@keyframes 名稱{ //執(zhí)行函數(shù)
0%{height: 5px;transform:translateY(0px);background:#9b59b6;}//各階段變化屬性值
25%{height: 30px;transform:translateY(15px);background:#3498db;}
50%{height: 5px;transform:translateY(0px);background:#9b59b6;}
100%{height: 5px;transform:translateY(0px);background:#9b59b6;}
}```
**偽類選擇器:**
```nth-child(數(shù)字)``` | ``` first-child ``` | ``` last-child```
```border-radius:圓角```
box-shadow:陰影 x y 羽化 投影顏色```
```border-width:5px 3px 2px 1px; 上右下左順序, 5px 3px 2px 上左右下順序,```
```clip : clip rect ( top, right, bottom, left ) 顯示區(qū)域大小```
```letter-spacing 屬性增加或減少字符間的空白(字符間距)```
**兼容寫法**
-ms-transform:rotate(7deg); //-ms代表ie內(nèi)核識別碼
-moz-transform:rotate(7deg); //-moz代表火狐內(nèi)核識別碼
-webkit-transform:rotate(7deg); //-webkit代表谷歌內(nèi)核識別碼
-o-transform:rotate(7deg); //-o代表歐朋【opera】內(nèi)核識別碼
transform:rotate(7deg); //統(tǒng)一標識語句。。。最好這句話也寫下去,符合w3c標準