CSS宽高相关

来源：百度文库 编辑：神马文学网 时间：2024/04/27 16:30:32
一.自适应高度用这个好用div {
     width:200px;
     height:auto!important;
     height:200px;
     min-height:200px;
     border:1px solid green;
    }-----------------------------------------------------------------------




div自动高度



利用clear自动高度，因为TOP层有下边界











利用overflow和高度的自动高度实现，无下边界的情况











 

二、给行内元素定义宽度

 

　　如果你给一个行内元素定义宽度,那么它只是在IE6下有效. 所有的HTML元素要么是行内元素要么就好是块元素. 行内元素包括: , , 和 . 块元素包括

  
  •   
  •   

     

    　　然后你需要定义外层div的min-width属性，

     

    Html代码
    1. .container {   
    2.        min-width:300px;   
    3. }  

     

    这时该是IE hack大显身手的时候了. 你需要包含如下的代码:

     

    Html代码
    1. * html .container {   
    2.       border-right: 300px solid #FFF;   
    3. }   
    4.   
    5. * html .holder {   
    6.       display: inline-block;   
    7.       position: relative;        
    8.       margin-right: -300px;   
    9. }  

    三、让固定宽度的页面居中

     

    　　为了让页面在浏览器居中显示, 需要相对定位外层div, 然后把margin设置为auto.

     

    Html代码
    1. #wrapper {   
    2.       margin: auto;   
    3.       position: relative;   
    4. }  
     

    四、 最小宽度

     

    　　IE6另外一个bug就是它不支持 min-width 属性. min-width又是相当有用的, 特别是对于弹性模板来说, 它们有一个100%的宽度,min-width 可以告诉浏览器何时就不要再压缩宽度了.

    除IE6以外所有的浏览器你只需要一个 min-width: Xpx; 例如:

     

    Html代码
    1. .container {   
    2.     min-width:300px;   
    3. }  

     

    　　为了让他在IE6下工作, 我们需要一些额外的工作. 开始的时候我们需要创建两个div, 一个包含另一个:

     

    Java代码
    1. class="container">   
    2.   
    3.        class="holder">Content
      
  •   
  •   

     

    　　然后你需要定义外层div的min-width属性，

     

    Html代码
    1. .container {   
    2.        min-width:300px;   
    3. }  

     

    这时该是IE hack大显身手的时候了. 你需要包含如下的代码:

     

    Html代码
    1. * html .container {   
    2.       border-right: 300px solid #FFF;   
    3. }   
    4.   
    5. * html .holder {   
    6.       display: inline-block;   
    7.       position: relative;        
    8.       margin-right: -300px;   
    9. }  
    五。最小高度然后自适合#mrjin {
        background:#ccc;
        min-height:100px; 
        height:auto !important; 
        height:100px; 
        overflow:visible;
    }
    CSS宽高相关 CSS相关文本处理(换行) 国外CSS相关资源网站整理 CSS框架的相关汇总（CSS Frameworks） - cnBruce's Blog |... css 高铁建设相关股票 高铁相关受益股票 10个顶尖的CSS编辑器 ? SonicHTML – 高品质 HTML+CSS 服务 “高清”视频、电视相关问题解答 政治 高二第一课 相关练习 2010年大连市第二十四中学初升高相关信息 男子尿中双酚A含量高与性功能障碍相关 高铁概念相关股票及龙头股分析 高铁概念相关股票及龙头股分析1 什么是css？css介绍 邹恒甫：中国学费越来越高与教育精英的高收入密切相关！ 邹恒甫：中国学费越来越高与教育精英的高收入密切相关！ CSS 锦囊 CSS十大密技 CSS Syntax css 样式 Div+CSS Div+CSS CSS Syntax