今天来谈谈css中的一些属性及模型

css的一些属性

1、盒模型

　　CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border） 和 外边距（margin） 的方式。下面是Box Model的图示：

　　　　　　　　　　　　　　　　　　　　

　　CSS盒子模型的属性：
　　　　内容属性：宽=width 高=height
　　　　内填充属性（内容与边框之间的距离）：padding
　　　　外边距属性：margin（使用该属性的时候注意浏览器的兼容性）
　　　　内填充与边界的规则：
　　　　如果有四个参数：表示上右下左,也可以单单指定某个方向
　　　　如果只有一个参数：表示上右下左
　　　　如果有两个参数： 第一个参数表示上下 第二个参数表示左右
　　　　如果三个参数：表示上 左右 下

　　盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同：

　　w3c模型：W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

　　IE模型： IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

2、position属性

　　position 属性规定元素的定位类型，任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移

　　position的值有：static（静态）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、inherit（继承父级）

　　　　　　　　　　　　　　　　　　　　

　　Static：静态定位。如果你没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。

　　Relative：相对定位。元素将按照静态定位时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。

　　Absolute：绝对定位。元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位。

　　Fixed：固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。

 

 

　　　　

　　

 

转载于:https://www.cnblogs.com/yin-yang/p/5611749.html