-
控制 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>
查看全部 -
margin：auto用法：
块级元素水平居中（内联元素不可）
write-mode:vertical-lr 垂直居中
绝对定位 top:0;right:0;bottom:0;left:0;margin:auto
查看全部 -
margin负值应用场景：
容器设置负值改变大小
margin负值padding正值等高布局（不是很懂）
内容设置负值改变位置
查看全部 -
margin 无效场景：
非替换元素正常书写模式下垂直方向无效
margin重叠
display为table相关类型（除table-caption table inline-table）
绝对定位元素与正常流分开
float元素与正常流分开
内联特性导致margin无效，基线问题
查看全部 -
margin查看全部
-
两栏自适应布局
查看全部 -
margin负值解决两端对齐
查看全部 -
父子元素重叠条件
查看全部 -
宽高2：1自适应矩形
查看全部 -
一侧定宽自适应布局
查看全部 -
空block元素margin重叠
查看全部
举报