代码之家  ›  专栏  ›  技术社区  ›  vtortola

Html宽度100%

  •  9
  • vtortola  · 技术社区  · 16 年前

    干杯?

    5 回复  |  直到 16 年前
        1
  •  15
  •   Diodeus - James MacFarlane    16 年前

    .class{
        display:block;
        width:100%;
    }
    
        2
  •  5
  •   Jim L    16 年前

    Width:100% 当然不是捏造的。了解诸如box model和inline vs block(例如span vs divs)元素之类的内容将有助于您了解一些您将看到的内容。浏览器的差异与“W”的关系不大idth:100%“而不是浏览器如何解释给定元素的框模型,特别是边距、边框和padding.AFAIK,所有浏览器都会遵守width:100%,但他们如何解释其他一切可能会影响他们将多少空间作为“100%”而放弃。

    请记住,100%是父对象的100%,而不是窗口。

     <body>
       <div id = "one" style="width:50%">
         <div id = "two" style = "width:100%" />
       </div>
     </body>
    

    在这种情况下,“2”仍将仅为窗口宽度的50%,因为它位于宽度为50%的父窗口中(1 * .5 = .5)

    所以,这么说吧,一个具体的令人困惑的行为的例子将极大地帮助人们给你一个具体的答案。

        3
  •  2
  •   Pops Atula    16 年前

    如果我没听错,你是在问 width: 100% 是唯一的。答案是否定的;所有主流浏览器都能理解。资料来源: http://www.w3schools.com/css/pr_dim_width.asp

        4
  •  1
  •   Frank Schwieterman    16 年前

    请注意width:100% 无法处理内联标记。。。因此,属性“display”作为值“inline”不会受到影响。

    如果这对你来说是个新闻,我建议你抓起一本书,因为HTML并不是一件需要特别学习的事情。

        5
  •  -2
  •   Kumar V    12 年前
    html {
    width:100%;
    }
    
    body {
    background-color:#f2f2f2;
    margin:0;
    padding:0;
    }
    
    a {
    color:#ec3f3f;
    text-decoration:none;
    font-weight:400;
    font-style:normal;
    }
    
    a:hover {
    color:#262626;
    text-decoration:none;
    font-weight:400;
    font-style:normal;
    }
    
    p,div {
    margin:0!important;
    }
    
    table {
    border-collapse:collapse;
    }
    
    ::-moz-selection,::selection {
    background:#ec3f3f;
    color:#fff;
    }
    
    .ReadMsgBody,.ExternalClass {
    width:100%;
    background-color:#f2f2f2;
    }
    
    @media only screen and max-width640px{
    img[class=img_scale] {
    width:100%!important;
    height:auto!important;
    }
    
    img[class=divider] {
    width:440px!important;
    height:2px!important;
    }
    
    table[class=spacer] {
    display:none!important;
    }
    
    td[class=center] {
    text-align:center!important;
    }
    
    table[class=full] {
    width:400px!important;
    margin-left:20px!important;
    margin-right:20px!important;
    }
    
    table table,td[class=full_width] {
    width:100%!important;
    }
    
    div[class=div_scale],table[class=table_scale],td[class=td_scale] {
    width:440px!important;
    margin:0 auto!important;
    }
    }
    
    @media only screen and max-width479px{
    img[class=img_scale] {
    width:100%!important;
    height:auto!important;
    }
    
    img[class=divider] {
    width:280px!important;
    height:2px!important;
    }
    
    table[class=spacer] {
    display:none!important;
    }
    
    td[class=center] {
    text-align:center!important;
    }
    
    table[class=full] {
    width:240px!important;
    margin-left:20px!important;
    margin-right:20px!important;
    }
    
    table table,td[class=full_width] {
    width:100%!important;
    }
    
    div[class=div_scale],table[class=table_scale],td[class=td_scale] {
    width:280px!important;
    margin:0 auto!important;
    }
    }