CSS之——盒子模型、盒子的定位与浮动

一、CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

二、网页布局与盒子模型

1，标准文档流

标准文档流：指在不使用其他与排列和定位相关的特殊 CSS 规则时，各种元素的排列规则；

2，块级元素 VS 行内元素

块级元素：以一个块的形式展现，跟同级的兄弟块依次竖直排列，左右撑满，比如<div>； 行内元素：以普通的一个 DOM 节点展现，跟同级的兄弟元素横向排列，排满后，自动换行，比如<span>；

三、盒子再标准流中的定位

1，行内元素之间的水平 margin

       marin-right+margin-left

2，块级元素之间的竖直 margin

       Margin-bottommargin-top 以大的为标准

3，嵌套盒子之间的 margin

      子块的 margin 将以父块的内容为参考

4，margin 属性可以设置成负值

四、盒子的浮动与定位

1，盒子浮动 float

Float 属性： 默认是 none ，按照标准流来定位；

Left：左悬浮；

Right：右悬浮；

2，使用 clear 清除浮动的影响

Clear 属性： 默认是 none，允许两边都可以有浮动对象；

Left： 不允许左边有浮动对象

Right：不允许右边有浮动对象

Both：不允许有浮动对象

3，盒子定位 position

Position 属性： 默认是 static，按照标准流来定位；

Relative：相对定位，相对于原本的标准位置偏移指定的距离；

Absolute：绝对定位，以它的包含框为基准进行偏移；（包含框是指含有posistion属性的盒子）

Fixed：固定定位，以浏览器窗口为基准进行定位

4，z-index 空间位置

Z-index 空间位置，默认是 0，z-index 值大的页面位于其值小的上方；

5，盒子 display 属性

Display： Inline：把元素变成内联元素；

Block：把元素变成块级元素