inline,block 和 inline-block 的区别
1. 总体概念
1.1 块级元素和内联元素
- block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素);
- block元素通常被现实为独立的一块,会单独换一行;
- inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。
1.2 HTML 元素布局级别
- 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
- 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
1.3 元素包含
- block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。
- 要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。
- 比如 P 元素,只能包含inline元素,而不能包含block元素。
1.4 改变布局
- 一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。
2. block,inline和inlinke-block细节对比
2.1 display:block
- block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
- block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
- block元素可以设置margin和padding属性。
2.2 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不会产生边距效果。
2.3 display:inline-block
- 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
3. 补充说明
- 一般我们会用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属性的表象。
转载于:https://www.cnblogs.com/HuoAA/p/5074145.html
inline,block 和 inline-block 的区别相关推荐
- display:inline-block,block,inline的区别与用法
一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置 margi ...
- block,inline和inline-block概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- CSS 中 display 的 block,inline,inline-block 这三个属性的区别
基本概念 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元 ...
- block,inline和inlinke-block细节对比
block,inline和inline-block概念和区别 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 ...
- HTML元素分类:inline、inline-block、block
三者可以互相转化--设置display属性值:inline.inline-block.block inline textarea.span.a.img.input.select 行内元素特征:(1)设 ...
- block、inline和inline-block
block.inline.inline-block 行内元素和块级元素 block inline inline-block 行内元素和块级元素的区别 常见用法 display 案例(简单实现导航栏) ...
- 【学习笔记】block、inline(替换元素、不可替换元素)、inline-block的理解
本文转载 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).blo ...
- DIV CSS display (block none inline)属性的用法教程
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
- php display block,CSS display (block inline none )常见属性和用法教程
display 属性规定元素应该生成的框的类型. 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定 ...
- Block和inline元素对比
所有的HTML元素都属于block和inline之一. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div ...
最新文章
- ab串(要求a在b的右面)
- Epic苹果诉讼案,却把索尼微软Steam都拉下水,网友忙吃瓜
- C11标准委员会成员解读C语言新标准
- 运维编排场景系列----给实例加到SLS机器组
- 2019年中国高校社会影响力排行榜出炉!有你母校吗?
- SQLi LABS Less-4 联合注入+报错注入
- skynet源码阅读7--死循环检测
- jmeter---ftp性能测试
- 【Spring基础】CGLIB动态代理实现原理
- Assimp库中文文档
- Java手机验证码的实现
- 谈谈CANopen协议的机制
- 1.13正版服务器,我的世界Minecraft梦幻世界服务器(1.7-1.13版本)
- 这一年又是稀里糊涂地度过了
- 华为HCIP认证对于大学生有没有用?毕业后有帮助吗?
- C语言 入门教程||C语言 指针||C语言 字符串
- ios表格添加底纹_如何在Word中的表格单元格中添加底纹
- 利用xls下载链接下载资源
- android 打开屏幕,Android打开屏幕
- 软件工程毕业设计题目100例
热门文章
- Redis 6.0 源码阅读笔记(7) -- ZSet 数据类型源码分析
- JavaScript数据类型之Number
- IDEA中.properties配置文件输入中文显示Unicode编码,本地编辑器,服务器打开显示Unicode编码问题解决方案
- [渝粤教育] 盐城工学院 大学物理(力学、振动与波动) 参考 资料
- 【渝粤题库】陕西师范大学400001 思想政治教育原理 作业(专升本)
- 2012北理机试题——已知中序和后序遍历序列,求先序
- CString转char*的两种方法讨论
- 【浙江大学PAT真题练习乙级】1002 写出这个数(20分) 真题解析
- SQL Server T—SQL 基本编程
- less--使用less.js将less文件转换成css