《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 14.盒子模型

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍0

1盒模型的组成02盒子边框03内边距04外边距目录contents05盒子阴影PART1盒模型的组成牛奶是怎样运输，让消费者购买的呢？网页布局的本质：把网页元素（文字图片等等），放入盒子里面，然后利用CSS摆放盒子的过程。行内元素类似牛奶，如果要摆放出造型，需要用一个盒子装起来。前面学过的双标签可以看作为一个盒子。有了盒子，用户就可以装载内容并随意运送摆放位置了。盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。盒模型的组成盒子模型（BoxModel）黄色代表打火机的外包装盒(border)黑色代表打火机内部保护层(padding)蓝色代表盒子盒子之间的距离（margin）（margin）盒子模型的组成：边框、外边距、内边距和实际内容盒子里的内容paddingmarginborder边框content内容padding内边距margin外边距盒子模型的组成PART2盒子边框盒子边框（border）语法：border:border-width||border-style||border-color边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框（默认值）

solid：单实线边框(最为常用的)

dashed：虚线边框

dotted：点线边框

double：双实线边框

边框由：边框粗细、边框线样式、边框颜色三部分构成边框线样式最常用代码描述显示效果border:5pxsolidred;上下左右边线为5像素红色实线

border-top:3pxsolidred;上边线为3像素红色实线border-bottom:5pxdashedgreen;下边线为5像素绿色虚线border-left:4pxsolidblue;左边线为4像素蓝色实线border-right:5pxsolidpurple;右边线为5像素紫色实线边框连写属性边框属性运用代码显示效果div{

width:0;

height:0;

border:50pxsolidtransparent;}div:nth-child(1){

border-top-color:tomato;}div:nth-child(2){

border-right-color:greenyellow;

border-top-color:tomato;

border-bottom-color:dodgerblue;

border-left-color:yellow;}div:nth-child(3){

border-bottom-color:dodgerblue;}border-collapse边框合并属性代码显示效果table{

width:400px;

height:100px;

border-collapse:collapse;}

