Heim > Web-Frontend > HTML-Tutorial > 问一个基础的CSS问题……_html/css_WEB-ITnose

问一个基础的CSS问题……_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:17:30
Original
1145 Leute haben es durchsucht

<html>  <head>  	<style>  	  .container{ background: #aabbcc; width: 1000px; height: 1500px; margin: auto; }  	  .top{ background: #ccc; width: 900px; height: 150px; margin: auto; }  	  .nav{ background: #aaa; width: 900px; height: 100px; margin: auto; }  	  .main{ background: #bbb; width: 900px; height: 1000px; margin: auto; }  	  .footer{ background: #ddd; width: 900px; height: 150px; margin: auto; }  	</style>  </head>  <body>  	<div class="container">  	  <div class="top"></div>  	  <div class="nav"></div>  	  <div class="main"></div>  	  <div class="footer"></div>  	</div>  </body></html>
Nach dem Login kopieren


我发现类似.top{ margin-top:100px }或者.footer{ margin-bottom:100px }的样式都是没效果的。
而.nav{ margin:100px auto }和.main{ margin:100px auto }是有效果的……
那么想问一下margin是不是同级元素的间距?
我需要实现top离container的顶部100px, footer贴紧container的底部。我应该怎样做?
不会是需要事先计算好吧……


回复讨论(解决方案)

用padding呢?我是菜鸟,这是我的想法。margin有时候会重合,你看W3C教程有说明的。

<html>  <head>      <style>        .container{ background: #aabbcc; width: 1000px; height: 1500px; margin:0 auto; padding-top: 100px;padding-bottom: 100px}        .top{ background: #ccc; width: 900px; height: 150px; margin:0 auto; }        .nav{ background: #aaa; width: 900px; height: 100px; margin: 0 auto; }        .main{ background: #bbb; width: 900px; height: 1000px; margin:0 auto; }        .footer{ background: #ddd; width: 900px; height: 150px; margin:0 auto; }      </style>  </head>  <body>      <div class="container">        <div class="top"></div>        <div class="nav"></div>        <div class="main"></div>        <div class="footer"></div>      </div>  </body></html>
Nach dem Login kopieren

直接这样不行吗.container{ background: #aabbcc; width: 1000px; height: 1500px; margin: auto; padding:100px 0;}

直接这样不行吗.container{ background: #aabbcc; width: 1000px; height: 1500px; margin: auto; padding:100px 0;}
这样不设置height的话就可以吧。
不过我希望设置过container的width和height之后,footer到container底部的距离为100px;
我想知道除了预先计算好尺寸之外还有什么好办法?

添加 overflow:hidden;  有高度跟宽度定义过的 块

你高度减少100px不就可以了吗?
.container{ background: #aabbcc; width: 1000px; height: 1400px; margin: auto; padding:100px 0;}

如果你希望.container总的高度是1500px的话,那么.container的高度可以设置成1300px,padding的top和bottom可以各设置100px,top和bottom就共200px的高度,1300px+200px=1500px,这是你想要的吗?

container没必要设置高度的,让它内部的元素自动填充撑开高度就ok,上边100px的话加上padding-top:100px;就ok,如果内部元素有浮动的话,加上overflow:hidden;

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage