当前位置:Gxlcms > html代码 > 常见css水平自适应布局_html/css_WEB-ITnose

常见css水平自适应布局_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:42人阅读

  • 左右布局,左边固定,右边自适应布局
    1. BFC方法解决

          div + css宽度自适应(液态布局)             
      这是左边部分
      这是左边部分
      这是左边部分
      这是中间部分

      原理:给左侧添加

      overflow: hidden;将div改变成BFC模型,display:block;标签的dom的宽度是自适应占满全部的
    2. 用position:absolute;处理

          div + css宽度自适应(液态布局)             
      这是左边部分
      这是左边部分
      这是左边部分
      这是中间部分

      一般以父元素未计算元素,父元素一般有一定的宽度,绝对布局是相对父dom元素的,如果相对父dom元素无效,可以将父dom元素的postion:relative相对出来

    这个写法兼容ie6以上的版本

    1. 用table布局

          div + css宽度自适应(液态布局)             
      我是左边我是右边

      table的布局的其实实现原理也部分设置到BFC的特性

    1. display:table 仿table布局

          div + css宽度自适应(液态布局)             
      这是左边部分
      这是左边部分
      这是左边部分
      这是中间部分
      我是左边我是右边

    2. css3解决方案,主要利用弹性盒模型

          div + css宽度自适应(液态布局)             
      这是左边部分
      这是左边部分
      这是左边部分
      这是中间部分

      css3给我们提供的很多css2中很多很繁琐的问题,在css3为我们提供了弹性盒模型,之前的css3标签是display:box之后版本为flex,

      它的特性就是:在子区域内添加任意数量的元素水平和竖直排序,子元素可以设置标签flex:1 控制所占的百分比,水平标签一般设置flex-direction:column 这种写法兼容最新版,老版本的是box-orient:horizontal

    人气教程排行