前言
在实习期间，发现自己在之前搭建前端页面的时候，过多的依赖UI框架，而对基础知识的掌握不到位，就比如最基本的布局，所以花了很多功夫来巩固自己的基础知识。此篇主要是谈在布局的时候，display、position以及float属性的使用。
块级元素与行内元素
p、ul、form、div 等元素被称为块级元素，这些元素会自动换行，span、input 等元素称为行内元素，这些元素在一行中水平排列，行内元素的高度由其内容撑开，不可显示的设置其高度，这就是为什么在span上设置height属性不起作用的原因。
简单了解了这些知识，看看display常用的几个属性。
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
在显示隐藏元素的时候经常会用到把display设为none或者’ ’，设为none可以让元素脱离文档流，不显示并且不占文档空间，而设为’ ’其实就是把属性设置为block或inline。
inline-block属性是CSS2.1新加值，IE8以上及其他主流浏览器都已经支持，它可以使元素像行内元素那样水平一次排列，但是框的内容符合块级元素行为，能够显示设置宽，高，内外边距。
另外，可以通过不同的赋值改变元素生成框的类型，也就是说，通过将display属性设置为block，可以使行内元素表现的想块级元素一样，反之亦然。
定位
要想了解CSS元素定位就需要了解position属性了，position属性有几个常用值如下。
| 值 | 属性 |
|---|---|
| inhert | 规定应该从父元素继承 position 属性的值。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| relative | 生成相对定位的元素，相对于元素本身正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
CSS有三种基本的定位机制：普通流，浮动和绝对定位。
普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是最常见的方式。
在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现会改变。 另外，固定定位fixed是绝对定位，但不包含在普通文档流中。
浮动
浮动元素不在文档的普通流中。浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。
如果包含块太窄，无法容纳水平排列的浮动元素，那么其它浮动块向下移动，如果这些浮动元素的高度不同，那么向下移动的时候可能被卡住。
行框和清理
浮动元素旁边的行框被缩短，从而给浮动元素流出空间，因而行框围绕浮动框。要想阻止行框围绕在浮动元素外边，可以使用clear属性，属性的left，right，both，none表示框的哪些边不挨着浮动框。
另外，应用值为hidden或auto的overflow属性会有一个副作用：自动清理包含的任何浮动元素，所以在页面出现相关问题时，可以看看是不是这个属性的问题。
来源：博客园
