面试成功锦囊之页面布局

说起前端开发，首先会想到页面布局，作为资深前端来说，用页面布局来谈前端可能会认为太浅显，但作为前端开发中最基础的技能，是不是已经get到了所有的精髓了？秉着边回顾边分享的原则记录，欢迎大家指正。

一、假设高度已知，写出三栏布局，左右300px，中间自适应。

• 方式1：float

<style type="text/css">
.float div{
    height: 300px;
}
.float .left{
    float: left;
    width: 300px;
}
.float .right{
    float: right;
    width: 300px;
}
</style>
<section class="float">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center缺点：主内容最后加载，影响用户体验</div>
</section>

• 方式2：定位（自己动手练习吧）
• 方式3：flex-box（弹性布局）

<style type="text/css">
    .flex div{ 
        height: 300px;
    }
    .flex{
        display: flex;
    }
    .flex .left,.flex .right{
        width: 300px;
    }
    .flex .center{
        flex: 1;
    }
</style>
<section class="flex">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
</section>

补充：弹性布局
父容器属性：

• display:felx/inlineflex;
• felx-direction:row(➡️)/row-reverse(⬅️)/column(⬇️)/column-reverse(⬆️);
• felx-warp:nowarp(不换行)/warp/warp-reverse;
• flex-flow:flex-direction+flex-wrap;
• justify-content:flex-start(左对齐)/flex-end(右对齐)/center(居中)/space-between(两端对其)/space-around(每个项目两侧的间隔相等)
• align-items:flex-start(起点对齐)/flex-end(终点对齐)/center(中点对齐)/baseline(项目的第一行文字的基线对齐)/stretch(默认值,如果项目未设置高度或设为auto，将占满整个容器的高度)

---

子容器属性：

• order:排序，越小排的越靠前
• flex-grow：放大，默认0
• flex-shrink：缩小，默认1
• flex-basis：分配多余空间前，项目占据的主轴空间
• flex：flex-grow, flex-shrink 和 flex-basis的简写
• align-self：单个项目的对齐方式 auto | flex-start | flex-end | center | baseline | stretch

• 方式4：table-cell

<style type="text/css">
.table{
    width: 100%;
    display: table;
    height: 300px;
}
.table div{
    display: table-cell;
}
.table .left,.table .right{
    width: 300px;
}
</style>
<h1>表格</h1>
<section class="table">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
</section>

补充：表格布局
父容器属性：display:table;
子容器属性（与table对应）：
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }

二、盒模型

• 标准盒模型：width不包含border、padding

  
  

• IE盒模型：width包含border、padding

  
  

如何设置切换两种模型？
css3的box-sizing属性：
box-sizing：content-box;(浏览器默认，表示标准模型)
box-sizing：border-box;（IE模型）
box-sizing：padding-box;（width包含padding）

如何获取盒模型的高度？
1、document.getElementById("dom").style.width/height---------只能取到内联样式的宽高
2、document.getElementById("dom").currentStyle.width/height---------渲染后的宽高，（内联，外链、style标签）【只适用于IE】
3、window.getComputedStyle(dom).width/height---------与2原理一样，兼容性好
4、dom.getBoundingClientRect().width/height---------(用于计算位置，获取某个元素相对于视窗的位置集合，返回一个对象，对象包含属性left、righ、top、bottom、width、height等，兼容ie5以上 )

三、BFC（block formatting context）块级格式化上下文

• 原理：
  BFC的内部元素不会影响以外的元素【BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响】（父子关系时，内部元素即子元素不会影响父元素的边距）

• 如何创建BFC

1. float != none；
2. position:absolute/fixed--------加在父元素上；
3. display:inline-block、table-、flex/inline-flex------加在父元素或各自兄弟元素上；
4. overflow!=visible---------加在父元素上；
5. 加在父元素上的解决方法，对于兄弟元素，可以给兄弟元素再包一层。

最常见的就是overflow:hidden、float:left/right、position:absolute。
一个元素不能同时存在于两个BFC中。

