您的位置:知识库 » Web前端

CSS+DIV技巧两则(居中,高度自适应)

作者: 不做懒人  来源: 博客园  发布时间: 2008-08-16 23:17  阅读: 3475 次  推荐: 3   原文链接   [收藏]  
  • 怎样使一个层水平居中于浏览器中
  • <style type="text/css">
  • <!--
  • div {
  •        position:absolute;
  •        left:50%;
  •        margin:0 0 0 -100px;
  •        width:200px;
  •        height:200px;
  •        border:1px solid red;
  •        }
  • -->
  • </style>
  • <div>web标准常见问题大全</div>
  • 这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
  • 另外一个我现在常用的方法,就是在最外层div在外面再加上一层div,这层div只能有一个属性align=center,不能有别的属性。这样就是保持内容居中显示了。



     
  • ff下为什么父容器的高度不能自适应
  • 一个非常常见的CSS问题,定位使用浮动的时候,下面的层被浮动的层所覆盖,或者层里嵌套的子层超出了外层的范围。
  • 通常的解决办法是在浮动层后面添加一个额外元素,例如一个div或者一个br,并且定义它的样式为clear:both
  • 1、 第一种方法(clear:both
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  • <style type="text/css">
  • <!--
  • div {width:200px;border:1px solid red}
  • p {float:left;width:100px;}
  • -->
  • </style>
  • <div><p>web标 准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大 全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准 常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全 web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常 见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全 web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常 见问题大全web标准常见问题大全web标准常见问题大全</p>
  • /*在此处加上*/<div style="clear:both"></div>/*清除掉这个p的浮动*/
  • </div>
  • 2、文章《How To Clear Floats Without Structural Markup》的解决方法
  • 按文章称第一种方法在某些时候可能会有问题,不过以为是英文的,我没有读完。只寻求了他的解决方法。
  • <style>
  • .floatholder {
  • border: 4px solid #000;margin: 10px 0 0;background: #dc8;font-size: 1.2em;}
  • .floatbox {
  • float: left;width: 20%;background: #773;border: 3px solid #f55;color: #ffd;}
  • .clearfix:after {
  • content: "."; display: block; height: 0; clear: both; visibility: hidden;}
  • .clearfix {
  • display: inline-block;}
  •  </style>
  • <div class="floatholder">
  • <div class="floatbox">
  • <p>This float is not enclosed by the surrounding div container. </p>
  • </div>
  • <p>This container lacks the fix.</p>
  • </div>
  • <div style="height: 20px; clear: both;"></div> <!—此行仅仅作为空行 -->
  • <div class="clearfix floatholder">
  • <!-- "clearfix" 必须作为第一个属性 -->
  • <div class="floatbox">
  • <p>See how this float no longer protrudes out of the containing box, with no extra clearing element used in the container!
  • </p>
  • </div>
  • <p>This float container has a class attribute of "clearfix", which applies the :after fix, or the Holly hack, depending on the browser.</p>
  •  

    </div>
  • 背景色自动填充(clear:both的扩展应用
  •  
  • 这个其实也是高度自适应的一个问题,在td里面,这个功能太简单了,以至于不用考虑,但是当突然转到div后,这个功能似乎变的很难实现。
  • 但是,从上面的“解决父容器高度自适应”的第一种方法可以想到,如果在父容器设置背景色,并且在不需要背景色的div,设置白色,这样,是不是就实现了呢?
  • 举个例子来说明:
  • 父容器包含两部分,左边A和右边B,现在要在A设置背景色“蓝色”,B保持底色(白色),并且B的内容是变化的,即,A必须要保持跟B的高度一样,才能自动填充背景色。
  • 于是,按照上面的解决方法,在父容器设置“蓝色”,B居右,设置白色,A居左,不设置颜色,这样就可以让A看起来是自动填充的了。
  • 3
    0

    Web前端热门文章

      Web前端最新文章

        最新新闻

          热门新闻