19、HTML与CSS：页面布局设计全攻略

HTML与CSS：页面布局设计全攻略

一、页面布局需求与挑战

在网页设计中，我们常常会遇到各种需求和挑战。比如，Anne喜欢信息图的外观，但担心其长度过长，希望将信息图的高度降低，使其能显示在浏览器窗口范围内。然而，这样做会导致内容溢出，因为内容长度超过了新的高度限制。

二、不规则换行的实现

在许多桌面出版和文字处理程序中，设计师可以创建不规则的换行效果，使文本紧密环绕图像。但在网页布局中，由于图像通常呈现为矩形，实现这一效果并不容易。不过，借助图形处理软件，我们可以模拟不规则形状的图像。
具体步骤如下：
1. 使用图形处理软件将图像水平切成多个部分。
2. 裁剪每个切片，使其边缘与要显示的图像边缘匹配。
3. 使用CSS将这些切片堆叠起来。以下是一个示例样式规则，将所有属于“slice”类的内联图像堆叠在右侧边缘：

img.slice { 
    clear: right; 
    float: right; 
    margin-top: 0px; 
    margin-bottom: 0px; 
}

通过将顶部和底部边距设置为0像素，切片可以无缝连接，周围的文本会紧密贴合图像边界，营造出不规则换行的错觉。

三、溢出内容的处理

信息图由于包含多个信息框而较长。当我们降低信息图的高度时，可能会截断一些无法适应新高度的信息框。不过，我们可以使用 overflow 属性来控制浏览器如何处理这些溢出内容。
overflow