css+div学习初记(1)
日期：2014-05-17 浏览次数：20715 次
css+div学习小记(1)
DIV固定在网页底部的CSS方法：
比如里面是一些版权信息。因为我整页的内容比较少，但是需要固定底部信息，不让它移动。
基本思路=>
首先考虑外层设置一个容器DIV，id设为#container，使他的高度为浏览器窗口的高度，然后将#footer这个DIV设置为#container的子DIV，并使用绝对定位的方式，使他固定到#container的底端，以实现希望的把DIV固定在网页底部效果。
代码：
<style type="text/css">
body{height:100%; margin:0; padding:0; font:12px/1.5arial; }
#contaniner{min-height:100%; position:relative;}
#content{padding: 10px;}
#footer{ position:absolute; bottom:0; background-color:#AAA; width:100%; }
</style>
<body>
<DIV id="container">
<DIV id="content">
<p>请改变浏览器窗口的高度，以观察footer效果。</p>
<p>这里是示例文字，DIV固定………，这里是示例文字。</p>
</DIV>
<DIV id="footer">
<h1>Footer</h1>
</DIV>
</DIV>
</body>
解释：body{height:100%; margin:0; padding:0; }让整个body充满整个页面；
#footer{ position:absolute; bottom:0;}footer 绝对位置位于底部
----------------------------------------
css代码中 margin:auto 和 margin:0 auto 有什么区别？
答：有区别
margin:auto是指上下左右全都auto
margin:0 auto （其实表示margin:0 auto 0 auto） 是指上下是0，左右auto
auto实现居中很简单啊，你左右边距都auto了，其实就是 居中
----------------------------------------
如何 将网页信息定位在浏览器的固定位置，而不随着滚动条滚动而改变；
答：#fixed{position:fixed;top:5em;right:5em;}
IE6中利用容器对溢出内容的处理方式来实现的
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的，这是设置 right:17px的原因
</style>
<![endif]-->
DIV固定在网页底部的CSS方法：
比如里面是一些版权信息。因为我整页的内容比较少，但是需要固定底部信息，不让它移动。
基本思路=>
首先考虑外层设置一个容器DIV，id设为#container，使他的高度为浏览器窗口的高度，然后将#footer这个DIV设置为#container的子DIV，并使用绝对定位的方式，使他固定到#container的底端，以实现希望的把DIV固定在网页底部效果。
代码：
<style type="text/css">
body{height:100%; margin:0; padding:0; font:12px/1.5arial; }
#contaniner{min-height:100%; position:relative;}
#content{padding: 10px;}
#footer{ position:absolute; bottom:0; background-color:#AAA; width:100%; }
</style>
<body>
<DIV id="container">
<DIV id="content">
<p>请改变浏览器窗口的高度，以观察footer效果。</p>
<p>这里是示例文字，DIV固定………，这里是示例文字。</p>
</DIV>
<DIV id="footer">
<h1>Footer</h1>
</DIV>
</DIV>
</body>
解释：body{height:100%; margin:0; padding:0; }让整个body充满整个页面；
#footer{ position:absolute; bottom:0;}footer 绝对位置位于底部
----------------------------------------
css代码中 margin:auto 和 margin:0 auto 有什么区别？
答：有区别
margin:auto是指上下左右全都auto
margin:0 auto （其实表示margin:0 auto 0 auto） 是指上下是0，左右auto
auto实现居中很简单啊，你左右边距都auto了，其实就是 居中
----------------------------------------
如何 将网页信息定位在浏览器的固定位置，而不随着滚动条滚动而改变；
答：#fixed{position:fixed;top:5em;right:5em;}
IE6中利用容器对溢出内容的处理方式来实现的
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的，这是设置 right:17px的原因
</style>
<![endif]-->
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
