面经练习一
1.bfc
①.首先什么是BFC:
直译为"块级格式化上下文"。它是一个独立的渲染区域,是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的行内元素所组成)都会垂直的沿着其父元素的边框排列。
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
②.BFC如何创建:
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex等
4、overflow的值不是visible
③.BFC的作用:
1.利用BFC避免margin重叠。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
我们可以让把第二个p用div包起来,然后激活它使其成为一个BFC
2.自适应两栏布局
BFC的区域不会与float box重叠。
left–左浮动,right-- overflow:hidden
3.清楚浮动
计算BFC的高度时,浮动元素也参与计算。
2.两边固定,中间自适应
-
flex布局:
父display flex 左子width 右子width 中子flex:1 -
利用浮动:
左右盒子 一个左浮动一个右浮动,中间margin
center占据文档流位置,所以一定要放在最后 html盒子位置:左盒子,右盒子,中盒子
-
利用绝对定位
左盒子定位在左边,右盒子定位在右边,中间margin,width:auto否则中间文字不会换行
3.快速排序
function quickSort(arr, i, j) {
if (i < j) {
var left = i;
var right = j;
var pvo = arr[left];
while (i < j) {
while (arr[j] >= pvo && i < j) {
j--;
}
if (i < j) {
arr[i] = arr[j];