CSS3 第5课时 自适应与分栏.ppt

1、CSS3基本功能,分栏、自适应布局,课程回顾,skew,rotate,translate,scale,倾斜,旋转,移动,缩放,功盖三分国，名成八阵图,内容提要及目标,CSS3分栏CSS3自适应布局,分栏,栏的数量控制,column-count：number；,栏间距,栏高度,column-width：长度单位；,column-gap:长度单位;,分栏,栏栏的间隔线,column-rule:宽度，颜色;类似border,间隔线样式,column-rule-style:dotted,语法：columns,分栏知识点,column-width:|auto定义每栏的宽度column-gap:norma

2、l|定义两栏之间的间距距离column-count:auto|整数可以定义栏目的数目,语法：columns,分栏知识点,column-rule-color:定义每栏之间边框的颜色column-rule-width:定义每栏之间边框的宽度column-rule-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset（无边框(默认)|隐藏边框|点线|虚线|实线边框|双线边框|3D凹槽|3D凸槽|3D凹边|3D凸边）,自适应布局,flex-box：弹性布局优点：1适应性强，在做不同屏幕分辨率的界面时非常实用2可以随

3、意按照宽度、比例划分元素的宽高3可以轻松改变元素的显示顺序4自适应布局实现快捷，易维护,自适应布局,display:box;将一个元素的子元素以弹性布局进行布局,自适应布局案例,效果目标,自适应布局案例,页面布局及样式处理,注：在此段代码的基础上，同教师一起完成案例,自适应布局案例,当前页面状态,自适应布局案例,页面分析：将display:box添加到哪里？,自适应布局案例,display:box；定义子元素内容的呈现形式,box-orient：horizontal|vertical|inline-axis|block-axis|inherit子元素的排列方式（横向或者竖向）box-direc

4、tion：normal|reverse|inherit子元素的排列顺序,自适应布局案例,需要添加高度控制，否则无法撑满整个屏幕,自适应布局案例,box-flex：子元素如何分配剩余空间,box-flex：在默认情况下，盒子并不具有弹性。如果对box-flex的属性值进行了设置，则变得富有弹性,如果没有固定盒子子盒大小=父盒大小*子盒box-flex值/所有子盒box-flex值之和,如果有固定盒子呢？,自适应布局案例,自适应布局,属性：box-ordinal-group：子元素显示顺序,1,2,3,2,3,1,自适应布局,属性：box-align：子元素的垂直对齐方式start|end|center|baseline|stretchbox-pack：子元素的水平对齐方式start|end|center|justify,自适应布局知识点,属性有哪些？,display:box;将一个元素的子元素以弹性布局进行布局,box-orient：子元素的排列方式（横向或者竖向）,box-direction：子元素的排列顺序,box-flex：子元素如何分配剩余空间,box-align：子元素的垂直对齐方式,box-pack：子元素的水平对齐方式,box-ordinal-group：子元素显示顺序,自适应布局练习,计算红色和绿色弹性块的像素值,哪些属性添加在