0

我正在使用 CSS 编写一个 xhtml 文档，其中我必须在整个页面周围应用框模型以及必须包含在页面中的图像。尽管该页面还将包含其他文本等。我​​很难弄清楚如何将框样式应用于此页面。请帮忙 ！

4

1 回答 1

1

盒子模型解释了边距、内边距、边框和元素大小如何结合在一起渲染图像，仅供参考。下面是你如何编写 CSS 来在页面的 body 元素上设置边框、内边距和边距：

body {
    margin: 5px;
    padding: 10px;
    border: 1px solid #000000;
}

这会给你一个 5 像素的边距，一个 1 像素的黑色实心边框，以及一个 10 像素的衬垫。

上面的 CSS 以 body 标签为目标。您将只有一个身体标签，因此您不必比这更具体。但是，您可能有很多图像，并且只希望在其中一个周围有一个边框。您需要使用 id 或类标记您的“特殊”图像，以便您可以选择它。这里有两个例子：

<img src="image.jpg" id="myImage" />
<img src="image2.jpg" class="borderImage" />

现在，您可以设置 CSS 以使用选择器来查找那些特殊图像，该选择器可以找到您想要的图像：

#myImage {
    padding: 8px;
    margin: 2px;
    border: 2px dashed #AB34CD;
}

img.borderImage {
    padding: 4px;
    margin: 3px;
    border: 3px dotted green;
}

这只是如何设计 CSS 规则的开始。就像我建议的那样，去尝试 CSS 教程。这是 MDN CSS 教程： https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started 这是来自 Tizag 的另一个。新手可能更容易获得： http ://www.tizag.com/cssT/

于 2013-06-20T04:46:30.503 回答