使用刘（flow）
浏览器从HTML文件最上面开始，从上到下沿着元素流逐个显示遇到的元素。
先考虑快元素，在每个块元素间加一个换行。内联元素，总体上从左上方到右下方。
浏览器在并排放置内联元素时，两者外边距叠加；
浏览器在上下放置内联元素时，两者外边距重叠。
float属性：实质是把一个块元素放到左边或右边，其后的元素绕过这个块元素（绕流）。
若要把sidebar右悬浮，需要在HTML中把sidebar放到页面主体内容的前面。
这会导致手机等小屏幕上，先显示sidebar,后显示主体。
为了解决这个问题，可以让主体左悬浮，成为左紧右松式。
以上我们设计的页面，每个元素都会随浏览器窗口大小变动而扩展。这称之为流体布局（liquid layout）。
对应的是不随页面大小扩展的冻结布局(frozen layout)。
冻结布局：
把整个<body>内的内容放到一个<div>中,固定这个<div>的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中的结构：
- 创建一个
<div id="main">表示整个表格； - 表格中每一行要创建一个
<div id="row">; - 对于表格中每一列，只需要一个块元素作为该行内该列的内容。
CSS中的属性设置：
-
div#tableContainer{ display: table; }把整个table建立为表格 -
div#tableRow{ display: table-row; }建立行 - 表格框架已经建立，现在可以设置间距等属性。
Warning!
- CSS表格（
display:table）与HTML表格不同（在Chapter13会介绍）
CSS表格是创建一种布局的方法，HTML表格是建立一种数据结构。
四种定位（position）属性
- 静态定位（static） ：默认
- 绝对定位(absolute) ：将块从流中完全取出，指定一个绝对的位置。
- 固定定位(fixed) ：相对于浏览器窗口固定在一个位置（coupon）
- 相对定位(relative) ：相对于其外围包含元素来定位，元素仍在流中（不太懂）。
网友评论