css布局与盒子模型

一、    盒子模型

 

注：

1、红色为border;

2、背景应用于内容、内边距、边框组成的区域；

3、Width和height指的是内容区域的高度和宽度。

边框属性：

1、  padding属性：（默认靠左上）

 padding: 10px;           ---------内容与四边框的距离为10px;

        10px, 0px, 10px, 0px;-------上右下左

padding-left: 10px;       ----------内容与上边框的距离为10px;

2、  margin属性：（同上）

3、  border属性：

border: 5px solid blue;

border-width:5px;

border-style:solid/dashed;

border-color:blue;

border-top: 5px solid blue;

border-top-width:8px;

注：

距离可以用像素表示，也可以用百分比表示；也可设置AUTO.

 

二、css定位

position: relative/fixed/absolute

1、  相对定位：

会按照元素的原始位置对改元素进行移动；

2、  绝对定位：

相对与最近的已定位的父级元素进行移动如果没有已定位的父级元素，则系那个对于最初的包含快；

3、  固定定位：相对于浏览器的定位liru某些网站的右下角弹窗；

4、  流式布局：

Float: right (从右往左依次) /left（从左往右）

注：一条边框会占一个像素； 所有div都必须设置定位。