CSS3 第5课时 自适应及分栏.pptVIP

CSS3基本功能 ——分栏、自适应布局 课程回顾 skew rotate translate scale 倾斜 旋转 移动 缩放 功盖三分国，名成八阵图 内容提要及目标 CSS3 分栏 CSS3 自适应布局 分栏 栏的数量控制 column-count：number； 栏间距 栏高度 column-width：长度单位； column-gap : 长度单位; 分栏 栏栏的间隔线 column-rule : 宽度，颜色; 类似border 间隔线样式 column-rule-style : dotted 语法：columns 分栏知识点 column-width:[length|auto] 定义每栏的宽度 column-gap : normal | length 定义两栏之间的间距距离? column-count : auto | 整数 可以定义栏目的数目 语法：columns 分栏知识点 column-rule-color:color 定义每栏之间边框的颜色 column-rule-width:length 定义每栏之间边框的宽度 column-rule-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset （无边框(默认)|隐藏边框|点线|虚线|实线边框|双线边框|3D凹槽|3D凸槽|3D凹边|3D凸边） 自适应布局 flex-box：弹性布局 优点： 1 适应性强，在做不同屏幕分辨率的界面时非常实用 2 可以随意按照宽度、比例划分元素的宽高 3 可以轻松改变元素的显示顺序 4 自适应布局实现快捷，易维护 自适应布局 display : box ; 将一个元素的子元素以弹性布局进行布局 自适应布局案例 效果目标 自适应布局案例 页面布局及样式处理 注：在此段代码的基础上，同教师一起完成案例 自适应布局案例 当前页面状态 自适应布局案例 页面分析：将display:box添加到哪里？ 自适应布局案例 display : box； 定义子元素内容的呈现形式 box-orient：horizontal | vertical | inline-axis | block-axis | inherit 子元素的排列方式（横向或者竖向） box-direction：normal | reverse | inherit 子元素的排列顺序 自适应布局案例 需要添加高度控制，否则无法撑满整个屏幕 自适应布局案例 box-flex：子元素如何分配剩余空间 box-flex：在默认情况下，盒子并不具有弹性。如果对box-flex的属性值进行了设置，则变得富有弹性 如果没有固定盒子 子盒大小 = 父盒大小 * 子盒box-flex值 / 所有子盒box-flex值之和 如果有固定盒子呢？ 2 1 3 600px 自适应布局案例 自适应布局 属性： box-ordinal-group：子元素显示顺序 1 2 3 2 3 1 自适应布局 属性： box-align：子元素的垂直对齐方式 start | end | center | baseline | stretch box-pack：子元素的水平对齐方式 start | end | center | justify 自适应布局知识点 属性有哪些？ display : box ; 将一个元素的子元素以弹性布局进行布局 box-orient：子元素的排列方式（横向或者竖向） box-direction：子元素的排列顺序 box-flex：子元素如何分配剩余空间 box-align：子元素的垂直对齐方式 box-pack：子元素的水平对齐方式 box-ordinal-group：子元素显示顺序 自适应布局练习 计算红色和绿色弹性块的像素值 哪些属性添加在子元素上？ 4 200px 1 500px display:box box-orient box-direction box-flex box-align box-pack 总结 谢 谢