• 前端经典布局


    更新一下以前的知识,虽然现在才学,但是为时不晚,而且这些东西还不得不学,挺经典的,就是不知道当初学基础的时候为什么没有学到这些东西

    一.左右两列、一行三列、一行多列、多行多列布局

    image-20220702093126447

    一行四列还有一行多列

    image-20220702093252651

    首先统一配置需要装在一个盒子里面,让其有个宽高并居中

    image-20220702094551650

    1.左右两列

    一个行的div包两个列的div

    注意行的div可以不设置宽高

    image-20220702094806812

    中间要留有空白,两个子盒子宽度应该占满,最重要的将盒子设置浮动,并清除父盒子的浮动即可

    image-20220702094957373

    image-20220702095002975

    2.一行三列

    其实就是三栏布局

    三个盒子都浮动,中间间距可以用margin微调

    image-20220702095656979

    image-20220702095704221

    3.多行多列

    核心思想在于行还是一个div包裹,里面为一个ulli

    照样行盒子不用设置宽高,核心思想在于直接给li设置宽高并浮动,

    image-20220702100409201

    image-20220702101042756

    二.圣杯布局、双飞翼布局

    圣杯布局要实现的效果

    image-20220702111521358

    关键步骤在于中间内容三个盒子左浮动,但是中间内容要自适应所以要设置为100%

    image-20220702112337672

    image-20220702112343395

    造成这个局面,这个时候最关键的两步来了,给left来一个marginleft=-100%,也就是向左走一个父盒子的宽度刚好到上面去,右边走一个自己的宽度

    image-20220702113537188

    image-20220702113542980

    这个时候虽然排列差不多了,但是我们的中间内容部分是被档住的,给父元素左右各来一个padding分别是left right盒子的宽度

    image-20220702113624965

    image-20220702113632250

    接下来用相对定位将他们移过去即可

    image-20220702113709228

    image-20220702113715636

    双飞翼布局也是完成这样的效果,但是实现方法不一样

    首先还是需要左浮动,然后marginleft来移动到对应位置,但是不需要padding和relative了,直接将center内容再用一个盒子包裹起来

    image-20220702120231479

    将这个盒子宽度自适应

    image-20220702120248904

    然后将里面内容的盒子通过margin将内容放到中间来显示

    image-20220702120326055

    两者的区别我觉得最大的区别是,圣杯布局在缩小的最小页面的时候页面会错乱,而双飞翼布局页面不会错乱


    __EOF__

  • 本文作者: Heymar
  • 本文链接: https://www.cnblogs.com/heymar/p/16518601.html
  • 关于博主: 评论和私信会在第一时间回复。或者直接私信我。
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
  • 声援博主: 如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。
  • 相关阅读:
    flyway baseline-version
    【蓝牙协议栈】【BR/EDR】【MAP】蓝牙短信访问协议
    Android stdio 无法新建或打开AIDL文件(解决方法)
    计算机保研复习数据结构薄弱知识
    Linux实现非阻塞输入
    Python安装pycrypto出错处理方法
    实战讲解Redis基础数据类型List增删改查(带Java源码)
    Spring boot 自定义 Starter 及 自动配置
    Linux 系统管理工具 supervisor 详解
    Java项目:57 ssm011线上旅行信息管理系统ssm+vue
  • 原文地址:https://www.cnblogs.com/heymar/p/16518601.html