td{

border:5pxsolid#333;}

（未使用border-collapse:collapse;属性）（使用border-collapse:collapse;后）边框会影响盒子的实际大小解决方法：1.测量盒子大小时不去量边框2.如果测量时已经包含边框，则需要width/height减去边框的宽度圆角边框（border-radius）语法：border-radius：1-4length|%；（参数1参数2空格隔开时）一个参数，表示四个角的圆角一样两个参数，第一个表示左上角和右下角，第二个表示右上角和左下角三个参数，第一个左上角，第二个表示右上角和左下角，第三个表示右下角四个参数，四个值的顺序是：左上角，右上角，右下角，左下角border-radius:15px50px;相当于border-top-left-radius:15px;border-bottom-right-radius:15px;border-top-right-radius:50px;border-bottom-left-radius:50px;圆角边框（border-radius）border-radius:15px20px/30px;15px代表左上和右下角的X轴20px代表右上和左下x轴30px代表y轴相当于border-top-left-radius:15px30px;border-top-right-radius:20px30px;border-bottom-right-radius:15px30px;border-bottom-left-radius:20px30px;圆角边框（border-radius）圆角边框（border-radius）如果是正方形盒子，把数字修改为宽高的一半，或者写为50%，就可以得到一个圆形盒子，如：border-radius：50%；图像边框（border-image）border-image是一个复合属性包括:border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeatborder-image:sourceslice/width/outsetrepeat;border-image:图像的路径url()图像边界向内偏移/图像宽度/边框与图像边框的距离重复（repeat）拉伸（stretch）铺满（round）属性描述常用值border-image-source用于指定图像的路径URLborder-image-slice用于指定边框顶部、右侧、底部、左侧的向内偏移量百分比border-image-width用于指定边框的宽度像素值border-image-outset用于指定边框图像与边框的距离数字border-image-repeat用于指定图像的填充方式repeat平铺stretch拉伸图像边框（border-image）CSS代码显示效果

/*公共部分*//*需要先定义边框的样式*/div{border:40pxsolidtransparent;width:200px;height:200px;

}

/*选用图片*/div{border-image:url(./images/border.png)3030repeat;}/*第1个30表示上下边框高度，第2个30表示左右边框宽度，铺满*/

div{

border-image:url(./images/border.png)3030stretch;}/*拉伸*/

PART3内边距内边距（padding）padding属性用于设置内边距，内边距是：边框与内容之间的距离。

属性作用padding-top上内边距padding-bottom下内边距padding-left左内边距padding-right右内边距内边距属性属性值参数说明padding:【参数1】

代表4个内边距都是这个值；padding:5px;上下左右各有5px的内边距padding:【参数1】【参数2】;参数1：表示上下值，参数2：表示左右值padding:5px10px;上下内边距各5px，左右内边距各10pxpadding:【参数1】【参数2】【参数3】;参数1：表示上，参数2：表示左右值，参数3：表示下padding:5px10px5px;上内边距5px，左右内边距各10px，下内边距

5pxpadding:【参数1】【参数2】【参数3】【参数4】;参数1：表示上，参数2：表示右，参数3：表示下，参数4：表示左padding:5px8px10px5px;上内边距5px，右内边距8px，下内边距

10px，左内边距5px内边距会影响盒子的实际大小给盒子指定内边距后：(1)

内容和边框有了距离(2)

padding撑大了盒子解决方法：为保证盒子和效果图大小一致，则需要width/height减去多出来的内边距即可小技巧：padding不会撑开没有指定width/height的盒子任务实践任务1导航案例中内边距的运用方法1.给每个盒子一个固定宽度，由于字数不一样，间距不一样。方法2.给每个盒子一个左右内边距，即使字数不一样，间距是一样的。PART4外边距外边距（margin）margin属性用于设置外边距。设置外边距会在元素之间创建“空白区域”，这段空白区域通常不能放置其他内容语法同内边距padding属性作用margin上外边距右外边距下外边距左外边margin-top上外边距margin-bottom下外边距margin-left左外边距margin-right右外边距外边距属性属性书写说明margin:【参数1】；

代表4个外边距都是这个值；margin:5px;上下左右各有5px的外边距margin:【参数1】【参数2】;参数1：表示上下值，参数2：表示左右值margin:5px10px;上下外边距各5px，左右外边距各10pxmargin:【参数1】【参数2】【参数3】;参数1：表示上，参数2：表示左右值，参数3：表示下margin:5px10px5px;上外边距5px，

左右外边距各10px，下外边距

5pxmargin:【参数1】【参数2】【参数3】【参数4】;参数1：表示上，参数2：表示右，参数3：表示下，参数4：表示左margin:5px8px10px5px;上外边距5px，右外边距8px，下外边距

10px，左外边距5px*/外边距实现盒子水平居中让一个盒子实现水平居中，需要满足以下两个条件：1.盒子必须是块级元素

（行内/行内块元素水平居中,只需给父元素添加text-align:center）2.盒子必须指定了宽度（width）

给左右的外边距都设置为auto，可使块级元素水平居中外边距合并问题相邻块元素垂直外边距的合并外边距塌陷问题解决方案：

可以为父元素定义1像素的上边框

可以给父元素定义一个上内边距

可以为父元素添加overflow：hidden；box-sizing属性属性值作用content-box定义宽度和高度时，不包括border和padding值（默认）border-box定义宽度和高度时，border和padding包含在width和height之内box-sizing：content-box/border-box；box-sizing属性清除内外边距网页元素很多都带有默认内外边距，不同浏览器默认值不同，因此我们在布局之前，首先要清除网页元素自带内外边距。*{padding:0;margin:0;box-sizing:border-box;}注意：行内元素为了照顾兼容性，只设置左右边距，尽量不要设置上下内外边距，但是转换为块级元素或行内块后就可以了。PART5盒子阴影盒子阴影（box-shadow）参数值说明像素1表示元素水平阴影的位置，可以为负值(必选属性）像素2表示元素垂直阴影的位置，可以为负值(必选属性）像素