CSS基本知识4-CSS行模型

display:inline、block、inline-block

block元素的特色是：
　　老是在新行上开始；
　　高度，行高以及顶和底边距均可控制；
　　宽度缺省是它的容器的100%，除非设定一个宽度

inline元素的特色是： 
　　和其余元素都在一行上；
　　高，行高及顶和底边距不可改变；
　　宽度就是它的文字或图片的宽度，不可改变。

display:inline-block将对象呈递为内联对象，可是对象的内容做为块对象呈递。旁边的内联对象会被呈递在同一行内，容许空格。

意思就是，这个对象自己是一个行元素，可是它的内容是块（也就是说它能够设高宽。这能够想象成，一个通道上的一些物件，能够对齐，能够有有自已的大小等。

 

块级元素：块状元素排斥其余元素与其位于同一行，能够设定元素的宽（width）和高（height），块级元素通常是其余元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。

行内元素：行内元素不能够设置宽（width）和高（height），但能够与其余行内元素位于同一行，行内元素内通常不能够包含块级元素。行内元素的高度通常由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有a, em ,strong等。

例如：咱们能够给div或p应用下面样式，可是a标签却没法应用下面的样式。

1	.test{ width : 100px ; height : 100px ;}

固然咱们还能够经过样式display属性来改变元素的显示方式。当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现。因此咱们能够给a标签应用如下样式：

1	.test{ display : block ; width : 50px ; height : 50px ;}

另外，若是咱们即想让一个元素能够设置宽度高度，又想让它以行内形式显示，这时咱们能够设置display的值为inline-block。如：

1	a{ display :inline- block ; width : 100px ; height : 100px ;}

附：

块元素(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 - 定义变量 



可变元素 

可变元素为根据上下文语境决定该元素为块元素或者内联元素。 


* applet - java applet 

* button - 按钮 

* del - 删除文本 

* iframe - inline frame 

* ins - 插入的文本 

* map - 图片区块(map) 

* object - object对象 

* script - 客户端脚本