zoukankan      html  css  js  c++  java
  • css3一些布局

    布局:有头,有尾,有内容,middle部分要放在content的最前部分,然后是left,reight;
    浮动让三者在一行,出现高度塌陷,content清浮动;
    middle宽度设为100%,占满;
    left上去,拉到最左边:margin-left: -100%; right同理:margin-left:-200px;
    middle内容被left、right覆盖未显示,所以把middle内容拉回来,content:{padding: 0 200px};
    此时lefe和right都跟着被拉回来了,左右空出了200px。所以用相对定位把left,right拉回来;
    问题:
    如果某一列内容过多,文字会溢出。解决方法:等高布局;
    最小宽度问题:min-600px
    ———————————————

    • 圣杯布局的要求:随着页面宽度的变化,三栏布局中的中间盒子优先自适应渲染,两边盒子宽度固定不变;
    • 需求:
      • 1.两边固定,中间自适应;
      • 2.先加载middle内容;
      • 3.三列等高布局;
    • 步骤:
      布局:有头,有尾,有内容,middle部分要放在content的最前部分,然后是left,reight;
      浮动让三者在一行,出现高度塌陷,content清浮动;
      middle宽度设为100%,占满;
      left上去,拉到最左边:margin-left: -100%; right同理:margin-left:-200px;
      middle内容被left、right覆盖未显示,所以把middle内容拉回来,content:{padding: 0 200px};
      此时lefe和right都跟着被拉回来了,左右空出了200px。所以用相对定位把left,right拉回来;
      问题:
      如果某一列内容过多,文字会溢出。解决方法:等高布局;
      最小宽度问题:min-600px
      ————————————————

    双飞翼布局
    需求和圣杯布局是一样的;
    据说双飞翼是玉伯大大提的,思路是:middle是鸟的身体,left和right是鸟的翅膀,先把主要的东西middle放好,再将翅膀移到合适的位置;
    步骤
    middle部分要放在content的最前部分,然后是left,reight;
    浮动让三者在一行,出现高度塌陷,content清浮动;
    middle宽度设为100%,占满;
    left上去,拉到最左边:margin-left: -100%; right同理:margin-left:-200px;
    以上,都和圣杯布局一样;
    因为现在middle的内容被left和right覆盖了,我们除了考虑设置外围content的padding之外,还可以考虑用margin把middle拉过来;
    在middle中加一个内部元素middle-inner,设置其margin:0 200px;
    ————————————————

      

  • 相关阅读:
    C++ STL Set使用
    C++ STL算法
    C++ STL List使用
    C++中的构造析构函数
    七、Linux进程调度-应用内核设置调度策略和优先级
    Qcom高通相关汇总
    Cgroup内核文档翻译(8)——/dev/cpuctl/*
    用户进程和内核线程的CPU亲和性设置
    Scheduler内核文档翻译(1)——Documentationschedulersched-tune.txt
    uCgui和emWin的区别
  • 原文地址:https://www.cnblogs.com/caoxinbo/p/11504197.html
Copyright © 2011-2022 走看看