说起前端开发，首先会想到页面布局，作为资深前端来说，用页面布局来谈前端可能会认为太浅显，但作为前端开发中最基础的技能，是不是已经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
- float != none；
- position:absolute/fixed--------加在父元素上；
- display:inline-block、table-、flex/inline-flex------加在父元素或各自兄弟元素上；
- overflow!=visible---------加在父元素上；
- 加在父元素上的解决方法，对于兄弟元素，可以给兄弟元素再包一层。
最常见的就是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轴) 高出普通元素一等。
如何创建层叠上下文？
- <html></html>-------“根层叠上下文”。
- 普通元素设置position属性为非static值并设置z-index属性为具体数值。
- 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>
