Web前端基础知识：CSS盒子模型、绝对定位和相对定位

一：CSS盒子模型

1. CSS盒子模型概念：CSS盒子模型包含了内容（content）、内边距（padding）、边框（border）、外边距（margin）、宽度（width）、高度（height）几个要素，如图（图为标准盒子模型）
   



2. Content：所写的内容；
   Padding：边框内的距离，设置时一般是上右下左的顺序，例如padding:10px(上)，20px(右)，30px(下)，40px(左)；
   Border：将内容框起来的一个边框。border有三个属性，粗细（width），样式（style），颜色（color）。width可以设置为thin、thick和length，length为具体数值。style可以设置为none、hidden、solid等，none是不显示border，hidden可以解决边框中多余的内容，solid表示是实线。例如上图的边框可表示为border:10px solid red，“10px”表示的是边框的粗细；
   Margin ：盒子与盒子之间的距离（或者说是边框与边框之间的距离）；
   Width ：宽度（这是标准盒子的宽度，IE的宽度与标准盒子的宽度不同）；
   Height ：高度（同上）。

二：绝对定位和相对定位

1. 绝对定位（absolute）的概念：如果设置它的偏移量，将会影响其他元素的位置。如下图（图来自百度）
   
   

设置绝对定位时，元素会相对于离自己最近的设置了绝对定位的父元素进行定位。如上图就可以看出，离“第二个块”最近的设置了绝对定位的父元素是div02。【相对定位同理】

2. 相对定位（relative）的概念：通过设置可使边框“相对于”它的起点移动，不影响其他元素的位置，依旧占据着原来的空间。如下图（图来自百度）