新手,请前辈们不吝赐教

说到html中img标签是内联还是块状元素,我们首先要知道什么是内联(inline),什么又是块状(block)?

我也在网上查看了一些别人分享的经验,有一个讲到了文档流的概念,我觉得有必要在这里跟大家分享一下,将窗体自上而下分成一行行,并在每行中按从左至右的顺序排放元素,即为文档流。

A.任何不是块级元素的可见元素都是内联元素。

其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。

所以有个很好的方法测试是内联还是块状  设定css中 border-bottom:1px solid #000; 这时行元素是每行下方都有一条黑色的细线。而块级元素所显示的黑线只会在块的下方。

B.内联元素是一条线,而块状元素是一堆线段组成的有限面。

C.你能够把块容器元素div想象成一个个box,或者如果你玩过剪贴文载的话,那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图,用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸,网页布局设计也遵循了同样的模式。

D.内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素。

E.块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。

根据以上,在这博弈的过程中就产生了可变元素其基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别,一旦上下文关系确定了他的类别,他就要遵循块元素或者内联元素的规则限制。

下面列出我们常见的一些内联元素及块状元素:

img标签块状与内联的博弈的更多相关文章

  1. html 块状元素 内联元素

    块状元素 address - 地址blockquote - 块引用center - 举中对齐块dir - 目录列表div - 常用块级容易,也是CSS layout的主要标签dl - 定义列表fiel ...

  2. HTML的块状、内联、内联块状元素的特点

    元素分类及特点: 1.块级元素: 在html中<div>. <p>.<h1>.<form>.<ul> 和 <li>就是块级元素. ...

  3. css块级元素,内联元素,内联块状元素

    块元素 什么是块级元素?在html中<div><p><h1><form><ul>之类的就是块级元素.设置display:block是就将元素 ...

  4. CSS 块状元素和内联元素

    在用CSS布局页面的时候,我们会将HTML标签分成两种,块状元素和内联元素(我们平常用到的div和p就是块状元素,链接标签a就是内联元素) 块状元素一般是其他元素的容器,可容纳内联元素和其他块状元素, ...

  5. 【CSS3】---块状元素、内联元素(又叫行内元素)和内联块状元素

    元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...

  6. HTML元素分类:块级元素 内联元素和内联块状元素

    在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 1,块状元素 常用的块状元素有: <div>.<p>.<h1 ...

  7. html 标签内联元素和块元素分类【转】

    常见的块状元素与内联元素 块状元素 内联元素 address - 地址 blockquote - 块引用 center - 居中对齐 dir - 目录列表 div - 常用块级容易,也是CSS lay ...

  8. 2016/2/25 1, margin auto 垂直方向测试 无效 2,margin重叠 3,哪些是块状哪些是内联 4,display:block inline 导航栏把内联转块状最常见+ 扩展

    1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向 ...

  9. html5的结构标记与内联元素

    <article>标签定义外部的内容(结构元素)<section>标签定义文档中的节(section,区段).比如章节,页眉,页脚或文档中的其他部分(结构元素)<nav& ...

随机推荐

  1. ios7新特性2--多任务提升

    iOS 7 为应用程序提供新的后台执行模式: 应用程序需要需要下载新内容,可以向系统注册,这样程序会被定期唤起或者启动,然后可以在后台下载内容.要注册这个功能,需要打开Info.plist 文件,设置 ...

  2. uva 10496 Collecting Beepers

    一个简单的货郎担问题,用状态压缩dp可以解决: 解法: d(i,S)=min{d(j,S-{j})+dis(i,j) | j belongs to S}; 边界条件:d(i,{})=dis(0,i). ...

  3. eclipse 导入Android项目时报告 Invalid Project Description

    现象描述: 1.新建Android项目XX2.删除Android项目XX3.使用Existing Android Code Into Workspace(EACIW)导入Android项目XX,报错: ...

  4. WordPress A Forms插件HTML注入漏洞和跨站请求伪造漏洞

    漏洞名称: WordPress A Forms插件HTML注入漏洞和跨站请求伪造漏洞 CNNVD编号: CNNVD-201308-281 发布时间: 2013-08-20 更新时间: 2013-08- ...

  5. JS、C#编码解码

    escape不编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z encodeURI不编码字符有82个:!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@ ...

  6. Unity5 的新旧延迟渲染Deferred Lighting Rendering Path

    unity5 的render path ,比4的区别就是使用的新的deferred rendering,之前的4的deferred rendering(其实是light prepass)也被保留了下来 ...

  7. IIS7 上传 下载文件大小限制的设置

    IIS7 上传 下载文件大小限制的设置 本文来自IISBOY网 一.找到修改大小的配置文件和配置节点 本文来自IISBOY网 打开你系统盘(我是C盘),找到 C:\Windows\System32\i ...

  8. vijosP1014 旅行商简化版

    vijosP1014 旅行商简化版 链接:https://vijos.org/p/1014 [思路] 双线DP. 设ab,ab同时走.用d[i][j]表示ab所处结点i.j,且定义i>j,则有转 ...

  9. expect远程登陆hw交换机--测试通过1

    #!/bin/bash #connect_the_hw_switch #by osx1260@.com swip=172.16.56.2 swport= swpasswd='yourswpasswd' ...

  10. Django的请求流程(url)

    一.Django是怎么处理请求的? 当你通过在浏览器里敲http://127.0.0.1:8000/hello/来访问Hello world消息得时候,Django在后台有些什么动作呢? 所有均开始于 ...