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 内联元素的更多相关文章
-
Code笔记之:CSS块级元素、内联元素概念
文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...
-
CSS文档流与块级元素和内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
-
html块级元素和内联元素小结
Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用的<div>.<p>.<ul>默认状态下都是属于块级元素.块级 ...
-
html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。
html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...
-
CSS文档流与块级元素和内联元素(文档)
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...
-
(转) html块级元素和内联元素区别详解
http://blog.csdn.net/chen_zw/article/details/8713205 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显 ...
-
CSS块级元素、内联元素概念
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
-
html块级元素和内联元素区别详解
块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...
-
html的块级元素和内联元素
常用的块级元素: address , center , div , dl ,, form , h1 , h2 , h3 , h4 , h5 , h6 , menu , ol , p , table , ...
-
CSS的块级元素和内联元素的概念
三生有幸,偶然之下知道了<CSS世界>这本书,让我产生了探究 CSS 的想法. 这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理. 可能对于我们前端开发人员来讲,一般接触到的元 ...
随机推荐
-
在代码中调用gdb
转载:http://blog.csdn.net/hanchaoman/article/details/5583457 在SIGSEGV的handler中调用gdb, 命令gdb [exec file] ...
-
第一个thinkphp入口文件
ThinkPHP3.1.3_full已下载 网站根目录下编辑一个入口文件index.php <?php define('APP_NAME','Index'); //项目名称 define('AP ...
- JS 之 offsetWidth\offsetleft
-
ubuntu16.04下源码安装onos1.0.2
由于工作需要,下载安装onos1.0.2的版本,大家看需求可以下载安装更高级的版本 参考链接:http://www.sdnlab.com/14650.html 1.系统环境 Ubuntu16.04 L ...
-
python+appium+unittest自动化测试框架环境搭建
一.基础软件准备 1.python 版本最新版本,python的IDE使用pycharm.具体的下载链接: python https://www.python.org/ pycharm:https:/ ...
-
python学习之字典(Dictionary)练习
Python字典是另一种可变容器模型,且可存储任意类型对象,如字符串.数字.元组等其他容器模型 字典中分为键值对 , key 类型需要时被哈希. value 类型可以是 字符串.数字.元组等其他容器模 ...
-
WebPack命令执行的时候,其内部处理逻辑是什么
1.首先webpack发现并没有通过命令的形式,给它指定入口和出口 2.向根目录查找“webpack.config.js”配置文件 3.解析这个配置文件,并得到配置文件中导出的配置对象 4.当拿到配置 ...
-
Displaylink安卓驱动
Displaylink安卓驱动 2019年最新版V2.3.1
-
rap使用手册
https://github.com/thx/RAP/wiki/user_manual_cn
-
Chrome 的 Material Design Refresh UI初探
今天Chrome自动升级到69.0.3497.92, 发现UI已经变成了"Material Design Refresh". Chrome 浏览器的页面标签已经不再像以往那样倾斜和 ...