【阅读】《Head First HTML 与 CSS》第十一章——布局与定位

这一章主要讲如何运用<div>和盒结构做出心中想要的网页

流

从文件的最上面一直到文件的末尾逐个显示，这就是流。

从上往下流，各个块元素之间有一个换行

内联元素的流

内联元素是不换行的，所以它会这样：

在一个p中从左往右依次摆放，值得注意的是，如果p的宽度不足以放下这4个东西，那么就会拆分一个出来，变成五个元素就像这样：

内联和块元素在一起

流和盒模型的其他知识

• 当浏览器上下放置两个块元素时，这两个块元素的上下边距不是由上面的那个元素的下外边距加上下边元素的上外边距，而是将这两者进行比较，取大的那个作为两者的上下边距。

• 浏览器并排放置两个内联元素的时候他们的左右边距是相加起来的，这一点和上下边距不同
• 如果一个元素嵌套在另一个元素中，也有可能出现折叠，就是当两者的垂直边距碰在一起的时候，但是如果外边那个元素有边框那么两者的外边距是不会碰在一起的，所以外边距就不会折叠

浮动元素float

浮动元素都有一个要求：必须有一个宽度

如果一个元素被设置为浮动的，那么他就会从流中删除掉，所以想要知道这个页面时怎么显示的，可以把那个浮动的元素删掉，看看页面怎么显示，之后在指定的地方把那个浮动元素加进去

对了，要把那个底部的原本在流中的东西给排开（我是说类似文本、图片这些显示出来的东西会被排开，如果是一个浮动的div浮在了另一个div上，下面那个div还是在那里的，所以你可能看到如果下面的那个div有颜色，上面的浮动div没有颜色，就会把下面的div的颜色透上来）

浮动元素时，如果希望他在某个元素的后面，就要将浮动元素的代码放在想要那个元素的代码的后面

浮动元素不是主要元素的缺点

书中的那个例子他遇到了一个小问题，就是它是把浮动div放在了主内容的div的前面（以便达到与主内容并列的效果），但是这样有一点不好，就是如果在手机或是小分辨率的设备上看的时候是先显示浮动div的，而把主要的div排在了后面，以后会教更好的办法

如果你的浏览器窗口设得很宽就会

改进方法：在底部的div的CSS中加上这句话：

clear:right;

这样底部的div的右边就不允许有浮动的内容

流体与冻结设计

冻结：当用户改变浏览器的大小的时候，网页不做什么变化

流体：会有变化

改为冻结布局

在需要冻结的部分用一个大的div框起来，把这个大的div设置成宽度一定，就行了

冻结布局的缺点：结果是这样，右边多出来了一部分，不好看

解决办法~凝胶布局

凝胶布局

在上文中的大的div的CSS中加这个：

margin-left:auto;

margin-right:auto;

也就是把外边距设置为自动，这样页面就会自动调整为居中显示，有了对称性，比刚刚偏向一方好多了，现在很多网站也是这样做的。

绝对定位

可以在页面上精确的定位元素

和浮动float类似，绝对定位的元素也会从流中删除掉，而后显示流中的内容，这个流甚至都不知道有这样一个

绝对定位的元素。

绝对定位的元素是通过相对于浏览器窗口（视窗）的边框来定位的，也就是说和HTML页面没有关系，所以

使用绝对定位的时候要注意不要让定位元素遮挡住的流中的内容（流中的内容不会想float那样环绕的）

Demo：

#coupon {position:absolute;top:350px;left:-90px;}

这样这个元素就会放在距离浏览器顶部边框350px、距离左边边框-90px（那个元素没入到左边边框90px）

如果两个绝对定位的元素重叠了

如何知道谁在上面，谁在下面呢？

z-index属性可以决定，z-index的值越大就越在上面

clear无效

因为流完全不知道有这个绝对定位的元素存在，当出现上上张图的时候使用clear就没有了效果

固定定位

有的网站会在页面创建一个小图像，这个小图像不会随着页面一起滚动，也就是说这个图像貌似不在页面上而在浏览器上这就是固定定位了，Demo：

#coupon {
position:fixed;
top:350px;
left:-90px;
}

意思是这个元素在距离浏览器窗口上边框的300px、左边框的100px处，且一直在浏览器的这个位置。如果把广告设置成这种的，不管这个网站设计的多好，笔者认为都是很伤大雅的，只有那些对用户有好处，用户感兴趣的东西才可以这样放哦

