CSS定位_Css_Positioning - Fatal编程技术网

CSS定位

css

CSS定位,css,positioning,Css,Positioning,a。图像（960x7） B分区（宽度：960，填充：10）我想定位（a），使它从顶部开始，居中50像素。我想把（b）放在（a）正下方，没有空间我的CSS如下： @charset "utf-8"; * {margin:0;padding:0;} body {background-color:#999;} .pagetop {margin:50 auto;background:url(../img/pgtop.gif) top center no-repeat;} .page {margin:

a。图像（960x7） B分区（宽度：960，填充：10）

我想定位（a），使它从顶部开始，居中50像素。我想把（b）放在（a）正下方，没有空间

我的CSS如下：

@charset "utf-8";
* {margin:0;padding:0;}
body {background-color:#999;}
.pagetop {margin:50 auto;background:url(../img/pgtop.gif) top center no-repeat;}
.page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}

我的HTML如下：

<body>
<div class="pagetop" />
<div class="page">
<p>Warning <a href="#">sign</a>, warning sign...I see it but I...pay it no mind.</p>
</div>


警告，警告标志…我看到了，但我…不介意

我试图在灰色背景上创建一个带有圆形边缘的白色容器。我怎样才能简单而智能地做到这一点？

请查看此问题，了解圆角：

对于物体的定位，我会这样说：

topimage {
   position: absolute;
   top: 50px;
   text-algin: center;
}

要放置元素之间没有边距，您希望顶部图像的底部边距为零：

margin: 50px auto 0;

（请注意，您必须为任何非零测量指定一个单位（例如px）

背景图像不会给出顶部元素的大小，您必须指定宽度和高度以匹配图像的大小。如果高度小于一个常规字符，则需要使用某种方法防止Internet Explorer将元素扩展到一个字符行的高度，例如使用

overflow:hidden以防止内容影响元素的大小：
width: 960px; height: 10px; overflow: hidden;

填充被添加到元素的大小，因此您必须使页面元素窄20像素：
padding: 10px; width: 940px;

如果圆角图像的高度为30px，请将.pagetop高度设置为30px，在顶部添加50px的填充，并将背景图像的顶部设置为50px
.pagetop {height:30px;padding-top:50px;margin:0 auto;background:url(../img/pgtop.gif) center 50px no-repeat;}
.page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}

轻微的打字错误：text algin
=text align
。也许margin:50px auto 0 auto
会更好。谢谢。我忘了指定度量单位，也不明白为什么我设置的所有内容都被忽略了。