Community Learn Tools Library Leisure
search
English
Home > List of blog posts > box-sizing和定位
Blogger Information
Blog 7
fans 0
comment 0
visits 4541
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和定位
辰辰
Original
519 people have browsed it

box-sizing

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             /* padding和border计算在width,height里 */
  14.             box-sizing: border-box;
  15.         }
  17.         html {
  18.             font-size: 10px;
  19.         }
  21.         .box {
  22.             width: 20rem;
  23.             height: 20rem;
  24.             border: #000 solid 2px;
  25.             background-color: lightblue;
  27.         }
  28.     </style>
  29. </head>
  31. <body>
  32.     <div class="box">box</div>
  33. </body>
  35. </html>

定位

  • 相对定位
    相对于它在文档流中的原始位置进行定位
  • 绝对定位
    绝对定位元素脱离了文档流
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  16.         .box {
  17.             /* position: relative; */
  18.             /* position: absolute; */
  19.             top: 5em;
  20.             left: 10em;
  21.             background-color: lightskyblue;
  22.             width: 20rem;
  23.             height: 4rem;
  24.         }
  25.     </style>
  26. </head>
  28. <body>
  29.     <div class="box">box</div>
  30.     <p>Hello</p>
  31. </body>
  33. </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