zoukankan      html  css  js  c++  java
  • CSS布局入门

    从一个居中方案,来看CSS的布局。


    一、水平居中

    1.行内元素的水平居中

    text-align:center;

    2.块状元素的水平居中

    • 设置宽度,margin:atuo;
    • 子元素设置为inline-block,父元素增加text-align:center;
    • 父元素设置display:flex;和justify-content:center;
    • 绝对定位配合margin负值

    二、垂直居中

      1.display:inline-block;时,height和line-height设置为父元素高度

      2.display:table-cell;和vertical-align:middle;

      3.已知高度,绝对定位配合margin负值

      4.未知高度,绝对定位配合CSS3的transform:translateY(50%)

      5.父元素display:flex;和align-items:center;

      6.父元素display:flex;然后子元素marigin:auto;

         7.table元素中的td元素增加vertical-align:top;和text-align:center;

      8.绝对定位,四个方向设置为0,配合margin:auto;

      9.利用浮动,父元素浮动配合relative到中间,子元素利用relative进行偏移

      10.利用font-size,父元素设置font-size为为高度除以1.14的值,子元素恢复font-size配合vertical-align:middle;

      11.已知高度,利用calc进行计算设置padding


    三、总结

      从居中的方案,布局的很多思路也大同小异。

      这些知识点包含弹性盒子(flex)行盒(inline、inline-block)表格(table、table-cell)绝对定位(absolute)相对定位(relative)浮动(float),CSS3的2D转换(transform)计算属性(calc)字体(font-size)

      提炼为大的知识点,包含盒模型(box-model)定位体系(position)CSS的属性(attribute)

  • 相关阅读:
    6-[多线程]-互斥锁、GIL、死锁、递归锁、信号量
    5-[多线程]-线程理论
    4-1 多进程练习题
    压缩与解压缩
    检测SSL证书很好用的三个网站
    shell之sort和uniq 及wc 的使用
    shell之cut和tr 的命令的使用
    三剑客之awk数组实战
    三剑客之sed
    linux文件查找(find,locate)
  • 原文地址:https://www.cnblogs.com/bearRunning/p/12216883.html
Copyright © 2011-2022 走看看