《8css3布局样式》-精选课件(公开).pptVIP

CSS3布局样式 Html5与css3 学习内容 掌握多栏布局的使用方法，为什么要使用多栏布局，多栏布局解决的问题。 掌握盒布局的使用方法，为什么使用盒布局，盒布局解决的问题，与多栏布局的区别。 掌握弹性布局的概念和使用方法 课题目录 多栏布局 盒布局 多栏布局 1、float和position的缺点 讨论总结float和position的缺点。 复习一下页面清除浮动的方法。 多栏布局 2、使用多栏布局方式 1）column-count:number 将一个元素中的内容分为多栏显示； 2）column-width:number 设置每一栏的宽度； 3）column-gap:number 每栏之间的间隔； 4）column-rule:border 每栏之间插入一条线。 报纸排版 课题目录 多栏布局 盒布局 盒布局 1、基础知识 1) float和position的缺点 2) 使用盒布局 语法：display:-webkit-box|-moz-box 总结多栏布局和盒布局的区别 盒布局 2、弹性盒布局 1) 自适应窗口的弹性布局 2) 使用弹性盒布局 语法：-webkit-box-flex|-moz-box-flex:1; 1的意义？ 什么是自适应，自适应的运用。 float和position的实现方法。 盒布局 2、弹性盒布局 3) 改变元素的显示顺序 4) 元素排列方向 语法：box-orient: vertical | horizontal 语法：box-ordinal-group:number; 改变显示序号观察规律。 盒布局 2、弹性盒布局 5) 对多个元素使用box-flex 语法：box-flex:number; 理解number值的意思。 画出box-flex的分配原理图。 盒布局 2、弹性盒布局 6) 水平方向与垂直方向的对齐方式 语法：-moz-box-pack -webkit-pack 或 -moz-box-align -webkit-align 实验找出各个方向每种对齐方式的区别 对齐方式：start | center | end 盒布局 2、弹性盒布局 解决的问题： 1) 文字垂直居中 说说css2的实现方式 2) 图片居中显示 说说css2的实现方式 作业： 找一个以前CSS2的网站用盒布局或多栏布局来实现。