更多关于Flexbox布局如何工作的 – 用大彩图和GIF动画解释

上一篇文章我们入门了几个基本的 Flexbox 属性:flex-directionjustify-contentalign-itemsalign-self

这些属性对于创建基本布局非常有用。 但是一旦你开始使用Flexbox构建网页的时候,你需要更深入学习Flexbox 属性,以发挥它的潜力。

现在让我们深入了解 Flexbox 的缩放 – 以及如何利用它来构建漂亮的自适应布局。

属性 #1: Flex-Basis

在上一篇文章中,我们主要了解了适用于容器元素的属性。这一次,我们专门介绍如何控制子元素(flex项)的大小。 继续阅读

Flexbox布局是如何工作的 – 用大彩图和GIF动画解释

Flexbox 布局将我们从CSS的邪恶(如垂直对齐)中拯救了出来。

很好,Flexbox 确实实现了这个目标。 但掌握新的弹性模型可能还是具有一点挑战性的。

所以,让我们以动图的形式来看看 Flexbox 的工作原理,这样我们可以使用它来构建更好的布局。

Flexbox 的基本原理是让布局变得灵活和直观。 继续阅读

2017年前端开发工具趋势

你有两年以上的前端开发经验吗?你会用 Sass 和 Autoprefixer 等高级的CSS辅助技能吗?你的 JavaScript 知识是否融汇贯通,你是否喜欢使用 Gulp , npm 和 jQuery ?如果是这样,根据 Ashley Nolan 的前端问卷调查,你是一个典型的前端开发工程师。

谎言,该死的谎言,统计数字和调查问卷

愚人码头注:谎言,该死的谎言,统计数字(英文:Lies, damned lies, and statistics),是一句著名的西方谚语。主要描述数字的说服能力,特别是用来讽刺一些使用统计数字支持、但毫无说服力的分析报告,以及人们倾向于贬低那些不支持其立场的统计结论。 维基百科

诸如此类的调查有助于你发现新工具和你的知识短板。至本文撰写时,本次问卷调查收到了5,254份答复,这是比大多数民意调查更具有样本价值。但是,调研结果是否代表真相还是应该抱审慎态度。。。

全球性的统计结果

这次问卷调查是全球性的,但将主要来自英语国家。 在其他地方开发或使用的流行工具可能被忽略。 继续阅读

一个健壮且可扩展的 CSS 架构所需的8个简单规则

这是一份清单,里面列出了在我多年的专业 Web 开发期间,在复杂的大型 Web 项目中学习到的有关管理 CSS 的事项。我多次被人问起这些东西,所以写一份文档记录下来听起来是个不错的主意。

我已经尽力尝试用简短的语言去解释它们了,然而这篇文章本质上还是长文慎入:

  1. 总是类名优先
  2. 组件代码放在一起
  3. 使用一致的类命名空间
  4. 维护命名空间和文件名之间的严格映射
  5. 避免组件外的样式泄露
  6. 避免组件内的样式泄露
  7. 遵守组件边界
  8. 松散地整合外部样式

介绍

