CSS随笔3

1. CSS部分简洁使用

　* background-radious：使得边框角“圆化”。

　* background：pink  url（“图片路径”）  no-repeat；

　* border 可以有三个属性值，分别为边框宽度，边框类型，边框颜色，如border：1px inset black；其中的颜色可以用rgba（60,60,60,0.9）进行配置，0.9表示其透明度

　【 使用float：left属性后如果对后面的内容产生了影响（错位），可以在html中该该属性的使用者后面加换行<br/>】

　* padding 和 margin 都可以有四个属性值，分别表示上右下左的距离，如padding：1px 1px 1px 1px；

　* 需要设置position的值后才可以用left，top，right，bottom对其位置进行设定，其中relative表示性对当前位置，absolute表示相对页面位置，fixed表示其位置随着滚动条滚动而改变。

　【在已知宽度和高度的情况下将link-height的值设置为与其高度相等，可起到居中的效果（相对上下）】

 

2. CSS 2D转化及过渡效果

　* transform：scale(1.2)  rotate（90deg）;  图形放大1.2倍同时旋转90度；

　* transition：all  0.2s； 使得有0.2秒的过度效果；

 

3. CSS中关于display：block的作用

　* 在标准文档流里面

块级元素具有以下特点：

1. 　总是在新行上开始，占据一整行；
2. 　高度，行高以及外边距和内边距都可控制；
3. 　宽带始终是与浏览器宽度一样，与内容无关；
4. 　它可以容纳内联元素和其他块元素。

行内元素的特点：

1. 　和其他元素都在一行上；
2. 　高，行高及外边距和内边距部分可改变；
3. 　宽度只与内容有关；
4. 　行内元素只能容纳文本或者其他行内元素。
5. 　不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作　用，只能对左右起作用

　* 什么时候需要把行内元素转换为块级元素？

　  display：block；比较常用于<a><span>这两个标签，因为他们不是块级元素，定义display：block属性后，定义width、height等和长宽相关的css属性才会生效。

 

a {
    display:block;
    width:600px;
    height:300px;
}

 

 

4.CSS中的float浮动属性

　float有left和right属性，分别表示其在左边浮动和右边浮动，而clear属性可以限制元素的浮动，其left，right，both值分别表示限制左边，右边和两边的浮动；

img
  {
  float:left;
  clear:both;
 }