前端基础知识day08

1、设置子元素在父元素中水平垂直都居中：面试题

    1、单纯的盒模型实现

        水平居中：   子元素   margin : 0 auto;
        垂直居中：   父元素   padding-top: calc( （父元素高度 - 子元素的高度） / 2 )【盒子的尺寸会变大】 box-sizing: border-box;

        水平居中：   子元素   margin : 0 auto;
        垂直居中：   子元素   margin-top : （父元素高度 - 子元素的高度） / 2 ;  但是，有可能会出现外边距的传递
                    父元素   border: 1px solid transparent;【盒子的尺寸会变大】 box-sizing: border-box;

    2、单纯的定位实现 = 子绝父相  === 前提 ： 一定需要知道父元素和子元素的宽高
        子元素  先添加  position: absolute;
        设置偏移量
                top: calc(父元素高度 - 子元素的高度） / 2)
                left: calc(父元素宽度 - 子元素的宽度） / 2)
        父元素  再添加  position: relative;
            

    3、定位和盒模型综合使用        ====  不一定非要知道父元素的值，但是一定需要知道子元素的宽高
        子元素  先添加  position: absolute;
        设置偏移量
            top: 50%;
            left: 50%;

            margin-top: 移动子元素高度 本身的一半  （负值）;
            margin-left: 移动子元素宽度 本身的一半  （负值）;

        父元素  再添加  position: relative;

    4、单纯的定位实现   === 父元素和子元素都不需要知道【投机倒把】
        子元素  先添加  position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;

                margin: auto;

        父元素  再添加  position: relative;

    ..........

2、设置  盒子的内容 水平垂直都居中
    水平居中：   text-align: center;

    垂直居中：   line-height: ___ 高度的值;  【单行文本】
        多行文本的话【额外添加一个盒子 - 给多行文本的盒子添加宽高，再设置盒子 居中】

3、浮动的弊端   === 高度塌陷  === BFC 解决

        BFC（Block Formatting Context）格式化上下文，
    是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器
    可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部

    做什么事情
        解决高度塌陷的方案   ====  面试题： ====== 

            0、直接给父元素添加一个高度
                === 直接添加高度的弊端：  其内部的元素一定 是 固定的个数【给父元素设置的高度，一直都是一成不变的】

            1、 给 浮动元素的  父元素 添加一个属性触发bfc  ====   overflow: hidden;   === 原理  BFC
                核心解决问题是 “查看更多” - 在原来的显示基础上个数的下面 又会 多了一组数据  === 场景
                    此时 如果给盒子添加一个固定的高度，那么点击查看更多时， 多余【超出 设置的高度的部分】 === 溢出

            .........

4、定位的使用场景 【固有的】
    固定定位  === 某个盒子 一直在页面中的某个位置
    粘性定位  === 吸顶 效果

    相对定位  ===  -- 给绝对定位设置参考系 - 一般情况不会单独出现
    绝对定位  ===  -- 在某个盒子中 有一块 特殊的区域 【使用浮动不好处理】 --- 其父元素设置相对定位

5、一级菜单布局方案
    等宽的

    内部等距离的

==========================================================

6、表单的进阶使用
    input   type === text  /  password   / button  / submit / reset
    ----------------------------------------------------------------、

    input   type ===    checkbox    --- 复选框                               
            type ===    radio       --- 单选框 === name 进行创建一组     

    下拉菜单
        select
            option          selected

    文本域输入
        textarea

    上传文件
        input   type === file

                表单字段集
                    <fieldset>   
                        <legend>标题</legend>
                    </fieldset>

    iframe  === 内部嵌入一个网页

    表单属性
        disabled    === 禁止使用    === 一般都是按钮

        checked     === 默认选择    === 单选框和复选框

        selected    === 默认选择    ===下拉菜单

7、表格相关的
    table   === 创建一个表格        cellspacing = 0 【设置单线表格】
        tr  === 行
        td  === 单元格

            align   === 控制水平方向上的对齐    【left  center  right】
            valign  === 控制垂直方向上的对齐    【top  center(middle)  bottom】

            colspan === 水平合并
            rowspan === 垂直合并

    在table 中
        特殊的标签
            caption  === 标题

            col  === 列分组   span=" "  跨列设置

            thead
                tr  
                    th  ====  加粗效果 --- 表格的头部

            tbody

            tfoot