专栏首页蚂蚁开源社区前端设计,CSS 常用布局解决方案

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

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

1、水平居中布局

inline-block + text-align

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

table + margin

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

absoulte + transform (relative + relative)

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

flex + justify-content

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

2、垂直居中布局

table-cell + vertical-align

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

absolute + transform

缺点:兼容性问题;

flex + align-items

缺点:兼容性问题;

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

float + margin

优点:兼容性较好;

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

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

float + overflow

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

table

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

flex

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

4、多列等分布局

float

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

table

优点:结构跟样式解耦;

flex

缺点:兼容性问题;

本文分享自微信公众号 - 蚂蚁开源社区(mayi_zzfriend),作者:蚂蚁技术小编

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-09-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于H5唤醒APP的功能实现(千辛万苦啊!)

    整理了一下,定时器还是不好用,这也是没办法的办法了,网上大多的教程都是定时器,不是定时器的我又不明白人家啥意思,而且大部分都是安卓的,ios就是坑。

    用户5997198
  • 【小技巧】CSS之响应式Web设计(横屏/竖屏提醒)

    结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

    用户5997198
  • CSS之响应式Web设计(横屏/竖屏提醒)

    结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

    用户5997198
  • 总结 | 云脑科技徐昊:AutoML 工程实践与大规模行业应用 | AI研习社104期大讲堂

    AI 科技评论按:AutoML 是今年的机器学习的热点,该技术潜力很大,在工程实践能够产生巨大的价值。现阶段,业界主要在探讨 AutoML 的难点与方向阶段,目...

    AI科技评论
  • 列表,表格与媒体元素

    一.列表   列表就是信息资源的一种展示形式  1.列表及其应用    1)无序列表      无序列表由<ul>标签和<li>标签组成,使用<ul>标签作为无...

    房上的猫
  • 可能是第二好的 Spring OAuth 2.0 文章,艿艿端午在家写了 3 天~

    在《芋道 Spring Boot 安全框架 Spring Security 入门》文章中,艿艿分享了如何使用 Spring Security 实现认证与授权的功...

    芋道源码
  • 视频 | NeurIPS 2019分享:清华大学孙富春组提出全新模仿学习理论

    在上周四的第一期线上分享中,清华计算机系博士后黄文炳为大家详细解读了大会接收的这篇 Spotlight 论文《Imitation Learning from O...

    机器之心
  • HTML5 学习总结(一)——HTML5概要与新增标签

    一、HTML5概要 ? 1.0、写在最前面 1.0.1、行业前景 https://www.lagou.com/ http://www.51job.com/ ? ...

    张果
  • Web前端面试宝典(最新)

    html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;

    半指温柔乐
  • 【快学SpringBoot】快速上手好用方便的Spring Cache缓存框架

    缓存,在开发中是非常常用的。在高并发系统中,如果没有缓存,纯靠数据库来扛,那么数据库压力会非常大,搞不好还会出现宕机的情况。本篇文章,将会带大家学习Spring...

    Happyjava

扫码关注云+社区

领取腾讯云代金券