![]()
盒模型 常用属性
![]()
代码
<body> <div class="box1"></div> <div class="box2"></div> <style> .box1{ width:200px; height:200px; border:20px solid orange; background-color: green; /* 内边距padding,白色显示内边距的大小 */ padding:30px 10px; background-clip: content-box; /* 距离周边间距20px */ margin:20px; } .box2{ width:200px; height:200px; border-left:20px solid blue; border-right:20px dashed blue; border-top:20px solid orange; border-bottom:20px dashed orange; background-color:red ; padding:10px 20px 30px; background-clip: content-box; /* margin会在垂直方向出现折叠,谁大用谁的 */ margin:40px; /* box的正个大小，包含了内边距padding和边框border在内 */ box-sizing:border-box; } </style></body>![]()
效果
![]()
媒体查询以及em,rem用法
![]()
代码
<body> <!-- em: 动态的字号，总是相对于自身或祖先元素，如果祖先是根元素，em=rem rem:静态的字号，总是相对于“根元素” vw: 视口百分比，1vw = 视口宽度的1/100 vh: 视口百分比，1vw = 视口高度的1/100 --> <div class="container"> <header>页眉</header> <main>主体</main> <footer>页脚</footer> </div> <style> body { font-size: 2em; } .container{ display: grid; /* 指定行大小(高度) */ grid-template-rows: 15vh 70vh 15vh; } .container header { background-color: skyblue; /* rem:静态的字号，总是相对于“根元素”。此处字号不会随body的字号变化。*/ font-size: 1rem; } .container footer { background-color: green; /* em: 动态的字号，总是相对于自身或祖先元素。此处字号随body的字号而变化。 */ font-size: 1em; } .container main { background-color: yellow; /* em: 动态的字号，总是相对于自身或祖先元素。此处字号随body的字号而变化。 */ font-size: 2em; } </style> </body>![]()
效果
