简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css 盒模型
Blogger Information
Blog 18
fans 1
comment 0
visits 16081
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 盒模型
空瓶子
Original
713 people have browsed it

css 盒模型

1.实例演示 box-sizing 属性; 2. 实例演示常用的元素居中方式

  1. 关于 css 盒模型
    • 盒模型是使用 div 和 css 对网页元素进行控制是的一个非常重要的概念
    • 盒模型就是在 css 中，所有元素都包含在一个矩形框内，而这个矩形框就是称为盒模型
    • 盒模型描述了元素及属性在页面布局中所占的空间代销，因此盒模型可以影响其他元素位置及大小
    • 盒模型由 margin（外边距）、border（边框）、padding（内边距）、content（内容）几个部分组成
    • 盒模型还具备高度和宽度两个辅助属性

  2. 影响盒子大小的因素 width 与 heigth 和 padding、border
    一个盒子的实际大小是由 content、padding、border、margin 组成
    在 css 中可以通过设置 width 或 heigth 属性来控制 content 部分的大小
    还可以设置盒子的 padding、border 的大小
    测试代码

    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>关于盒子padding和border</title>
    7.  <style>
    8.    :root {
    9.      font-size: 10px;
    10.    }
    11.    .box {
    12.      width: 10em;
    13.      height: 10em;
    14.      background-color: skyblue;
    15.    }
    16.    /* 设置padding和border属性 */
    17.    .box {
    18.      padding: 1em;
    19.      border: 1px solid #000;
    20.      background-clip: content-box;
    21.    }
    22.  </style>
    23. </head>
    24. <body>
    25.  <div class="box"></div>
    26. </body>
    27. </html>

    效果演示

    通过 box 的 width 和 heigth 属性，设置了盒子的宽为 100px，高为 100px；
    设置盒子的 padding：10px 和 borderpx
    此时盒子的宽和高为 122（100+10 2+1 2） * 122 的正方形

  3. 关于 box-sizing 控制盒子计算方式
    这种盒子模型,最早是由微软的 IE 浏览器实现的,称之为 IE 盒子模型
    css 代码

    1. .box {
    2.      /* content-box: w3c标准盒子模型,width/height不含padding/border  */
    3.      box-sizing: content-box;
    4.      /* border-box:padding,border计算在盒子大小内 */
    5.      box-sizing: border-box;
    6.    }

    演示效果

    border-box:padding,border 计算在盒子大小内

  4. 关于 margi 属性对盒子的影响
    margi 属性用于设置页面中元素（盒子）与元素（盒子）之间的距离大小，不影响盒子本身大小
    测试代码
    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对盒子位置的影响</title>
    7.  <style>
    8.    html {
    9.      font-size: 10px;
    10.    }
    11.    .box {
    12.      width: 10em;
    13.      height: 15rem;
    14.      background-color: skyblue;
    15.      padding: 1em;
    16.      border: 1px solid black;
    17.      background-clip: content-box;
    18.    }
    19.    /* 垂直排列 */
    20.    .box:first-of-type {
    21.      margin: 1em;
    22.    }
    23.    .box:nth-of-type(2) {
    24.      margin: 1.5em;
    25.    }
    26.    /* 水平排列 */
    27.    .box {
    28.      float: left;
    29.    }
    30.  </style>
    31. </head>
    32. <body>
    33.  <div class="box"></div>
    34.  <div class="box"></div>
    35. </body>
    36. </html>
    效果演示

    当页面内的盒子垂直排列时，两个盒子的外边距重叠了、外边距大的那个会撑开两个盒子的距离

    当页面内的盒子水平排列时，两个盒子的外边距会累加
  5. 全局的盒子大小的设置
    css 代码
  1. <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  6.             /* 全局使用IE盒子模型 */
  7.             box-sizing: border-box;
  8.         }
  10.         body {
  11.             border: 1px solid red;
  12.             height: 100vh;
  13.         }
  14.     </style>

