CSS的替换元素

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属性）。