Chapter11 布局与定位

使用刘（flow）
浏览器从HTML文件最上面开始，从上到下沿着元素流逐个显示遇到的元素。
先考虑快元素，在每个块元素间加一个换行。内联元素，总体上从左上方到右下方。
浏览器在并排放置内联元素时，两者外边距叠加；
浏览器在上下放置内联元素时，两者外边距重叠。

float属性：实质是把一个块元素放到左边或右边，其后的元素绕过这个块元素（绕流）。

若要把sidebar右悬浮，需要在HTML中把sidebar放到页面主体内容的前面。
这会导致手机等小屏幕上，先显示sidebar,后显示主体。
为了解决这个问题，可以让主体左悬浮，成为左紧右松式。

以上我们设计的页面，每个元素都会随浏览器窗口大小变动而扩展。这称之为流体布局（liquid layout）。
对应的是不随页面大小扩展的冻结布局(frozen layout)。
冻结布局：
把整个内的内容放到一个

中,固定这个

的margin。
凝胶布局（Jello layout）是介于前两者的布局。
凝胶布局就是在冻结布局的基础上，加上margin-left:auto;margin-right:auto;
使内容永远位于浏览器正中。

---

绝对定位属性
sidebar{position:absolute； top: 100px； right: 200px; width: 280px;
sidebar会跳出流，被置于指定位置，且覆盖在流元素（流中的元素并不当他存在）之上。
每个绝对位置的内容有z-index属性，z-index值大的覆盖在上面。

---

心绪不宁，无心学业，去下盘棋吧。
20161104_22-56

---

CSS表格

HTML中的结构：

1. 创建一个
   表示整个表格；
2. 表格中每一行要创建一个
   ;
3. 对于表格中每一列，只需要一个块元素作为该行内该列的内容。

CSS中的属性设置：

1. div#tableContainer{ display: table; } 把整个table建立为表格
2. div#tableRow{ display: table-row; }建立行
3. 表格框架已经建立，现在可以设置间距等属性。

Warning!

1. CSS表格（display:table）与HTML表格不同（在Chapter13会介绍）
   CSS表格是创建一种布局的方法，HTML表格是建立一种数据结构。

---

四种定位（position）属性

1. 静态定位（static） ：默认
2. 绝对定位(absolute) ：将块从流中完全取出，指定一个绝对的位置。
3. 固定定位(fixed) ：相对于浏览器窗口固定在一个位置（coupon）
4. 相对定位(relative) ：相对于其外围包含元素来定位，元素仍在流中（不太懂）。