说白了width:auto试图达成这一等式:子元素的width+padding(左和右)+margin(左和右) = 参考元素的的width(参考元素一般为父元素) 【举个例子】: 代码语言:javascript 复制 .outer{width:200px;height:100px;border:1px solid black;margin:20px;}.inner-100percent{width:100%;height:100px;background:darkcya...
一、width：auto 1、块级元素默认的宽度值，意味着浏览器会自己选择一个合适的宽度值。 2、内容的宽度='margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' 如果margin-left' + 'border-left-width' + 'padding-...
width:100%的相对于谁 想必学过CSS，了解了相对单位的童鞋们都应该知道：相对单位于都有⼀个基准。那么width:100%是基于谁呢？我把可能出现的⼏种情况列在下⾯，并以DEMO说明，在最后进⾏总结。⼀般层级元素 1. 2. .demo-parent {width:400px;height:60px;line-height:30px;background:blue;} 3...
1,width:100%; 百分比,设定对象宽度占父元素100%,最外层div的父元素就是body元素,经测试,该div假如没有设置了高度,宽度,那就会继承body元素的高度和宽度,注意body元素默认高度是没有的,即0;默认宽度是页面的宽度,可以加border边框进行测试。 ---100%是根据父级元素的高度宽度来决定的,例如父元素浏览器窗口变小...
width：100%是宽度默认为父元素的宽度，margin,padding,border对它的宽度没影响 比如：父元素width为100px；padding:10px，它的宽度会变成120px；当没有padding,border只有margin：10px时，它会往父元素外移动 width:inherit为宽度自动变成父元素的宽度，margin,padding,border对它的宽度有影响 比如：父...
因为没有margin-box这个属性值,因此如果子元素左右margin值不为0 ,而宽度又为100%的话,则必然会超过父元素的宽度,无法实现与width: auto一致的效果。 *{ box-sizing: border-box; } .father1, .father2 { width: 200px; height: 200px; border: 10px solid red; ...
如果是p的width:100%,则说明p的width会得到980px就已经充满div区域,然后自己又有padding,所以会超出div。 而当width:auto时它是总体宽度(包括width,margin,padding,border)等于父级宽度(width,不包含父级的margin,padding,border),所以如果padding已经左右占去10px的空间,那么width给的值就是960px。
100%是宽度占父元素100%或页面100%(position：fixed)等，inherit的宽度是继承父元素的宽度，父元素是多少就是多少 主要在position不是static时有很大区别
width 默认值为auto,其有4种不同的表现: 充分利用空间:div>的宽度默认是100%于父级容器的; 收缩与包裹:浮动、绝对定位(absolute、fixed)、inline-block元素或...; width: 100%; } 块元素默认占据一行,无需设置width: 100%,设置后反而会失去流动性(margin/border/padding和content内容区域自动分配...