CSS中的元素和定位

个人博客地址：CSS中的元素和定位

元素

块级元素(display：block)：p、h1、div等元素
这些元素显示为一块内容，即”块框”

行内元素(display：inline)：strong、span等元素
这些内容显示在行中，即”行内框”

行内盒元素（display：inline-block）：顾名思义，这个定义使得元素像行内元素一样水平依次排列，但是框的内容仍然符合块级框的行为，例如可以显示地设置宽度、高度、垂直外边距和内边距。

• 可以使用dispaly更改元素的类型：

display:inline-block //行内盒元素
display:block //使行内元素表现的像块级元素一样
display:none  //使这个框的内容不显示，不占用文档空间

• 将文本定义在块级元素开头时，即使没有显示定义，浏览器也会默认将其定义为块级元素。

CSS中的基本定位方式

• 普通流
• 浮动
• 绝对定位（position：absolute）
• 相对定位（position：relative）
• 固定定位（position：fixed）
• 继承定位（position：inherit）
• 默认定位/无定位（position：static）

1、普通流

除非专门指定，否则所有框均在普通流中定位
普通流中元素框的的位置由元素在HTML中的位置决定

块级框从上到下一个接一个垂直排列，垂直距离由垂直外边距决定，可能会发生margin合并现象。

行内框在一行中水平排列，可以使用水平内边距、边框、外边距来调整它们的水平间距。

但是垂直外边距、边框、外边框并不会影响行内框的高度。在行内框上设置显式地高度和宽度也没有影响。

由一行形成的水平框成为行框，行框的高度总是足以容纳其包含的所有行内框。即：行框高 = Max(所含行内框的高)
可以通过设置行高进而间接(在视觉上)增加行内框的高度。

2、浮动
浮动不占据文档流的空间，但是文本会会环绕在浮动元素周围，可能会覆盖掉文档流元素。

浮动图解：

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


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



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


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

清除浮动：

• overflow:hidden 这个方法可以清除浮动，但会产生BFC，强制包裹住元素，导致内容被截断或产生滚动条。
• clear类方法(推荐)

 .clear:after {
        content: ".";
        height: 0;
        visibility: hidden;
        display: block;
        clear: both;
    }

3、绝对定位

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

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

4、相对定位

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

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

5、固定定位

position: fixed;

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

6、继承定位

position: inherit;

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

7、默认值

position: static;

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。