《Web前端开发基础》课件——视频9 盒子的计算.pptx

盒子模型

--盒子的计算

01计算水平宽度计算垂直高度02目录

!DOCTYPEhtmlhtml

headtitle盒子模型的计算思考题/titlestyletype=text/cssbody{?margin:0000;?font-family:宋体;}ul{??background:#ddd;??margin:15px;??padding:10px;?font-size:12px;?line-height:14px;}h1{??background:#ddd;??margin:15px;??padding:10px;??height:30px;??font-size:25px;}p,li{??color:black;????????/*黑色文本*/??background:#aaa;??????/*浅灰色背景*/??margin:20px20px20px20px;/*左侧外边距为0，其余为20像素*/??padding:10px0px10px10px;/*右侧内边距为0，其余10像素*/??list-style:none??????/*取消项目符号*/}.withborder{??border-style:dashed;??border-width:5px;????/*设置边框为2像素*/??border-color:black;??margin-top:20px;}/style/head?body??h1标准流中的盒子模型演示/h1??ul???li第1个项目内容/li??????liclass=withborder第2个项目内容，第2个项目内容，第2个项目内容，第2个项目内容，第2个项目内容，第2个项目内容。/li??/ul?/body/htmlh1标签ul标签li标签withborder类选择器并集选择器

a=15px（h1的左外边距）b=10px+20px=30px（ul的左内边距+li的左外边距）c=5px（第2个li的左边框）d=10px（第2个li左内边距）e=？（）f=5px（第2个li右边框）g=10px+20px=30px（ul的右内边距+li的右外边距）h=15px（ul的右外边距或h1的右外边距）计算水平距离

i=15px（h1的上外边距）j=10px+30px+10px=50px（h1的上内边距+文字行高+h1的下内边距）k=15px+15px=30px（h1的下外边距+ul的上外边距）？？l=10px+20px=30px（ul的上内边距+第1个li的上外边距）m=10px+10px+14px=34px（第1个li的上内边距+下内边距+文字高）n=20px（第1个li的下外边距+第2个li的上外边距）？？o=5px+5px+14px*2+10px+10px=58px（第2个li上边框距离+下边框距离+2行文字+第2个li的上内边距+下内边距）p=20px+10px=30px（第2个li下外边距+ul标签的下内边框）计算垂直距离

!DOCTYPEhtml

html

head

title盒子模型的计算思考题/title

styletype=text/css

body{

??margin:0000;

??font-family:宋体;

}

h1{

??background:#ddd;

??margin-bottom:100px;

}

ul{

??background:#ddd;

??margin-top:10px;

}

/style

/head

?body

??h1标准流中的盒子模型演示/h1

??ul

???li第1个项目内容/li???

??/ul

?/body

/html

k和n的值：这个高度是110px吗？测试方法：将ul的margin-top加大到80px（不要超过h1下外边框）结果：刷新后，发现高度并没有发生变化原因：h1和ul属于两个块级元素，距离不是margin-bottom和margin-top的总和，而是两者中的较大者。这个现象叫外边距的“塌陷”（或“合并”）现象。取较小的外边距合并（或塌陷）到了较大的外边距中。h1ulmargin-bottommargin-toph1ulmax(margin-bottom,margin-top)

特别注意！！！

margin-top和margin-bottom的这种塌陷现象在制作网页时要特别注意，否则常常会被