CSS题

判断元素是否滚动到底部
元素滚动到底部时，它的 scrollHeight - scrollTop 等于 clientHeight。

• scrollHeight 只读的元素全部高度，包括overflow: hidden隐藏掉的部分
• scrollTop 元素顶部的滚动距离
• clientHeight 只读的元素内部的高度，不包括overflow: hidden隐藏掉的部分

左右两栏布局，左侧定宽，右侧随窗口大小缩放

1. body flex，.left width 200px，.right flex-grow=1
2. 两栏均float left，.left width 200px，.right宽度 calc(100% - 200px)
3. 两栏均position absolute，.left width 200px; left 0，.right right 0; left 200px

三栏布局，左右定宽中间自适应

1. 左右float 中间width calc（或设置左右margin）
2. flex 中间 flex-grow 1
3. absolute 中间设置left和right（或设置左右margin） 左边设left和width 右边设right和width

子元素在父元素内双向居中

/* 1 - 父元素flex */
display: flex;
align-items: center;
justify-content: center;
/* 2 - 子元素绝对定位 */
display: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

BFC 块级格式上下文

在这种布局方式下，盒子们自所在的containing block顶部一个接一个垂直排列，水平方向上撑满整个宽度（除非内部盒子自己建立了新的BFC）。两个相邻的BFC之间的距离由margin决定。在同一个BFC内部，两个垂直方向相邻的块级元素的margin会发生“塌陷”。

一、触发条件：
    float属性不为none
    overflow不为visible(可以是hidden、scroll、auto)
    position为absolute或fixed
    display为inline-block、table-cell、table-caption

二、可解决的问题：
    1. 清除内部浮动
    我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。

    2. 垂直margin合并
    在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

    3. 创建自适应两栏布局