css的文本格式 表格 浮动

1)文本格式

1、控制字体
      1、指定字体
         font-family:"microsoft yahei",arial,"宋体";
      2、字体大小
         font-size: px , pt 作为单位  30pt  16pt
常用字体大小：12px - 14px
      3、字体加粗
         相当于 <b></b>
font-weight : normal / bold ;
              400 - 900 : 400,500,600,700,800,900
建议：通过 该属性取代 b 标签
      4、字体样式
         斜体
font-style:normal / italic;
相当于<i></i>
      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 : 删除线  <s></s>
       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>出现的位置
属性:caption-side
取值：top 默认值，出现在表格之上
      bottom 标题出现在表格之下
      4、显示规则
         如何控制表格中 单元格 的算法
语法：table-layout
取值：
      auto : 列宽度有内容决定，默认值，称为自动表格布局
      fixed : 列宽度由列的 width 来决定，固定表格布局
         自动表格布局:
    处理复杂表格时，速度会稍慢
    不适合确定列大小时用
固定表格布局:
    列宽度由列 width 来决定，不会根据内容而发生改变
    适合用于确定列宽度时使用
    速度略快

3）浮动

3、属性
         float
取值：
     left : 左浮动
     right : 右浮动
     none : 无浮动
清除浮动所带来的影响:
属性：
clear:left,right,both;
      4、元素一旦浮动起来的话，那么都将成为块级元素

      5.浮动 元素 对 父层元素带来的影响
   影响：一个元素内如果包含了浮动元素，那么该元素的高度可能会变成0。
   原因：浮动元素 脱离了 文档流，理论上讲，就不在父层容器内
   解决方案:
       1、显示设置父层元素的高度
       2、通过overflow:hidden 来撑起父层元素的高度