本文探讨了在Vue框架中组件布局的问题。实验表明，HTML页面中调用的组件不受父元素CSS属性控制，而组件内部嵌套的子组件则会受到父组件模板样式的约束。这意味着子组件只能在其父组件规定区域内展示，可以通过设置负margin实现特殊效果。
前言：本文是为了总结个人在vue学习中摸索组件布局的规律而创作。
我们队组件进行布局需要了解该问题：
我们在操纵组件进行一些列效果实现时，组件的模板是否受到父元素的干扰？
我们来进行实验，看看实验结果：
首先我们在index.html中创建一个div作为导航栏：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vueex</title>
<style type="text/css">
.guide-line{
width: 100%;
height: 70px;
position: absolute;
margin-top: 0px;
background:#7B68EE;
}
.guide-img{
position: absolute;
margin-top: 10px;
margin-left: 50px;
width: 100px;
height: 100%;
font-family: 微软雅黑;
font-size:40px;
}
/* .guide-to{
position: absolute;
width: 500px;
height: 100%;
f
最低0.47元/天 解锁文章
8808
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
