width只能在html标签内设置吗？-慕课网

首页课程实战体系课手记专栏慕课教程

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

来源：7-8 进度条--基本样式

金州30勇士

2016-06-23 17:29

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

写回答关注

4回答

狮砸sz

2019-08-02 09:34:59

除了bootstrap引用的位置和文件不一样，其他地方都一样，可以在外部设置，否则动态的实时进度条也没法用bootstrap了对吧

0 0
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
写的不好的或者不正确的地方可以评论或者在这里回复什么的，我经常来逛这里，毕竟也是一个新人

1 1

JS嘛霸哥

http://note.youdao.com/share/?id=7ac70152ca5c25c5d93acbae52d72e74&type=note#/ 地址有误，图片暂时裂掉了，我正在找图床，运行代码就可以看到效果了

2017-02-27 22:33:47

共 1 条回复 >

金州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标签里面就可以出现正常的进度条效果

2 0

金州30勇士回复sen_qu...

我试了下，父级元素加了progress类也还是无法显示进度，要不你试一下

2016-06-27 12:29:08

共 2 条回复 >