css常用的样式总结

word-break 换行

• word-break:break-all 所有的都换行
• word-wrap:break-word 如果一行文字有可以换行的点，如空格，或CJK之类的，就让这些换行点换行，不关心对不对齐，好不好看。容易出现一片一片的空白

css3中自动调整大小

 div{
           width: 300px;
           height: 300px;
           padding: 10px;
           border: 2px solid green;

           resize: both;
           overflow: auto;
       }

垂直水平都居中

/*方法一*/
        .div1{
            width: 200px;
            height: 200px;
            background: deeppink;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }
        /*方法二*/
        .div1{
            width: 200px;
            height: 200px;
            background: deeppink;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }

text-indent文本缩进

• 1em等于一个汉字的大小
• 无法作用于行内元素
• 允许使用负值，如果使用负值，那么首行会被缩进到左边

  text-indent: 2em;

轮廓(outline)

outline: #00FF00 dotted thick;

- outline-color    规定边框的颜
- outline-style     规定边框的样
- outline-width     规定边框的宽度
- inherit           规定应该从父元素继承 outline 属性的设置

圆角(border-radius)

阴影(box-shadow)

• box-shadow: h-shadow v-shadow blur spread color inset;
  • h-shadow 必需。水平阴影的位置。允许负值
  • v-shadow 必需。垂直阴影的位置。允许负值。
  • blur 可选。模糊距离。
  • spread 可选。阴影的尺寸。
  • color 可选。阴影的颜色。请参阅 CSS 颜色值。
  • inset 可选。将外部阴影 (outset) 改为内部阴影。

透明度(opacity)

• 对于标准浏览器来说 opacity(0.5)，取值0-1之间
• IE67 不认识opacity，使用filter:alpha(opacity=50),取值0-100之间
• rgba

字体

• 大小(font-size)
  • 绝对大小值(xx-small、x-small、small、medium、large、x-large、xx-large)
  • 相对大小值(larger、smaller)
  • 长度值(12px/0.8em)
  • 百分比值(80%/inherit)
• 字体(font-family)
  • 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
• 斜体(font-style)
  • normal 默认值。浏览器显示一个标准的字体样式。
  • italic 浏览器会显示一个斜体的字体样式。
  • oblique 浏览器会显示一个倾斜的字体样式。
  • inherit 规定应该从父元素继承字体样式。
• 粗体/细体(font-weight)
  • normal 默认值。定义标准的字符。
  • bold 定义粗体字符。
  • bolder 定义更粗的字符。
  • lighter 定义更细的字符。
  • 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。区间100-900
  • inherit 规定应该从父元素继承字体的粗细。

过度(transition)

• transition: property duration timing-function delay;
  • all 全部属性
  • transition-property 规定设置过渡效果的 CSS 属性的名称。
  • transition-duration 规定完成过渡效果需要多少秒或毫秒。
  • transition-timing-function 规定速度效果的速度曲线。
  • transition-delay 定义过渡效果何时开始。
• 动画
  • @keyframes animationname {keyframes-selector {css-styles;}}
    • animationname 必需的。定义animation的名称。
    • keyframes-selector 必需的。动画持续时间的百分比。
    • css-styles 必需的。一个或多个合法的CSS样式属性
  • animation
    • animation :name duration timing-function delay iteration-count direction fill-mode (动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态)

//定义
@keyframes mymove
{
  0%   {top:0px;}
  25%  {top:200px;}
  50%  {top:100px;}
  75%  {top:200px;}
  100% {top:0px;}
}
//使用
animation: mymove 3s;

• 应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。(transform)
• 渐变色
  • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
  • 径向渐变（Radial Gradients）- 由它们的中心定义