css常用属性

一、边框的属性

border-width：简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

border-color：设置边框颜色。

border-style：设置边框类型。

属性值：
    none       定义无边框。
    hidden    与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
    dotted     定义点状边框。在大多数浏览器中呈现为实线。
    dashed   定义虚线。在大多数浏览器中呈现为实线。
    solid        定义实线。
    double    定义双线。双线的宽度等于 border-width 的值。
    groove    定义 3D 凹槽边框。其效果取决于 border-color 的值。
    ridge       定义 3D 垄状边框。其效果取决于 border-color 的值。
    inset       定义 3D inset 边框。其效果取决于 border-color 的值。
    outset     定义 3D outset 边框。其效果取决于 border-color 的值。

border ：边框宽度 边框风格 边框颜色（简写）。

例如：border:5px solid #ff0000。

可单独设置一方向边框:
    border-bottom:边框宽度 边框风格 边框颜色;底边框
    border-left:边框宽度 边框风格 边框颜色;左边框
    border-right:边框宽度 边框风格 边框颜色;右边框
    border-top:边框宽度 边框风格 边框颜色;上边框

width:100% : 子元素的 content 撑满父元素的content，如果子元素还有 padding、border等属性，或者是在父元素上设置了边距和填充，都有可能会造成子元素区域溢出显示;
width:auto : 是子元素的 content+padding+border+margin 等撑满父元素的 content 区域。

 二、背景属性

1. background-color：属性设置元素的背景颜色。
属性值：可以是颜色名称、hex十六进制的背景颜色、rgb。

2.background-image：属性为元素设置背景图像。
属性值：url（）：指向图像路径
none：默认值，不显示背景图像

3. background-repeat：设置如何重复背景图像。
属性值：no-repeat：背景图像仅显示一次，不平铺
repeat：默认。背景图像将在垂直方向和水平方向重复
repeat-x：背景图像将在水平方向重复。
repeat-y：背景图像将在垂直方向重复。

4. background-position：属性设置背景图像的起始位置。 
属性值： left right center
        top bottom center
第一个值是水平位置，第二个值是垂直位置。
如果仅规定了一个值，另一个值将是50% / center

5. background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动。
属性值： scroll:默认值。背景图像会随着页面其余部分的滚动而移动。
fixed：当页面的其余部分滚动时，背景图像不会移动。

6. background：简写属性，在一个声明中设置所有的背景属性
background:color image repeat position attachment
background:image repeat position attachment color
background:image repeat attachment position color
background:image;其他的属性值不写，但是有默认值；

 三、文本属性

1. font-size：可设置字体的尺寸说明：
	(1)属性值为数值型时，必须给属性值加单位，属性值为0时除外。
	(2)为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，
       共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下，1em=16px, 0.75em=12px; 
2. color：规定文本的颜色。
    属性值：colorname  hex rgb 
3. font-family：规定元素的字体系列
    (1)此属性设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，将尝试下一种字体，都不支持按系统默认字体显示。
    (2) 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体","Times New Roman"
    (3) 多个字体系列是用一个逗号分隔指明;
4. font-weight：设置显示元素的文本中所用的字体加粗
    属性值：bolder 更粗的
           bold 加粗
           normal 常规
           lighter 更细
           100—900 100对应最轻的字体变形
                   900对应最重的字体变形，
                   100-400 一般显示 
                   500常规字体 
                   600-900加粗字体
5. font-style：设置文本倾斜
     属性值：
          italic   倾斜 
          oblique  更倾斜
          normal   取消倾斜，常规显示     
6.line-height： 属性设置行间的距离（行高）
     属性值：
       normal	默认。设置合理的行间距。
       number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距(em)。
       length	设置固定的行间距。
           %	基于当前字体尺寸的百分比行间距。
  
7. text-align：设置文本水平对齐方式   
   属性值：
        left	把文本排列到左边。默认值：由浏览器决定。
        right	把文本排列到右边。
        center	把文本排列到中间。
        justify	实现两端对齐文本效果。
        
8. text-decoration：规定添加到文本的修饰
  属性值：
        none:没有修饰
	    underline:添加下划线
	    overline:添加上划线
	    line-through:添加删除线
	    
9. text-indent：属性规定文本块中首行文本的缩进（2em）（属性值可以为负值）
	属性值： 
	    length	定义固定的缩进。默认值：0。
           %	定义基于元素宽度的百分比的缩进。 
     
