网赚妈妈

 找回密码
 立即注册
搜索
查看: 251|回复: 20

[网赚游戏] 前端设计,CSS 常用布局解决方案

[复制链接]
  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

    发表于 2018-11-5 22:08:26 | 显示全部楼层 |阅读模式

    记录下 CSS 常用布局的解决方案,对于需要高兼容性的布局可以使用基于 posistion 属性的布局,table 布局方式也经常用到。还有基于margin 和 float 的传统布局方式、利用 BFC 的布局方式和 CSS3 的弹性布局 flex 的布局方式。具体选用哪一种可以依据实际业务加以变通和修改。

    vxdD05HLzQ780zK5.jpg

    前端设计,CSS 常用布局解决方案

    1、水平居中布局


    inline-block + text-align

    优点:兼容性好;缺点:子容器的内容居中需要额外的 text-align 属性;

    tB85fJ5ByYB5CZbb.jpg

    inline-block + text-align

    table + margin

    优点:兼容性好,只用关心子元素的样式属性;解释:display:table 属性使得元素具有同 inline-block 一样的特性,容器大小取决于内容大小,并且具有宽高;

    sV9E0GvRu93i95Mu.jpg

    table + margin

    absoulte + transform (relative + relative)

    缺点:兼容性问题;(relative + relative) => 父元素设置 relative 向右平移 50%, 子元素设置 relative 向左平移 -50%,relative 均是相对于自身宽度进行移动;

    O25OcOKRkaASddo5.jpg

    absoulte + transform (relative + relative)

    flex + justify-content

    优点:只需要对父容器进行设置;缺点:兼容性问题;

    tFIaoTtfo8zo8YtF.jpg

    flex + justify-content

    2、垂直居中布局


    table-cell + vertical-align

    优点:兼容性好;解释:vertical-align 可以作用于 inline、inline-block、table-cell 元素上;

    Ri8K9RcW3cUR911k.jpg

    table-cell + vertical-align

    absolute + transform

    缺点:兼容性问题;

    Mh7Z6GGBe4F6e49z.jpg

    absolute + transform

    flex + align-items

    缺点:兼容性问题;

    dyGM7N4z4kN79y73.jpg

    flex + align-items

    3、一列定宽,一列自适应(其他类似的类型都可以由此衍生)


    float + margin

    优点:兼容性较好;

    VhspZSBFF1wZf6US.jpg

    优点:兼容性较好;

    float + margin + (fix) 解决IE6下的3像素问题

    优点:兼容性较好;解释:防止子元素清除浮动带来的问题,使用 position:relative; 来提高元素层级;

    Y4JE07z7a0HlZbne.jpg

    float + margin + (fix) 解决IE6下的3像素问题

    float + overflow

    缺点:兼容性问题;解释:利用 BFC 模式使自适应部分不受 float 的影响;

    TLgi4qHUBb2gV8gZ.jpg

    float + overflow

    table

    缺点:代码量较多;解释:display:table; 默认大小为内容大小;display:table-cell 不能设置 margin 属性;table-layout:fixed; 可以加速渲染,布局优先,固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。;

    NOL771LZ3MZ1J7AL.jpg

    table

    flex

    缺点:性能一般;解释:flex 一般用于小范围布局,防止出现性能问题;

    APHotsxORoFoTsJH.jpg

    flex

    4、多列等分布局


    float

    优点:耦合性交大;解释:使用 box-sizing:border-box; 让浏览器以 IE 的怪异模式解析“盒模型”,即元素尺寸为 “content + padding + border” 三者的和;

    oQV6ffX9Yk9eYek6.jpg

    float

    table

    优点:结构跟样式解耦;

    DS399qGABFbDdGXB.jpg

    table

    flex

    缺点:兼容性问题;

    GC6urIrJJe60V3Af.jpg

    flex

    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-11-5 22:09:20 | 显示全部楼层
    flex现在的兼容性已经很好了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-11-5 22:12:17 | 显示全部楼层
    支持东哥,打倒假疫苗
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-11-5 22:15:53 | 显示全部楼层
    不错
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-11-5 22:18:52 | 显示全部楼层
    mark
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-11-5 22:22:19 | 显示全部楼层
    老文章了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-11-5 22:25:16 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-11-5 22:28:20 | 显示全部楼层
    flex性能低?
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-11-5 22:31:54 | 显示全部楼层
    关注了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-11-5 22:34:22 | 显示全部楼层
    站在巨人的肩膀上,我使用bootstrap
    回复 支持 反对

    使用道具 举报

    xml|2.xml|QQ3014497968|文章发布|签到|小黑屋|网赚论坛-致富项目网络赚钱平台 |网站地图

    GMT+8, 2019-10-17 21:41 , Processed in 0.177029 second(s), 15 queries , File On.

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表