img标签设置display:block，宽度无法100%

MorePainMoreGain 发布于2019-08-29 16:24 / 773人阅读

摘要：替换元素浏览器根据元素的标签和属性，来决定元素的具体显示内容。替换元素是其内容不受视觉格式化模型控制的元素，例如标签，嵌入的文档之类或者，这些叫做替换元素。

img标签设置display:block，宽度无法100%

一些个人总结，第一次发文章，有什么不足的地方，还请各位多提意见

现象

如下代码，img标签设置了display：block，尺寸宽度无法设定为100%




    
    img标签设置display:block，宽度无法100%

原因 替换元素和非替换元素

元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box,也翻译为“盒子”）。但是不同的元素显示的方式会有所不同，例如div和span不同，而strong和p也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一。而根据元素本身的特点可以分为替换元素（replaced element）和非替换元素，非替换元素，在W3C中没有给出明确的定义，但我们可以由替换元素对应着非替换元素，所以可以理解为除了替换元素，其它的就是非替换元素。

替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。替换元素是其内容不受CSS视觉格式化模型控制的元素，例如img标签，嵌入的文档（iframe之类）或者applet，这些叫做替换元素。比如img元素通过src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，却看不到图片的实际内容，而且img元素的内容通常会被src属性指定的图像替换掉；例如input元素的type属性决定是显示输入框，还是单选按钮等。(x)html中的img , input , textarea , select , object都是替换元素。这些元素没有实际的内容，即是个空元素

非替换元素：(X)HTML 的大多数元素是非替换元素，他们将内容直接告诉浏览器，将其显示出来

img标签为替换元素，替换元素的特性之一就是尺寸由内部元素决定，且无论其 display 属性值是 inline 还是 block。这个特性很有意思，对于非替换元素，如果其 display 属性值为 block，则会具有流动性，宽度由外部尺寸决定，但是替换元素的宽度却不受 display 水平影响，因此，display 水平是无法让尺寸 100%自适应父容器的

解决

解决办法就是，通过设定的width尺寸 100%




    
    img标签设置display:block，宽度无法100%

小结

刚开始的博客之旅，记录一些自己学习点滴和经验，接下来会不断努力的探索和记录，希望文章能有助于各位，有什么不足之处，还望大家多多指出

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113721.html

自适应宽度元素单行文本省略用法探究

摘要：单行文本省略和元素及其父元素的属性都无关元素或为元素内单行文本省略，需要给元素或为元素添加样式为元素的子元素如果是自适应宽度时，内的子元素实现单行文本省略，需要给添加样式单行文本省略是现代网页设计中非常常用的技术，几乎每个站点都会用到。单行文本省略适用于显示摘要信息的场景，如列表标题、文章摘要等。在响应式开发中，自适应宽度元素单行文本省略容易失效不起作用，对网页开发这造成困扰。因此，本文将要...

K_B_Z 2019-04-23 13:46 评论0 收藏0
你不知道的CSS

摘要：不要忘了给子元素设置字号用來清除浮动除了著名的清除浮动类，利用属性也可以清除浮动。本文首发于我的博客 CSS的世界是神奇的。随着各浏览器WEB标准的日趋统一，CSS在WEB世界中扮演的角色也愈发的重要。甚至于在GitHub上出现了You-Dont-Need-JavaScript这样Star近万的优秀开源项目，抛开该项目的实用性不说，项目中的众多的DEMO就已经证明了CSS的强大。当然...

cnio 2019-08-29 13:19 评论0 收藏0
浅析RWD

摘要：三响应式网页设计的基本原理标签，允许页面宽度自动调整大多数移动浏览器将页面放大为宽的视图以符合屏幕分辨率。解决方案使用，选择器清除浮动，只适用于非浏览器。由于移动设备屏幕大小的限制，在其上进行显示的内容一般是经过精心筛选的。一、前言现今，无论是移动设备、平板电脑、PC，屏幕大小各不相同，若是针对每个屏幕大小单独设计一个解决方案，则会大幅增加网站建设的复杂程度和运营成本。响应式网页设...

_Dreams 2019-08-01 15:10 评论0 收藏0
浅析RWD

摘要：三响应式网页设计的基本原理标签，允许页面宽度自动调整大多数移动浏览器将页面放大为宽的视图以符合屏幕分辨率。解决方案使用，选择器清除浮动，只适用于非浏览器。由于移动设备屏幕大小的限制，在其上进行显示的内容一般是经过精心筛选的。一、前言现今，无论是移动设备、平板电脑、PC，屏幕大小各不相同，若是针对每个屏幕大小单独设计一个解决方案，则会大幅增加网站建设的复杂程度和运营成本。响应式网页设...

0x584a 2019-08-30 12:52 评论0 收藏0
CSS display 属性详解

摘要：如果项目只有一根轴线，该属性不起作用。后两个属性可选。弹性比为的子代占据父代框的空间是弹性比为的同级属性的两倍。其默认值为，也就是不具有弹性。此元素会根据上下文作为块级元素或内联元素显示栅格模型，类似栅格模型，类似转自属性详解作者 display的所有属性 {/* CSS 1 */ display: none; display: inline; display: block; disp...

xingqiba 2019-08-29 12:41 评论0 收藏0