参考:
css margin 百分比 : 规定基于父元素的宽度的百分比的外边距
writing-mode:属性定义了文本在水平或垂直方向上如何排布。
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
- horizontal-tb:水平方向自上而下的书写方式。即 left-right-top-bottom,默认
- vertical-rl:垂直方向自右而左的书写方式。即 top-bottom-right-left
- vertical-lr:垂直方向内内容从上到下,水平方向从左到右
- sideways-rl:内容垂直方向从上到下排列
- sideways-lr:内容垂直方向从下到上排列
demo1: 固定margin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#demo {
width: 1000px;
height: 600px;
}
#demo p {
/*margin: 10% 5%;*/
margin: 100px 50px;
}
/*#demo {*/
/* -webkit-writing-mode: vertical-rl; !* for browsers of webkit engine *!*/
/* writing-mode: tb-rl; !* for ie *!*/
/*}*/
</style>
</head>
<body>
<div id="demo">
<p>恩,注意看我所在的位置。</p>
</div>
</body>
</html>
demo2 : 百分比margin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#demo {
width: 1000px;
height: 600px;
}
#demo p {
margin: 10% 5%;
/*margin: 100px 50px;*/
}
/*#demo {*/
/* -webkit-writing-mode: vertical-rl; !* for browsers of webkit engine *!*/
/* writing-mode: tb-rl; !* for ie *!*/
/*}*/
</style>
</head>
<body>
<div id="demo">
<p>恩,注意看我所在的位置。</p>
</div>
</body>
</html>
demo3 : 修改参考方向
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#demo {
width: 1000px;
height: 600px;
}
#demo p {
margin: 10% 5%;
/*margin: 100px 50px;*/
}
#demo {
-webkit-writing-mode: vertical-rl; /* for browsers of webkit engine */
writing-mode: tb-rl; /* for ie */
}
</style>
</head>
<body>
<div id="demo">
<p>恩,注意看我所在的位置。</p>
</div>
</body>
</html>