面试官会提问的面试题目汇总

Html，css
布局(重点)

浮动布局
        float（如果一个元素添加float属性，那么这个元素就会成为一个浮动元素）
            left  向左浮动
            right  向右浮动
            none  不浮动
            inherit  浮动方式继承父元素
        浮动元素的特点
            1.当一个元素是浮动元素的时候，他会失去对父元素的支撑
            2.脱离文档流
定位布局
    position
        static  静态（默认）  非定位元素
        relative  相对定位  定位元素
            相对的是元素原先的值，不脱离文档流(还占据原先位置),宽度默认还是100%，可以覆盖在原先位置上
        absolute  绝对定位  定位元素
            相对的是距离它最近的父定位元素的位置，如果没有父定位元素，那么它相对于浏览器视口
            脱离文档流（不占据原先的位置）
        fixed  固定定位  定位元素
            相对于浏览器视口
            脱离文档流
            不会随着浏览器的滚动而滚动
        sticky  粘滞定位  定位元素
            不脱离文档流
            使用top/right/bottom/left设置一个过渡点，当超过这个过渡点的时候就会体现fixed固定在页面上
        脱离文档流的特点：默认宽度由内容决定，不占据原先的位置（原先的位置被其它元素抢占）
        只有定位元素才可以使用top，right，bottom，left,z-index
flex布局（伸缩盒布局）
        1.比较：
            传统布局
                兼容性好
                布局繁琐
                局限性，不能在移动端很好的布局
            flex弹性布局（伸缩盒布局）
                操作方便，布局极为简单，移动端应用很广泛
                PC端浏览器支持情况较差
                IE11或更低版本，不支持或部分支持
        2.原理
            任何一个容器都可以指定为flex布局
                采用Flex布局的元素，称为flex容器，他的所有资源股市称为flex项目
                容器默认存在两根轴：水平的主轴和垂直的交叉轴
            当我们为父盒子 设为flex布局后，子元素的float，clear属性即将失效
            给父元素设置display：flex，达到控制子元素的目的
        3.常见父项（容器）属性
            flex-direction：设置主轴的方向
                row（默认）：主轴为水平方向，起点在左端
                row-reverse：主轴为水平方向，起点在右端
                column：主轴为垂直方向，起点在上沿
                column-reverse：主轴为垂直方向，起点在下沿
            justify-content：设置主轴上的子元素排列方式
                flex-start：左对齐
                flex-end：右对齐
                center：居中
                space-between：两端对齐，项目之间的间隔都相等
                space-around：每个项目两侧间隔相等，所以，项目之间间隔比项目与边框的间隔大一倍
            flex-wrap：设置子元素是否换行
                nowrap（默认）：不换行
                wrap：换行，第一行在上方
                wrap-reverse：换行，第一行在下方
            align-content：设置侧轴上的子元素的排列方式（多行）
                flex-start：与交叉轴的起点对齐
                flex-end:与交叉轴的终点对齐
                center：与交叉轴的中点对齐
                space-between：与交叉轴两端对齐，轴线之间平均分布
                space-around：每根轴线两侧的间隔都相等，所以，轴线之间的间隔比轴线与边框的间隔大一倍
                stretch（默认值）
            align-item：设置侧轴上的子元素排列方式（单行）
                flex-start：交叉轴的起点对齐
                flex-end：交叉轴的终点对齐
                center：交叉轴的中点对齐
                baseline：项目的第一行文字的基线对齐
                stretch（默认值）：如果项目没设置高度或设auto，将占满整个容器
            flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
                flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
        4.项目的属性
        order
            该属性定义了项目的排列顺序，数值越小，排列越靠前，默认0
        flex-grow
            该属性定义了项目的放大比例，默认0，即如果存在剩余空间，也不放大
        flex-shrink
            该属性定义了项目的缩小比例，默认为1，即如果剩余空间不足，该项目将缩小
        flex-basis
            该属性定义了在分配多余空间之前，项目占据的主轴空间
        flex
            flex-grow、flex-shrink、flex-basis的速写形式

---