前端布局

一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center、verticle-align: center 是否可行呢？答案也是否定的。这两个属性只能用于行内元素，对于块级元素的布局是无效的。 在网页布局没有进入 CSS 的时代，排版几乎是通过 table 元素实现的，在 table 的单元格里可以方便的使用 align、valign 来实现水平和垂直方向的对齐，随着 Web 语义化的流行，这些写法逐渐淡出了视野，CSS 标准为我们提供了 3 种布局方式：标准文档流、浮动布局和定位布局。这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求，比如实现水平居中可以使用 margin: 0 auto，实现水平垂直同时居中可以如下设置： .dad { position : relative ; } .son { position : absolute ; margin : auto ; top : 0 ; right : 0 ; bottom : 0 ; left : 0 ; } .dad {

Bootstrap响应式前端框架笔记二——排版标签与类 Bootstrap中对h标签的字体和字号进行了微调，开发者除了可以直接使用这些标签进行标题的修饰外，还可以使用.h1到.h6类来将其他元素的字体进行修饰，示例如下： <p>h1 到 h6 标签的样式</p> <h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6> <hr /> <p>.h1 到 .h6 类的样式</p> <div class="h1">h1. Bootstrap heading</div> <div class="h2">h1. Bootstrap heading</div> <div class="h3">h1. Bootstrap heading</div> <div class="h4">h1. Bootstrap heading</div> <div class="h5">h1. Bootstrap heading</div> <div class="h6">h1. Bootstrap

在众多浏览器刚刚支持 CSS 的时候，我就已经开始使用它了，并且应该算是最早采用 CSS 进行页面布局的开发者之一了。那时候，浏览器之间的兼容性虽然不好，但我仍然热衷于尝试层出不穷的新特性。最近几年在 CSS 领域，我们看到了许多重大进展。其中，web 字体、渐变、阴影和媒体查询已经成为了我们日常工作流的必备工具。 然而，CSS 布局却发展缓慢。开发者们曾经尝试使用 display:table 和 display:inline-block 来布局，用来缓解绝对定位和浮动布局所带来的束缚。然而，这些方法并不标准，因此它们又产生了新的问题。 CSS 布局的未来看起来一片大好。在这篇文章中，我将会介绍 CSS 规范中一些激动人心的布局模块。在未来，我们可以更有效地实现网格布局，更轻松地创建等高列或者均匀分配内容到整个页面。类似 Adobe 的公司往往熟悉布局设计的细节，借助它们的帮助来制定相关规范，我们就能更准确地控制页面在浏览器上的显示方式，同时避免对页面内容的影响。 对于本文中示例，我已经在一个或多个浏览器上进行了测试，当然你也可以继续测试它们。这些布局模块中的一部分可能还处于发展的初期阶段，其具体实现未来可能还会有变化，所以，你也可以就相关问题反馈给制定标准的团队。这是我们的 web，我们应该热衷于参与到制定规范的工作中。 如果你在线上产品中使用本书中的这些技巧