1-6-1：标准流下的定位及应用

         css中有三种定位机制：标准流（normal flow）、浮动（float）和定位（position）。

一.标准流下的定位原则

• 行内元素的盒子在同一行中从左至右水平排列
• 块级元素的盒子占据一行,从上到下一个一个排列       
• 对于嵌套元素,子元素的盒子位于父元素盒子的里面,并且叠放在父元素的上方

• 盒子与盒子之间的距离由margin属性决定。盒子与内容之间的距离由padding决定

• 在HTML代码中插入一个元素就是向浏览器中插入一个盒子

下面是简单示例：

    <style>
        *{
            border: 2px dashed #f06;
            padding: 6px;
            margin: 2px;
        }
        body{
            border: 3px solid blue;
        }
        a{
            border: 3px solid blue;
        }
    </style>
    <div>网页里的块级元素</div>
    <a href="#">行内元素1</a><a href="#">行内元素2</a><a href="#">行内元素3</a>
    <div>无名块<p>这是盒子中的盒子</p></div>

 效果展示：

 

1.行内元素的盒子

        行内元素的盒子：在浏览器中得到一行带有高度的空间（行高由line-height属性决定，如果没有设置该属性，则是内容的默认高度）。

        注意：如果给行内元素的盒子设置上下border、margin、padding等值，导致其盒子的高度超过行高，那么盒子上下部分将和其他元素的盒子重叠。因此，不推荐对行内元素直接设置盒子属性，一般先设置行内元素以块级元素显示，再对它设置盒子属性。

2.display属性

        标准流中的元素可通过display属性来改变元素是以何种方法显示。常见display属性的取值及其含义如下：

display: block|inline|none|list-item|inline-block|flex

• 块级元素（display：block）

        - 每个元素占据浏览器一整行的位置，元素之间自动换行，从上到下依次排列。

• 行内元素（display：inline）

        - 行内元素是指元素与元素之间从左到右水平排列，只有当浏览器窗口容纳不下才会转到下一行，每个元素的宽度以容纳内容的最小宽度为准，对行内元素设置width、height、上下margin、上下padding属性均不能增加其占有的空间，但可以设置line-height、左右margin、左右padding。

• 行内块元素（display：inline-block）

        - 行内块元素将在一行内水平排列，但每个元素又具有块级元素的特点，设置width、height、margin、padding等属性均有效，也就是结合了行内元素和块级元素的特点。

• 隐藏元素（display：none）

        - 当某个元素被设置成display：none之后，浏览器会完全忽略掉这个元素，该元素将不会被显示，也不会占据文档中的位置。像title元素默认就是此类型。在制作下拉菜单、Tab面板时需要用display：none把未激活的菜单或面板隐藏起来。

        - 注意：使用visibility：hidden也可以隐藏元素，但元素仍然会占据文档中原来的位置。

•  列表项元素（display：list-item）

        - 在html中只有li元素默认是此属性，将元素设置为列表项元素并设置它的列表样式后，元素左边将增加列表图标（如小黑点）

• 弹性元素（display：flex）

        - xxx

修改元素的display属性一般有以下用途：

        > ：对行内元素设置宽度和高度，或者让行内元素从上到下排列（如制作垂直导航条），这时需将行内元素转换为块级元素显示（display：block）

        > ：使块级元素从左到右依次排列，可设置（display：inline-block）或者浮动属性。

        >：控制元素的显示和隐藏，如下拉菜单、提示框、Tab面板中的元素，隐藏时需设置display：none。