问答详情
源自:7-8 进度条--基本样式

width只能在html标签内设置吗?

width:40%;只能在行间样式设置吗?为什么我在css类样式中设置了没有用?

提问者:金州30勇士 2016-06-23 17:29

个回答

  • 狮砸sz
    2019-08-02 09:34:59

    https://img.mukewang.com/5d4392e40001827a13840648.jpg除了bootstrap引用的位置和文件不一样,其他地方都一样,可以在外部设置,否则动态的实时进度条也没法用bootstrap了对吧

  • JS嘛霸哥
    2017-02-27 22:31:05

    本来打了许多字,不小心关掉网页了。。。好悲伤

    我直接写结论了

    说一下决定css覆盖顺序的一个因素

    1. 内联权重应该是无穷大的。

    2. 越接近描述标签的选择器,权重越大,我称其为层次越深,权重越大,而且该权重任何情况下都大于3的权重加成

    3. 在同层次下 标签选择器 < 类选择器 < 类派生选择器 < ID选择器 < ID派生选择器

    4. 不要纠结派生选择器的层次问题,我们这里认为派生选择器的层次由最深层次决定

    5. 外部样式与内部样式拥有相同的权重

    具体文章戳这里http://note.youdao.com/noteshare?id=7ac70152ca5c25c5d93acbae52d72e74&sub=E1CF53B8D64C44F6930C8D423212DEAA

    写的不好的或者不正确的地方可以评论或者在这里回复什么的,我经常来逛这里,毕竟也是一个新人

  • 金州30勇士
    2016-06-24 01:08:36

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 放-->
    <title>Bootstrap进度条、媒体对象和well组件</title>
    <style type="text/css">
    .progressing{ width:60%;}
    </style>
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>
    <body> 
    <div>
        <div class="progress-bar progressing" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">60%</div>
    </div>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="bootstrap-3.3.5-dist/js/jquery-2.1.3.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    </body>
    </html>

    完整的代码是这样的,progressing没有用,但是如果像下面这样把width写在html标签里面就可以出现正常的进度条效果

    <div class="progress-bar" style="width:60%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">60%</div>

  • sen_quan
    2016-06-23 20:58:09

    也可以啊。应该是你写错了。

    发你的代码看看