文档章节

css-内联(行内)元素、块元素、margin、padding

随智阔
 随智阔
发布于 2012/11/17 16:14
字数 2497
阅读 108
收藏 0

css-内联(行内)元素、块元素、margin、padding

block元素的特点:

总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度。<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

inline元素的特点:
和其他元素都在一行上;
高,行高及顶和底边距不可改变;
宽度就是它的文字或图片的宽度,不可改变。<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子

我们来详细了解它们的情况。
块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。
如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是,table标签也是块元素的一种,table based layout和css based layout从一般使用者(不包括视力障碍者、盲人等)的角度来看这两种布局,除了页面载入速度的差别外,没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后,两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码,至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说,css layout code应该有更好的美学体验。
你能够把块容器元素div想象成一个个box,或者如果你玩过剪贴文载的话,那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图,用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸,网页布局设计也遵循了同样的模式。
内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素 “a”。
需要说明的是:inline element的中文叫法,有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译,爱怎么叫怎么叫吧。另外提到内联元素,我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。


A:行内就是在一行内的元素,只能放在行内;块级元素,就是一个四方块,可以放在页面上任何地方。

B:说白了,行内元素就好像一个单词;块级元素就好像一个段落,如果不另加定义的话,它将独立一行出现。

C:一般的 块级元素诸如段落<p>、标 题<h1><h2>…、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ……..

D:块级无素的显著特点是:每个块级元素都是从一个新行开始显示,而且其后的无素也需另起一行进行显示。

E:<span>在CSS定义中属于一个行内元素,而<div>是块级元素。
用容器这一词会更容易形象理解它们的存在与用途,行内元素相当一个小容器,而<div>相当于一个大容器,大容器当然可以放一个小容器 了。<span>就是小容器。
块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签’P”。“form”这个块元素比较特殊,它只能用来容纳其他块元素。


display:inline
它可以让行内显示为块的元素,变为行内显示,例如
DIV1
DIV2
这里DIV1和DIV2分别占一行,但是你给他们加上属性后变了
DIV1 DIV2
DIV1和DIV2这时候显示在同一行了
和 display:inline 对应的是 display:block,block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素,例如 SPAN 是行内显示的,但是你加了 display:block 属性就不一样了
[font style= "display:block "] SPAN1 [/font]

block一般一个块占一行,除非float

inline是自动排为一行,就象段内的文字一样,可成为多行。

display:inline比较经典的用法是用在 <ul> 下的 <li> 中

display:inline 对应不显示为 display:none

display:block 对应不显示为 hidden

说通俗点 样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方



inline-block的元素特点:

display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。
将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。(准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性)
     并不是所有浏览器都支持此属性,目前支持的浏览器有:Opera、Safari在IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析,也不难理解为什么IE下,对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout,而它本就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。
IE下块元素如何实现display:inline-block的效果?
有两种方法:
1、先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回inline或block,layout不会消失)。代码如下(...为省略的其他属性内容):
div {display:inline-block;...}
div {display:inline;}
2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等)。代码如下:
div {display:inline; zoom:1;...}


块元素(block element)
◎ address - 地址
◎ blockquote - 块引用
◎ center - 举中对齐块
◎ dir - 目录列表
◎ div - 常用块级容易,也是css layout的主要标签
◎ dl - 定义列表
◎ fieldset - form控制组
◎ form - 交互表单
◎ h1 - 大标题
◎ h2 - 副标题
◎ h3 - 3级标题
◎ h4 - 4级标题
◎ h5 - 5级标题
◎ h6 - 6级标题
◎ hr - 水平分隔线
◎ isindex - input prompt
◎ menu - 菜单列表
◎ noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
◎ noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
◎ ol - 排序表单
◎ p - 段落
◎ pre - 格式化文本
◎ table - 表格
◎ ul - 非排序列表 内联元素(inline element)
◎ a - 锚点◎ abbr - 缩写
◎ acronym - 首字
◎ b - 粗体(不推荐)
◎ bdo - bidi override
◎ big - 大字体
◎ br - 换行
◎ cite - 引用
◎ code - 计算机代码(在引用源码的时候需要)
◎ dfn - 定义字段
◎ em - 强调
◎ font - 字体设定(不推荐)
◎ i - 斜体
◎ img - 图片
◎ input - 输入框
◎ kbd - 定义键盘文本
◎ label - 表格标签
◎ q - 短引用
◎ s - 中划线(不推荐)
◎ samp - 定义范例计算机代码
◎ select - 项目选择
◎ small - 小字体文本
◎ span - 常用内联容器,定义文本内区块
◎ strike - 中划线
◎ strong - 粗体强调
◎ sub - 下标
◎ sup - 上标
◎ textarea - 多行文本输入框
◎ tt - 电传文本
◎ u - 下划线
◎ var - 定义变量
按ie的说法,margin,padding,border这些是layout属性。似乎不该用在inline元素上。
但css2.1规范里有说明:
margin适用于
all elements except elements with table display types other than table-caption, table and inline-table
padding适用于
all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
不过,
margin-top/bottom对non-replaced inline元素无效(have no effect on non-replaced inline elements)。
margin-left/right对non-replaced inline元素会起作用,但当non-replaced inline是a元素时,ie下使用margin-left/right会有一个a:active虚框错位的小问题。
http://bbs.blueidea.com/thread-2927667-1-1.html
所以我觉得对non-replaced inline元素使用margin不大好。
对replaced inline元素(img,textarea,button这些)的使用margin同block上效果也不大相同。
http://www.cssass.com/blog/index.php/2009/121.html
padding也差不多。
padding-top/bottom用在non-replaced inline元素上,我们也看不出效果。
最后,感谢蓝色代码 经典论坛,感谢百度百科,感谢意祥的 未眠花与蝴蝶,感谢