如果你正在开发前端应用,那么最后你肯定需要关心样式方面的问题。尽管开发前端应用的技术水平持续增长,CSS 仍然是给 Web 应用赋予样式的唯一方式(而且最近,在某些情况下,原生应用也一样)。目前在市面上有两大类样式解决方案,即:

  • CSS 预编译器,已经存在很长时间了(如 SASSLESS 及其他)
  • CSS-in-JS 库,一个相对较新的样式解决方案(如 free-style 和很多其他的

两种方法间的抉择不在本文过多赘述,并且像往常一样,它们都有各自的支持者和反对者。说完这些,在下面的内容里,我将会专注于第一种方法,所以如果你选择了后者,那么这篇文章可能就没什么吸引力了。

主要目标

但更具体地说,怎样才能被称为健壮且可扩展呢? 继续阅读

降低样式计算的范围和复杂度

添加或移除一个DOM元素、修改元素属性和样式类、应用动画效果等操作,都会引起DOM结构的改变,从而导致浏览器需要重新计算每个元素的样式、对页面或其一部分重新布局(多数情况下)。这就是所谓的样式计算。

TL;DR

  • 降低样式选择器的复杂度;使用基于class的方式,比如BEM。
  • 减少需要执行样式计算的元素的个数。

计算样式的第一步是创建一套匹配的样式选择器,浏览器就是靠它们来对一个元素应用样式的。

第二步是根据匹配的样式选择器来获取对应的具体样式规则,计算出最终具体有哪些样式是要应用在DOM元素上的。在Blink(Chrome和Opera的渲染引擎)中,至少从现在来看,以上两步在时间消耗上是差不多的。 继续阅读

CSS3 Flexbox解决方案

1df97ee6-992d-4723-aa69-68730625dcc7

长期以来,CSS 一直缺乏合适的布局机制。 变形,动画,滤镜,对这门伟大的语言来说都很有用的补充的,但是都没有解决 Web 开发人员一直抱怨的的主要的看起来似乎是永恒的问题。

终于,感谢Flexbox ,我们有了一个解决方案。查看说明、DEMO及项目源代码:Flexbox解决方案

这个网站不是另一个CSS框架。相反,它的目的是展示曾经很困难甚至无法单独使用 CSS 能解决的问题,而现在使用Flexbox简单易用。随着最近发布的Internet Explorer 11和Safari 6.1,最新的Flexbox规格已经被每一个的现代浏览器支持(愚人码头注:浏览器的支持请客,你可以看 http://caniuse.com/#feat=flexbox)。 继续阅读

边玩游戏边学Flexbox 布局

513f757a-9117-4e87-ad86-141b90122a98

Flexbox 布局在很大程度上解决了网页布局问题。但是实际使用的时候还是有一定的难度,因为属性太多,应用非常灵活。

愚人码头注:Flexbox属性具体属性查看 CSS3 Flexbox属性可视化指南这篇文章。

这里给大家介绍一个边玩游戏边学习Flexbox 布局的网站,将枯燥的说明文档瞬间变成有趣、又更易理解的游戏学习。

FLEXBOX FROGGY:http://flexboxfroggy.com/#zh-cn

这里也从github上下了一个,作为镜像网页:http://www.css88.com/tool/flexboxfroggy/#zh-cn

CSS3 Flexbox属性可视化指南

a-vusial-guide-to-css3-flexbox-layout-and-properties

愚人码头注:

Flexbox 布局(国内很多人称为弹性布局)正式的全称为 CSS Flexible Box布局模块,它是CSS3新增的一种布局模式。它可以很方便地用来改善动态或未知大小的元素的对齐,方向和顺序等等。flex容器的主要特性是它可以调整其子元素的宽度或高度去填充可用的空白区,以最优的方式达到兼容不同屏幕大小。

很多设计人员和开发人员发现使用Flexbox来布局很容易,可以使用更少的代码,更简单的方式实现更复杂的布局,也使整个开发过程更为简单。Flexbox布局算法不同于那些基于垂直或水平的块或内联布局。Flexbox布局应该用于小的应用程序组件之中,而新的CSS 网格布局模块正在兴起,来处理大规模布局。

本指南将以可视化的方式重点介绍 flex 属性是如何影响布局的,不是解释 flex 属性是如何工作。 继续阅读

移动前端不得不了解的HTML5 head 头标签(2016最新版)

html5-head

HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性。移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta,link等标签的功能属性显得非常重要。这里整理了一份 <head> 部分的清单,让大家了解每个标签及相应属性的意义,写出满足自己需求的 <head> 头部标签,可以很有效的增强页面的可用性。

注:去年整理过移动前端不得不了解的html5 head 头标签,随着时间和浏览器厂商的升级,现在看起来似乎有些过时了。所以重新整理了一下。增加了新的内容,及过时的一些提示,同时增加了部分桌面端浏览器的一些说明。

HTML基本的头部标签

下面是HTML基本的头部元素:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!--移动端的页面这个可以忽略,具体可以查看本文Internet Explorer浏览器部分-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--具体可以查看本文 为移动设备添加 viewport 部分-->
    <!-- 以上 3 个 meta 标签 *必须* 放在 head 的最前面;其他任何的 head 内容必须在这些标签的 *后面* -->
    <title>页面标题</title>
    ...
</head>

其中

<meta http-equiv="x-ua-compatible" content="ie=edge">

在桌面开发的时候可以让IE浏览器以最新的模式渲染页面,具体可以查看本文Internet Explorer浏览器部分。
如果你的页面确定只在桌面浏览器中运行,那么

<meta name="viewport" content="width=device-width, initial-scale=1">

也可以省略。

DOCTYPE

DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

继续阅读

CSS计数器(counter)入门

7jur9kmmsuuwej7cexpk_getting-started-with-css-counters

作为一名WEB开发者,恰当的表示信息是一项重要的工作。正恰当的显示信息一种最常见的方式是通过层次结构表示,回答“先发生什么?”这个问题。

层次可以通过对对象编号表示。在CSS中,除了有序列表<ol></ol>,没有其他元素允许我们增加顺序。如果我们想显示数字,我们不得不做一些预处理。 跟踪索引,确保自动递增等。类似这样:

<ul class="numbered-list">
    <?php for ($i = 1; $i <= $posts->total_count; $i++): ?>
    <li class="numbered-list__item">
        <span class="numbered-list__counter">
            <?php echo $i ?>
        </span>
        <!-- Remaining markup -->
    </li>
    <?php endfor ?>
</ul>

这是一个很好的点子,但它有其局限性。如果我们想使用字母,罗马数字,希腊字符等作为索引序号,都需要使用自定义的库来实现。 继续阅读