《Web前端开发基础》课件-视频9 盒子的计算_第1页
《Web前端开发基础》课件-视频9 盒子的计算_第2页
《Web前端开发基础》课件-视频9 盒子的计算_第3页
《Web前端开发基础》课件-视频9 盒子的计算_第4页
《Web前端开发基础》课件-视频9 盒子的计算_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

盒子模型

--盒子的计算01计算水平宽度计算垂直高度02目录<!DOCTYPEhtml><html>

<head><title>盒子模型的计算思考题</title><styletype="text/css">body{

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></html>h1标签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的这种塌陷现象在制作网页时要特别注意，否则常常会被增大了margin-top或者margin-bottom值却发现块没有移动的假象所迷惑。所以，k和n的值是多少呢？k=15px

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论