CSS的“替换元素”:通过修改某个元素的属性值呈现的内容就可以被替换的元素。
替换元素的特性:
- 内容不受页面上的CSS的影响。也就是样式表现在CSS作用域之外
- 大部分有自己默认的尺寸,<img>标签没有
- 在很多CSS属性上有自己的一套表现规则
- 所有替换元素都是内联元素,都可以在一行显示
- 我们无法改变这个替换元素内容的固有尺寸
如下图:
各元素语法
<img>
<img src="1.png" alt="" srcset=""> // 我们能够看到的CSS中并没有给写出如何展示图片
<iframe>
<iframe></iframe>
<video>
<video src="movie.ogg" controls="controls">
<textarea>
<textarea></textarea>
<input>
<input type="text">
<select>
<select>
<option>橘子</option>
</select>
<button>
<button>确定</button>
<object>(这个元素H5中很多属性不支持了)
替换元素的尺寸计算规则
- 固有尺寸:替换内容原本的尺寸,如图片、视频作为一个独立文件存在的时候,都有着自己的宽度和高度/
- HTML尺寸:如<img>的width和height属性、<input>的size属性、<textarea>的cols、rows
- CSS尺寸:通过CSS的width和height等设置的尺寸
如果没有CSS尺寸和HTML尺寸,则使用固有尺寸作为最中的宽高。优先级 CSS尺寸>HTML尺寸>固有尺寸,如果CSS尺寸仅仅设置了宽或者高,那么按照“固有尺寸”含有的固有宽高比例进行取值。
同时要注意一个问题:<img>的src=“”在很多浏览器下依然会有请求,如safari(会有透明的边框线条),应该缺省src(直接没有src属性)。