css3二课更完善盒模型设计.pptxVIP

弹性盒模型注意在使用弹性盒模型的时候父元素必须要加display:box或display:inline-boxBox-orient定义盒模型的布局方向Horizontal水平显示vertical垂直方向box-direction元素排列顺序Normal正序Reverse反序box-ordinal-group设置元素的具体位置

弹性盒模型(2)Box-flex定义盒子的弹性空间子元素的尺寸=盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值的和box-pack对盒子富裕的空间进行管理Start所有子元素在盒子左侧显示，富裕空间在右侧End所有子元素在盒子右侧显示，富裕空间在左侧Center所有子元素居中Justify富余空间在子元素之间平均分布

弹性盒模型(3)box-align在垂直方向上对元素的位置进行管理Star所有子元素在据顶End所有子元素在据底Center所有子元素居中

盒模型阴影用法box-shadow:[inset]xyblur[spread]color参数inset：投影方式inset：内投影不给：外投影x、y：阴影偏移blur：模糊半径spread：扩展阴影半径先扩展原有形状，再开始画阴影color

其他盒模型新增属性box-reflect倒影direction方向above|below|left|right;距离渐变（可选）resize自由缩放Both水平垂直都可以缩放Horizontal只有水平方向可以缩放Vertical只有垂直方向可以缩放注意：一定要配合overflow:auto一块使用只有水平方向可以缩放

其他盒模型新增属性(2)box-sizing盒模型解析模式Content-box标准盒模型width/height=border+padding+contentBorder-box怪异盒模型width/height=content

Css3分栏布局column-width栏目宽度column-count栏目列数column-gap栏目距离column-rule栏目间隔线

Css3响应式布局媒体类型all所有媒体braille盲文触觉设备embossed盲文打印机print手持设备projection打印预览screen彩屏设备speech听觉类似的媒体类型tty不适用像素的设备tv电视

Css3响应式布局关键字andnotnot关键字是用来排除某种制定的媒体类型onlyonly用来定某种特定的媒体类型

Css3响应式布局媒体特性(max-width:600px)(max-device-width:480px)设备输出宽度(orientation:portrait)竖屏(orientation:landscape) 横屏(-webkit-min-device-pixel-ratio:2)像素比devicePixelRatio设备像素比window.devicePixelRatio=物理像素/dips

Css3响应式布局样式引入linkrel=stylesheettype=text/csshref=../css/print.cssmedia=print/@importurl(css/reset.css)screen;@mediascreen{选择器{ 属性：属性值；}}

Css3响应式布局linkrel=”stylesheet”media=”alland(orientation:portrait)”href=”portrait.css”linkrel=”stylesheet”media=”alland(orientation:landscape)”href=”landscape.css”@mediascreenand(min-width:400px)and(max-width:500px){.box{margin:0auto;}}

Css3响应式布局linkrel=stylesheettype=text/csshref=styleA.cssmedia=screenand(min-width:800px)linkrel=stylesheettype=text/csshref=styleB.cssmedia=screenand(min-width:600px)and(max-width:800px)linkrel=stylesheettype=text/csshref=s