DIV+CSS三种经典布局教案
- 格式:pptx
- 大小:239.07 KB
- 文档页数:16


《3.3 Div+CSS3布局教学设计》
1、CSS盒子模型概念
盒子模型是由margin (边界)、 border (边框)、 padding (填充)和content (内容)几个部分组成的,此外,在盒模型中,还具有高度和宽度两个辅助属性。
margin 属性
margin属性称为边界或称为外边距,用来设置内容与内容之间的距离。
border属性
border属性称为边框,内容边框线,可以设置边框的粗细、颜色和样式等。
padding 属性
padding 属性称为填充或称为内边距,内容与边框之间的距离。
content属性
CSS布局完全不同于传统表格布局,它将页面首先在整体上进行<div>标签的分块,将页面分为若干个盒子,然后对各个盒子进行CSS定位,最后再在各个块中添加相应的内容。
CSS布局页面最重要的手段就是利用浮动属性和定位属性设置元素位置。
1、浮动属性
float属性可以控制盒子左右浮动,直到边界碰到父元素或另一个元素。
2、定位属性
(1)position属性
(2)边偏移属性
根据所学DIV+CSS3知识,完成对旅游新闻网页的CSS美化。