一张图图片分块html,css img图片是内联还是块？

img图片是一个内联元素，默认CSS display属性的值是inline。但是他同时也是replace元素，他有着特殊的表现：

1、可以设置width/height;

2、默认的，img元素在屏幕占据的空间与其图片的实际像素一致，除非CSS有设置或者自身的width/height HTML 属性有设置

3、如果img标签的包裹元素为也为inline元素，则img的边界可以超出其直接父元素的边界，直到自己的宽、高达到最大或者设定值为止，而且文档流中img的兄弟元素也不能遮盖住img。最常见的就是里面包含的

4、所以从行为上看,img元素作为替换元素，有着类似于Inline-block的行为，尽管在SPEC里面，他的确是一个inline元素

拓展知识：

替换和不可替换元素

从元素本身的特点来讲，可以分为替换和不可替换元素。

a) 替换元素

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如浏览器会根据标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据标签的type属性来决定是显示输入框，还是单选按钮等。

(X)HTML中的、、、、都是替换元素。这些元素往往没有实际的内容，即是一个空元素，例如：

浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

b) 不可替换元素

(X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端(例如浏览器)。例如：

段落的内容

段落

是一个不可替换元素，文字“段落的内容”全被显示。

替换元素一般有内在尺寸，所以具有width和height，可以设定。例如你不指定img的width和height时，就按其内在尺寸显示，也就是图片被保存的时候的宽度和高度。

对于表单元素，浏览器也有默认的样式，包括宽度和高度。

更多web开发知识，请查阅 HTML中文网！！

一张图图片分块html,css img图片是内联还是块？相关推荐

css图片悬停边框,CSS悬停边框使内联元素稍微调整
ITMISS 您可以使用框阴影而不是边框来实现此类功能.这是有效的,因为你的阴影不会"占用DOM中的大小",因此不会影响定位,不像边框那样.尝试使用像这样的声明box-shadow ...
html怎么将一张图撑大,div 如何防止图片太大被撑开
方法一: 原始处理方法是将要展示的图片进行处理.比如你的DIV宽度为550px(像素),那你上传的图片或放入网页的图片宽度就要小于500px,也就是你图片需要图片软件剪切.等比例缩小方法处理后再上传. ...
html背景图片压缩显示,css背景图片在浏览器缩小时为什么下面出现了白色的
我来补充一下原因. 首先,我测试了一下,的确存在这个问题. Scale the image, while preserving its intrinsic aspect ratio (if any), ...
html5如何将图片堆叠代码,css实现图片堆叠效果的方法介绍
css实现图片堆叠效果的方法介绍发布时间:2020-04-03 13:49:30 来源:亿速云阅读:51 作者:小新今天小编给大家分享的是css实现图片堆叠效果的方法介绍,很多人都不太了解,今天 ...
html中图片太大了,css背景图片太大的坏处与解决方法
在制作网页的过程中,有时候我们为了页面的个性.漂亮,会给通过CSS给网页设置一个很大的背景图片,可是背景图片太大的话不但会给我们的访客带来一些烦恼,还会对搜索引擎不友好,导致排名的降低,实在是得不偿失 ...
html删除图片效果,html+css实现图片右上角加删除叉、图片删除按钮
这篇文章主要介绍了html+css 实现图片右上角加删除叉.图片删除按钮,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下为了纪录下,以后可能用到 ...
html悬浮的图片居中,HTML/CSS：图片居中(水平居中和垂直居中)
css图片水平居中 1.利用margin: 0 auto实现图片水平居中利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下: 2.利用文本的水平 ...
css图片过大,CSS解决图片过大撑破DIV的方法
一.防止图片撑破DIV方法一原始处理方法是将要展示的图片进行处理.比如你的DIV宽度为500px(像素),那你上传的图片或放入网页的图片宽度就要小于500px,也就是你图片需要图片软件剪切.等比例缩 ...
html文字图片同一行,CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见欢思 ...

一张图图片分块html,css img图片是内联还是块？

一张图图片分块html,css img图片是内联还是块？相关推荐

最新文章

热门文章