css110854125_张剑英盒子模型css.ppt

Css 网页的美丽伴侣 著名的 box modal content就是盒子里装的东西；而pedding就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；border就是盒子本身了；至于margin则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。 盒子模式的各种 Margin-在一个声明中设置所有外边距（宽度）属性，他有1到4个值 1）margin:10px 5px 15px 20px; 上边距：10px 右边距：5px 左边距：15px 下边距：20x 2）margin:10px 5px 15px; 上边距：10px 下边距15px 左右边距：15px 3）margin:10px 5px; 上下边距：10px 左右边距：5px 4）margin:10px; 上下左右边距都是10px 实例：p{ margin:2cm 3cm 2cm 3cm } 单一边界属性 左边距属性(margin-left) .d1{margin-left:1cm} 右边距属性(margin-right) 上边距属性(margin-top) 下边距属性(margin-bottom) border Border-style none (没有边框，无论边框宽度设为多大) dotted (点线式) dashed (破折线式) solid (直线式) double (双线式) groove (槽线式) ridge(脊线式) inset (内嵌效果) outset (突起效果) 例如，我们可以把一幅画的边框设置为outset：使之看起来像“凸起来的按钮” a link img{border-style:outset;} 我们也可以为一个边框设定多个样式： P.aside{border-style:soild dotted dashed double; } 上面这条规则为别名为aside的段落定义了四种样式：实线上边框，点线右边框，虚线下边框（也采用了top-right-bottom-left的顺序） 定义单边样式： Border-top-style Border-right-style Border-bottom-style Border-left-style 如下两种方法是等价的： P{border-style:solid solid solid none;} P{border-style:solid;border-left-style:none;} /*单边属性必须在简写属性之后*/ Border-width 可以用绝对长度（cm等）表示，也可以用相对长度（px等）或使用三个关键字之一：thin，medium（默认）和thick。 /*css没有定义3个关键字的值，所以用户代理可能设置为5px,3px,2px;另一个用户代理可能设置为3,2,1px*/ 所以我们可以这样设置边框的宽度： P{border-style：solid;border-width:5px;} 也可以 P{border-style：solid;border-width:thick;} 定义单边宽度： 我们可以按top-right-bottom-left的顺序设置边框： P{boder-style:solid;border-width：5px 3px 5px 3px;} 也可以这样写（值复制）： P{boder-style:solid;border-width：5px 3px;} 没有边框： 如果把border-style设置为none会出现什么情况？ P{border-style:none;border-width:5px} 什么也不会出现！没有边框，就不可能有边框宽度 忘记声明border-style是初学者常犯的错误h1{border-width:20px;} 没有设置border-style，border-width设置再大也白搭 Border-color d {border-style:solid border-color:gray blue red yellow；} 如果值小于4个，值复制就会起作用 d{border-style:solid border-color:gray blue;} 单边定义颜色： d{border-style:so