随笔分类 -  html/css

摘要：Flexbox是spankin新推出的一种CSS布局模块，拥有完美的浏览器兼容性！它可以轻易做到垂直居中、重新排序、布局的动态伸展与收缩。Flexbox兼容性参考点击查看基本教程介绍（请用电脑上的现代浏览器查看演示）提示：请将浏览器升级到最高版本，确保完整观看工作演示。创建flex容器在创建任意flexbox布局之前，先要创建一个flex容器：把display属性设定为flex。在Safari中，还需要添加-webkit前缀。.flexcontainer { display: -webkit-flex; display: flex;}将 flex项目排成一行Flex项目是flex容器的... 阅读全文

摘要：Preface如果只是要写程序，那的确是不需要这么麻烦，上来直接看Syntax，动手写上至少300行代码，做上3个应用程序，这门语言你也就差不多会用了，接下来不过就是模式，特殊的地方以及记住一些函数而已。但是如果你想更深刻的了解这门语言为什么这么设计，想知根知底的时候，那么回顾历史是最好的选择。而且经过这么多年对于学习本身的研究，如果想要精通一样东西，研究促使它诞生的问题会更加准确的明白它的缺点和优点，以及理解它为什么会是这个逻辑，怎么改善等等。而研究历史的时候，有时候也会发现，因为当年某些限制条件无法实现的更好的解决方案，现在正是实施的时候。Style Sheets’ History后面就像 阅读全文

摘要：byzhangxinxufromhttp://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=3591一、锚点是什么锚点就等同于火影中的“飞雷神之术”，我们先看百科中锚点的解释：使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。再看看“飞雷神之术”的解释：日本动漫《火影忍者》中时空术的一种，S级。利用标记完成空间穿梭。都是做标记，然后快速定位。 阅读全文

摘要：说起模块化，也许我们首先想到的是编程中的模块设计，以功能块为单位进行程序设计，最后通过模块的选择和组合构成最终产品。把这种思想运用到页面构建中，也已经不是什么新鲜事。相信很大一部分页面构建工程师都经历了这样几个阶段：第一阶段是在一个css文件中把多个页面按自己的习惯顺序从上往下编写样式，基本不考虑有无公用样式，以完成设计呈现为首要目的；第二阶段是提取不同页面中的通用样式，如公用颜色、图标、按钮等，实现一些基本元素的复用；第三阶段是提取公用功能模块，如导航、版权信息等，实现部分公用模块的复用。 刚才描述的第三阶段的方法已经包含了模块化思想，不少团队也都有一套成熟的模块化开发方案。而我第一次听说. 阅读全文

摘要：google之前出了javascript规范指南，中文翻译传送门在此，现在有了html/css规范指南，明河开始翻译时版本是2.1。后续如果google有新的内容补充，明河也会跟进。常规样式规则协议引入的assets资源文件（js、css、图片文件）忽略协议（http:, https:），比如：不推荐的写法：<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>推荐的写法：<script src="//www.google.com/js/ 阅读全文

摘要：On having layout本文修订中当前版本：Rev. 7 2006–05–17http://www.satzansatz.de/cssd/onhavinglayoutrev07-20060517.html修订历史http://www.satzansatz.de/cssd/layoutchangelog.html各种语言版本目录介绍Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其“layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为“尺寸bug(dimensional bugs)”，意思是这些 bug 可以通过赋予相 阅读全文

摘要：上篇中讨论了各种已有的布局实现。仔细分析各种布局的技术实现，可以发现下面三种技术被经常使用：浮动 float负边距 negative margin相对定位 relative position这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案。尝试之路考虑以下DOM结构：<div id="page"> <div id="hd"></div> <div id="bd"> <div class="main">< 阅读全文

摘要：来看一个经典的三栏布局：从内容出发（渐进增强的核心思想），一份合理的HTML结构如下：<div id="page"> <div id="hd"></div> <div id="bd"> <div class="main"></div> <div class="sub"></div> <div class="extra"></div> </div> 阅读全文

摘要：一、现象描述真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：<input /> <input type="submit" />间距就来了~~我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题：.space a { display: inline-block; padding: .5em 1em; background-color: #cad5eb;}<div class="space"> <a href=&qu 阅读全文

摘要：你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器，包括我们最头痛的浏览器兼容性问题。掌握了它们，才能真正领略css的巨大灵活性。1. ** { margin: 0; padding: 0; }星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元素的margin和padding设置为0。 *选择符也可以在子选择器中使用。#container * { border: 1px solid black; }上面的代码中会应用于id为container元素的所... 阅读全文

摘要：尽管现代浏览器已经支持了众多的CSS3属性，但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性，如border-radius、box-shadow或者transform等。它们有良好的文档、很好的测试并且最常用到，所以如果你最近在设计网站，你很难能脱离它们。但是，隐藏在浏览器的大宝库中是一些高级的、被严重低估的属性，但是它们并没有得到太多的关注。或许它们中的一些应该这样(被无视)，但是其它的属性应该得到更多的认可。最伟大的财富隐藏在Webkit的下面，而且在iPhone、iPad和Android apps的时代，开始了解它们会灰常有用。就连Firefox等使用的Gecko引擎，也提 阅读全文