css margin 百分比

Mars-xq

已于 2023-09-06 09:20:11 修改

阅读量214

点赞数

文章标签： css 前端

于 2020-05-21 14:12:50 首次发布

本文链接：https://blog.csdn.net/sinat_31057219/article/details/106256388

版权

参考：

css中margin属性值百分比的使用

菜鸟教程： CSS margin(外边距)

菜鸟教程： CSS margin 百分比

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>

在这里插入图片描述

Mars-xq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css margin 百分比

参考：css中margin属性值百分比的使用菜鸟教程： CSS margin(外边距) 菜鸟教程： CSS margin 百分比 css margin 百分比：规定基于父元素的宽度的百分比的外边距writing-mode：属性定义了文本在水平或垂直方向上如何排布。writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lrhorizontal-tb：水平方向自上而下的书写
复制链接

扫一扫