块级元素 Vs 内联元素

时间:2022-09-22 11:42:37

HTML的元素可以分为两种:

  • 块级元素(block level element )
  • 内联元素(inline element )

二者的区别如下:

1. 块级元素独占一行(除非显示修改元素的display属性),内联元素在一行内显示;

2. 块级元素可以设置width、height属性,而内联元素设置这些属性无效;

3. 块级元素的默认width为100%,而内联元素的的width是根据其内容或子元素确定的。

二者的相互转化:

块级元素——>内联元素:display:inline;    内联元素——>块级元素:display:block;

介于二者之间的状态:

设置display:inline-block;属性,使元素对外表现为行内元素,在一行内显示;对内表现为块级元素,能设置width、height属性。

常见的块级元素和行内元素

块级元素:div p h1 h2 h3 h4 h5 h6 dl ul ol li table hr(水平分割线)

内联元素:a img span input(输入框) select(项目选择) textarea(多行文本输入框) sub(下标) sup(上标)

块级元素 Vs 内联元素的更多相关文章

  1. Code笔记之:CSS块级元素、内联元素概念

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

  2. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  3. html块级元素和内联元素小结

    Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用的<div>.<p>.<ul>默认状态下都是属于块级元素.块级 ...

  4. html元素类型 块级元素、内联元素&lpar;又叫行内元素&rpar;和内联块级元素。

    html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...

  5. CSS文档流与块级元素和内联元素(文档)

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南&gt ...

  6. (转) html块级元素和内联元素区别详解

    http://blog.csdn.net/chen_zw/article/details/8713205 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显 ...

  7. CSS块级元素、内联元素概念

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  8. html块级元素和内联元素区别详解

    块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...

  9. html的块级元素和内联元素

    常用的块级元素: address , center , div , dl ,, form , h1 , h2 , h3 , h4 , h5 , h6 , menu , ol , p , table , ...

  10. CSS的块级元素和内联元素的概念

    三生有幸,偶然之下知道了<CSS世界>这本书,让我产生了探究 CSS 的想法. 这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理. 可能对于我们前端开发人员来讲,一般接触到的元 ...

随机推荐

  1. 在代码中调用gdb

    转载:http://blog.csdn.net/hanchaoman/article/details/5583457 在SIGSEGV的handler中调用gdb, 命令gdb [exec file] ...

  2. 第一个thinkphp入口文件

    ThinkPHP3.1.3_full已下载 网站根目录下编辑一个入口文件index.php <?php define('APP_NAME','Index'); //项目名称 define('AP ...

  3. JS 之 offsetWidth&bsol;offsetleft

  4. ubuntu16&period;04下源码安装onos1&period;0&period;2

    由于工作需要,下载安装onos1.0.2的版本,大家看需求可以下载安装更高级的版本 参考链接:http://www.sdnlab.com/14650.html 1.系统环境 Ubuntu16.04 L ...

  5. python&plus;appium&plus;unittest自动化测试框架环境搭建

    一.基础软件准备 1.python 版本最新版本,python的IDE使用pycharm.具体的下载链接: python https://www.python.org/ pycharm:https:/ ...

  6. python学习之字典&lpar;Dictionary&rpar;练习

    Python字典是另一种可变容器模型,且可存储任意类型对象,如字符串.数字.元组等其他容器模型 字典中分为键值对 , key 类型需要时被哈希. value 类型可以是 字符串.数字.元组等其他容器模 ...

  7. WebPack命令执行的时候,其内部处理逻辑是什么

    1.首先webpack发现并没有通过命令的形式,给它指定入口和出口 2.向根目录查找“webpack.config.js”配置文件 3.解析这个配置文件,并得到配置文件中导出的配置对象 4.当拿到配置 ...

  8. Displaylink安卓驱动

    Displaylink安卓驱动 2019年最新版V2.3.1

  9. rap使用手册

    https://github.com/thx/RAP/wiki/user_manual_cn

  10. Chrome 的 Material Design Refresh UI初探

    今天Chrome自动升级到69.0.3497.92, 发现UI已经变成了"Material Design Refresh". Chrome 浏览器的页面标签已经不再像以往那样倾斜和 ...