CSS:元素和基本定位

对基础的元素和定位作个总结，原文发表在我的个人博客：kmknkk.xin

元素

通常来说，元素分为块级元素和行内元素两大类，当然还有inline-block等其他元素，这里主要介绍这三类。

块级元素(disply：block)

块级元素显示为一块内容（即”块框”），若不做其他处理（如float:left）一般为一个接一个竖直排列。

块级元素的垂直距离由垂直外边距决定，可能会发生margin合并现象，具体可以参考我的另一篇文章：浅谈BFC和margin重叠。

常见的块级元素有：
- menu
- p, pre
- h1~h6, hr
- div, dir, dl
- table, ul, ol, li, form
- address, blockquote, center

行内元素(display：inline)

行内元素通常显示在行中（即”行内框”）水平依次排列。常见的有strong、span等元素。

与块级元素相比，行内元素的 height、width、transform、竖直方向上的 margin 和 padding 等属性是无效的（水平方向上的 margin 和 padding 有效）。

PS: 在行内元素中有个特例，即image。它虽然是行内元素，但是却有着block的特性。所以我们可以喜闻乐见的发现它既可以同行排列，又可以使用height、width、竖直方向的margin 和 buttom等属性。

行内盒元素(display：inline-block)

顾名思义，这个定义使得元素像行内元素一样水平依次排列，但是其内容仍然符合块级框的行为。
例如可以显示地设置宽度、高度、竖直方向上的 margin 和 buttom。

在开发中如有需要，我们可以使用dispaly来更改元素的类型，以达到预期的效果：

display: block;        /* 使行内元素表现的像块级元素一样 */
display: inline;       /* 默认值，像行内元素一样显示 */
display: inline-block; /* 行内盒元素 */
display: list-item;    /* 像列表项一样显示 */
display: none;         /* 使这个框的内容不显示，不占用文档空间 */

CSS中的基本定位方式

主要有以下6种主要定位方式：
1、 浮动
2、 绝对定位（position：absolute）
3、 相对定位（position：relative）
4、 固定定位（position：fixed）
5、 继承定位（position：inherit）
6、 默认定位/无定位（position：static）

普通流

在介绍定位之前，我们先来了解一个概念：普通流或者叫文档流

将窗体自上而下分成一行一行，并在每行中按从左至右的挨次排放元素，即为普通流/文档流。除非专门指定，否则所有元素均在普通流中。

内联元素不会独占一行，而每个非浮动块级元素都独有一行。当一个元素脱离正常文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

浮动

浮动元素不占据文档流的空间，但浮动元素的定位会基于正常的文档流，且文本会会环绕在浮动元素周围，可能会覆盖掉文档流元素。

不同于文档流元素，浮动元素按规则浮在行的一端，若当时行容不下，则另起新行再浮动。

下面我们来看看一些元素浮动布局的场景：

1、框1脱离文档流向右浮动直到碰到边界：

2、浮动元素之间会相互影响：

3、文本环绕在浮动元素周围：

可以通过给文本元素增加clear属性（left、right、both、none）来表示哪边不应该挨着浮动框以达到上图左边的效果。

清除浮动

为什么要清除浮动?
FE们对浮动可谓是又爱又恨，一方面：利用float，我们可以快速的进行一些布局；另一方面：使用float又会产生许多副作用，比如元素脱离父元素导致排版混乱、父元素高度坍塌，又比如文字环绕浮动元素等。

所以清除浮动就是为了更好地利用浮动的优点且规避其缺点。

清除浮动主要有两种方法：
(1)overflow:hidden: 原理是产生BFC，强制包裹住元素，但是BFC会导致内容被截断或产生滚动条。当然，其他所有可产生BFC的方式都可以清除浮动，产生副作用也一样。

(2)clear类方法(推荐)：原理就是通过在末尾创建一个对象，并给其添加clear属性来清除浮动。并使用其他属性来隐藏该元素。

 .clear:after {
        content: ".";         /* 生成内容作为元素 */
        height: 0;            /* 避免生成内容破坏原有布局 */
        visibility: hidden;   /* 使生成元素不可见，但是可交互 */
        display: block;       /* 使生成元素以块级元素显示，占满剩余空间 */
        clear: both;          /* 使用clear属性来清除浮动 */
    }
 .clear {
     zoom: 1;  /* 为了兼容IE */
 }

绝对定位

#myBox {
    position: absolute;
    left: 20px;
    top: 20px;
}

（1）绝对定位使元素位置与文档流无关，因此不占据文档空间。普通文档流元素就当绝对定位元素不存在一样。

（2）相对定位元素的left、top等属性的基准为：以当前元素向外寻找已定位祖先元素（一般为我们用position: relative来设置该元素），如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

相对定位

#myBox {
    position: relative;
    left: 20px;
    top: 20px;
}

（1）在使用相对定位时，无论是否移动，元素仍然占据原来的空间（占据文档空间）。因此，移动元素会导致覆盖其他框。

（2）相对定位元素的left、top等属性的基准为其原先的位置。

固定定位

position: fixed;

将元素从文档流中移除（脱离文档流），使元素固定在窗口某一位置不动，并且跟随页面滚动始终处于页面固定的位置。

继承定位

position: inherit;

顾名思义，从父类元素继承定位属性。

默认值

position: static;

默认值。没有定位，元素出现在正常的流中，使用该定位的元素会忽略 top, bottom, left, right 以及 z-index 声明。