CSS表格显示

回想我们在用HTML画表格的时候是使用table套着tr，tr套着td来显示的，CSS也类似

如果要让一个div作为表格的基地（相当于<table>）应该在它的CSS中加上display:table;

同样，要让一个div作为表格的行（相当于<tr>）应该在它的CSS中加上display:table-row;

类似的。。。。。。。。。。列（相当于<td>）。。。。。。。。。。display:table-cell;

值得注意的是，如果通过border-spacing来为表格创建外边距的时候，这样的边距不会折叠

CSS的表格和HTML的表格不是完全相同的，CSS的是一种类似表格的布局方式，HTML的是面向表格数据的。

总结布局方式

浮动布局

缺点：

①我们必须把需要浮动的<div>移动到页面的主内容之上，如果这种顺序并不反映也买你中内容的相对重要性

        ②使用浮动的时候是无法创建两个高度相同的列的，因为浏览器的宽度没那么理想

凝胶布局

很多网站都使用这样的布局，首先先把网页上的东西都相对固定住，而后把一整个固定好的东西居中，固定的好处就是可以得到统一的效果，居中的好处是如果用户的浏览器宽度不定，至少可以中心对称来达到对称美的效果

绝对布局

如果你希望页面中某一个元素的大小固定，而另一部分可以拓展和收缩，或者想要指定某一个元素的位置，这是一个好选择

缺点：如果浏览器宽度太奇葩，也会出现使用clear的那种不好的效果

表格显示布局

优点：

可以随浏览器大小的变化而漂亮地变化

缺点：

要增加一些div，HTML的结构更复杂了

BULLET POINTS

• 浏览器使用流在页面中放置元素
• 块元素从上面向下流，各元素之间有一个换行。默认的，每一个块元素会占据浏览器窗口的整个宽度
• 内联元素在块元素内部从左上方流向右下方。如果需要多行，浏览器会换行，在垂直方向上拓展外围块元素，来包含这些内联元素
• 正常的页面流中两个块元素上下相邻的外边距会折叠为最大外边距的大小（折叠），或者如果两个外边框大小相同，则会折叠为一个外边距
• 浮动元素会从正常流中取出，浮动到左边或者右边
• 浮动元素放在块元素之上，不会影响正常的页面流。不过，内联元素会考虑浮动元素的边界，围绕着这个浮动元素
• clear属性用来指定一个块元素左边或者右边（也可以both）不能有浮动元素。设置了clear属性的块元素会下移，直到它旁边没有块元素
• 浮动元素必须有特定的宽度，不能设置为auto
• 流体布局是指，拓展浏览器窗口时，页面中的内容会拓展以适应页面
• 冻结布局是指，其中内容的宽度是固定的，不会随着浏览器窗口的拓展或收缩。这样做的好处就是，可以对设计提供更多的控制，不过也要付出代价，这样就不能有效的使用浏览器的宽度了
• 凝胶布局是指，使用了冻结布局相似的方法，也是固定住各个元素，不过外边距会随着浏览器窗口的拓展或收缩。页面内容通常放置在中央，这样有冻结布局的好处，也看起来美观一点
• position属性可以设置4个值：static（静态）、absolute（绝对）、fixed（固定）和relative（相对）
• 静态定位是默认方式，将元素放在页面的正常流中
• 绝对定位允许将元素放在页面上的任何位置。默认地，绝对定位会相对于页面的边界来放置
• 如果一个绝对定位的元素嵌套在另一个定位元素中，这个元素就会相对于外包含元素定位
• 使用绝对、固定、相对定位时，属性top、right、bottom和left可以用来指定元素的位置
• 绝对定位元素可以使用z-index属性分层放置，使一个元素在另一个元素的上面。z-index的值越大，说明它的层次越高（离你越近）
• 固定定位元素总是相对于浏览器窗口定位，页面滚动时，固定定位的元素不会滚动。页面中的其他内容会在这个固定定位的元素下面正常滚动
• 相对定位元素首先正常流入页面，然后按指定的量偏移，从而留出它们原先的所在空间
• 使用相对定位时，left、right、top和bottom是指正常流中该元素的位置的偏移量
• CSS表格显示允许一种按照表格布局的方式来摆放元素
• 要创建CSS表格显示，需要使用对应表格的一个块元素，对应行的块元素，当然还有单元格的，通常这些懂事div
• 如果血药创建一个多栏布局，而且内容是均匀的，表格显示就是一个很好的布局策略