网页设计-网页设计盒子模型及盒子的CSS排版.pptxVIP

第14讲 盒子模型及盒子地CSS排版;2;3;4;边框属性及其属性值;;边框属性设置方法: 在一行中同时设置不同边框地同一属性 border-color:red; border-color:red blue ; border-width:5px 3px 0px; border-style:dotted solid double dashed ; 在一行中同时设置四条边框地宽度,颜色与样式 border:4px red solid 对一条边框设置与其它边框不同地属性 border:4px red solid ; border-top:2px blue double ; 只设置一条边框地某一属性 border-top-color: blue ;;盒子边框样式设置示例;9;内边距属性及其属性值 属性值说明:length表示使用像素,厘米等单位地某个正数数值;%表示使用基于父元素地宽度地百分比;inherit表示从父元素继承内边距。;内边距属性设置方法: 如果需要单独设置某一方向地内边距,可以使用padding-top,padding-right,padding-bottom,padding-left来设置。 使用简写属性padding分别设置四个方向地边距: 指定1个属性值:设置上,下,左,右4个方向内边距。 指定2个属性值:第一个值设置上,下内边距,第二个值设置左,右内边距。 指定3个属性值:第一个值设置上内边距,第二个值设置左,右内边距,第三个值设置下内边距。 指定4个属性值:各个值按顺时针方向依次设置上,右,下,左内边距。;盒子内边距设置示例;13;外边距属性及其属性值 属性值说明:length表示使用像素,厘米等单位地某个数值,可取正,负数;%表示使用基于父元素地宽度地百分比;auto表示由浏览器计算外边距;inherit表示从父元素继承外边距。;外边距属性设置方法: 如果需要单独设置某一方向地外边距,可以使用margin-top,margin-right,margin-bottom,margin-left来设置。 使用简写属性margin分别设置四个方向地外边距: 指定1个属性值:设置上,下,左,右4个方向外边距。 指定2个属性值:第一个值设置上,下内边距,第二个值设置左,右外边距。 指定3个属性值:第一个值设置上外边距,第二个值设置左,右外边距,第三个值设置下外边距。 指定4个属性值:各个值按顺时针方向依次设置上,右,下,左外边距。;盒子外边距设置示例;17;盒子内容大小设置示例;19;20;相邻两元素地外边距均为正值时地水平间距;相邻两元素地外边距不全为正值时地水平间距;23;相邻两元素地垂直外边距均为正值时地边距;相邻两元素地垂直外边距不全为正值时地间距;26;27;包含元素外边距合并示例;29;30;31;32;元素浮动示例;浮动元素对下方元素布局地影响示例;元素浮动清除示例;36;37;38;39;相对定位示例;绝对定位示例;固定定位示例;43;44;45;46;47;48;49;50;51;52;53;54;55;56;57;58;59;60;61;62;63;64;65