Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css基础：box-sizing功能与定位功能的应用
Blogger Information
Blog 8
fans 0
comment 0
visits 5535
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
css基础：box-sizing功能与定位功能的应用
WSC
Original
745 people have browsed it

box-sizing功能

在 CSS 盒子模型的默认定义里，对元素设置的 width 与 height 。如果这个元素有任何的 border 或 padding ，屏幕显示的盒子宽度和高度会加上设置的边框和内边距值。利用box-sizing 属性可以改变这种情况。

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8.     <style>
  9.       html {
  10.         font-size: 10px;
  11.       }
  12.       .box1 {
  13.         /*width 和 height 属性不包括内边距和边框 */
  14.         width: 10rem;
  15.         height: 10rem;
  16.         border: 8px solid red;
  17.         padding: 2rem;
  18.         margin: 2rem;
  19.         background-color: aqua;
  20.       }
  21.       .box2 {
  22.         /* 设置box-sizing为border-box后，width 和 height 属性包括内容，内边距和边框 */
  23.         box-sizing: border-box;
  24.         width: 10rem;
  25.         height: 10rem;
  26.         border: 8px solid red;
  27.         padding: 2rem;
  28.         margin: 2rem;
  29.         background-color: aqua;
  30.       }
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <div class="box1">box1</div>
  35.     <div class="box2">box2</div>
  36.   </body>
  37. </html>

效果图

相对定位与绝对定位

position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。
position: relative;相对定位：相对定位是相对于元素在文档中的初始位置。

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8.     <style>
  9.       .box {
  10.         width: 15em;
  11.         height: 15em;
  12.         border: 1px solid #000;
  13.       }
  14.       .box1 {
  15.         width: 10em;
  16.         height: 10em;
  17.         background-color: aqua;
  18.         /* 相对定位，相对自己在文档中的初始位置移动 */
  19.         position: relative;
  20.         top: 3em;
  21.         left: 3em;
  22.       }
  23.       .box2 {
  24.         width: 5em;
  25.         height: 5em;
  26.         background-color: cadetblue;
  27.         /* 绝对定位，相对于最近的已定位的祖先元素移动 */
  28.         position: absolute;
  29.         top: 3em;
  30.         left: 3em;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <div class="box">
  36.       <div class="box1">
  37.         <div class="box2"></div>
  38.       </div>
  39.   </body>
  40. </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