css属性+精灵图+块级元素与行内元素大全

CSS文本属性

• letter-spacing 字母间距 默认0px
• word-spacing 单词间距 默认 0px
• text-decoration 值： none/underline/overline/line-through
• text-align 水平对齐方式 left(默认)/right/center
• vertical-align 垂直对齐（基于文字的基线） baseline/bottom/top/middle/sub/super/text-top/text-bottom/百分比
• text-indent 首行缩进 长度单位
• line-height: 行高 长度单位 设置行高=高 使一行文字垂直居中
• font:[style/variant/weight] size/line-height family

CSS背景属性

• background-color 背景颜色
• background-iamge 背景图片 url()
• background-repeat 背景图片的平铺方式 repeat(默认)/repeat-x/repeat-y/no-repeat
• background-postion 背景图片定位 left/center/right/长度单位 top/center/bottom/长度单位
• background-attachment 背景图片固定或滚动 scroll(默认)/fixed
• background:color image repeat postion

CSS边框属性

• border-width 边框线的宽度 长度单位
• border-color
• border-style 边框线的风格 solid（实线）/dotted（点线）/dashed（虚线）/double（双实线）...
• border border:width style color（border: 边框宽度 边框样式 边框颜色）
• border-left/right/top/bottom
• border-left-width（左边边框的的宽度）

CSS鼠标光标属性

• cursor 值 default/pointer（小手）/move/crosshair（十字架）/text（文字选择器）/wait

CSS列表属性

• list-style-type 列表项的图形 disc/circle/square/decimal/lower-roman/upper-roman ....
• list-style-postion 列表项图形的位置 outside/inside （列表图形在li的内部）
• list-style-iamge 自定义列表图形 url
• 写法list-style-image:url(../images/weixin.gif);
• 最常见的设置 list-style:none（去掉列表前的图形）

CSS表格属性

• table-layout 表格布局方式 auto/fixed（使单元格均匀的分布）
• border-collapse 合并单元格边框 separate/collapse（合并单元格的）
• border-spacing 单元格间距 长度单位
• caption-side 表格标题位置 top/bottom
  caption-side:top;
• empty-cells 没有内容的单元格是否隐藏 show/hide

CSS sprites css精灵图

引入精灵图的原因：

• 为了减少服务器接收和发送请求的次数，提高页面的加载速度，因此，产生了css精灵技术。

  主要代码

• .类名{ background:url("图片的位置") no-repeat -25px -64px;}

行内元素和块状元素

常见的块状元素

• div，p br hr...

  常见的行内元素

• 超链接a,span,img...

  区别

• 块状元素独占一行， 行内元素可以共用一行
• 默认宽度： 块状元素默认宽度由父元素决定 行内元素默认宽度右内容决定
• 块状元素可以设置宽高， 行内元素不可以设置宽高
• 大部分块状元素内部可以嵌套块状或行内， 大部分行内只能嵌套行内

• 外边距，块状没问题，行内只能设置左右

  块状元素转为行内元素的方法

• 当css对行内元素定义display:inline;属性之后，这些块状元素会具有行内元素属性。`

行内元素转为块状元素的方法

• 当css对行内元素定义display：block;属性之后，这些行内元素会具有块状元素属性。`