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

一、熟悉盒模型常用属性

概述：所有 HTML 元素可以看作盒子,CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型:

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。
  • 轮廓 Outline: 位于 border 与 margin 之间,因为不占空间, 可暂时忽略

    针对 padding,margin,border 的每一条边都可以单独设置属性
    pading 和 margin 是背景透明的,所以只能设置宽度例如：

  • padding-top,padding-right,padding-bottom,padding-left

  • margin-top,margin-right,margin-bottom,margin-left

    border 比较特殊, 除了可以设置宽度, 还可以设置样式和颜色,所以有更多的属性例如：

  • border-top: 1px solid black

  • border-right: 1px solid green

  • border-bottom: 1px solid gray

  • border-left: 1px solid skyblue

    具体示例代码：

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

效果预览：

二、理解 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.       }
  20.       .container .item {
  21.         width: 100px;
  22.         height: 100px;
  23.         background-color: violet;
  25.         /* 水平居中 */
  26.         /* text-align: center; */
  27.         /* 让浏览器自动计算左右外边距 */
  28.         /* margin-left: auto;
  29.         margin-right: auto; */
  31.         /* 垂直居中,默认margin-top/bottom: 0 */
  32.         /* margin-top: auto;
  33.         margin-bottom: auto; */
  35.         /* 通过绝对定位来实现垂直居中 */
  36.         position: absolute;
  37.         /* 让当前元素绝对定位的上下文充满整个父级容器 */
  38.         /* 左上角开始 */
  39.         top: 0;
  40.         left: 0;
  41.         /* 右下角结束 */
  42.         right: 0;
  43.         bottom: 0;
  45.         /* 水平垂直居中 */
  46.         margin: auto;
  47.       }
  48.     </style>
  49.   </head>
  50.   <body>
  51.     <div class="container">
  52.       <div class="item"></div>
  53.     </div>
  54.   </body>
  55. </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