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. 创建自适应两栏布局