BFC

BFC是一个独立的渲染区域，规定了块元素如何布局排版，有自己的布局规则

BFC的布局规则

1、定义块元素垂直排列、上下显示

2、同一个BFC区域下，上下盒子的margin会重叠

3、盒子左边的外边距和左边的边框会接触

4、BFC区域不会跟float区域重叠

5、每一个BFC都是独立的容器，相互之间不会影响

6、计算BFC高度时，浮动元素也参与高度计算

BFC的触发条件

        根元素(html)

        float属性不为none

        position为absolute或fixed

        display为inline-block, table-cell, table-caption, flex, inline-flex

        overflow不为visible

表单新增的内容

1、表单字段级 ：对于表单内容可以分组和嵌套

    fieldset 

2、表单字段级的标题

    legend

3、textarea 文本域

            resize: none;

            /* 取消文本域的拖拽效果 */

            outline:none;

            /* 取消框的点击默认选中效果 */

      块元素

            form

            fieldset

            legend

      行内块元素

            input

            select

            textarea

      内联

            label

表格新增的内容

        border-spacing

        设置单元格之间的间距

        border-collapse：collapse

        合并相邻的边框

        empty-cells: hide;（占位隐藏）

        设置表格没有内容时隐藏

        visibility:hidden（占位隐藏）

        设置表格行和列的算法，加快表格的运行速度

        （显示的效果就是固定每个单元格的宽度）

        table-layout: fixed/auto;

        table标签

            数据行分组

                  thead

                  tbody

                  tfoot

            数据列分组

                colgroup    有span属性可以定义几列分为一组（需要结合rules="groups"）一起使用才有效果

        rules  是table的属性设置的是表格的分割线

            rows  行分割线

            cols  列分割线

            all  行分割线和列分割线都有

            none  没有线

            groups 定义列分组的分割线

html的内容

        视频video

                视频识别的格式

                        video/ogg    video/mp4    video/webm

        音频audio

                音频插入的格式

                        audio/mpeg（mp3）  audio/ogg

控件

        controls  播放控件(必写)

        autoplay  自动播放，有兼容性 ，谷歌火狐浏览器不识别，后期可以用js做兼容效果

        loop      重复播放

        muted      静音

        poster    定义视频播放前显示的图片