-、行内元素和块级元素的区别与转换:

区别:

1.从形式上看,在标准文档流中,行内元素会水平方向呈线性排列,而块级元素会各占一行,垂着方向排列。

2.在结构使用上,块级元素可以包含行内元素和块级元素,而行内元素不能包含块级元素,其只能容纳文字及其他行内元素。

(扩展:有些称input为行内块级元素)。

3.从属性上分,可参考盒子模型属性理解,行内元素不能设置width,height,但可以设置line-height;不可以设置margin-top,margin-bottom,padding-top,padding-bottom,但可以设置margin-left,margin-right,padding-left,padding-right。

转换:

1.display:block,

2.设置行内元素浮动,float:

二、附表:

1.常见行内元素:

  

2.块级元素:

  

  

day001-html知识点总结(-)块级。行内元素区分的更多相关文章

  1. css position 和 块级/行内元素解释

    一.position 属性: static:元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. relative:元素框偏移某个距离.元素仍保 ...

  2. 块级&行内元素总结

    一.块级元素与行内元素的区别 块级元素与行内元素有几个关键区别: 格式 默认情况下: 块级元素会新起一行: 行内元素不会以新行开始. 内容模型 一般块级元素可以包含行内元素和其他块级元素.这种结构上的 ...

  3. 块级&行内(内联)元素

    行内元素列表 <a>标签可定义锚 <abbr>表示一个缩写形式 <acronym>定义只取首字母缩写 <b>字体加粗 <bdo>可覆盖默认的 ...

  4. CSS块元素、行内元素、行内块元素的转换

    一.块元素转行内元素:display:inline 二.行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: ...

  5. css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

  6. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  7. HTML中块级元素与行内元素

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  8. HTML 行内元素和块级元素的理解及其相互转换

    块级元素:div, p(段落), form(表单), ul(无序列表), li(列表项), ol(有序列表), dl(定义列表), hr(水平分割线), menu(菜单列表), table(表格).. ...

  9. CSS里常见的块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

随机推荐

  1. webservice基本功能介绍

    WebService, 能使得运行在不同机器上的不同应用无须借助附加的.专门的第三方软件或硬件, 就可相互交换数据或集成.依据WebService规范实施的应用之间, 无论它们所使用的语言. 平台或内 ...

  2. 【转】jqGrid学习之介绍

    JQGrid JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情.   ...

  3. 项目架构开发:数据访问层之UnitOfWork

    接上文 项目架构开发:数据访问层之IQuery 本章我们继续IUnitOfWork的开发,从之前的IRepository接口中就可以看出,我们并没有处理单元事务, 数据CUD每次都是立即执行的,这样有 ...

  4. Uri API

    四中LaunchMode:http://blog.csdn.net/liuhe688/article/details/6754323 onNewIntent:http://www.cnblogs.co ...

  5. .Net程序员学用Oracle系列(21):分组查询(GROUP BY)

    1.GROUP BY 标准分组 1.1.GROUP BY 概述 1.2.WHERE 和 HAVING 的区别? 2.GROUP BY 扩展分组 2.1.ROLLUP 分组 2.2.CUBE 分组 2. ...

  6. 用tp框架来对数据库进行增删改

    先来看添加 使用tp框架,对数据库进行添加操作,都有哪些方法 先在Main控制器中,做个方法 运行一下,注意地址,就要输tianjia了 然后再看一下数据库,有没有添加上数据 添加成功 再来看一下这个 ...

  7. 数据库 sql 表连接

    表链接 分为 横向链接   和纵向链接 横向链接 select * from student,score --笛卡尔积 查询所有表 会出现 笛卡尔积  就是所有匹配的结果都会展示一遍 为防止以上情况 ...

  8. ubuntu svn下载代码出错

    ubuntu svn下载代码出错: svn: OPTIONS of 'https://server.domain.local/svn/repo': SSL handshake failed: SSL ...

  9. css基础学习---简单理解

    1:在css中定义图片相对路径 #primary-nav { //相对路径 background: url(../images/alert-overlay.png) repeat-x; height: ...

  10. JAVA基础知识(2)--队列的操作

    队列是一种线性表,它只允许在该表中的一端插入,在另一端删除. 允许插入的一端叫做队尾(rear),允许删除的一端叫做队头(front): 下面用Java的数组进行模拟队列的操作: /**2015-07 ...