Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css 盒模型、box-sizing、定位元素水平与垂直居中学习使用
Blogger Information
Blog 14
fans 0
comment 2
visits 12651
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、定位元素水平与垂直居中学习使用
JKY辉哥
Original
928 people have browsed it

1.盒子模型

  • 1.1 盒子模型常用属性

序号 属性 描述
1 margin 外边距
2 border 边框
3 padding 内边距(内填充)
4 width 内容区宽度
5 height 高度
6 box-sizing 如何计算盒模型总宽和总高
7 backgroumd-clip 规定背景的绘制区域

  • 1.2 演示代码

  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.       }
  14.       .box.one {
  15.         padding: 10px;
  16.         border: 2px solid #000;
  17.         background-color: lightgreen;
  18.         background-clip: content-box;
  19.         /* margin:  top right bottom left  */
  20.         margin: 0 0 20px 0;
  21.       }
  23.       .box.two {
  24.         padding: 10px;
  25.         border: 2px solid #000;
  26.         background-color: salmon;
  27.         /* 背景被裁剪到内容框 */
  28.         background-clip: content-box;
  29.         /* 当两个盒子在垂直方向上，外边距会产生折叠，或者称塌陷 */
  30.         margin-top: 30px;
  31.       }
  33.       .box.parent {
  34.         background-color: skyblue;
  35.         /* 一旦一个元素被添加了position: relative,且值非static,那么它就是定位元素 */
  36.         position: relative;
  37.         /* 相对定位：是相对自己做了偏移，这个元素仍然在文档流中的位置不释放 */
  38.         /* left: 30px; */
  39.         /* top: 40px; */
  40.       }
  41.       .son {
  42.         width: 100px;
  43.         height: 100px;
  44.         background-color: violet;
  45.         /* 绝对定位:相对于它的定位父级进行定位的*/
  46.         /* position: absolute; */
  47.         /* 固定定位:忽略你的定位父级，总是相对于<body>定位 */
  48.         position: fixed;
  49.         left: 50px;
  50.         top: 50px;
  51.       }
  52.     </style>
  53.   </head>
  54.   <body>
  55.     <!-- 块级元素默认垂直排列 -->
  56.     <div class="box one"></div>
  57.     <div class="box two"></div>
  58.     <hr />
  60.     <div class="box parent">
  61.       <div class="box son"></div>
  62.     </div>
  63.   </body>
  64. </html>

运行截图
盒子模型

2.用户自定义元素大小的计算方式(box-sizing 的用法)

  • CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度

  • 2.1. box-sizing:content-box 默认值，标准盒子模型

  1.     尺寸计算公式：
  2.     width = 内容的宽度
  3.     height = 内容的高度
  4.     宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）

  • 2.2. box-sizing:border-box

  1.   width 和 height 属性包括内容，内边距和边框，但不包括外边距
  2.   尺寸计算公式：
  3.   width = border + padding + 内容的宽度
  4.   height = border + padding + 内容的高度

  • 2.3. box-sizing、background-clip 属性代码示例

  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>box-sizing、background-clip属性使用示例</title>
  7.     <style>
  8.       .content-box {
  9.         width: 200px;
  10.         height: 200px;
  11.         padding: 10px;
  12.         background-color: lightsalmon;
  13.         border: 5px solid #000;
  14.         margin-bottom: 20px;
  16.         /* background-clip：border-box是默认值，表示元素的背景从border区域（包括border）以内开始保留背景。 */
  17.         /* background-clip：content-box表示元素的背景从内容区域以内开始保留 */
  18.         /* background-clip：padding-box表示元素的背景从padding区域(包括padding)以内开始保留。 */
  19.         background-clip: content-box;
  21.         /* 1.box-sizing属性是告诉浏览器如何计算一个元素的总宽度和总高度 */
  22.         /* 默认值content-box，尺寸计算公式：width = 内容的宽度  height = 内容的高度 */
  23.         box-sizing: content-box;
  24.       }
  26.       .border-box {
  27.         width: 200px;
  28.         height: 200px;
  29.         padding: 10px;
  30.         background-color: lightsalmon;
  31.         border: 5px solid #000;
  32.         margin-top: 30px;
  33.         background-clip: padding-box;
  35.         /* 2. box-sizing: border-box;，width 和 height 属性包括内容，内边距和边框，但不包括外边距，
  36.         尺寸计算公式：width = border + padding + 内容的宽度
  37.         height = border + padding + 内容的高度 */
  38.         box-sizing: border-box;
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <div class="content-box">content-box内容</div>
  44.     <div class="border-box">border-box内容</div>
  45.   </body>
  46. </html>

运行截图
盒子尺寸计算

3.元素的水平与垂直居中对齐

  • 3.1 水平居中

    定义盒子合适宽度和高度，使用margin-left: auto;margin-right: auto;即可实现水平居中

  • 3.2 垂直居中

  1. 方法1：能快速实现垂居中
  2.       /* 弹性盒子让子元素垂直居中 */
  3.         display: flex;
  4.         justify-content: center;
  5.         align-items: center;
  6. 方法2：给父级元素添加相对定位，子盒子添加决定定位
  7.         position: absolute;
  8.         /* 让当前元素绝对定位的上下文充满整个父级容器 */
  9.         /* 左上角开始 */
  10.         top: 0;
  11.         left: 0;
  12.         /* 右小角结束 */
  13.         right: 0;
  14.         bottom: 0;
  15.         /* 水平垂直居中 */
  16.         margin: auto;

  • 3.3 演示代码 1

  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: 400px;
  10.         height: 400px;
  11.         background-color: lightgreen;
  13.         /* 弹性盒子让子元素垂直居中 */
  14.         /* display: flex;
  15.         justify-content: center;
  16.         align-items: center; */
  18.         /* 转换为定位元素 */
  19.         /* position: relative; */
  20.         /* left: 40px; */
  21.         /* top: 50px; */
  22.         /* background-clip: content-box; */
  24.         position: relative;
  25.       }
  27.       .container .item {
  28.         width: 100px;
  29.         height: 100px;
  30.         background-color: red;
  32.         /* 水平居中 */
  33.         /* text-align: center; */
  34.         /* 让浏览器自动计算左右外边距 */
  35.         margin-left: auto;
  36.         margin-right: auto;
  38.         /* 垂直居中,默认margin-top/margin-bottom:0 */
  39.         /* margin-top: auto;
  40.         margin-bottom: auto; */
  42.         /* 通过绝对定位来实现绝对定位 */
  44.         position: absolute;
  45.         /* 让当前元素绝对定位的上下文充满整个父级容器 */
  46.         /* 左上角开始 */
  47.         top: 0;
  48.         left: 0;
  49.         /* 右小角结束 */
  50.         right: 0;
  51.         bottom: 0;
  52.         /* 水平垂直居中 */
  53.         margin: auto;
  54.       }
  55.     </style>
  56.   </head>
  57.   <body>
  58.     <div class="container">
  59.       <div class="item"></div>
  60.     </div>
  61.   </body>
  62. </html>

