笔记整理（一）

发表于   |   分类于   |  

居中布局

  • 水平居中

    • 行内元素：设置父元素text-align：center >>在线demo
    • 块级元素：对自身设置宽度，同时margin：0 auto >>在线demo
    • 多个块级元素
      • （方法一）设置父元素text-align：center，块级元素display：inline-block >>在线demo
      • （方法二）设置父元素display：flex； justify-content：center >>在线demo

  • 垂直居中

    • 行内元素

      • 内容单行显示
        • （方法一）设置行内元素height和line-height为相同值>>在线demo
        • （方法二）设置父元素上下padding为相同值>>在线demo
      • 内容多行显示
        • 设置父元素display：table-cell；vertical-align：middle>>在线demo
      • 隐元素 >>在线demo
        • 设置子元素display：inline-block；vertical-align：middle
        • 给父元素添加.ghost的伪元素
        • .ghost::before{content:'';display:inline-block;height:100%;width:1%;vertical-align:middle}
        • 因为子元素的display转换为inline-block，所以不仅仅适用于行内元素

    • 块级元素

      • 元素高度已知：设置父元素position：relative；子元素position:absolute; top:50%; margin-top:-height/2 >>在线demo
      • 元素高度未知：设置父元素position：relative；子元素position:absolute; top:50%; transform：translateY（-50%） >>在线demo

  • 水平垂直同时居中

    • （方法一）在块级元素高度已知实现垂直居中的前提下增加水平居中.child {left：50%；margin-left：-width/2}
    • （方法二）在块级元素高度未知实现垂直居中的前提下增加水平居中 >>在线demo
    • （方法三）flex：.parent {display:flex; justify-content:center; align-items: center} >>在线demo
    • （方法四）绝对水平垂直居中：设置父元素position：relative同时显性指定高度；设置子元素position:absolute; margin:auto;top\left\right\bottom均为0 >>在线demo

参考资料

等高布局

  • 利用table实现等高
  • 利用flex实现等高
  • 利用负margin和正padding抵消实现等高
  • 在线demo

参考资料

全屏布局

  • header，footer定高，left定宽，right可根据内容需求生成滚动条
  • 在线demo