search

博客列表 >学习CSS（二）

学习CSS（二）

▽空城旧梦
▽空城旧梦原创
2021年03月24日 16:19:24468浏览

相对定位

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>定位</title>
  8.     <style>
  9.       /* 相对定位 */
  10.       .box {
  11.         width: 20em;
  12.         height: 20em;
  13.         background: skyblue;
  14.         position: relative;
  15.         left: 5em;
  16.         top: 2em;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  21.     <div>
  22.       <h1>这是一个标题</h1>
  23.     </div>
  24.     <div class="box"></div>
  25.   </body>
  26. </html>

绝对定位

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>定位</title>
  8.     <style>
  9.       /* 绝对定位 */
  10.       .box {
  11.         width: 20em;
  12.         height: 20em;
  13.         background: skyblue;
  14.         position: absolute;
  15.         left: 5em;
  16.         top: 2em;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  21.     <div>
  22.       <h1>这是一个标题</h1>
  23.     </div>
  24.     <div class="box"></div>
  25.   </body>
  26. </html>

box-sizing

确定盒子边界在哪里

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>vh / vw</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  15.       .box {
  16.         width: 50vw;
  17.         height: 50vh;
  18.         margin: 30px auto;
  19.         background-color: royalblue;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <div class="box"></div>
  25.   </body>
  26. </html>
上一条：210322 CSS 样式与选择器下一条：演示box-sizing功能并实例/演示相对定位与绝对定位的区别与联系
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议