文本格式化 、 表格 、 浮动

1、w3c
   万维网联盟
*************************
1、文本格式化
   1、控制字体
      1、指定字体
         font-family:"microsoft yahei",arial,"宋体";
      2、字体大小
         font-size: px , pt 作为单位  30pt  16pt
常用字体大小：12px - 14px
      3、字体加粗
         相当于
font-weight : normal / bold ;
              400 - 900 : 400,500,600,700,800,900
建议：通过 该属性取代 b 标签
      4、字体样式
         斜体
font-style:normal / italic;
相当于
      5、小型大写字母
         font-variant : normal / small-caps;
      6、字体属性 font
         将所有的属性设置在一个声明当中
font:font-style font-varaint font-weight font-size font-family;
eg:font:italic small-caps bold 12px "microsoft yahei",arial;
常用写法:
font :font-size  font-family;
font:bold 12px "microsoft yahei";
其他写法:
       font : font-size/line-height font-family;
font:12px/24px "microsoft yahei";
    line-height : 行高
    2、文本属性
       1、颜色
          color : 颜色值 ;
         rgba(255,0,0,0.5);
       2、文本排列
          text-align:left/right/center; 元素中的内容水平对齐方式，大部分主流浏览器，只对行内元素起作用，对块不 起作用
 vertical-align:top / bottom / middle / baseline; 文本内容垂直对齐方式（针对td）
     baseline : 基线对齐
       3、文字修饰(线条)
          text-decoration:none / underline 
    none : 去除文本上的线条
    underline : 下划线
    overline : 上划线
    linethrough : 删除线  
       4、行高
          每行文本所占据的高度。如果行高的值高于文本的高度，那么这段文本会在行高范围内垂直居中显示。
 使用方式：
     1、将行高与容器高度设置为一致，从而使容器内的文本垂直居中显示。(只针对一行数据)
     2、如果想给文本增加上下的边距，也可以使用line-height
       5、首行文本缩进
          让元素内的首行文本，空出指定的像素值
 text-indent:value;
       6、文本阴影
          text-shadow:h-shadow v-shadow blur color;
    3、文本溢出处理
       1、处理空白
          white-space:normal / nowrap;
 出现场合：配合着overflow:hidden;来对超出范围的内容进行隐藏。从而保证元素的高度
       2、文本溢出
          overflow:hidden; 元素对溢出后的处理
 属性:text-overflow:
 取值:
      clip : 裁剪、切割
      ellipsis : 隐藏溢出内容并且显示 ...
 注意：text-overflow 要 配合着 overflow:hidden;一起使用
       3、长单词换行
          属性:word-wrap
 值:normal / break-word
       4、文本换行
 属性：word-break
 取值：normal / break-all / keep-all


2、表格属性
   1、常用属性(标准属性)
      内边距:padding
      尺寸属性:width , height
      边框属性:border
      背景属性:background
      文本格式化属性:font ...  color .... 
      对齐:text-align,vertical-align
   2、表格特有样式属性(只针对表格)
      1、边框合并
         属性:border-collapse
取值:
     separate : 默认值，分离边框
     collapse : 边框合并
      2、边框间距 
         相当于 cellspacing
属性：border-spacing
注意：border-collapse值必须为 separate
取值：
    指定一个值：设置水平和垂直统一的间距
    指定两个值：第一个值表示水平间距，第二个值表示垂直间距。两个值 空格 隔开
      3、标题位置
         出现的位置
属性:caption-side
取值：top 默认值，出现在表格之上
      bottom 标题出现在表格之下
      4、显示规则
         如何控制表格中 单元格 的算法
语法：table-layout
取值：
      auto : 列宽度有内容决定，默认值，称为自动表格布局
      fixed : 列宽度由列的 width 来决定，固定表格布局
         自动表格布局:
    处理复杂表格时，速度会稍慢
    不适合确定列大小时用
固定表格布局:
    列宽度由列 width 来决定，不会根据内容而发生改变
    适合用于确定列宽度时使用
    速度略快
3、浮动
   1、什么定位
      元素该出现的位置
      分为以下几类：
        普通流定位(文档流定位)
浮动定位


相对定位
绝对定位
固定定位
   2、普通流定位
      页面默认的定位方式
      块级元素：从上到下显示
      行内元素：从左到右显示
   3、浮动定位
      1、什么是浮动定位
         元素会脱离默认文档流,在页面上不会占据空间
浮动定位的元素会放置在包含框的左边或者右边
浮动的元素依然在包含框内
当浮动元素碰到其他浮动元素时，就会停止浮动


      2、浮动定位解决的问题
         实现特殊的定位方式，比如：让多个块级元素在同一行内显示
      3、属性
         float
取值：
     left : 左浮动
     right : 右浮动
     none : 无浮动
清除浮动所带来的影响:
属性：
clear:left,right,both;
      4、元素一旦浮动起来的话，那么都将成为块级元素