10.20 作业
一、写一个案例, 将常用的盒模型属性做一遍,理解 box-sizing 的意义与使用场景
<!DOCTYPE html><html lang=""><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒模型属性</title><style>.box-1{box-sizing: content-box;width: 200px;height: 100px;background-color: aquamarine;padding: 20px;margin: 20px;border: 5px dotted skyblue;border-radius: 20px;}</style></head><body><div class="box-1"> w3c 标准盒子</div></body></html>
这个盒子是 w3c 标准盒子。
切换代码为 box-sizing: content-box;
盒子大小 == 宽度 width/高度 height+padding 内边距+边框 border
这个盒子的宽等于样式中 width 的 200+左右内边距 padding 的 20X2=40 + 左右 border 的 5X2=10
盒子总宽等于 200+40+10=250px。
<!DOCTYPE html><html lang=""><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒模型属性</title><style>.box-2{box-sizing: border-box;width: 200px;height: 100px;background-color: aquamarine;padding: 20px;margin: 20px;border: 5px dotted skyblue;border-radius: 10px;}</style></head><body><div class="box-2"> ie 的怪异盒子</div></body></html>
这个盒子是 ie 怪异盒子。
切换代码为 box-sizing: border-box;
这个盒子的 padding 和 border 是包含在 width 之内的。
这个盒子大小 == 宽度 width/高度 height。
这个的宽度为 200px。
两种盒子的应用场景：
标准盒子的内容是被 border 和 padding 撑开的，用于需要背景定位的时候，元素的宽度就是宽度，不受其他元素的影响。
IE 盒子可以百分比设定整体盒子的宽高，比如就想要一个固定 width=200px 的盒子，不用计算，方便快捷。
二、em 的意义,并自己举一个案例来演示它(不得引用课堂案例)
<!DOCTYPE html><html lang=""><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box-3 {font-size: 1em;/* 浏览器代理样式中，1em=16px */background-color: plum;padding: 10em;/* 10em=16px*10=160px */margin: 5em;/* 5em=16px*5=80px */color: papayawhip;text-align: center;}h2 {font-size: 1.5em;/* 1.5em=16px*1.5=24px */line-height: 3em;/* 3em=24*3=72px */padding: 0 1em;/* 1em=24px*1=24px *//*h2标签中，字体大小为1.5em=24px，那么他的padding和line-height受到字体大小的影响，h2中的1em为24px */}p {font-size: 1.2em;/* 1.2em=16px*1.5=19.2px */line-height: 2em;/* 2em=19.2px*2=38.4px *//*h2标签中，字体大小为1.2em=19.2px，那么他的line-height受到字体大小的影响，p中的1em为19.2px */}span {font-size: 1em;/* 1em=16px;*/line-height: 2em;/* 2em=16px*2=32px *//*span标签中，字体大小为1em=16px，那么他的line-height受到字体大小的影响，p中的1em为16px */}</style></head><body><div class="box-3"><h2>10.22日白羊座星座运势</h2><p>同船共渡，荣辱与共。</p><span>10月22日你在遇到一些令人非常开心的事情，但是你千万不要过于得意，因为挑战随时可能会出现，所以需要你时刻保持一颗冷静的内心，这样才能更好的保持自己的活力，保证最后任务完成的概率。</span></div></body></html>