O'REILLY_Chap.11_布局和定位

O’REILLY_Chap.11_布局和定位

本博客的FollowMeReading系列初衷是在线的读书笔记. 为方便后期查阅, 故写成博客形式, 使用关键字查询便可以快读的找到相关的内容.

FollowMeReading系列所选的书籍一般选自O’REILLY或Apress出版社, 尽量保证笔记内容的权威性.

FollowMeReading系列的博客标题格式为: <书名> 出版社章节数章节名, 方便大家在纸质版书籍中查找.

FollowMeReading系列博文中的内容大部分是原文, 非原文部分前面将有’博主’字样提醒.

感谢作者 Eric Freeman & Elisabeth Robson
感谢翻译 徐阳 丁小峰

本博客由@scott编写. 若转载此文章, 请注明出处和作者

正文

原文

BULLTE POINTS(要点):

• 浏览器使用流在页面中放置元素.

• 块元素从上向下流, 各元素之间有一个换行. 默认的, 每个块元素会占浏览器窗口的这个宽度.

• 内联元素在块元素内部从左上方流向右下方. 如果需要多行, 浏览器会换行, 在垂直方向上扩展外围块元素, 来包含这些内联元素.

• 正常页面流中两个块元素上下相邻的外边距会折叠为最大外边距的大小, 或者如果两个外边距大小相同, 则会折叠为一个外边距.

• 浮动元素会从正常流中取出, 浮动到左边或右边.

• 浮动元素放在块元素之上, 不会影响正常的页面流. 不过, 内联内容会考虑浮动元素的边界, 围绕着这个浮动元素.

• clear 属性用来指定一个块元素左边或右边(或者左右两边)不能有浮动元素. 设置了 clear 属性的块元素会下移, 直到它旁边没有块元素.

• 浮动元素必须有特定的宽度, 不能设置为auto.

• 流体布局是指, 扩展浏览器窗口时, 页面中的内容会扩展以适应页面.

• 冻结布局是指, 其中内容的宽度是固定的, 不会随着浏览器窗口扩展或收缩. 这有一个好处, 可以对设计提供更多控制, 不过也要付出代价, 这样就不能有效的使用浏览器宽度了.

• 凝胶布局是指, 其中内容宽度是固定的, 但是外边距会随着浏览器窗口扩展或收缩. 凝胶布局通常会把内容放在中央 这与冻结布局有同样的好处, 不过通常更美观.

• position 属相可以设置为4个值: static(静态) , absolute(绝对) , fixed(固定) 和 relative(相对).

• 静态定位是默认方式, 将元素放在页面的正常流中.

• 绝对定位允许将元素放在页面上的任何位置. 默认的, 绝对定位元素会相对于页面边界来放置.

• 如果一个绝对定位元素嵌套在另一个定位元素中, 这个元素就会相对于外包含元素定位.

• 使用绝对, 固定和相对定位时, 属性 top, right , bottom , left 可以用来指定元素的位置.

• 绝对定位元素可以使用 z-index 属性分层放置, 是一个元素在一个元素上面. z-index 值越大, 说明层次越高(在屏幕上离你越近).

• 固定定位元素总是相对于浏览器窗口定位, 页面滚动时, 固定定位的元素不会移动. 页面中的其他内容会在这些固定定位元素下面正常滚动.

• 相对定位元素首先正常流入页面, 然后按指定的量偏移, 从而留出它们原先所在的空间.

• 使用相对定位时, left, right , top 和 bottom 是指距正常流中该元素位置的偏移量.

• CSS表格显示允许按一种表格布局来摆放元素.

• 要创建CSS表格显示, 需要使用对应表格的一个块元素, 对应行的块元素, 以及对应单元格的块元素. 通常, 这些块元素都是

  元素.

• 如果需要建立多栏布局, 而且内容栏是均匀的, 表格显示就是一个很好的布局策略.