1020作业 2020-10-20
- 写一个案例, 将常用的盒模型属性做一遍,理解box-sizing的意义与使用场景
- em的意义,并自己举一个案例来演示它(不得引用课堂案例)
1.常用盒模型属性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>盒模型</title><style>.box {width: 300px;height: 300px;background-color: coral;border: dashed 10px black;border-top: solid 30px cyan;border-radius: 20px;border-right: solid 40px magenta;border-bottom: solid 30px yellow;border-left: solid 40px black;text-align: center;font-size: 80px;padding: 30px;margin: 10px 20px 30px;}.t1 {color: red;}.t2 {color: green;}.t3 {color: blue;}.t4 {color: purple;}.box p {font-size: 30px;color: black;text-align: right;padding: 50px 0px;}</style></head><body><div class="box"><span class="t1">开</span><span class="t2">吉</span><span class="t3">尔</span><span class="t4">软件</span><p>PHP中文网</p></div></body></html>
效果图：
2.box-sizing的意义与使用场景
(1) box尺寸不含padding和border： box-sizing = content-box（默认），
如下图
(2) box尺寸包含padding和border： box-sizing =border-box 如下图
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>box-sizing</title><style>.box1 {/* 默认的盒子模型 尺寸没有包括padding 和border*/box-sizing: content-box;width: 10em;height: 10em;border: solid 0.625em red;}.box2 {box-sizing: border-box;width: 10em;height: 10em;border: solid 10px green;}</style></head><body><div class="box1">开吉尔</div><br /><div class="box2">开吉尔软件</div></body></html>
3.em的意义，并举例说明
(1)em意义：当前浏览器的字号的引用，通常是16px，font-size字号动态变化字号。
(2)举例说明em, 1em=16px ,2em=32px
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>em</title><style>.box1 {font-size: 1em;}.box2 {font-size: 2em;}.box3 {font-size: 3em;}</style></head><body><div class="box1">开吉尔</div><div class="box2">软件</div><div class="box3">开吉尔软件</div></body></html>