width:100%;与width:auto;的分别,widthauto

width:100%;与width:auto;的区别,widthauto

<div>
    <p>1111</p>

</div>

div{
  width:980px;
  background-color: #ccc;
  height:300px;

}
p{
     width:100%;
  /*width:auto;*/
    padding:10px;
  background-color:#000;

}

  

设如果p的width:百分百,则表达p的width会得到980px就早就浸泡div区域,然后本身又有padding,所以会高于div。

而当width:auto时它是完整增长幅度(包涵width,margin,padding,border)等于父级宽度(width,不分包父级的margin,padding,border),所以如果padding已经左右占去10px的上空,那么width给的值正是960px。

width:100%;与width:auto;的分别,widthauto。但不管width:百分之百要么auto,其总括的参阅都以父级内容区width值,而非总拉长率值.

div
p1111/p/divdiv{ width:980px; background-color: #ccc; height:300px; }p{
width:100%; /*width:auto;*/ padding:10px; background-col…

<div>
    <p>1111</p>

</div>

div{
  width:980px;
  background-color: #ccc;
  height:300px;

}
p{
     width:100%;
  /*width:auto;*/
    padding:10px;
  background-color:#000;

}
<div>
    <p>1111</p>

</div>

div{
  width:980px;
  background-color: #ccc;
  height:300px;

}
p{
     width:100%;
  /*width:auto;*/
    padding:10px;
  background-color:#000;

}

CSS的width:100%和width:auto区别

  

  

一、   问题

倘若是p的width:100%,则表明p的width会得到980px就早就浸润div区域,然后自身又有padding,所以会压倒div。

若果是p的width:百分之百,则表明p的width会获得980px就曾经浸泡div区域,然后自个儿又有padding,所以会压倒div。

前段时间在调动树结构的时候,开采假诺树的节点名称相比较长的话在IE6下则不会撑开外面包车型大巴要素,导致节点的称谓只显示了大意上,同期Logo和名称换行显示了,可是在IE8和IE9下则呈现常常。定位到难点后,最后开掘是底下的性质导致的,如下图黄褐所致,把width的值设置为auto后就可以缓慢解决难题:

而当width:auto时它是欧洲经济共同体增长幅度(包涵width,margin,padding,border)等于父级宽度(width,不分包父级的margin,padding,border),所以只要padding已经左右占去10px的空中,那么width给的值就是960px。

而当width:auto时它是一体化幅度(包含width,margin,padding,border)等于父级宽度(width,不分包父级的margin,padding,border),所以如若padding已经左右占去10px的长空,那么width给的值正是960px。

 

.TreeView,.TreeView ul{ 

    padding:0px 0px 0px  19px; 

    list-style:none; 

    margin:0px 0px; 

    width:100%;/*这里修改为auto*/ 

    background:url(./trstree-default-line.gif)  repeat-y 0px  center ;

}

 

但不论width:百分之百也许auto,其总计的参照都以父级内容区width值,而非总增长幅度值.

但不论是width:百分百要么auto,其计算的参谋都以父级内容区width值,而非总增长幅度值.

二、   结论

[width:100%;与width:auto;的分别,widthauto。1] width:百分之百 并不包蕴margin-left 
margin-right的属性值,直接取其父容器的增长幅度加上含margin-left
/margin-right的值。即便设置了margin那新的width值是容器的上涨的幅度加上margin的值。(留神观望)就能够发觉加了 
margin相对应的边就能多出设置的空白。况且会多出横向滚动条因为宽度已经高于了荧屏的界定。(那条针锋相对于父容器是body)。

[2]
width:auto包括margin-left/margin-right的属性值。其值包蕴margin-left
/margin-right的值。width:auto总是占用整行!!!这里面margin的值已经蕴涵当中了(也正是一整行)即使要安装margin的值那就用一整行然后减去margin的值就获得了当今的幅度了。减去的那么些值正是应和边得光溜溜。明显的本性是其一从未横向滚动条出现也正是上升的幅度未有扩大。

[3]
在IE6下显得不正规,不过在IE8和IE9下显得符合规律,可能是IE8和IE9对width:百分百的分析与IE6不一致所致,但是双方对width:auto的剖析是一致的。

 

 

width:auto;会将成分撑开至一切父成分width,不过会减去子节点本身的margin,padding只怕border的轻重缓急。
width:百分百;会强制将成分变为和父成分同样的宽,而且加多额外的长空到那么些因素的width上。正是因为这几个,会招致无尽难题。

应用width:百分之百世代都不是二个好主意。这些个性轻松让人发出你正在定义一个成分可视大小,其实,你是在对那个因素的气象做了巨大的转移。

块成分会填满其父成分的全方位width,因为块成分默许的是width:auto;的。

See the Pen jGgIu by liqian
(@liqian) on CodePen.

 

上面包车型地铁例子里,品蓝的边框(border)代表容器父成分。水泥灰和湖蓝代表的是二个具备深褐边框,边框宽为21个像素的子节点。(border:20px
solid
red;),分裂点在于,水晶色的子节点是width:auto;,赫色的是width:百分之百;的。

See the Pen H2F – March 25, 2014
#1 by liqian
(@liqian) on CodePen.

 

能够见到浅莲灰的子节点伸出了父成分。那是因为洋红的子节点设置了width:百分百;使得本人的width变得和父成分同样大小,可是那些width不富含子节点本身边框的轻重。那样边框就到父成格外面了;

 

 

 

皇家赌场手机版,对于padding和margin也是同样的机能。

See the Pen H2F – March 25, 2014
#2 by liqian
(@liqian) on CodePen.

 

 

不管多的幅度是padding,margin可能border,width:auto;都不会将子节点撑破父成分。

 

皇家赌场手机版 1

可以看出,width:百分之百是将盒模型中的content拉伸得和父元素同样,而width:auto;是将那么些盒模型拉伸得和父成分同样。

 

非常多CSS难点的解决办法不是丰裕更多的CSS,而是去掉那三个有标题的CSS,这就得须要对类似width这样的CSS样式的副功用有浓密的认知。

 

 

 

 

1)width:
百分百并不分包margin-left/margin-right的属性值,直接取其父容器的肥瘦+margin-left/margin-right的值。如若该div设置了margin值,则该div的width值=容器的增幅+margin值。(细心观看)就能发觉加了margin值后,相呼应的边就能够多出设置的空域。即使其父容器是body,则还只怕会多出横向滚动条,因为它的拉长率已经不仅了显示器的界定,若是该div你设置了overflow-x:auto,则在高出范围时,也会晤世滚动条。

 

2)width:auto在安装width值时会包罗margin-left/margin-right的属性值。width:auto总是占用整行!!!那中间margin的值已经被含有在中间了(也正是一整行)假诺要安装margin的值,那就用一整行width-margin的值=设置的因素的幅度了。减去的这些值正是应和边的空域。该种情形下,显明的风味便是那个未有横向滚动条出现,即宽度未有增添。

 

总之,

width:百分百:设定目标的大幅占父成分的百分之百(不论设定成分的margin值为多少)

width:auto:是依据设定指标的骨子里尺寸而自适应宽度(思考设定成分的margin值得大小)

 

本着成分A

1.A是容器,希望A把它的父容器充满,便是百分之百

2.A是容器,希望A根据容纳的要素大小调换自个儿的大大小小,就用auto

 

3.A不是容器,宽度不知,需求出示完全,用auto

4.A不是容器,宽度不知,可能超越所在容器宽度,希望填满,用百分之百

 

案例如下:

皇家赌场手机版 2

 

Leave a Comment.