《HTML5+CSS3》课件——第五章 盒子模型.pptVIP

5.5 块元素垂直外边距的合并 5.5.2 嵌套块元素垂直外边距的合并 嵌套元素垂直外边距的合并 外边距 外边距 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。 5.6 阶段案例——制作音乐排行榜 制作音乐排行榜 5.2 盒子模型相关属性 5.2.4 背景属性 3、设置背景图像平铺 background-repeat图像平铺属性 平铺属性值 含义 repeat 沿水平和竖直两个方向平铺（默认值） no-repeat 不平铺（图像位于元素的左上角，只显示一次） repeat-x 只沿水平方向平铺 repeat-y 只沿竖直方向平铺 5.2 盒子模型相关属性 5.2.4 背景属性 4、设置背景图像的位置 background-position图像位置属性 位置属性取值 含义 单位数值 设置图像左上角在元素中的坐标，例如background-position:20px 20px; 预定义的关键字 水平方向值：left、center、right。 垂直方向值：top、center、bottom。 百分比 0% 0% ：图像左上角与元素的左上角对齐。 50% 50%：图像50% 50%中心点与元素50% 50%的中心点对齐。 20% 30%：图像20% 30%的点与元素20% 30%的点对齐。 100% 100%：图像右下角与元素的右下角对齐，而不是图像充满元素。 5.2 盒子模型相关属性 5.2.4 背景属性 5、设置背景图像固定 background-attachment图像固定属性 固定属性取值 含义 scroll 图像随页面元素一起滚动（默认值）。 fixed 图像固定在屏幕上，不随页面元素滚动。 5.2 盒子模型相关属性 5.2.4 背景属性 6、综合设置元素的背景 在CSS中背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。 background:背景色 url(图像) 平铺 定位 固定; background: url(img/wdjl.jpg) no-repeat 50px 80px fixed; 5.2 盒子模型相关属性 5.2.5 盒子的宽与高 盒子 总宽度和总高度 width 左内边距 右内边距 边框 左外边距 右外边距 ? 每个盒子都有固定的大小 边框 5.2 盒子模型相关属性 5.2.5 盒子的宽与高 结论 盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和 盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和 盒子模型的总宽度与总高度 5.3 盒子模型新增属性 为了丰富网页的样式功能，去除一些冗余的样式代码，CSS3中添加了一些新的盒子模型属性，如颜色透明、圆角、阴影、渐变等。 本节将详细介绍这些全新的的CSS样式属性。 5.3.1 颜色透明度 5.3 盒子模型新增属性 通过引入RGBA模式和opacity属性，对背景与图片设置不透明度 rgba(r,g,b,alpha); 例如： p{background-color:rgba(255,0,0,0.5);} 5.3 盒子模型新增属性 通过引入RGBA模式和opacity属性，对背景与图片设置不透明度 opacity：opacityValue; opacity属性用于定义标签的不透明度，参数opacityValue表示不透明度的值，它是一个介于0~1之间的浮点数值。其中，0表示完全透明，1表示完全不透明，而0.5则表示半透明。 5.3.1 颜色透明度 5.3 盒子模型新增属性 5.3.2 圆角 border-radius:水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4; 在网页设计中，经常会看到一些圆角的图形，如按钮、头像图片等，运用CSS3中的border-radius属性可以将矩形边框四角圆角化，实现圆角效果。 概 念 需要注意的是，当应用值复制原则设置圆角边框时，如果“垂直半径参数”省略，则会默认等于“水平半径参数”的参数值。此时圆角的水平半径和垂直半径相等。 5.3 盒子模型新增属性 5.3.3图片边框 在网页设计中，我们还可以使用图片作为元素的边框。运用CSS3中的border-image属性可以轻松实现这个效果。 概 念 border-image: border-image-source/ border-image-slice/ border-image-width/ border-image-out