10. 表格补充和BFC布局规则

练习代码已上传

表格补充

 一：表格标签补充:
         a: 
              数据行分组:
              <thead></thead>  表头
              <tbody></tbody>  表体
              <tfoot></tfoot>  表尾
              注：每一个表格只能有一个表头和表尾，但是拥有多个表体
          b：
              数据列分组：（了解）
              <colgroup span="把几列分成一组"><col span="colgroup中span的第及列"></colgroup>              
              对<colgroup>中的某列定义不同的属性，请在<colgroup>标签内使用<col>标签；
              
              例子:
              <colgroup span="2" style="background-color:green">
                  <col span="1" style="background: pink;">
              </colgroup>

          c:
              列标题标签
              <th></th>
                  默认样式：左右居中、文本加粗

          d:
              表格标题标签
              <caption></caption>              
                  默认显示的位置：表格的上方
                  了解 caption-side  控制标题的位置
                      属性值：right/left/top/bottom
                      right 和 left 只有火狐识别


            
 二：补充表格的css属性：
     a:
         相邻单元格边框是否合并
         border-collapse:（添加在table上面的）
         separate  默认值：分开
         collapse  合并

    b：
        相邻单元格的间距：（添加在table上面的）
        border-spacing:;


    c：
        是否显示，没有内容的td的区域
        empty-cells:
        属性值：
        hide
        show

    d:
        单元格的宽度的问题：
        默认情况：
        每个td的宽自动状态，先去判断内容的量，如果内容的量多，宽度就会变大，内容少，宽度就会显示的比较小。

        table-layout:;  主要是控制单元格固定或自动
        属性值：
        auto(默认值)
        auto的执行逻辑：收到内容的影响，根据内容多少去设置td的宽度
        弊端：性能消耗比较多
        优点：灵活

        fixed(固定)
        fixed执行逻辑：当td的宽度确定好了之后，不再受到内容的影响。
        弊端：不灵活
        优点：节省性能消耗



三：补充表格的html属性
    rowspan=""
    colspan=""
    align=""  对齐方式
    valign=""  垂直对齐方式
    bgcolor=""  背景颜色
    border=""  边框

    rules="groups/rows/cols/all/none"    添加分隔线
    说明：
        rows:位于行之间的线条
        cols:位于列之间的线条
        all：位于行和列之间的线条
        none:没有线条
        groups:位于行组和列组之间的线条

BFC

BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC的布局规则

一、内部的Box会在垂直方向，一个接一个地放置。
二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
三、每个元素的margin box的左边， 与包含块border box的左边相接触
四、BFC的区域不会与float box重叠。
五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
六、计算BFC的高度时，浮动元素也参与计算

BFC的触发条件

 a: 根元素(html)
 b: float属性不为none
 c：position为absolute或fixed
 d: display为inline-block, table-cell, table-caption, flex, inline-flex
 e: overflow不为visible(默认值)

BFC的应用

  1：解决高度塌陷
  2: 防止margin上下重叠（了解）
  3：完成自适应两栏布局（左侧宽度固定。右侧自适应）