CSS笔记

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：名称  时间  播放次数  动画方式；
animation-delay：延迟时间

@keyframes 名称{     //执行函数
  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（数字）``` | ``` 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 )  显示区域大小```
```letter-spacing  属性增加或减少字符间的空白（字符间距）```

**兼容写法**

-ms-transform:rotate(7deg); //-ms代表ie内核识别码
-moz-transform:rotate(7deg); //-moz代表火狐内核识别码
-webkit-transform:rotate(7deg); //-webkit代表谷歌内核识别码
-o-transform:rotate(7deg); //-o代表欧朋【opera】内核识别码
transform:rotate(7deg); //统一标识语句。。。最好这句话也写下去，符合w3c标准

CSS笔记

推荐阅读更多精彩内容