补充：什么是边距重叠
边距重叠问题（只产生在普通流文档的上下外边距之间）边距重叠不是双边距，双边距是IE6的问题

两个或多个块级盒子相邻（兄弟）或嵌套（父子）的边界（其间没有任何非空内容、补白、边框）。结果的边界宽计算：
a、全部为正取最大值；
b、不全为正，则在最大正边界中减去绝对值最大的负边界；

c、没有正值，都取绝对值，0减去绝对值最大的。
解决边距重叠：BFC 或 内层盒子加透明边框 或 外层盒子用padding代替

应用：

• 解决垂直方向margin重叠

• BFC元素不与float元素相重叠
  举例：两栏布局。左右都定高，左设float：left，如果右边高于左边，会出现如下图，即右边占据了左侧的下方。给右侧使用BFC可解决。

  
  
  

  使用BFC后如下图：

  
  

<style type="text/css">
        html *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 100%;
            background-color: #ccc;
        }
        .fl{
            float: left;
        }
        .left{
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .right{
            height: 200px;
            background-color: yellow;
            overflow: hidden;
        }
    </style>
  </head>
  <body>
        <div class="father">
            <div class="left fl">
                aa
            </div>
            <div class="right">
                dd
            </div>
  </body>

四、层叠上下文、层叠等级、层叠顺序

• 层叠上下文：元素提升为一个比较特殊的图层，在三维空间中 (z轴) 高出普通元素一等。

  
  

如何创建层叠上下文？

1. <html></html>-------“根层叠上下文”。
2. 普通元素设置position属性为非static值并设置z-index属性为具体数值。
3. CSS3中的新属性也可以产生层叠上下文。

• 层叠等级：在同一个层叠上下文中，它描述定义的是该层叠上下文中的层叠上下文元素在Z轴上的上下顺序。

• 层叠顺序：元素发生层叠时按照特定的顺序规则在Z轴上垂直显示。
  *优先显示文字内容

  
  
  

  *普通元素的层叠等级优先由其所在的层叠上下文决定。
  *层叠等级的比较只有在当前层叠上下文元素中才有意义。不同层叠上下文中比较层叠等级是没有意义的。
  ** 套路：

1、首先先看要比较的两个元素是否处于同一个层叠上下文中：
1.1如果是，谁的层叠等级大，谁在上面（怎么判断层叠等级大小呢？——看“层叠顺序”图）。
1.2如果两个元素不在统一层叠上下文中，请先比较他们所处的层叠上下文的层叠等级。
2、当两个元素层叠等级相同、层叠顺序相同时，在DOM结构中后面的元素层叠等级在前面元素之上。

五、居中布局

• 水平居中
  行内元素：text-align:center;
  块级元素：margin:0 auto;
  定位：position:absolute;left:50%;margin-left:-1/2*width;
  弹性布局：display: flex;justify-content: center;
• 垂直居中
  一行文字：line-height
  定位：position:absolute;top:50%;margin-top:-1/2*height;
  弹性布局：display: flex;align-items: center;
• 水平垂直居中
  定位：position:absolute;left:50%;top:50%;margin-left:-1/2width;margin-top:-1/2height; OR：position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;OR：position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
  弹性布局：display: flex;justify-content: center;align-items: center;

<head>
<style type="text/css">
    html,body{
        height: 100%;
    }
    .child{
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
</head>
<body>
        <div class="child">水平垂直居中</div>
</body>

vh:

<body>
        <div style="text-align: center;line-height: 100vh;">水平垂直居中</div>
</body>

表格元素：text-align:center;vertical-align:middle;
模拟表格：display:table-cell;text-align:center;vertical-align:middle;

<style type="text/css">
       html,body,table{
        width: 100%;
        height: 100%;
        text-align: center;
       }
</style>
  <body>
        <table>
            <tr>
                <td>水平垂直居中</td>
            </tr>
        </table>
  </body>
</html>

//table-cell元素必须定宽高
  <body>
        <div style="width: 1000px;height: 1000px;display: table-cell;text-align: center;vertical-align: middle;">水平垂直居中</div>
  </body>