布局

CSS Grid和Flexbox解决实际的布局问题

就目前为止,CSS的Grid和Flexbox结合将是解决布局的最佳方案。虽然浏览器对CSS Grid和Flexbox的属性未完全支持,但对于实现布局而言,这已是一种非常完美的结合。如果CSS Box Alignment Module Level3能得到更好的支持的话,那么对于Web的布局将是一种福音。就前面学习的CSS GridCSS Flexbox,我们对CSS的Flexbox和Grid有了很深入的了解。特别是在《使用CSS Grid和Flexbox制作Card》一文中,已经见识到了CSS Grid和Flexbox结合对布局的巨大优势。那么这篇文章,将再一次向大家展现CSS Grid和Flexbox的强大之处。那是因为他们的结合将解决布局的实际问题。

理解CSS布局和BFC

CSS布局中有一些概念,一旦理解了这些概念,就能真正的提高你的CSS能力。这篇文章主要介绍的是关于块格式化上下文(Block Formatting Context),也就是大家俗称的BFC。你可能从未听说过这个术语,但只要你曾经使用过CSS布局,你就可能知道它是什么。理解BFC是什么,它有什么功能,以及如何创建一个BFC是非常有用的,这些能帮助你更好的理解CSS布局。在这篇文章中,我将会通过几个很熟悉的示例来解释BFC。我还会介绍一个新的display的值,当你理解了BFC是什么的时候,你才能了解为什么需要这个值。也就能更好的理解它的真正意义。

再聊移动端页面的适配

伟德19463331圈真乱,这话一点不假。但乱也乱的好处,乱则生变,有变化才有进步。今天还是老调重谈,聊聊移动端页面的适配。因为对于一枚伟德19463331而言,天天和页面打交道(H5页面),那么布局的活总是少不了,这也将面临不同终端的适配问题。不知道你是否和我一样,页面布局总是或多或少会有一些蛋疼的事情发生。如果是的话,建议你花点时间阅读完下面我扯蛋的东东。

CSS Grid Layout一些有趣的事情

几周前,我举办了一个有关于CSS Grid Layout的研讨会。我和大多数人一样,对这个话题也很陌生,我在准备PPT和DEMO的时候学到了很多东西。我决定和大家一起分享一些我觉得其中特别感兴趣的东西。希望大家对这些也会感兴趣。

学习CSS Grid

CSS Grid是一个强大的工具,它允许在Web上创建二维布局。这一篇学习CSS Grid的指南,通过图形的方式帮助您更好的理解和学习CSS Grid。花时间整理和阅读这篇文章都是非常有意义的。我们要特别感谢Mozilla开发人员W3C规范中有关于CSS Grid的资源。同时也需要特别感谢@Jen Simmons@Rachel Andrews两位女士,她们是CSS Grid的主要贡献者,可以说要是没有她们,就没有今天的CSS Grid。

纯CSS实现瀑布流布局

瀑布流布局有一个专业的英文名称Masonry Layouts。瀑布流布局已经有好多年的历史了,我最早知道这个名词的时候大约是在2012年,当时Pinterest网站的布局就是使用的这种流式布局,简言之像Pinterest网站这样的布局就称之为瀑布流布局,也有人称之为Pinterest 布局。

CSS Exclusions:让布局变得更有意思

最早接触到CSS Exclusions名词是在2013年@Peter Gasston写的《The future of CSS layouts》(译文点击这里)。至于“Exclusions”译成中文不知道使用什么词更为合适,文章下面暂且直接使用英文,或许更好些。

实现两列等宽布局的几种方法

当你想实现两列等宽,左边一些内容,右边一些内容时,基本上都需要在一个容器的内部设置两个高度相等的列。每一面正好占用容器的一半,并且可以明显的区分他们。在CSS中有很多方法都可以实现,那么来看看如何用多种方法实现这种两列等宽布局。

CSS布局——左定宽度右自适应宽度并且等高布局

今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题,需要解决,花了点时间写了几个DEMO,放上来与大家分享受。那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧:
  1. 左侧固定宽,右侧自适应屏幕宽;
  2. 左右两列,等高布局;
  3. 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高)
  4. 要求不用JS或CSS行为实现;
仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样。但是你仔细看后你会觉得不是那么回事:

CSS布局——960gs

说起CSS的布局,有太多了,现在常见的有固定布局流体布局弹性布局,有关于这三种常见的布局,Kayla Knight在《Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?》一文中做出了详细的对比介绍,而且Matthew James Taylor也给我们制作了很多个这方面的实例,大家还可以看看Float-less CSS layout带来的这三个类型的布局效果。随着CSS3Media Queries出现,给我们的布局带来一种全新的体验——适应于多媒价的布局响应

页面

返回顶部