Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 盒模型所有常用属性、box-sizing的用法、理解定位元素的水平与垂直对齐技术 垂直居中
Blogger Information
Blog 30
fans 0
comment 2
visits 29456
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
963 people have browsed it

盒模型所有常用属性、box-sizing的用法、理解定位元素的水平与垂直对齐技术 垂直居中

盒模型常用属性

  • 每个盒子都由四个部分组成
组成部分 描述
内容区域（content） 包含元素的主要内容 可以是文本 图片等
内边距区域（padding） 填充的是内容与边框的边距 可以用于延伸内容区的背景
边框区域（border） 用于显示边框
外边距区域（margin） 可以用于分开相邻元素
  • 常用属性及含义
属性 描述
width min-width max-width 用于设置内容区域或者带边框区域的宽度
height min-height max-height 用于设置内容区域或者带边框区域的高度
padding 用于设置内边距的宽度和高度
border 用于设置边框的宽度和高度
margin 用于设置外边距的宽度和高度

示例代码

  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.         width: 100px;
  10.         height: 100px;
  11.         margin: 50px;
  12.         border: 10px solid red;
  13.         background-color: blue;
  14.         padding: 10px;
  15.       }
  16.       span {
  17.         background-color: greenyellow;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <div class="box">
  23.       <span>文本内容</span>
  24.     </div>
  25.   </body>
  26. </html>

显示结果

注意：盒模型的外边距会产生重合现象

box-sizing的用法

  • box-sizing定义了浏览器如何计算一个元素的总高度与宽度
  • 即width height属性所描述的是内容区还是带边框区域的宽度高度

  • 其参数有：

    • content-box默认值，表示当前宽度高度为盒模型的内容区的宽高度
    • border-box表示当前宽度高度为带边框区域整体（除去外边距）的宽高度

示例代码

  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用法</title>
  7.     <style>
  8.       .box1 {
  9.         box-sizing: content-box;
  10.         width: 100px;
  11.         height: 100px;
  12.         border: 10px solid red;
  13.         padding: 10px;
  14.       }
  15.       .box2 {
  16.         box-sizing: border-box;
  17.         width: 100px;
  18.         height: 100px;
  19.         border: 10px solid red;
  20.         padding: 10px;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <div class="box1"></div>
  26.     <div class="box2"></div>
  27.   </body>
  28. </html>

显示结果

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

  • 利用绝对定位实现

示例代码

  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.       .container {
  9.         width: 200px;
  10.         height: 200px;
  11.         border: 1px solid red;
  13.         position: relative;
  14.       }
  15.       .item {
  16.         width: 100px;
  17.         height: 100px;
  18.         background-color: greenyellow;
  20.         /* 水平左右居中1 */
  21.         /* margin-left: auto;
  22.         margin-right: auto; */
  24.         /* 水平左右居中2 */
  25.         /* position: absolute;
  26.         left: 0;
  27.         right: 0;
  28.         margin: auto; */
  30.         /* 垂直上下居中 */
  31.         /* position: absolute;
  32.         top: 0;
  33.         bottom: 0;
  34.         margin: auto; */
  36.         /* 完全居中 */
  37.         position: absolute;
  38.         top: 0;
  39.         left: 0;
  40.         right: 0;
  41.         bottom: 0;
  42.         margin: auto;
  43.       }
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <div class="container">
  48.       <div class="item"></div>
  49.     </div>
  50.   </body>
  51. </html>

显示结果

  • 水平左右居中

  • 垂直上下居中

  • 完全居中

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