Question

CSS 我不懂这两个地方定义的width和height有什么不同 分别是起到什么作用

Answer 1

img标签内的width和height属性是标签本身自带的属性，而css中的width和height则是外部附加的样式。从优先级来说css的属性比标签自带的属性优先级要高，也就是说如果两者同时存在，那么最终起作用的将是css中的样式属性。
打个比方，你新买一部手机，手机本身会自带有默认设置，也自带有各种内置APP，这些就相当于其自带属性，然后你根据说明书可以修改手机的各种设置，也可以自行下载各种APP（包括覆盖自带的APP），这些就相当于CSS中的样式设置了。
总之，假如img标签以最简单的形式出现：<img src="123.gif"/> ，那么它的width和height就是图片（即123.gif）本身的width和height；
而如果是 <img src="123.gif" width="100" height="50" />，它就会按所设定的width和height来显示（即100*50）；
而如果是这样：
<style>img.a {width:200px; height:100px}</style>
<img class="a" src="123.gif" width="100" height="50"/>
就会按class指定的css样式来显示（即200*100）；
还有一种情况是这样的：
<style>img.a {width:200px; height:100px}</style>
<img class="a" style="width:300px;height:200px" src="123.gif" width="100" height="50"/>
这时候它会按style属性内设定的样式来显示（即300*200），换句话说就是它的优先级是最最最高的！

Answer 2

1、两个地方的定义如下

1）、第一处定义的宽高是img标签的class选择器样式

2）、第二处定义的宽高是img标签的属性样式

2、不同的地方

class选择器里的宽高样式优先级要高于属性里设置的宽高样式

3、只设置img属性的高宽度效果，如下

4、如果img标签页设置了class类选择器宽高度，效果如下

5、假如同时又设置了一个ID 选择器的宽高，效果如下

6、优先级的规则是规定好的，以下为优先级顺序

ID 选择器， 如 #id{}

类选择器， 如 .class{}

属性选择器， 如 a[href="segmentfault.com"]{}

伪类选择器， 如 :hover{}

伪元素选择器， 如 ::before{}

标签选择器， 如 span{}

通配选择器， 如 *{}

建议：css样式，多实际操作些例子，慢慢就可以掌握和熟悉

Answer 3

1、首先给你分析html元素标签，每个标签都有自己的属性，列如下方是img标签的属性，里面包括了你提到的，width和height，可以定义图片的宽高

2、css样式的目的就是可以控制HTML里面标签元素的样式，几乎可以控制大部分元素属性样式。

3、分析你的样式

首先你img图片有设置宽95高84，默认会以这个值生效。你上方设置样式就会以css优先级最高

img.a{} img是指定图片标签的，类名为a的样式，如果前面不加img所有类名为a的都会生效。

你可以删掉，上方css试一下，会执行图片标签上的宽高

追问

你复制来的这个表我都看过 我试过不管改变img内部的width和height还是css样式表里的 图片都会发生改变 我不知道他们分别是在哪里起作用

追答

我说的还不够明白么？图片属性和样式表控制优先级，你还看不懂么？默认执行的是img图片里的宽高属性，样式表里面加了，优先执行样式表，样式表里面加了，图片上的属性会失效，

追问

OK 明白了 多谢

Answer 4

比较容易理解的区别是：

上面的样式主要控制图片的框的大小；

下面的图片宽度和高度是图片的属性，主要控制图片的大小；

试验一下：

要做出区分，可以把下面的宽高的值设置为大于上面的，然后把上面的值加上：border:#ccc solid 1px;  这段代码，然后预览一下。

Answer 5

没有区别，只是写的位置不同导致优先级不同，写在style标签内的width优先级比img自带的width优先级高，同时存在时，tyle标签内的width会覆盖img自带的width
请采纳