> 웹 프론트엔드 > HTML 튜토리얼 > 问一个基础的CSS问题……_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 12:17:30
원래의
1143명이 탐색했습니다.

<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>
로그인 후 복사


我发现类似.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>
로그인 후 복사

直接这样不行吗.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;

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