-
如何去掉margin-top重叠
查看全部 -
给父级元素的第一个或最后一个元素设置margin等同于给父级元素设置margin
查看全部 -
margin重叠的三种情况
查看全部 -
margin重叠只发生在垂直方向上
查看全部 -
普通元素margin的百分比是相对于宽度计算的
查看全部 -
设置块级元素的margin可以实现留白
查看全部 -
利用margin影响可视尺寸的特性可以实现左侧定宽的自适应布局
查看全部 -
没有设定width/height的普通block水平元素其可视尺寸会由margin影响
查看全部 -
可视尺寸表示实际占尺寸，占据尺寸表示包括margin之后的尺寸
查看全部 -
margin:auto 是自动分匹配剩余空间的，当一个元素在没有被强制定宽高时，是撑满一个方向的，当强制定宽高时，此方向上就有剩余的空间，当margin：auto时，此方向上将自动分配空间，实现居中效果。
水平垂直居中：
position：absolute
top：0px
bottom：0px
left：0px
right：0px //将元素撑满整个空间
width：100px height：100px //将元素强制定宽高
margin：auto //margin分配剩余空间，达到水平垂直居中的效果
查看全部 -
控制 margin 重叠
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap{
}
.a{
background: green;
color: white;
margin: 30px;
-webkit-margin-collapse: separate;
}
.b{
background: deepskyblue;
color: white;
margin: 50px;
-webkit-margin-collapse: separate;
}
</style>
</head>
<body>
<div class="wrap">
<div class="a">margin:30px</div>
<div class="b">margin:50px</div>
</div>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
background: rgba(0,255,255,0.25);
direction: rtl;
}
img{
width: 150px;
margin-left: 100px;
-moz-margin-start: 100px;
-webkit-margin-start: 100px;
margin-start:100px;
}
</style>
</head>
<body>
<div class="box">
<img src="img/img.jpg"></img>X
</div>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div >
<p >图片右浮动,【俄罗斯总统普京当面向习近平主席祝贺生日】俄罗斯塔斯社、俄新社6月15日上午报道称，据俄总统新闻秘书佩斯科夫介绍，俄总统普京今天上午在杜尚别出席亚信第五次峰会前亲自前往中国国家主席习近平下榻宾馆，当面向习主席祝贺66岁生日。普京高度评价习主席在俄中关系发展中发挥的重要作用，强调不久前习主席对俄进行国事访问取得圆满成功，相信俄中关系将继续保持良好发展势头。习主席对普京表示感谢，指出普京在中国很受欢迎。普京总统向习主席赠送俄罗斯冰淇淋，习主席回赠中国茶叶。</p>
</div>
<img src="img/img.jpg" width="150px" >
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
overflow: hidden;
resize: vertical;
}
.box >div{
width: 200px;
text-align: center;
margin-bottom: -600px;
padding-bottom: 600px;
}
.child-orange{
float:left;
background: orange;
}
.child-green{
float: left;
background:green;
}
</style>
</head>
<body>
<div class="box">
<div class="child-orange">
<div>左黄</div>
<div>左黄</div>
</div>
<div class="child-green">
<div>右绿</div>
</div>
</div>
</body>
</html>
查看全部
举报