运行效果截图
局部水平垂直居中

  • 3.4 演示代码 2

  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.       body {
  9.         background-color: #efefef;
  10.       }
  11.       form {
  12.         width: 400px;
  13.         height: 300px;
  14.         background-color: cyan;
  15.         /* 水平垂直居中 */
  16.         position: absolute;
  17.         /* 让当前元素绝对定位的上下文充满整个父级容器 */
  18.         /* 左上角开始 */
  19.         top: 0;
  20.         left: 0;
  21.         /* 右小角结束 */
  22.         right: 0;
  23.         bottom: 0;
  24.         margin: auto;
  25.         text-align: center;
  26.       }
  27.       form p {
  28.         width: 300px;
  29.         height: auto;
  30.         line-height: 40px;
  31.         padding: 10px;
  32.         margin: auto;
  33.       }
  34.       form p button {
  35.         font-size: 14px;
  36.         color: #ffffff;
  37.         background-color: red;
  38.         border: none;
  39.         border-radius: 5px 5px 5px silver;
  40.       }
  41.       form p button:hover {
  42.         background-color: burlywood;
  43.         border: none;
  44.         font-size: 1.1rem;
  45.       }
  46.     </style>
  47.   </head>
  48.   <body>
  49.     <form action="">
  50.       <h2>用户登录</h2>
  51.       <p>
  52.         <label for="">Email:</label>
  53.         <input type="email" name="" id="" />
  54.       </p>
  55.       <p>
  56.         <label for="">Password:</label>
  57.         <input type="password" name="" id="" />
  58.       </p>
  59.       <p>
  60.         <button>登录</button>
  61.       </p>
  62.     </form>
  63.   </body>
  64. </html>

运行效果截图
表单水平垂直居中

4.总结

  • 1.块级元素默认垂直排列，当二个盒子在垂直方向上，外边距会产生折叠塌陷
  • 2.一旦一个元素被添加了 position，且值非 static,那么它就是定位元素
  • 3.相对定位：是相对自己做了偏移，这个元素在文档流中的位置不释放
  • 4.绝对定位: 相对于它的定位父级进行定位
  • 5.固定定位:　忽略你的定位父级，总是相对于<body>定位
  • 6.元素内容宽度可以用box-sizing进行调整,默认为内容宽度(content-box)
  • 7.box-sizing: content-box(default) | padding-box | border-box
  • 8.box-sizing: border-box: 此时,width 包括 padding 和 border,内容区变小
  • 9.即 width 总宽度是不变的, 宽度计算边界在边框上,所以 width=broder+padding+conteten
  • 10.box-sizing: 适用于所有能设置 width 和 height 的所有元素
  • 11.box-sizing: 通常只适用于块级, 也适合置换元素和行内块元素(因为都可以设置宽高)
Correcting teacher：WJWJ

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