效果演示

  1. 关于 content
  • 文档流
    css 代码
  1. <style>
  2.       html {
  3.         font-size: 10px;
  4.       }
  5.       .box {
  6.         width: 10em;
  7.         /* 应该使用内容将元素的高度撑开,而不是直接设置它的高度 */
  8.         height: 15em;
  9.         background-color: skyblue;
  10.         border: 1px solid #000;
  11.       }
  12.       .box {
  13.         /* 默认属性 */
  14.         overflow: visible;
  15.         /* 超出盒子大小的元素部分会被隐藏 */
  16.         overflow: hidden;
  17.         /* 使用滚动条 */
  18.         overflow: scroll;
  19.         /* 根据盒子内元素大小是否超过盒子高度来决自动使用滚动条功能 */
  20.         overflow: auto;
  21.       }
  22.     </style>

  1. 关于元素的居中问题
  • 元素水平居中问题
    代码
  1.     <style>
  2.     .box {
  3.       width: 15em;
  4.       height: 15em;
  5.       border: 1px solid #000;
  6.     }
  8.     /* 1. 行内或行内块水平居中 */
  9.     .box {
  10.       text-align: center;
  11.     }
  13.     /* 2. 块元素的水平居中 */
  15.     .box > div {
  16.       width: 5em;
  17.       height: 5em;
  18.       background-color: yellow;
  19.     }
  21.     /* 使用margin来实现块的水平居中,挤压式的居中 */
  22.     .box > div {
  23.       /* auto:这个值由浏览根据上下文自动计算 */
  24.       /* margin-left: auto;
  25.           margin-right: auto; */
  27.       margin: 0 auto;
  28.     }
  29.   </style>
  30. </head>
  32. <body>
  33.   <div class="box">
  34.     <!-- <a href="">php.cn</a> -->
  35.     <!-- <img src="https://img.php.cn/upload/course/000/000/001/5fae261f9c169870.png" width="150" alt=""> -->
  36.     <div></div>
  37.   </div>
  38. </body>

效果演示

  • 元素的垂直居中问题
    行元素垂直居中
    代码
  1.     <style>
  2.       html {
  3.         font-size: 10px;
  4.       }
  5.       .box {
  6.         width: 20em;
  7.         height: 30em;
  8.         background-color: skyblue;
  9.         border: 1px solid black;
  10.       }
  11.       /* 行元素垂直居中 */
  12.       .box a {
  13.         line-height: 30em;
  14.       }
  15.     </style>
  16.   </head>
  17.   <body>
  18.     <div class="box">
  19.       <a href="">PHP中文网</a>
  20.     </div>
  21.   </body>


因为行内块元素有他自己的宽高，在页面布局的元素垂直居中时；这里可以吧行内块元素看成一个“特殊”的块元素
块元素和行内块元素的垂直居中问题
代码

  1.     <title>块元素和行内块元素的垂直居中</title>
  2.     <style>
  3.       html {
  4.         font-size: 10px;
  5.       }
  6.       .box {
  7.         width: 30em;
  8.         /* 不要给高度,这个高度应该由padding挤出来 */
  9.         /* height: 40em; */
  10.         background-color: skyblue;
  11.         border: 1px solid black;
  12.       }
  13.       .box div {
  14.         width: 10em;
  15.         height: 10em;
  16.         background-color: blue;
  17.       }
  19.       .box {
  20.         padding: 5em 0;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <div class="box">
  26.       <!-- <img
  27.         src="https://inews.gtimg.com/newsapp_ls/0/12931162834_295195/0"
  28.         alt=""
  29.         style="width: 100px"
  30.       /> -->
  31.       <div></div>
  32.     </div>
  33.   </body>

效果演示

  • 水平且垂直的解决方案
    代码
    1. <style>
    2.     html {
    3.       font-size: 10px;
    4.     }
    5.     .box {
    6.       width: 15em;
    7.       height: 15em;
    8.       border: 1px solid black;
    9.     }
    10.     .box {
    11.       position: relative;
    12.     }
    13.     .box > div {
    14.       width: 5em;
    15.       height: 5em;
    16.       background-color: yellow;
    17.     }
    18.     .box div {
    19.       position: absolute;
    20.       top: 0;
    21.       left: 0;
    22.       right: 0;
    23.       bottom: 0;
    24.       margin: auto;
    25.     }
    26.   </style>
    27. </head>
    28. <body>
    29.   <div class="box">
    30.     <div></div>
    31.   </div>
    32. </body>
    效果演示
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！