H5学习笔记（五）

1、文本格式化
   1、文本格式化
      包括：
        控制字体：大小，加粗，斜体，字体系列
    文本格式：颜色，排列，缩进
   2、控制字体
     1、指定字体系列
       font-family
       取值：字体1，字体2，。。。
       注意：字体值包含中文或特殊符号时，必需使用"","微软雅黑" Microsoft yahei
     2、指定字体大小
      font-size
      取值：px或pt
     3、字体加粗
    font-weight
    取值：
     normal正常  400-900：整百倍数的数字
     bold：加粗，b，strong，hn
     4、字体斜体
         font-style：
     取值：normal正常，italic：斜体，i标记默认值 
     5、小型大写字母
      作用将匹配元素中所有的小写英文字符全部转换为大写，但是大小与小写一样
      属性：font-variant
      取值：normal  small-caps：小型大写字符
      6、字体综合属性
      将所有的字体属性声明在一个属性中
      属性:font
      取值:font-style font-variant font-weight font-size font-family
    3、文本格式属性
      1、文本颜色
         属性:color
     取值:合法颜色值
      2、文本排列方式（水平对齐）
          属性：text-align
      取值：left，center，right
      3、文字修饰（线条样式）
       属性:text-decoration
       取值：
       none：无线条样式
       underline：下划线
       overline：上划线
       line-through：删除线
      4、行高
        属性：line-height
    取值：px为单位的数值
    作用：控制匹配元素中 一行数据的高度，如果行高值 高于 文字大小的话，那么这行文本在行高的高度内，呈现垂直居中的显示方式。如果行高值等于元素的高度，那么这行文字垂直居中。

    font:字体大小/行高 "微软雅黑";
       5、文本阴影
          属性:text-shadow
      取值:h-shadow v-shadow blur color;
       6、首行文本缩进
           属性：text-indent
       取值：以px为单位的距离值
2、表格
  1.表格常用样式属性
    1、尺寸属性
       width，height
    2、边框border
    3、内边距padding
    4、文本字体相关属性
       font-*、text-*
    5、vertical-align 单元格内容垂直对齐方式
       取值:top、middle、bottom
  2、表格特有样式属性
      1、边框合并
         属性:border-collapse
     取值:separate :默认值，分离边框
          collapse：合并边框
       2、边框边距
         相当于：table当中的cellspacing属性
     属性：border-spacing
     取值：指定一个值：垂直与水平距离相等
     指定两个值：第一个值，表示的是水平间距，第二个值表示的是垂直间距，中间用空格隔开。
     注意：仅在border-collapse:separate时有效。
   3、显示规则
   表格布局：浏览器以什么样的算法来显示表格
   属性：table-layout
   取值：
      auto：自动，列宽度由单元格内容绝对，默认值，称为自动表格布局。
      fixed：固定的，列宽由table以及td设置的属性来决定，不以内容为主。称为固定表格布局
      自动表格布局
        1、单元格大小会适应内容大小
    2、表格复杂时，加载会比较慢
    3、适用于不确定每列大小时使用
       固定表格布局
        1、单元格宽度有表格以及单元格设置的数据为主，与单元格内容无关。
    2、加载比较快
    3、缺点：不灵活
 3、浮动(重点，难点）
   1、定位
       定位方式：
        1、普通流定位（默认定位方式）
        页面中特点:1、块级：从上到下依次排列，每个元素独占一行
        2、行内从左到右显示，一行内允许显示多个
    2、浮动定位(常用) --弹性布局（flex布局）
    3、相对定位
    4、绝对定位
    5、固定定位
    2、浮动定位
    1、作用：让块级元素可以在一行内显示
    2、什么是浮动定位
        1、将元素排除在普通流之外，脱离文档流，浮动元素不再占据页面空间
        2、浮动元素会停靠包含框的左边或右边，或者是其他已经浮动起来的元素的边缘
    3、属性：
       float 取值:none:默认值，无浮动
                  left：左浮动
              right：右浮动
    4、注意：
      1、如果父元素中无法显示所有的已浮动元素，那么最后一个将换行显示
      2、所有元素一旦浮动，将变成块级元素，可以加宽高
      3、浮动元素对父元素高度的影响
        父元素中，包含浮动元素的话，那么高度将会以未浮动元素高度为准。如果所有的子元素全部浮动，那么父元素的高度将变成0。
        解决方案：
            1、直接设置父元素的高度
            2、为父元素增加overflow:hidden属性
            弊端：如果有溢出的内容，会被隐藏
            3、通过清除浮动的方式解决
            4、:before :after来解决
   5、清除浮动
     1.什么是清除浮动
       清除当前元素之前或之后的浮动元素对它带来的影响
     2、属性
      clear 取值:none默认值，无清除效果
                 both:清除左右两边的浮动元素对当前元素的影响
         left：清除左边的浮动元素的影响
         right：清除右边的元素带来的影响
4、显示
  1、显示方式
    1、什么是显示方式
       决定页面上的元素到底是以什么方式进行显示（行内？行内快、块级）
    2、如何修改元素默认的显示方式
    属性:display
    取值:none  让生成的元素没有框，不显示，会使元素脱离文档流，不占据页面空间
         block：让当前元素 表现的和 块级元素一样。让当前元素变成块级元素
     inline  行内元素（尽量不要将块级元素改为行内元素）
     inline-block：行内块  ：本身是行内元素，但是又具备块级元素的特征。即一行内可以显示多个元素，但是还可以修改宽和高
  2、显示效果
    1、visibility
       取值：visible 默认值，可见的
             hidden 隐藏，元素不可见。依然占据页面空间
         collapse：用在表格上，在删除表格中的一行或一列是，表格整体布局不受变化
         面试问题
         display:none和visibility:hidden的区别
         display:none 不显示生成的元素，并且脱离文档流
         visibility:hidden   隐藏元素，但是没有脱离文档流，依然占据页面空间
    2、opacity
       透明度
       取值:0-1之间的数
        颜色取值 rgba(r,g,b,0-1) 
    3、vertical-align
    1、设置td的垂直对齐方式
    2、可以设置行内块(img)元素的垂直对齐方式
       给img设置vertical-align，设置图片两端的文本相对于图片的垂直对齐方式
    3、取值:top/middle/bottom/baseline(默认值，基线对齐)
 3、光标
  属性：cursor
   取值：default
         pointer 小手
     text：I
     wait:等待
     help；帮助
     crosshair ：+