1.替换元素按外接盒可分为行内元素和块级元素。根据是否有可替换的内容,我们也可以分为可替换元素和不可替换元素。我们通过修改某个属性值所呈现的内容可以替换的元素称为替换元素。是典型的替换元素。受页面上css的影响,样式在css范围之外。如果要替换元素本身的外观,则需要外观等属性。或者是浏览器本身暴露的接口。但是直接输入[type='checkbox']是不能改变内部间距、背景色等特性的。它有自己的大小。当很多替换元素没有明确的尺寸设置时,默认尺寸为300*150px。如果是-默认为0,表单替换元素的大小与浏览器有关。css属性上有一套自己的表达规则。典型的是垂直对齐。比如当它的值为baseline时,非替换元素就是x的底边,替换原色就是元素的底边。2、显示和替换元素所有的替换元素都是行内水平元素,只是它们的表现形式不同,不同的元素在不同的浏览器中表现不同。ie和chrome的返回值是一样的,只是firefox在textarea和大部分input中返回的是inline而不是inline-block,只是我们不需要关心它们的显示。区别是因为替换元素有许多不同于非替换元素的行为规则。其中之一就是宽高的计算规则。简单描述就是:替换元素的显示要么是inlineblock,要么是inline-block,大小计算规则是一样的。3.尺寸计算规则替换元素有三种尺寸,intrinsicsize,htmlsize,csssize。css大小是通过css的宽高和max-width/min-width计算出来的。max-height/min-height的计算规则如下:如果没有csssize和htmlsize,就使用intrinsicsize。如果没有css大小,则使用html大小。有可用的css大小。只需使用css属性来确定大小。如果固有尺寸有固有的宽高比,但css和html尺寸只设置了宽度或高度,还是按照原来的宽高比设置。如果以上不匹配,最终的形式是宽300,高150。内联元素和块级元素使用同一套计算规则。关于img,可以查看object-fit的相关属??性,以达到更好的应用。四、替换元素和非替换元素1、替换元素和非替换元素只有一个区别。如果srcfirefox的img为空,disolay:block;outline:1pxsolid的宽度;会100%适配父元素,呈现为span,同时设置width和height也无济于事。它完全是一个不可替代的元素。Chrome也有类似的特点。不用src,只要上面有alt属性和属性值,看起来就和非替换元素的表达形式一致。2.Chrome浏览器只少了一个content属性:img{content:url(1.jpg)}上面的效果和是一样的还有一点就是如果图片有了src地址,我们就可以使用content属性来把图片的内容替换掉。但唯一改变的是视觉呈现。如果你右击保存,现实中还是图片文字对应的原始src。图片的情况如下:《css世界》h1{width:180px;height:36px;background:url(logo.png);text-indent:-999px;}#也可以使用content这行代码来实现效果h1{content:url(logo.png)}解决方案很完美,但是还是有点瑕疵。我们没办法设置大小,只能是重影,这样看起来有点模糊。对于移动端,推荐使用svgimage3,content和替换元素的content属性生成的对象称为匿名替换元素。因此,由内容生成的元素具有许多不同于普通元素的特性。我们使用content生成的元素是不能被选中的,reader和SEO都很差,所以不要把重要的东西放在身边::empty伪类动态生成的值是获取不到的。作者:白朴1024链接:https://www.jianshu.com/p/072...来源:简书版权归作者所有。商业转载请联系作者授权,非商业转载请注明出处。
css-替换元素的内容相关文章