css页面布局基础盒模型

网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

边框（border）：

1、边框是围绕在内容区和padding区的一条线，border有三个特征可以指定：样式（style）、宽度（width）、颜色（color）；

2、边框画在元素的背景之上；

3、可替换元素的边框将影响行高。

元素的浮动;

float属性的取值包括：none（不浮动）、left（向左浮动）、right（向右浮动）

注意：float属性可以应用于任何元素，而不仅仅是图像。

浮动的行为;

1、如果元素向同一方向浮动，每个后续的浮动元素必须向该方向移动，直到碰到父级元素的内边缘或者碰到前面的浮动元素。这将导致多个浮动元素集聚在目标边缘。

2、如果没有足够的空间让浮动元素并肩出现，第二个浮动元素将向下浮动，直到有足够的空间来显示他而不覆盖第一个浮动元素。

清除浮动的影响;

clear属性的取值包括;

none：允许元素的两边都有浮动元素

left：不允许左边有浮动元素

right：不允许右边有浮动元素

both：不允许有浮动元素

定位类型：静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）