深入理解content

content和替换元素

1 .替换元素的定义:内容可以被替换，比如img替换了src之后，图片就会变成另一张图片.通过更改某个属性值呈现的内容就可以被替换掉的元素叫做“替换元素”
2 .具体有以下

1 .img
2 .object
3 .video
4 .iframe
5 .表单元素textarea,input，select,button

3 .所有替换元素都是内联水平元素，只不过有的是inline,有的是inline-block。但是他们的计算规则都是一样的，可以不用纠结这个

可替换尺寸的三个尺寸大小

1 .固有尺寸,浏览器自带的尺寸,比如一个默认的input

image.png

1 .从这个默认里面我们可以看到原来可以设置的css属性和么多，一些简单的输入框感觉完全没有必要引入组件
2 .我们通过控制这些属性已经完全可以实现我们想要的样式了

2 .HTML尺寸,html尺寸只能通过HTML原生属性改变，主要有img的width,height,input的size，textarea的cols,rows等

image.png

3 .css的width,height属性,max-width,max-height来改变大小

4 .具体计算规则

1 .有css尺寸，以css尺寸为主
2 .没有css尺寸，有html属性，以html属性为主
3 .没有css尺寸，没有html属性，用固有尺寸作为最终的宽高
4 .内联替换元素和块级替换元素都是使用上面一套计算规则。也就是说就算是img{display:block}。也还是上面的规则

可替换元素的其他特性

1 .内容的外观不受页面上css的影响，如果想要改变元素本身的外观，需要浏览器暴露一些特殊的接口，比如input是无法改变内间距，背景色等操作
2 .有自己的尺寸。在web中，很多替换元素在没有明确尺寸设定的情况下，默认尺寸是300*150
3 .很多css属性有自己特殊表现规则，比如vertical-align
4 .最重要的特性：我们是无法改变这个替换元素内容固有的尺寸的

1 .比如图片，我们是无法改变一个图片的真实大小的。算是天生带来的
2 .之所以我们设置了width,height，图片变小了，是因为图片的content替换内容的方式是填充。外部设定的尺寸是多大，我们就填满。跟着一样大。
3 .尺寸变化的本质并不是改变固有尺寸，而是采用了填充作为适配html尺寸和css尺寸的方式

5 .替换元素只是能改变表现，但是实际上html里面的还是原来的数据，比如下面的标题，虽然渲染出来的是图片，但是浏览里面的还是css世界，便于seo。同时我们content生成的内容，都是不能选中和复制的
6 .

替换元素和非替换元素的差距是什么？

1 .src属性：没有src元素， img其实和普通的span元素都是一样的

img{
            display:inline-block;
            width: 256px;
            height: 192px;
            color: transparent;
            position: relative;
            overflow: hidden;
        }
        img::before{
            content: "";
            position: absolute; left: 0;
            width: 100%; height: 100%;
            background-color: #f0f3f9;
            visibility: visible;
        }

        img::after{
            content:attr(alt);
            position:absolute;
            bottom:0;
            left:0;
            width: 100%;
            line-height: 30px;
            color: white;
            font-size: 15px;
            background-color: rgba(0,0,0,0.5);
            transform:translateY(100%);
            transition:transform .2s;
        }

        img:hover::after{
            transform:translateY(0)
        }

<img alt="一张美女的图片" id='img'>
//实现效果，图片没加载出来的时候，hover的时候在下方显示图片的说明，图片加载出来说明消失

1 .替换元素的特性，没有src的时候，就是普通的元素，所以可以显示content，也支持after这些操作
2 .一旦有了src属性，变成了可替换元素，此时before里面的content实际上已经是图片了，所以文字就被占据了，这时点击文字效果就没了
3 .在chrome里面，所有元素都支持content属性

2 .content属性

1 .替换元素被替换的东西就是content box，对应的css属性是content,所以从理论上讲，content属性决定了是替换元素还是非替换元素
2 .使用content属性，可以让普通元素变成替换元素

<img alt="一张美女的图片" id='img'>
 <h1>css世界</h1>
两个都是普通的元素
img{
            content:url(baidu.jpg)
        }
        
        h1{
            content:url(baidu.jpg)
        }
//直接变成替换元素

3 .content生成的文本是无法选中的，无法复制的。无法被屏幕阅读设备读取，无法被搜索引擎抓取，被替换的仅仅是视觉层
4 .content动态生成的值无法被获取。