1个有关css中margin

日期:2020-09-22 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

今日在群里边,有人抛出了1个有关css中margin-right沒有实际效果的难题。CSS编码和HTML编码以下:

拷贝编码
编码以下:

.style1{
width:400px;
height:440px;
background-color:red;
border:5px solid silver;
margin-top:20%;
margin-right:30%;
}


拷贝编码
编码以下:

<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="style1"><img src="bei.jpg"></div>
</body>
</html>

把他的编码copy下来,换1张照片,我做了1个test,还真的不好。
 
难道说是top会掩藏掉right的实际效果?或跟次序相关?后来证实这些全是不正确的念头。融合w3school对margin-right和自身模糊的记忆力:访问器是默认设置左对齐的。设计灵感1来,margin-right实际上合理果的,只是在默认设置即规范流的状况的下显示信息不出来实际效果。假如摆脱规范流呢?想起这个,就立马在css文档中加了1个:float:right;随后在检测的情况下就可以看到margin-right的实际效果了。
 
用float:left也是不好的,这跟默认设置的状况是类似的。

PS:有关right特性失效的缘故:right特性仅有在position是absolute的状况下才合理,而默认设置的position值是static,right特性是失效的。提议能不应用right就不必应用right特性。