lzy19881227,感谢angelox……

© 著作权归作者所有

随智阔
粉丝 21
博文 687
码字总数 705350
作品 0
海淀
程序员
私信 提问
CSS盒子以及简单的数值设置

块元素与内联元素区别 一般情况做布局用块元素 div。在一行上就用<span> 块元素又名块级元素(block element)和其对应的是内联元素(inline element),都是html规范中的概念 block元素的特点 ...

RanoB
2016/12/22
29
0
CSS 属性篇(七):Display属性

一、display属性介绍 display 属性规定元素应该生成的框的类型。 以下是一些关于display比较常用的属性值: 值 描述 none 元素不会显示 block 此元素将显示为块级元素,此元素前后会带有换行...

Madman0621
02/24
0
0
CSS原理解析之模型篇

写在前面: 尝试回答几个问题: 什么是盒模型,控制盒模型的属性有哪些? Margin、Padding、Border、Width、Height这些属性改变/影响盒模型,但每个属性都会在所有元素上生效么? 如果存在区...

美团点评点餐
2017/10/10
0
0
想要清晰的明白(二)CSS 盒模型Block box与Line box

在上一篇想要清晰的明白(一): CSS视觉格式化模型|盒模型|定位方案|BFC比较宏观的了解了盒子模型的作用,接下来就详细的介绍两种盒子的具体细节 Block Box (图自《css权威指南》) 水平格式...

mooonx
2017/11/29
0
0
从CSS盒子模型说起

前言 总括: 对于盒子模型,BFC,IFC和外边距合并等概念和问题的总结 原文地址:从CSS盒子模型说起 知乎专栏:前端进击者 博主博客地址:Damonare的个人博客 为学之道,莫先于穷理;穷理之要...

Damonare
2017/07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用CSS自定义属性构建骨架屏

写在前面 几天前看到薄荷前端团队分享的《前端骨架屏方案小结》,突然回想起一年前看到的max bock写的《Building Skeleton Screens with CSS Custom Properties》,翻译整理写下出此文,分享...

前端老手
昨天
7
0
Docker常用命令小记

除了基本的<font color="blue">docker pull</font>、<font color="blue">docker image</font>、<font color="blue">docker ps</font>,还有一些命令及参数也很重要,在此记录下来避免遗忘。 ......

程序员欣宸
昨天
5
0
MAT使用-jvm内存溢出问题分析定位

1.MAT简介: MAT 全称 Eclipse Memory Analysis Tools 是一个分析 Java堆数据的专业工具,可以计算出内存中对象的实例数量、占用空间大小、引用关系等,看看是谁阻止了垃圾收集器的回收工作,...

xiaomin0322
昨天
5
0
内网和外网之间的通信(端口映射原理)

首先解释一下“内网”与“外网”的概念: 内网:即所说的局域网,比如学校的局域网,局域网内每台计算机的IP地址在本局域网内具有互异性,是不可重复的。但两个局域网内的内网IP可以有相同的...

Jack088
昨天
6
0
3.深入jvm内核-原理、诊断与优化-4. GC算法和种类

一、GC算法和种类 GC的概念 GC算法 引用计数法 标记清除 标记压缩 复制算法 可触及性 Stop-The-World GC的对象是堆空间和永久区 引用计数法 老牌垃圾回收算法 通过引用计算来回收垃圾 使用者...

hexiaoming123
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部