css中的padding和margin和float各代表啥属性

Posted 2023-05-04

padding:内边距
是内容与边框的距离
margin：外边距
是边框与边界之间的距离
float：浮动
2个属性：左浮动 left 右浮动 right
浮动了以后可以把块元素改变为行内元素 参考技术A padding 表示内边距
margin 表示外边距
float 表示浮动

内边距与外边距你了解下CSS盒模型就知道了，浮动你再找相关知识点

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 不知道你想问什么。