CSS初探14

Head First HTML与CSS

第十一章 布局与定位

CSS——掌控页面的表现

新的Starbuzz页面

除了HTML文件开始的日常处理（中包括meta，title，link等元素）外，一个简单的HTML页面会将的内容分为4个逻辑区域

：

1.页眉header

2.主内容区main

3.边栏区sidebar

4.页脚footer

CSS一般包括以下内容：

1.body选择器。一些基本样式，如字体类型和大小、背景颜色、外边距为0等。

2.以上四个逻辑分区各自的id选择器。针对特定分区设置相应的样式。

3.其余零碎部分的类/id选择器。

4.链接的伪类选择器。用于设置不同状态下链接的样式。

示例图

利用float建立边栏的流程

1.使用id为要浮动的元素指定一个唯一的名字。

2.让这个元素在某个元素后面浮动，确保将浮动元素的HTML放在那个元素的下面。

示意图2

3.设置浮动元素的宽度。

4.将浮动元素浮到左边或右边。（float）

注意：一般让边栏固定宽度并浮动，让主内容区自由扩展。

示意图3

建立边栏后待解决的问题

为防止内容区与边栏的背景图像交叉，有一个通用的解决办法：设置主内容区的右侧外边距为浮动边栏区的总宽度。

示意图4

将浏览器调整到很宽时，页脚和边栏开始出现重叠（内联元素如文字不会出现，但是整个块元素会）。这时要用到块元素的clear属性：当元素流入页面时，在这个元素左边、右边或两边不允许有浮动内容。

clear:right;/*元素的右边不允许有浮动内容*/

clear:left;/*元素的左边不允许有浮动内容*/

clear:both;/*元素的两边不允许有浮动内容*/

如果出现的浮动内容，浏览器就会把该块元素下移，直到没有浮动内容为止。

示意图5

关于浮动的一些问题

1.能否将元素浮动到中间？

不能，CSS只允许将一个元素向左或向右浮动。

2.浮动元素的外边距会折叠吗？

不会，因为与流入页面的块元素不同，浮动元素只浮在页面上，它的外边距不会碰到正常流动元素的外边距，所以不会折叠。

转自互联网：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

3.可以浮动内联元素吗？

可以。常见的是浮动图像，将图像在段落中设置向左/右浮动，文本会围绕在它周围。还可以浮动其他任何内联元素，不过不常见。

4.可以把浮动元素理解成，被块元素忽略，但被内联元素考虑到的元素。

---

和大家推荐一波番茄工作法。

今天晚上我用这个方法把写笔记的时间从原来的两个半小时缩短到了一个半小时。

嘿嘿嘿。

欠账3，不想还，先欠着。