Vue2&Vue3&CSS笔记

ysgTO

已于 2022-06-19 16:07:03 修改

阅读量70

点赞数

于 2022-06-18 15:29:31 首次发布

本文链接：https://blog.csdn.net/langko/article/details/125347679

版权

HTML解析 CSS百分比尺寸谷歌字体元素圆角悬停效果

关键词由CSDN通过智能技术生成

1.去除后端json数据的<>标签

msg:"<h2>这是一个标题</h2>"

<p>{{msg}}</p>  //有bug
<p v-html="msg"></p>  //这样就能直接显示html的原生语法

2.width，height里的百分号作用

    <style>
        .one {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
        }

        .one .two {
            width: 50%;
            height: 50%;
            background-color: greenyellow;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="two">
            盒子
        </div>
    </div>
</body>

即：width、height、relative：width相对于父元素的宽；height相对于父元素的高进行计算。relative:top、bottom相对父元素的高;left 、right相对于父元素的宽进行计算。

//如果父标签是body的话有一个会失效