vue去掉组件自带的width

html-css021

vue去掉组件自带的width,第1张

Vue可以通过设置 CSS 样式的width属性来去掉组件自带的width，例如在组件中添加样式：<style>.element { width: 0} </style>即可去掉组件自带的宽度。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>demo</title>

<style type="text/css">

    *{margin:0padding:0}

    .box{width:300pxheight:30pxbackground:#da251a}

    .click1{width:120pxheight:30pxline-height:30pxtext-align:centercolor:#fffbackground:#000margin-bottom:10px cursor:pointer}

    .click2{width:120pxheight:30pxline-height:30pxtext-align:centercolor:#fffbackground:#000cursor:pointer}

</style>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

    $(function(){

        $(".click1").click(function(){

            var bHeight=$(".box").height()

            bHeight+=30

            $(".box").css("height",bHeight)

        })

        $(".click2").click(function(){

            var bHeight=$(".box").height()

            bHeight-=30

            $(".box").css("height",bHeight)

        })

    })

</script>

</head>

<body>

<div class="click1">增加</div>

<div class="click2">减少</div>

<div class="box"></div>

</body>

</html>

自己把对应的jq库文件引入下即可。

写的不好，请谅解！

具体你说的是什么影响呢，你所谓的影响应该是继承。子类会部分继承父类的样式设置，例如：font-family, font-size, font-style,text-align, text-indent等等。至于width则不是继承的，默认是100%，也就是说一直到他父层的宽度，包括ul也是这样的。如果想清除掉父类的影响，可以将受影响的样式重写或者直接去除掉，回答完毕，希望采纳