《CSS Mastery》读书笔记（4）
第七章 布局
CSS得到一个不好的名声，比较难懂， 一方面由于浏览器的不兼容，另一方面由于网上大量的技巧，每个CSS作者都可以有自己的方法去创建多列布局， 新的CSS开发者只是使用一种方法而不去理解其原理。这样的情况由于CSS框架的出现而变得更加严重，其通过创建标记和样式化表现的耦合来达到简化的目的， 这正是表格布局一开始被抛弃的原因， 这种黑箱实现的CSS也许可以快速得到结果，却最终阻碍开发者理解CSS的语言和作用去实现变化。
所有的CSS布局技巧依靠三个基本概念，positioning， floating， and margin manipulation， 不通过的技巧真的很不同， 如果你理解核心概念， 这就很容易创建你自己的布局，事实上， 布局是CSS最容易的部分，调整才需要耗时间。
这个章节，你将学习：
• Horizontally centering a design on a page
• Creating two- and three-column float-based layouts
• Creating fixed-width, liquid, and elastic layouts
• Creating equal height columns
• CSS frameworks versus CSS systems
==规划布局==
当你把设计转化成能工作的模板， 直接开始制作页面和切图是很吸引人的， 但是你会发现很快就被逼入死角， 相反， 一点规划的工作可以拯救很多将来的麻烦。 就像老话说的：测量两次，裁剪一下。
创建可扩展和以维护的CSS系统的第一步是审查设计，找出重复的模式， 这些可以使页面中结构的模式， 或者某个元素在整个站点重复出现的方式。 你不可以过于关注视觉表现， 相反着重在结构和意义。 这时我喜欢做的是打印出整个设计， 发现模式然后草稿出每页的mark-up记录， 我也见过人们标注他们的Photoshop文档， 或灰盒子设计。
开始把你的页面分割出主要的结构区域，譬如： 容器wrapper， 页头header， 内容content area， 页脚footer。 这些区域整个站一致， 很少改变。 用一个建筑学的比喻， 你可以把它们想象成建筑的外墙。
然后，把注意力集中到内容区 content area， 开始创建出格子结构（grid structure）有多少不同的内容区呢？它们不同之处？内容区是否真的不同， 或者从布局角度来看可被看做同一种形式？大部分设计只有几个独立的内容区，找它们共享的特征而不是视觉表现。可以想象它们是建筑的承重墙。
最后，你需要开始看一下不同的内容区里面的不同的布局构造， 你是否需要2列，3列还是4列去呈现？ 不同之前的步骤， 这些布局构造比较灵活而且每页不同， 你可以想象它们像分隔墙， 这几个步骤从底层帮你规划了页面， 现在拿出纸张和彩笔， 开始画结构图的细节尺寸。
结构准备好，你就开始转到不同种类的内容上。 这是新闻故事，文章，还是新闻简报。 每个框给一个有意义的名字。 看他们之间的关系， 可能最后发现，新闻故事和新闻简报差别很少， 这样把他们组合成一个内容类型可能更合理。
通过观察每个内容块如何构造， 寻找不同构造类型之间的模式。 例如，如果注意到文章和新闻故事都有个显眼的标题标题和脚注， 那么把他们鉴别出来。标题和脚注看起来不同没有关系， 你可以根据上下文去样式化。 错误信息，查询框， 菜单项都是照此处理， 保持class名称尽量一般化， 然后根据上下文来样式化它们。
一旦模式和命名规范整理好， 就可以定义将要使用的元素，例如一个无序列表代表一串链接， 一个故事可以使一个div 和h2, 一个paragraph， 和一个anchor元素， 预先和几个同事一起做比匆匆忙忙做简单些。 一开始记录好颜色代码， 尺寸和其他会有帮助， 你也可以记录在设计的打印稿上来快速参考。
设置基础
我们先看看设计一个三列的博客模板，
By analyzing the design, it’s clear that we’re going to need a wrapper element to center the
design, along with a header, content area, and footer. The markup would, therefore, look
something like this:分析设计之后， 很清楚我们需要一个容器元素使之居中， 然后添加一个header， content area， 和footer， markup会如下所示：
<body>
<div class=”wrapper”>
<div class=”header”>
<!—Your header content goes here –>
</div>
<div class=”content”>
<!—Your page content goes here –>
</div>
<div class=”footer”>
<!—Your footer content goes here—>
</div>
</div>
</body>
至少三个区域要在容器内， 那么就可以开始样式化容器。
用Margin来置中
长文本难以阅读，现在显示器尺寸不断变大， 屏幕的可读性越来越重要。 解决方法之一就是让设计居中，居中的设计只占据屏幕一部分，而不是占据整个屏幕， 这样就创建比较短且容易阅读的行。
比如说你有个布局，希望将div容器居中于屏幕
<body>
<div class="wrapper">
</div>
</body>要做到这点，只要定义div的width属性，并且设置水平margin为auto：
.wrapper{
width:920px;
margin:0 auto;
}
这个例子中，我决定将div容器中的宽度固定为920 pixels， 所以其在1024x768解析度的屏幕是很合适的，但是，你也可以设置宽度为body的百分比， 或比例与text的尺寸而使用em。
这在所有现代浏览器中有效， 但是在IE5.X和IE6 兼容模式不支持margin：auto声明， 幸运的是，IE会误认为text-align:center, 让所有东西居中， 而不只是文本。 你可以使用这种方法是所有东西居中， 包括容器div， 然后重新把容器内容左对齐。
body{
text-align:center;
}
.wrapper{
width: 920px;
margin: 0 auto;
text-align: left;
}
使用text-align属性来居中是一个hack，但是并没有害处， 对站点没有不良影响， 容器现在IE和其他符合标准的浏览器都会居中。
==浮动居中==
使用CSS居中有不同的方式， 包括绝对定位和负值margin， 发现基于浮动的布局是最容易使用的方法，顾名思义，在基于浮动的布局中， 只需要设置希望定位的元素的宽度， 然后将它们向左或向右浮动。
因为浮动的元素不再占据文档流的空间， 它们就不再对包围它们的框块产生影响， 为了解决这个问题，需要对布局中各个点上的浮动元素进行清理，非常常见的做法是， 不对元素进行连续的浮动和清理，而是浮动几乎所有东西，然后再整个文档的“战略点”，比如页脚上进行一次或两次清理。
两列浮动布局
<div class="content">
<div class="primary">
<!-- main content goes here –>
</div>
<div class="secondary”>
<!--navigation and secondary content goes here –>
</div>
</div>整个设计的第二内容区，包括导航，会靠近页面的左边， 主内容区靠页面右边， 但是代码顺序，我选择把主内容区放在第二内容区之上，首先主内容区对于页面最重要，第二方便屏幕阅读器用户。
创建基于浮动的布局，一般将两列都向左浮动，然后使用margin或padding 在两列之间创建一个隔离带。 使用这样的方法，列的可用空间可以包得很紧，没有喘息的空间， 如果浏览器表现良好的话， 这不是问题，可是差劲的浏览器会打乱紧密的布局，迫使一列走到另一列下面。
在IE上会发生这种情况， 因为ＩＥ考虑元素的内容尺寸， 而不是元素本身尺寸。在符合标准的浏览器中，如果元素内容太大， 它只会超出框之外， 但是如果在IE上，如果元素内容过大， 整个元素会扩张， 这个可以因为小事而引发， 比如文字设置为Italic。如果这发生在紧密的布局中，那么就没有足够空间可以让元素并排出现，浮动元素之一就会走下面去， 其他IE bug， 像3像素文本偏移bug和双空白边浮动bug，也会导致浮动元素下降。
要放置布局被打破， 需要避免塞太多浮动布局元素到它的容器中， 与其使用水平margin 或 padding来创建分离带， 你可以用一个元素向左浮动，一个元素向右浮动来创建一个隔离带， 如果一个元素尺寸意外增加了几个pixel， 那么它只会填入隔离带，而不是马上耗尽水平空间向下降。
实现这个布局很直观， 你只需设置每个列想要的宽度，然后将次要内容左浮动，主要内容右浮动，你可能需要加一点padding到主内容放置它里面的文字紧贴盒子的右边缘， 你注意到我为每个浮动元素添加了display：inline，这是个预防措施，防止IE里面double margin 浮动bug，下面章节会讲到。
.content .primary {
width: 650px;
padding-right: 20px;
float: right;
display: inline;
}
.content .secondary {
width: 230px;
float: left;
display: inline;
}因为总宽度是920像素， 所以两个浮动元素之间留出20像素的隔离带， 前面提过，这样做可以防止因内容膨胀而出现浮动元素下降。
因为这些元素浮动后，不占用文档流的空间， 导致footer上升，要防止它，你需要对浮动元素的父元素（这个例子是content）添加overflow：hidden来实现。
.content {
overflow: hidden;
}And there you have it: a simple two-column CSS layout
You’ll notice that rather than creating two separate elements called primary-content and
secondary-content, I’ve simply used the terms primary and secondary. I’ve then used the fact
that these two elements are nested within the content element to create the association. This has
a couple of benefits. First off, it means that you don’t have to keep creating new class names for
every element you want to style. Instead, you can use the cascade to help you out. Secondly, and
arguably more importantly, you can use the same primary and secondary classes more than
once, creating a very flexible naming system. For instance, say we wanted to create a threecolumn
layout instead of just a two-column one.
三列浮动布局
转载于:https://www.cnblogs.com/grkin/p/3538462.html
《CSS Mastery》读书笔记（4）相关推荐
- Think in Java第四版 读书笔记9第15章 泛型
Think in Java第四版 读书笔记9第15章 泛型 泛型:适用于很多很多的类型 与其他语言相比 Java的泛型可能有许多局限 但是它还是有很多优点的. 本章介绍java泛型的局限和优势以及ja ...
- 《Java编程思想》读书笔记
前言:三年之前就买了<Java编程思想>这本书,但是到现在为止都还没有好好看过这本书,这次希望能够坚持通读完整本书并整理好自己的读书笔记,上一篇文章是记录的第十七章到第十八章的内容,这一次 ...
- 深入分析Java Web技术内幕读书笔记（一）浅析Web请求过程
随着Web技术的快速发展,互联网的网络架构已经从传统的C/S架构转变为B/S架构,B/S架构相较于传统的C/S架构,有诸多优点,例如:提供了统一的操作方式,简化了用户的学习成本:便捷的开发方式大大提高 ...
- 《Java编程思想》读书笔记 第十三章 字符串
<Java编程思想>读书笔记 第十三章 字符串 不可变String String对象是不可变的,每一个看起来会修改String值的方法,实际上都是创建一个全新的String对象,以及包含修 ...
- Think in Java第四版 读书笔记10 第16章 数组
Think in Java第四版 读书笔记10 第16章 数组 数组和容器很像 但他们有一些差别 16.1 数组为什么特殊 数组与容器的区别主要在效率和存储类型 效率:数组是简单的线性序列 使得数组的 ...
- 鸟哥的linux私房菜-基础学习篇 读书笔记
从事linux工作一年多,算是能够熟练运用linux服务器,但仍觉得自己对Linux的原理,理论缺乏空洞,潜下心来认真阅读尘封的鸟哥经典,知识点很全,收获颇多,实践与知识结合,知行合一,对linux开 ...
- Unreal Engine 4 学习总动员读书笔记
Unreal Engine 4 学习总动员读书笔记 参考<Unreal Engine 4 学习总动员>,按照里面的录制的视频一步一步的操作,并将操作的流程和关键截图保存下来,方便后面的再次 ...
- 鸟哥的LINUX私房菜 基础学习篇 读书笔记 -- 第零章 计算机概论 （一）
鸟哥的LINUX私房菜 基础学习篇 读书笔记 -- 第零章 计算机概论 (一) 第零章 计算机概论 0.1 电脑:辅助人脑的好工具 0.1.1 计算机硬件五大组成部分 0.1.2 一切设计的起点: C ...
- 深入分析Java Web技术内幕读书笔记（二）浅析DNS域名解析过程
上一篇文章<浅析Web请求过程>讲述的是如何发起HTTP请求,对于请求发起过程中很重要的一个步骤--DNS解析过程的描述是一带而过,本篇文章将跟着DNS解析过程来分析域名是如何解析的. 一 ...
- 《Java核心技术卷一》读书笔记
<Java核心技术卷一>读书笔记 对象与类 类 类是构造对象的模板.蓝图.由类构造对象的过程称为类的实例. 对象的数据叫做实例域,操作数据的过程叫做方法 对于每个特定的类实例(对象)都要一 ...
最新文章
- github充当服务器_如何创建充当链接HTML按钮
- stanford coursera 机器学习编程作业 exercise 3（逻辑回归实现多分类问题）
- SQL SERVER DBCC 命令集整理
- shell基础二：查找技巧,find及xargs的使用
- select默认文字，不出现在下拉选项中
- optee中User TA的加载和运行
- 上一局APP玩边画边猜，第1次见人使用道具，我的游戏体验上升了
- 图像数据格式基础知识
- 计算机函数公式一等奖怎么算,信息技术应用 用计算机画函数图象教案设计（一等奖）...
- 带注释的控制器– Spring Web / Webflux和测试
- 《 Oracle 10g-11g XTTS迁移方案》.pdf
- PHP+MYSQL+AJAX实现每日签到功能
- shellscript 07 正则表达式介绍
- 前端----JavaScript
- 苹果电脑如何改id？这篇文章帮你搞定
- 【所见即所得】数据分析最有用的25个 Matplotlib图【附代码】
- SSD 输入图片尺寸、比例
- 推荐一款适合苹果电脑小白使用的BT下载器
- 零基础该如何学好3D建模，学些什么，达到什么标准才能入行？
- PS 基础知识 CMYK全称是什么