关于CSS框模型及定位的概念

Posted 2020-06-11

一、CSS框模型（box model)包含了边框（boder)、外边距（margin）、内边距（padding）、宽（width）、高（height）、元素（element）。背景应用于由内容、边框、内边距组成的区域。单边内边距的属性有四个，分别设有上、右、下、左内边距：padding —top   padding—right  padding—bottom  padding—left. 内边距数值可以是阿拉伯数字（单位厘米），也可以是百分比数值。边框的样式在boder—style中设置，可以定义单边样式以及四边同在一个声明中，boder—top—style  boder—right—style  boder—bottom—style  boder—left—style.边框的颜色是在boder—color中，它一次最多可以接受4个颜色值，可以使用任何类型的颜色，例如可以是命名颜色，也可以是十六进制或RGB值，透明边框需要引进transparent属性。margin属性可以接受任何长度单位，可以是像素、英寸、毫米或em，在margin中设置的百分数是相对于父元素而言的，同理，margin中的四个边距和padding的一样。外边距合并指的是当两个垂直边距相遇时，它们将形成一个外边距，合并后的外边距等于两个发生合并的两个外边距的高度较大者。

二、CSS定位（positioning）允许对元素进行定位。CSS中的一个重要概念就是“一切皆为框”，意味着这些元素都显示为内容，div,p,h1等常被成为块级元素，而span,strong等被称为行级元素，可以使用display属性改变生成框的类型。CSS的定位机制有三种：普通流、浮动和绝对定位。通过position属性，选择4种不同类型的定位，这将影响元素框的生成。static：元素框正常生成，块级元素生成矩形框，置于父元素中。relative:元素偏移某个距离，元素保持未定型前的形状，它原本所占位置还存在。absolute:元素框从文档中完全删除，元素原先的位置不存在。fixed：类似于absolute，不过其包含块是视窗本身。