css-内联(行内)元素、块元素、margin、padding
来源:互联网 发布:windows 10 官方下载 编辑:程序博客网 时间:2024/05/29 14:30
http://hi.baidu.com/ate0611/blog/item/a7d39d134ab6eb085aaf538c.html
此文章转载自百度,纯属个人学习之用~~~~
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”这个块元素比较特殊,它只能用来容纳其他块元素。
它可以让行内显示为块的元素,变为行内显示,例如
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)
◎ 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 - 非排序列表
◎ 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元素上,我们也看不出效果。
- css-内联(行内)元素、块元素、margin、padding
- css-内联(行内)元素、块元素、margin、padding
- css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
- css-内联(行内)元素、块元素
- CSS 8.2 高级-对齐补充(关于行内元素,块元素,替换元素和非替换元素及其width height margin padding特性)
- 行内(又称为内联)元素的margin、padding属性值问题
- CSS: 块级元素与内联元素(行内元素)
- 块级元素与行内元素(内联元素)
- 块元素和行内元素(内联元素)
- 块级元素和内联元素(行内元素)
- margin/padding与块级元素/行内元素的关系
- css中行内元素padding,margin,width,height说明
- css中行内元素padding,margin,width,height说明
- CSS三大元素类型:块状元素、内联(行内)元素、内联块状元素
- CSS:替换元素(Replaced)、不可替换元素(Nonreplaced)、块元素(Block-level)和行内/内联元素(Inline)
- CSS 块级元素 行内元素
- CSS 块元素和行内元素
- 块对象与内联对象(行内元素)
- Linux 对象存储文件系统的研究
- windows7文件共享设置,详细步骤
- QT类 Qevent事件处理过程 事件过滤器
- 理解inode
- 一个挺长的多表联查SQL语句
- css-内联(行内)元素、块元素、margin、padding
- Linux 脚本编写基础
- globaladdatom
- 关于图片显示质量的细节问题
- 分布式流式计算平台——S4
- 给RPM软件包签名
- MFC:CImage显示OpenCV:Mat矩阵图像
- java截屏核心代码
- PS1 options.