两大CSS显示属性display block和inline区别-display: inline-block;

本文向大家简单介绍一下CSS display block和CSS display inline的区别，块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签＇P；而内联元素(inline element)一般都是基于语义级(semantic)的基本元素

CSS display block和CSS display inline的区别

CSS display block

块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签＇P。"form"这个块元素比较特殊，它只能用来容纳其他块元素。

　　如果没有CSS的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了CSS以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，tablebasedlayout和CSSbasedlayout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。

但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的CSS布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说，CSSlayoutcode应该有更好的美学体验吧。

　　你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。.

CSS display inline

内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素"a"。

　　块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了CSS控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上CSS display block这样的属性，让他也有每次都从新行开始的属性。

　　可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。

块元素(CSS display block element)

◆address-地址
◆blockquote-块引用
◆center-举中对齐块
◆dir-目录列表
◆div-常用块级容易，也是CSSlayout的主要标签
◆dl-定义列表
◆fieldset-form控制组
◆form-交互表单
◆h1-大标题
◆h2-副标题
◆h3-3级标题
◆h4-4级标题
◆h5-5级标题
◆h6-6级标题
◆hr-水平分隔线
◆isindex-inputprompt
◆menu-菜单列表
◆noframes-frames可选内容，（对于不支持frame的浏览器显示此区块内容*noscript-）可选脚本内容（对于不支持script的浏览器显示此内容）
ol-排序表单
◆p-段落
◆pre-格式化文本
◆table-表格
◆ul-非排序列表

内联元素(CSS display inline element)

◆a-锚点
◆abbr-缩写
◆acronym-首字
◆b-粗体(不推荐)
◆bdo-bidioverride
◆big-大字体
◆br-换行
◆cite-引用
◆pre-计算机代码(在引用源码的时候需要)
◆dfn-定义字段
◆em-强调
◆font-字体设定(不推荐)
◆i-斜体
◆img-图片
◆input-输入框
◆kbd-定义键盘文本
◆label-表格标签
◆q-短引用
◆s-中划线(不推荐)
◆samp-定义范例计算机代码
◆select-项目选择
◆small-小字体文本
◆span-常用内联容器，定义文本内区块
◆strike-中划线
◆strong-粗体强调
◆sub-下标
◆sup-上标
◆textarea-多行文本输入框
◆tt-电传文本
◆u-下划线
◆var-定义变量

【编辑推荐】