常用css布局CSS中display对布局的影响以及元素display的默认值
看到前端越来越多的mvc框架出现，之前偶尔还看到有OOCSS（⾯向对象的CSS编程）的⽂章。
所以可以这样理解，前端HTML页⾯的所有元素（tag），也都可以理解对象。
每个对象有⾃⾝的属性，以及每个对象与其他对象的关系。关系中最重要也是本⽂讨论的是显⽰时候的位置关系。
每个HTML对象除了与其他HTML对象（标签）有关系之外，还有对象在显⽰时与浏览器或者windows对象的关系。
位置关系也就是页⾯的布局。如果能将合适的对象根据需要放在合适的位置，并与其他对象和睦相处，界⾯就可以按照设计者的想法实现了。
《下⾯内容摘⾃⽹络，帮助理解和记录》
根据CSS规范的规定，每⼀个⽹页元素都有⼀个display属性，⽤于确定该元素的类型，每⼀个元素都有默认的display属性值。
⽐如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；⽽span元素的默认display属性值为“inline”，称为“⾏内”元素。
div这样的块级元素，就会⾃动占据⼀定矩形空间，可以通过设置⾼度、宽度、内外边距等属性，来调整的这个矩形的样⼦；
与之相反，像“span”、“a”这样的⾏内元素，则没有⾃⼰的独⽴空间，它是依附于其他块级元素存在的，因此，对⾏内元素设置⾼度、宽度、内外边距等属性，都是⽆效的。
块元素⼀般都从新⾏开始，它可以容纳内联元素和其他块元素，常见块元素是段落标签'P"。“form"这个块元素⽐较特殊，它只能⽤来容纳其他块元素。
如果没有css的作⽤，块元素会顺序以每次另起⼀⾏的⽅式⼀直往下排。⽽有了css以后，就可以改变这种html的默认布局模式，把块元素摆放到想要的位置上去。⽽不是每次都另起⼀⾏。
需要指出的是，table标签也是块元素的⼀种，table based layout和css based layout从⼀般使⽤者（不包括视⼒障碍者、盲⼈等）的⾓度来看这两种布局，除了页⾯载⼊速度的差别外，没有其他的差别。但是如果普通使⽤者不经意点了查看页⾯源代码按钮后，两者所表现出来的差异就⾮常⼤了。
基于良好重构理念设计的css布局页⾯源码，⾄少也能让没有web开发经验的普通使⽤者把内容快速的读
懂。从这个⾓度来说，css layout code应该有更好的美学体验吧。
可以把块容器元素div想象成⼀个个box，或者如果你玩过剪贴⽂载的话，那就更加容易理解了。我们先把需要的⽂章从各种报纸、杂志总剪下来。每块剪下来的内容就是⼀个block。然后我们把这些纸块按照⾃⼰的排版意图，⽤胶⽔重新贴到⼀张空⽩的新纸上。这样就形成了你⾃⼰独特的⽂摘快报了。作为⼀种技术的延伸，⽹页布局设计也遵循了同样的模式。.
内联元素(inline element)⼀般都是基于语义级(semantic)的基本元素。内联元素只能容纳⽂本或者其他内联元素，常见内联元素 “a”。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素⼀般都从新⾏开始。⽽当加⼊了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。⽐如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新⾏开始的属性。
可变元素的基本概念就是他需要根据上下⽂关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，⼀旦上下⽂关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。⼤致的元素分类见全⽂。
关于inline element的中⽂叫法，有多种内联元素、内嵌元素、⾏内元素、直进式元素。基本上没有统⼀的翻译，爱怎么叫怎么叫吧。另外提到内联元素，我们会想到有个display的属性是display:inline；这个属性能够修复著名的IE双倍浮动边界问题。
块元素(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 - 客户端脚本

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。