margin与百分比单位

Posted 2023-04-03

参考技术A 普通元素的百分比margin都是相对于容器的宽度计算的
绝对定位元素的百分比margin是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算的！

CSS的百分比布局如何解决Padding,margin,border问题

比如：布局如下
<style>
ul,li,body margin:0; padding:0;
ul li list-style-type:none; float:left; width:183px; height:246px;
ul li a display:block; position:relative; z-index:1; width:100%; height:100%;
ul li a:hover div display:block; border:4px solid red; z-index:2;
ul li div position:absolute; left:0; top:0; width:173px; height:236px;
img border:none
</style>
<ul>
<li><a href="#"><div></div><img src="images/product_img2.jpg" /></a</li>
<li><a href="#"><div></div><img src="images/product_img2.jpg" /></a</li>
<li><a href="#"><div></div><img src="images/product_img2.jpg" /></a</li>
<li><a href="#"><div></div><img src="images/product_img2.jpg" /></a</li>
<li><a href="#"><div></div><img src="images/product_img2.jpg" /></a</li>
<li><a href="#"><div></div><img src="images/product_img2.jpg" /></a</li>
</ul>

如上布局DIV为红框，如何用百分比的方法解决，而不是定死高死宽！

改为双层样式，即外层控制宽度、高度，内层控制border样式、margin样式；举例如下：
<div class="wrap">
<div class="inner">
这里是内容了
</div>
</div>
<style>
.wrapwidth:100%;
.innerborder:1px solid red;
</style>

能明白这种制作思路吗？就是分离出宽度控制的box追问

.inner的高度怎么自适应....

追答

宽高由wrap层控制，div默认的height是auto的，即自适应的。。。。

参考技术A 代码让人看得费解；另外li里面不宜嵌套div
具体问题请您详细说；可以的话我可以帮助你
另外，padding margin border一般来说是定值，试想下如果你用百分比，如果碰到一个宽屏的显示器那么中间的间隔会有多大；网页将会处于不可控的状态 参考技术B 不知道你想问什么。