Community Learn Tools Library Leisure
search
English
Home > List of blog posts > box-sizing功能，相对定位/绝对定位
Blogger Information
Blog 10
fans 0
comment 0
visits 5561
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
box-sizing功能，相对定位/绝对定位
手机用户1615433136
Original
537 people have browsed it

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>box-sizing</title>
  8.     <style>
  9.       /* 初始化 */
  10.       * {
  11.         margin: 0;
  12.         padding: 0;
  13.         /* 将盒子的padding 和border 计算在width，height内 */
  14.         box-sizing: border-box;
  15.       }
  16.       html {
  17.         font-size: 16px;
  18.       }
  19.       /* em rem  */
  20.       /* em :根据元素上下文来确定它的值 */
  21.       /* rem :根据元素的字号来设置 */
  22.       .box {
  23.         font-size: 16px;
  24.         width: 20rem;
  25.         height: 20rem;
  26.         border: 2px solid;
  28.         /* padding: 上，右，下，左;顺时针顺序 */
  29.         padding: 10px 5px 5px 10px;
  30.         /* 三值：左右相同，而上下不同 */
  31.         padding: 8px 10px 8px;
  32.         /* 二值进行简化 */
  33.         padding: 8px 10px;
  35.         background-color: lightseagreen;
  36.         /* 再转为标准盒子 */
  37.         box-sizing: content-box;
  39.         background-clip: content-box;
  40.       }
  41.     </style>
  42.   </head>
  43.   <body>
  44.     <div class="box">box</div>
  45.   </body>
  46. </html>

<hr/>

视口

  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.       }
  14.       /* 视口：可视窗口，手机端为了显示全PC页面，默认为980px */
  15.       /* vh :1vh = 视口高度的1/100，vh =view height */
  16.       /* vw :1vw =视口宽度的1/100，vw =view width  */
  18.       .box {
  19.         background-color: limegreen;
  20.         width: 50vw;
  21.         height: 25vh;
  22.         margin: 20px auto;
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <div class="box"></div>
  28.   </body>
  29. </html>

<hr/>

相对定位/绝对定位

  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.       /* html {
  10.         border: 1px solid black;
  11.       } */
  12.       .box {
  13.         width: 20em;
  14.         height: 15em;
  15.         background-color: lightgreen;
  16.         /* 默认：静态定位，就是没有定位 */
  17.         /* position: static; */
  18.         /* 相对定位：自动转为定位元素 */
  19.         /* 定位元素：只要这个元素上有非static的定位属性，就是定位元素 */
  20.         /* position: relative; */
  22.         /* 只要是定位元素，定位偏移量有效 */
  23.         /* 相对于它在文档流中的原始位置进行定位 */
  24.         /* top: 5em;
  25.     left: 4em; */
  27.         /* 绝对定位 */
  28.         position: absolute;
  29.         /* 绝对定位元素脱离了文档流 */
  30.         /* 文档流:显示顺序与书写顺序一致 */
  31.         top: 5em;
  32.         left: 4em;
  33.       }
  34.       .parent {
  35.         border: 1px solid #000;
  36.         /* ]转为定位元素,作为绝对定位元素的定位父级/定位参考/定位包含块 */
  37.         position: relative;
  38.         top: 4em;
  39.         left: 4em;
  40.         min-height: 30em;
  41.       }
  42.     </style>
  43.   </head>
  44.   <body>
  45.     <div class="parent">
  46.       <div class="box"></div>
  47.     </div>
  48.   </body>
  49. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post