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

Posted 2023-04-04

比如：布局如下
<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 不知道你想问什么。

padding和margin设置成百分比

Margin和Padding是我们在网页设计经常使用到的CSS样式，他们分别是间距和填充，一个作用于盒子外面，一个作用于盒子里面，默认的情况下，这些属性的值都会被计算在盒子的面积里面，在网页开发中的流体布局或者是响应式布局中，经常将Margin和Padding设置成百分数，那么到底这个百分数是多少，他是如何计算的呢？

 

Margin

假设我们有这样的一段HTML代码，外面一个DIV宽度980px，高度500px，里面有一个子元素DIV，宽度和高度都不设置，然后给他设置margin:10% 5%，这个属性相当于margin:10% 5% 10% 5%。

HTML代码

<div class="demo1">
    <div>这个div设置：margin:10% 5%</div>
</div>

CSS代码

.demo1{ height:500px; width:980px; margin:0 auto; background:#EEE; overflow:hidden;}
.demo1 div{margin:10% 5%; background:#666;}

为了方便查看效果，我们还分别为他们设置了不同的背景。

这里还出现了一个小的hack，就是demo1盒子不会紧挨着body，也就是不会定格布局，而且body元素上面还有一段空白，这段空白的高度刚好是.demo1 div元素的margin-top，demo1和.demo1 div元素都是顶格对其的，只要给demo1元素设置overflow:hidden，即可解决这个问题，点击这里查看示例。

我们根据以往的理解，.demo1 div的margin应该是：50px 49px 50px 49px，但是运行以后，通过查看盒模型示意图，却发现是：98px 49px 98px 49px，这是怎么回事呢

 

这个98px是如何得到的呢，其实就是宽度的10%，等等，我们设置TOP为10%，不是应该参考元素的高度么，不信你可以点击这个示例页面看看效果。

总结

从上面的示例和代码，我们可以发现当margin设置成百分数的时候，其top right bottom left的值是参照父元素盒子的宽度进行计算，在w3c的规范中也是这样描述的： margin 的百分比值参照其包含块的宽度进行计算，同样的padding如果设置成百分数的话，其盒子模型和margin是一样的。

这只发生在默认的 writing-mode: horizontal-tb; 和 direction: ltr; 的情况下，当书写模式变成纵向的时候，其参照将会变成包含块的高度。

为什么要选择宽度做参照而不是高度呢？

这其实更多的要从CSS设计意图上去想，因为CSS的基础需求是排版，而通常我们所见的横排文字，其水平宽度一定（仔细回想一下，如果没有显式的定义宽度 或者强制一行显示，都会遇到边界换行，而不是水平延展），垂直方向可以无限延展。但当书写模式为纵向时，其参照就变成了高度而不再是宽度了。