【学习笔记】block、inline(替换元素、不可替换元素)、inline-block的理解
本文转载
总体概念
- block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独占一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。
- 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素):
- 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
- 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
- block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,只能包含inline元素,而不能包含block元素。
- 一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。
block,inline和inlinke-block细节对比
- display:block
- block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
- block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
- block元素可以设置margin和padding属性。
- display:inline
- inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
- inline(不可替换元素)元素设置width,height属性无效。
- inline(不可替换元素)元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
- (注:但是并不是所有的inline元素width,height,padding-top, padding-bottom, margin-top, margin-bottom不起作用,元素有另一种分类方式叫做替换元素和不可替换元素,绝大多数元素都属于不可替换元素,其内容直接表现给客户端,可以在控制台中查看元素内容。但是替换元素是浏览器根据元素的标签和属性,来决定元素的具体显示内容。控制台查看看不到元素的实际内容。例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素。替换元素是可以设置width,height,padding-top, padding-bottom, margin-top, margin-bottom的。所以有<img>、<input>、<textarea>、<select>、<object>等这些inline元素可以设置这些属性的情况)。
- display:inline-block
- 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
补充说明
- 一般我们会用display:block,display:inline或者display:inline-block来调整元素的布局级别,其实display的参数远远不止这三种,仅仅是比较常用而已。
- IE(低版本IE)本来是不支持inline-block的,所以在IE中对内联元素使用display:inline-block,理论上IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表象。
【学习笔记】block、inline(替换元素、不可替换元素)、inline-block的理解的更多相关文章
- WPF学习笔记(一):数据绑定之元素到元素绑定
前言 作为一只菜鸟,之前学了一段时间的WPF,但是没有总结,过了一学期发现好多东西都忘记了,很多东西还是需要记下来,以备后续复习. 数据绑定在事件中应用非常广泛,可以有效地减少代码量,那么什么是数据绑 ...
- 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- 【selenium学习笔记一】python + selenium定位页面元素的办法。
1.什么是Selenium,为什么web测试,大家都用它? Selenium设计初衷就是为web项目的验收测试再开发.内核使用的是javaScript语言编写,几乎支持所以能运行javaScript的 ...
- web前端学习(二)html学习笔记部分(2)-- 改良的元素(input元素等等)
1.2.5 HTML5 改良的 input 元素的种类 1.2.5.1 新增的input元素种类中的改良与增加 input 元素的种类 (1) 新增的input元素种类中的url类型.email类 ...
- [原创]java WEB学习笔记19:初识MVC 设计模式:查询,删除 练习(理解思想),小结 ,问题
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- Effective C++学习笔记 条款02:尽量以const,enum,inline替换 #define
尽量使用const替换 #define定义常量的原因: #define 不被视为语言的一部分 宏定义的常量,预处理器只是盲目的将宏名称替换为其的常量值,导致目标码中出现多分对应的常量,而const定义 ...
- PowerBuilder学习笔记之根据新PBL文件替换pbd文件的方法
在程序目录上右键,选择Build Runtime Library 在Build Runtime Library 页面点击OK,注意,会将全部的文件重新编译
- 细雨学习笔记:Jmeter测试计划最基本的元素
测试计划-用户组下最基本的元素: 1)HTTP请求默认值 2)HTTP Cookie 管理器(有些操作需要登录后才能访问,用户信息记录在Cookie中,各请求之间就可以共享Cookie了) 3)请求S ...
- JQUERY1.9学习笔记 之基本过滤器(十二) 根元素选择器
根元素选择器 描述:选择文档的根节点元素.jQuery( ":root" ) 例:显示文档根节点标签名. <!DOCTYPE html><html lang=&q ...
- Drools学习笔记2—Conditions / LHS 匹配模式&条件元素
Rule的LHS由条件元素(Conditional Elements—CE)和匹配模式(Patterns)组成 Patterns被用来指示出fact的字段约束 每个约束必须为true才能让RHS的ac ...
随机推荐
- kbmMemTable关于内存表的使用,以及各种三层框架的评价
关于内存表的使用(kbmMemTable) 关于内存表的使用说明一. Delphi使用内存表1.1 Delphi创建内存表步骤:1. 创建一个Ttable实例.2. 设置一个DataBaseName为 ...
- webpack与grunt/glub 的比较
webpack.grunt.glub 都是前端打包的工具: grunt/gulp 的工作方式是:在一个配置文件中,指明对某些文件进行压缩.组合.检查等任务的具体步骤,然后在运行中输入相应的命令. we ...
- ⭐register_chrdev、register_chrdev_region以及alloc_chrdev_region之间的区别
register_chrdev:Linux2.6.30之前所用,不用定义cdev:但 如果是register_chrdev 注册的话,这个时候,分配的次设备号,是从0~255,这样子的话,就分配的范围 ...
- java如何判断字符串是否为空(小知识)
方法一: 最多人使用的一个方法, 直观, 方便, 但效率很低: if(s == null ||"".equals(s));方法二: 比较字符串长度, 效率高, 是我知道的最好一个方 ...
- 90年代经典“手游”—拼图板小游戏Opencv实现
80后可能还对儿时玩过的一种经典木质的拼图板游戏记忆犹新,一般是一种4*4或5*5规格的手持活动板,通过挪动每个小板子的位置,拼出来板子上完整的图像,那时候还没有网吧,手机也还是大哥大的天下,所以这也 ...
- 【POJ 3468】 A Simple Problem with Integers
[题目链接] 点击打开链接 [算法] 本题用线段树很容易写,但是,笔者为了练习树状数组,就用树状数组的方法做了一遍 我们不妨引入差分数组c, 则sum(n) = c[1] + (c[1] + c[2] ...
- python-----windows下安装face_recognition库
如果直接在cmd命令界面 输入:pip install face_recognition 如下图所示: 如果第一次就会出现一系列的问题,解决此问题就安装如下步骤: 一.如果你本机没有安装vistual ...
- bzoj1084 [SCOI2005]最大子矩阵——背包
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1084 水题...分类讨论一下即可. 代码如下: #include<iostream&g ...
- 动画浅析-CAAnimation和CATransition
出处: http://blog.csdn.net/mad2man/article/details/17260887 //动画播放完之后不恢复初始状态 baseAnimation.removed ...
- Bootstrap-CSS:辅助类
ylbtech-Bootstrap-CSS:辅助类 1.返回顶部 1. Bootstrap 辅助类 本章将讨论 Bootstrap 中的一些可能会派上用场的辅助类. 文本 以下不同的类展示了不同的文本 ...