Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 盒模型元素大小的重新计算以及定位技术
Blogger Information
Blog 40
fans 0
comment 1
visits 39800
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
盒模型元素大小的重新计算以及定位技术
Dong.
Original
712 people have browsed it

盒模型的常用属性

序号 属性 定义
1 margin 外边距
2 padding 内边距
3 border 边框
4 top 内外边距边框属性，表示上边距
5 left 内外边距边框属性，表示左边距
6 bottom 内外边距边框属性，表示下边距
7 right 内外边距边框属性，表示表示右边距
8 box-sizing 重新计算边框大小

盒模型演示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>盒/框模型</title>
  7.     <style>
  8.         .box{
  9.             /* 宽、高是内容区 */
  10.             width:200px;
  11.             height:200px;
  12.         }
  13.         .box.one{
  14.             padding:10px;
  15.             border:2px solid #000;
  16.             background-color:lightgreen;
  17.             background-clip:content-box;
  18.             margin-bottom:20px;
  19.         }
  20.         .box.two{
  21.             padding:10px;
  22.             border:2px solid #000;
  23.             background-color:lightcoral;
  24.             /* background-clip规定背景的绘制区域 */
  25.             background-clip:content-box;
  26.             margin-top:30px;
  27.         }
  28.         .box.parent{
  29.             background-color:lightblue;
  30.             /* 相对定位是相对自己原来的位置进行移动，这个元素在文档流的原位置不释放  relative*/
  31.             position:relative;
  32.             left:30px;
  33.             top:50px;
  34.         }
  35.         .son{
  36.             width:100px;
  37.             height:100px;
  38.             background-color:violet;
  39.             /* 绝对定位会找到这个元素有定位的上级，按照上级的位置进行移动  absolute*/
  40.             position:absolute;
  41.             /* 固定定位，忽略所有的定位父级，只针对body进行定位移动  fixed*/
  42.             position:fixed;
  43.             left:60px;
  44.             top:80px;
  45.         }
  46.     </style>
  47. </head>
  48. <body>
  49.     <!-- 块级元素默认垂直排序 -->
  50.     <div class="box one"></div>
  51.     <div class="box two"></div>
  52.     <hr />
  53.     <div class="box parent">
  54.         <div class="son"></div>
  55.     </div>
  56. </body>
  57. </html>

注意：一旦一个元素被添加了position属性，且值非static,那么它就是定位属性。

效果展示：

对于box-sizing的理解

box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域，说白了就是重新计算盒大小

属性值 说明
content-box 默认值，以内容区为准
border-box 指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 指定 box-sizing 属性的值，应该从父元素继承

示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>用户自定义元素大小的计算方式</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       .box {
  14.         width: 200px;
  15.         height: 180px;
  16.         border: 2px solid #000;
  17.         background-color: violet;
  18.         padding: 40px;
  19.         background-clip: content-box;
  20.         /* box-sizing: 重新计算盒大小 */
  21.         /* content-box: 默认值，以内容区为准 */
  22.         /* box-sizing: content-box; */
  23.         box-sizing: border-box;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <div class="box"></div>
  29.     <!-- width: content-width + padding-left/right + border-left/right 
  30.     height: 206 -->
  31.   </body>
  32. </html>

当box-sizing:border-box时；效果预览：

当`box-sizing:content-box时；效果预览：

综上可知：盒子实际 width= content-width + padding-left/right + border-left/right ；

理解定位元素的水平与垂直对齐技术

具体步骤看代码注释：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>margin:auto: 块元素元素的垂直居中</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         background-color: lightgreen;
  12.         /* 弹性布局 */
  13.         /* display: flex;
  14.         justify-content: center;
  15.         align-items: center; */
  16.         /* 转为定位元素 */
  17.         position: relative;
  18.       }
  19.       .container .item {
  20.         width: 100px;
  21.         height: 100px;
  22.         background-color: violet;
  23.         /* 水平居中 */
  24.         /* text-align: center; */
  25.         /* 让浏览器自动计算左右外边距 */
  26.         /* margin-left: auto;
  27.         margin-right: auto; */
  28.         /* 垂直居中,默认margin-top/bottom: 0 */
  29.         /* margin-top: auto;
  30.         margin-bottom: auto; */
  31.         /* 通过绝对定位来实现垂直居中 */
  32.         position: absolute;
  33.         /* 让当前元素绝对定位的上下文充满整个父级容器 */
  34.         /* 左上角开始 */
  35.         top: 0;
  36.         left: 0;
  37.         /* 右下角结束 */
  38.         right: 0;
  39.         bottom: 0;
  40.         /* 水平垂直居中 （简介代码）*/
  41.         margin: auto;
  42.       }
  43.     </style>
  44.   </head>
  45.   <body>
  46.     <div class="container">
  47.       <div class="item"></div>
  48.     </div>
  49.   </body>
  50. </html>

效果展示：

内容小结：

  • 绝对定位是相当于它的定位父级来进行定位
  • 固定定位忽略你的定位父级只相当于bady进行定位
  • 相对定位只是相当于自己进行偏移，这个元素在文档流中并不释放
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