《CSS世界》第四章学习心得——深入理解content（上）

1 替换元素是指内容可以被替换。如：<img>,<object>,<video>,<iframe>,表单元素。所有替换元素都是内联水平元素。

2 替换元素特点

（1）外观不受css控制，如无法改变单选复选的样式

（2）有默认的尺寸，大多为300px*150px，img为0，表单元素根据浏览器本身

（3）css属性有自身的一套规则，替换元素的基线为元素下边缘，非替换元素是字符x的下边缘

（4）没有::after和::before

3 <input type="button">和<button>区别在于前者的white-space是pre后者是normal，内容足够多时<button>自动换行。

4 无法改变替换元素内容的固有尺寸。

<div class="div"></div>
div:before {
    content: url(1.jpg);
    display: block;
    width: 200px; height: 200px;
}

图片默认尺寸为300px*300px的话，最终显示的尺寸不是设置的200px*200px，而是默认尺寸。

5 替换元素img没有src时，火狐浏览器下就是一个内联标签，而谷歌浏览器要有一个不为空的alt值，IE则有一个默认的占位符。

6 谷歌浏览器下所有元素都支持content，但其他浏览器只有::after和::before支持。

7 content属性生成的对象叫匿名替换元素，有如下特点

（1）content生成的文本不能复制和选中

（2）不能左右:empty元素，即使用content生成了文字，但依然当做空

（3）content动态生成值无法获取