css-03

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、浮动
   1）什么定位
      元素该出现的位置
      分为以下几类：
        普通流定位(文档流定位)
浮动定位
相对定位
绝对定位
固定定位
   2）普通流定位
      页面默认的定位方式
      块级元素：从上到下显示
      行内元素：从左到右显示
   3）浮动定位
      1⃣️什么是浮动定位
         元素会脱离默认文档流,在页面上不会占据空间
浮动定位的元素会放置在包含框的左边或者右边
浮动的元素依然在包含框内
当浮动元素碰到其他浮动元素时，就会停止浮动
      2⃣️浮动定位解决的问题
         实现特殊的定位方式，比如：让多个块级元素在同一行内显示
      3⃣️属性
         float
取值：
     left : 左浮动
     right : 右浮动
     none : 无浮动
清除浮动所带来的影响:
属性：
clear:left,right,both;
      4⃣️元素一旦浮动起来的话，那么都将成为块级元素