css-内联（行内）元素、块元素、margin、padding

时间 2019-11-13

标签 css 内联元素 margin padding 栏目 CSS 繁體版

原文原文链接

css-内联（行内）元素、块元素、margin、padding

block元素的特色：
php

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

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

咱们来详细了解它们的状况。
块元素(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这样的属性，让他也有每次都重新行开始的属性。web

A：行内就是在一行内的元素，只能放在行内；块级元素，就是一个四方块，能够放在页面上任何地方。

B：说白了，行内元素就好像一个单词；块级元素就好像一个段落，若是不另加定义的话，它将独立一行出现。浏览器

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

D：块级无素的显著特色是：每一个块级元素都是从一个新行开始显示，并且其后的无素也需另起一行进行显示。ide

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的效果？
有两种方法：
一、先使用display:inline-block属性触发块元素，而后再定义display:inline，让块元素呈递为内联对象（两个display要前后放在两个CSS声明中才有效果，这是IE的一个经典bug，若是先定义了display:inline-block，而后再将display设回inline或block，layout不会消失）。代码以下（...为省略的其余属性内容）：
div {display:inline-block;...}
div {display:inline;}
二、直接让块元素设置为内联对象呈递（设置属性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……