了解CSS margin-start and...
了解CSS margin-start and...
margin-start 和 margin-end
margin-start、border-start
控制 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>
writing-mode:horizontal-tb;//默认:水平方向,从上到下
writing-mode: vertical-rl;//垂直方向,从右向左
writing-mode: vertical-lr;//垂直方向,从左向右
改变dom流的方向,也包括margin-start的方向
-webkit-margin-collapse:<collapse>(默认-重叠)|<discard>(取消-margin失效)|<separate>(分隔-margin累加)
控制margin重叠,
webkit下的其他margin相关属性:margin-before、margin-after
margin-collapse
margin-start margin-end
overflow属性: visible 默认值。内容不会被修剪,会呈现在元素框之外。 hidden 内容会被修剪,并且其余内容是不可见的。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
margin-start 1、正常的流向,margin-start等同于margin-left,两者重叠不累加。 2、如果水平流是从右往左,margin-start等同于margin-right。 3、在垂直流下(writing-mode:verticall-*;),margin-start等同于margin-top。 二、margin-start、border-start,随着流特性应运而生。 三、webkit下的其他margin特性。 (1)margin-before:默认流向的情况下,等同于margin-top。 (2)margin-after:默认流向的情况下,等同于margin-bottom。 (3)margin-collapse: -webkit-margin-collapse: <collapse>(默认-重叠) | <discard>(取消) | <separate>(分隔)