web前端H5盒子模型.pptx

web前端开发H5第四课：盒模型 主讲人：lucy老师01

本节课内容01HTML5+CSS3·CSS-Box盒模型复习·CSS3弹性盒模型·CSS3盒模型阴影·CSS3盒模型倒影·CSS3-Flex其他盒模型

标题01HTML5+CSS3

CSS3-BOX弹性盒模型01HTML5+CSS3 弹性的意思就是--为盒状模型提供最大的灵活性。 在水平方向上对元素的位置进行管理把内容变成横向 display:-webkit-box(宽度自适应) 设置给父元素display:-webkit-inline-box(宽度由内容撑开)设置给父元素-webkit-box-orient：定义盒模型的布局方向设置给父元素 把内容变成横向 horizontal水平显示 把内容变成竖向vertical垂直方向-webkit-box-direction元素排列顺序设置给父元素 normal正序 reverse反序-webkit-box-ordinal-group设置子元素的位置顺序设置子元素

CSS3弹性盒模型01HTML5+CSS3-webkit-box-flex定义盒子的弹性空间设置给子元素可以理解成-子元素的宽度占父级宽度的百分之几-webkit-box-pack对盒子富裕的空间进行管理设置给父元素start所有子元素在盒子左侧显示，富裕空间在右侧end所有子元素在盒子右侧显示，富裕空间在左侧center所有子元素居中justify富余空间在子元素之间平均分布

CSS3弹性盒模型01HTML5+CSS3-webkit-box-align在垂直方向上对元素的位置进行管理设置给父元素 start所有子元素在居顶 end所有子元素在居底 center所有子元素居中resize自由缩放模拟拖拽both水平垂直都可以缩放horizontal只有水平方向可以缩放vertical只有垂直方向可以缩放注意：一定要配合overflow:auto一块使用

阴影01HTML5+CSS3box-shadow:insetxyblurspreadcolorinset：内阴影（默认外阴影outline）inset：内投影outset：外投影默认(不能设置)x、y：阴影偏移blur：模糊半径（灰度）spread：扩展阴影半径先扩展原有形状，再开始画阴影color

倒影-线性渐变01HTML5+CSS3box-reflect倒影属性 方向值above|below|left|right 距离倒影的距离渐变颜色值（使用线性渐变创建遮罩图像）-webkit-linear-gradient(方向，rgba()0%,rgba()100%)

CSS3其他盒模型01HTML5+CSS3box-sizing盒模型解析模式设置给父元素content-box标准盒模型(和css2一样的计算，符合w3c规范)width/height=border+padding+contentborder-boxwidth=content怪异盒模型width/height与设置的值一样，content减小

分栏布局01HTML5+CSS3设置给父级column-width栏目宽度column-count栏目列数column-gap栏目间距column-rule栏目间隔线

flex盒模型01HTML5+CSS3display:box或者display:inline-box;设置给父元素盒子display:flex或者display:inline-flex；设置给父元素盒子二者非常的相近，flex的功能更多一些！

CSS3盒模型01HTML5+CSS3设置给父元素盒子的属性：控制子元素的显示方式 flex-direction属性决定显示的方向（即项目的排列方向）flex-wrapflex-wrap属性定义，如果一行排不下，如何换行。flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap。justify-content属性定义了项目在水平方向的对齐方式。align-items属性定义项目在竖直方向上如何对齐。align-content属性定义了多行的对齐方式。如果项目只在一行，