文档章节

block,inline和inline-block概念和区别

Galy_绿
 Galy_绿
发布于 2015/12/05 23:47
字数 684
阅读 56
收藏 4

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

总体概念

  1. block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。

  2. 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素):

    • 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。

    • 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。

  3. block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,只能包含inline元素,而不能包含block元素。

  4. 一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。

block,inline和inlinke-block细节对比

  • display:block


    1. block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。

    2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

    3. block元素可以设置margin和padding属性。

  • display:inline


    1. inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

    2. inline元素设置width,height属性无效。

    3. inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

  • display:inline-block


    1. 简单来说就是将对象呈现为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属性的表象。


本文转载自:http://www.cnblogs.com/KeithWang/p/3139517.html

Galy_绿
粉丝 12
博文 133
码字总数 14908
作品 0
海淀
私信 提问
加载中

评论(0)

block,inline和inline-block概念和区别

总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;i...

巴顿
2015/08/27
392
1
block/inline/inline-block 与 置换元素/非置换元素

概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。 block元素通常被现实为独立的一块,会占据一整行的空间;...

evenyao
2018/07/03
0
0
使用inline-block代替float

CSS布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗? 浮动通常表现正常,但有时候搞起来会很纠结。...

姚欣炜
2014/05/27
67
0
应不应该使用inline-block代替float

本文由99根据Steven Bradley的《Should You Use Inline-Blocks As A Substitute For Floats?》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此...

石佛慈悲
2013/12/08
148
2
CSS中 inline、block、inline-block的区别

我们用firbug浏览别人网站时会发现设计者会在很多地方使用inline-block。我们都知道inline是声明div是内联对象,block是声明块对象,那么inline-block是什么意思,即内联又成块?接下来做个测...

喜欢敲代码的感觉
2014/10/20
37
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7.4解压方式安装mysql5.7

删除Mysql yum remove mysql mysql-server mysql-libs mysql-server; find / -name mysql #将找到的相关东西删掉;例如:rm -rf /var/lib/mysql rpm -qa|grep mysql #(查询出来的东东yum rem......

中颀013
24分钟前
21
0
如何在电脑屏幕上录制视频?安利一款屏幕录像软件

如何在电脑屏幕上录制视频?相信很多小伙伴都会有这个需求,毕竟如今网上有很多教学视频或者游戏直播视频等,它们在市场上有产出所以必定会有大量需求,所以,如果伙伴们也想通过对电脑视频进...

斯卡哈
24分钟前
22
0
SQL笔试 I 经典44题及答案解析

01 建表语句 create table Student(sid varchar(10),sname varchar(10),sage datetime,ssex nvarchar(10));insert into Student values('01' , '赵雷' , '1990-01-01' , '男');insert into......

osc_s4e6jr85
24分钟前
14
0
csharp WebUploader 分块上传

HTML部分 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="up6.index" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://......

osc_afifi2qt
26分钟前
13
0
通信原理的新认识-从实践到原理

在读书期间,本人是学习的通信专业,曾反复研读樊昌信老师写的《通信原理》这本书,一直停留在表面且没有新的理解,直到毕业之后从事通信相关的工作,才在实践层面对通信有了新认识。现就将新...

osc_2mvp7jnu
27分钟前
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部