8.简单页面制作

1.盒子边框,内外边距
div是行级元素,可以通过设置float或position来定位div
8.简单页面制作

2.定位技术:

float浮动定位:

会影响后面的div,有需要时要清楚浮动效果clear:both;

8.简单页面制作

position定位:

relative : 相对定位,相对于原来的位置。相对定位的div依然占据了原来的位置(没有脱离文档流)。

absolute:绝对定位,相对于浏览器边框定位。绝对定位的div不占据原来的位置(脱离了文档流)。
绝对定位相对的是谁,其实先找的是,看那个父div设置了相对定位属性,如果没有父div设置相对属性, 则相对于浏览器边框。

8.简单页面制作

8.简单页面制作

所以如果想要相对于父div的绝对定位,则要在父div里设置position:relative 相对定位。

8.简单页面制作

例子:照片签名
8.简单页面制作

8.简单页面制作

3.其他属性:

8.简单页面制作

body全局属性:

8.简单页面制作

(body里面的一个总div就代表网页)
body里设置网页居中,总div里设置网页宽度,内容位置

8.简单页面制作