盒模型常用属性box-sizing
<div class="box1"></div> <style> .box1 { background-color: aqua; width: 200px; height: 200px; /* 边框 border*/ border: 10px solid red; /* 内边距padding */ /* 上下左右边距 以顺时针方向进行排序设置 */ padding: 20px 15px 10px 5px; background-clip: content-box; } </style> <div class="box2"></div> <style> .box2 { /* 盒子之间间距 盒子与盒子之间多个间距 取最大值为准 */ margin: 30px; } .box2 { background-color: aqua; width: 200px; height: 200px; border: 10px solid red; padding: 20px; background-clip: content-box; box-sizing: border-box; /* box-sizing控制盒子实际的尺寸 */ /* 默认border-box 当前盒子宽高只到内容区 */ /* 用border-box 以边框尺寸进行计算 */ } </style> </body>
媒体查询、实例演示em,rem用法
<body> <!-- 媒体：显示/输出信息的介质/载体，屏幕、打印机 --> <!-- 查询：根据当前媒体宽度变化来选择不同的页面或显示效果 --> <style> body { background-color: bisque; } /* 宽度小于800px时 body为红色 */ @media (max-width: 800px) { body { background-color: red; } } html { width: auto; font-size: 5px; background-color: rgb(0, 26, 255); } .box { margin: 20px 10px 20px; width: auto; height: 100px; background-color: aqua; border: 3px solid red; box-sizing: border-box; } html { font-size: 20px; /* rem设置为20px，1rem=20px */ /* html默认font-size: 16px; */ } </style> <!-- /* rem: 根元素的字号, 默认为16px */ --> <style> @media (max-width: 600px) { .box1 { font-size: 1rem; background-color: rgb(0, 26, 255); } @media (max-width: 800px) { .box2 { /* 2rem=40px */ font-size: 2rem; background-color: rgb(0, 119, 255); } @media (max-width: 1000px) { .box3 { /* 3rem=60px */ font-size: 3rem; background-color: aqua; } } </style> <div class="box box1">rem设置为20px，1rem=20px</div> <div class="box box2">2rem=40px</div> <div class="box box3">3rem=60px</div> </body></html>
<style> html { font-size: 10px; /* 在根元素中设置的字号,在其它地方引用是使用rem,并且这个值是不变的 */ /* 因为一个页面,只有一个根元素, html */ /* 1rem = 10px */ } div { /* font-size: 32px; */ /* 1em = 16px */ /* 32px = 2em */ font-size: 3rem; } div span { /* font-size: 2em; */ /* 2em = 2*16=32px */ /* 但是 em在父元素中被重新定义了, 1em = 30px */ /* 2em = 60px */ /* em总是随着自身或父元素的字号发生变化,在布局时会显得非常的混乱 */ /* font-size: 20px; */ font-size: 2rem; }</style>
