Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS盒模型以及CSS定位
Blogger Information
Blog 16
fans 0
comment 0
visits 9548
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盒模型以及CSS定位
Blastix Riotz
Original
635 people have browsed it

盒模型

所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>盒模型</title>
  8.     <style>
  9.         /* 初始化 */
  10.         * {
  11.             margin: 0;
  12.             padding: 0:；
  13.             box-sizing: border-box;
  14.         }
  15.         root{
  16.             font-size: 10px;
  17.         }
  18.     .box {
  19.         font-size: 30px;
  20.         /* width: 12.5em;
  21.         height: 12.5em; */
  22.         width: 20rem;
  23.         height: 20rem;
  24.         border: 2px solid;
  25.         background: skyblue;
  26.         /* padding: 上 右 下 左;顺时针顺序 */
  28.         padding: 10px 5px 5px 10px;
  29.         box-sizing: content-box;
  30.         background-clip: content-box;
  31.     }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="box">box</div>
  36. </body>
  37. </html>


em:根据元素的上下文来确定他的值
rem:根据根元素的字号来设置
配合root{font-size: 10px;}标准让盒子大小易于计算

相对定位与绝对定位

  • 默认：静态定位，就是没有定位position: static;
  • 相对定位：相对于它在文档流中的原始位置进行定位position: relative;

    实例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>定位</title>
    8.   <style>
    9.       .box {
    10.       width: 20em;
    11.       height: 15em;
    12.       background-color: lightseagreen;
    13.       /* 相对定位 */
    14.       position: relative;
    15.       top: 5em;
    16.       left: 4em;
    17.       }
    18.   </style>
    19. </head>
    20. <body>
    21.   <div class="box"></div>
    22.   <h2>Hellow World</h2>
    23. </body>
    24. </html>

  • 绝对定位：脱离了文档流，相对于html来进行定位;当有定位父级时，相对于定位父级来定位position: absolute;

    实例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>定位</title>
    8.   <style>
    9.       .box {
    10.       width: 20em;
    11.       height: 15em;
    12.       background-color: lightseagreen;
    13.       /* 绝对定位 */
    14.       position: absolute;
    15.       top: 5em;
    16.       left: 4em;
    17.       }
    19.       .parent {
    20.           border: 1px solid #000;
    21.           position: relative;
    22.           top:4em;
    23.           left: 4em;
    24.           min-height: 30em;
    25.       }
    26.   </style>
    27. </head>
    28. <body>
    29.   <div class="parent">
    30.       <!-- 父级定位元素 -->
    31.   <div class="box"></div>
    32.   </div>
    33. </body>
    34. </html>

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