10. text-transform：设置文本大小写
    属性值：
        none	默认。定义带有小写字母和大写字母的标准的文本。
        capitalize	文本中的每个单词以大写字母开头。
        uppercase	定义仅有大写字母。
        lowercase	定义无大写字母，仅有小写字母。

11. letter-spacing：属性增加或减少字符间的空白（字符间距）。
    属性值：
	    normal	默认。规定字符间没有额外的空间。
       length	定义字符间的固定空间（允许使用负值）。

12. word-spacing：属性增加或减少单词间的空白（即字间隔）。
    属性值：
    	normal	默认。定义单词间的标准空间。
    	length	定义单词间的固定空间。   

四、 文本溢出overflow

overflow：设置溢出容器的内容如何显示
  属性值：
    visible: 默认值，内容不会被修剪，会呈现在元素框之外；
    hidden:  内容会被修剪，并且其余内容是不可见的；
    scroll:  内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
    auto:    如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
    inherit: 规定应该从父元素继承overflow属性的值。

white-space：设置如何处理元素内的空白
  属性值：    
    normal:   默认值，多余空白会被浏览器忽略只保留一个；
    pre:      空白会被浏览器保留（类似pre标签）；
    pre-wrap: 保留一部分空白符序列，但是正常的进行换行；
    pre-line: 合并空白符序列，但是保留换行符；
    nowrap:   文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止;
 
text-overflow：设置单行文本溢出是否显示省略号
  属性值：
    clip：不显示省略号（...），而是简单的裁切;
    ellipsis：当对象内文本溢出时，显示省略标记；
    
例：设置某段文字显示省略号css代码
  width：     ；        /*强制容器宽度*/
  white-space: nowrap; /*文字在一行显示*/
  overflow: hidden;    /*设置文字溢出*/
  text-overflow: ellipsis;  /*溢出文字显示省略号*/    

例：多行文本省略：
	display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
	text-overflow: ellipsis;
  white-space: nowrap;

五、属性继承

一个元素可能同时被多个css选择器选中，每个选择器都有一些css规则。

CSS的处理原则是：
  (1)如果多个选择器定义的规则不发生冲突，则元素将应用所有选择器定义的样式。
  (2)如果多个选择器定义的规则发生了冲突，则CSS按选择器的特殊性(权重)让元素应用特殊性(权重)高的选择器定义的样式。
  
继承性：所谓继承，就是父元素的规则也会适用于子元素。比如给body设置为color:Red;那么他内部的元素如果没有其他的规则设置，也都会变成红色。继承得来的规则没有特殊性。

说明：
CSS的继承贯穿整个CSS设计的始终，每个标记都遵循着CSS继承的概念。可以利用这种巧妙的继承关系，大大缩减代码的编写量，并提高可读性，尤其在页面内容很多且关系复杂的情况下。

不可继承的：display、margin、border、padding、background、height、min-height、max-height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align

所有元素可继承：visibility和cursor。

内联元素、块状元素可继承：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform。

块状元素可继承：text-indent和text-align

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承：border-collapse border-spacing empty-cells

六、滤镜属性 

brightness:亮度变化；
grayscale:灰度变化；
blur:模糊变化（如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值）
contrast:对比度变化；

七、vertical-align

vertical-align： 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐
                 应用于行内元素和单元格元素（inline-level and 'table-cell' elements）
 属性值：
    baseline 默认。元素放置在父元素的基线上。
    top	 把元素的顶端与行中最高元素的顶端对齐
    middle	 把此元素放置在父元素的中部。
    bottom	 把元素的顶端与行中最低的元素的顶端对齐
    sub	 垂直对齐文本的下标。
    super	 垂直对齐文本的上标
   	text-top 把元素的顶端与父元素字体的顶端对齐。
   	text-bottom	把元素的底端与父元素字体的底端对齐。
   	%	     使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是line-height属性的百分比。可以是负数。
   	length  使元素的基线对齐到父元素的基线之上的给定长度。可以是负数

八、visibility属性规定元素是否可见

属性值：
    visible	  默认值。元素是可见的。
    hidden	  元素是不可见的。
    collapse  当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。
    被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。

说明：visibility:hidden;和display:none;的区别：
     visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，
     而display:none属性会使这个对象彻底消失。