CSS盒子模型、文档流、绝对定位与相对定位-CSDN博客

本文链接：https://blog.csdn.net/2401_89406454/article/details/148076907

CSS盒子模型、文档流、绝对定位与相对定位知识结合效果图（源代码在文章末尾）：

一、盒子模型的属性

padding - border - margin 模型是一个极其通用的描述盒子布局形式的方法。对于任何一个盒子，都可以分别设定 4 条边的 padding、border 和 margin，实现各种各样的排版效果。

（一）边框

边框一般用于分隔不同元素，边框的外围即为元素的最外围。边框是围绕元素内容和内边距的一条或多条线。border 属性允许规定元素边框的宽度、颜色和样式。
常用的边框属性有 8 项：border - width、border - top、border - right、border - bottom、border - left、border - color、border - style 和 border - radius。其中，border - width 可以一次性设置所有边框宽度；border - color 同时设置 4 面边框的颜色时，可以连续写上 4 种颜色，并用空格分隔。上述连续设置的边框属性都是按 border - top、border - right、border - bottom、border - left 的顺序（顺时针）设置。

1、所有边框宽度

语法格式：
border - width:medium | thin | thick | length

medium 为默认宽度，thin 为小于默认宽度，thick 为大于默认宽度。Length 是由数字和单位标识符组成的长度值，不能为负值。

2、上边框宽度

语法格式：
border - top: border - width || border - style || border - color

3、右边框宽度

语法格式：
border - right:border - width || border - style || border - color

4、下边框宽度

语法格式：
border - bottom:border - width || border - style || border - color

5、左边框宽度

语法格式：
border - left:border - width || border - style || border - color

6、边框颜色

先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute。如果 border - width 等于 0 或 border - style 设置为 none，本属性将失去作用。

语法格式：
border - color:color

7、边框样式

先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute。
如果 border - width 不大于 0，本属性将失去作用。

语法格式：

参数：border - style 属性包括多个边框样式的参数。
① none：无边框。与任何指定的 border - width 值无关。
② dotted：边框为点线。
③ dashed：边框为短线。
④ solid：边框为实线。
⑤ double：边框为双线。两条单线与其间隔的和等于指定的 border - width 值。
⑥ groove：根据 border - color 的值画 3D 凹槽。
⑦ ridge：根据 border - color 的值画菱形边框。
⑧ inset：根据 border - color 的值画 3D 凹边。
⑨ outset：根据 border - color 的值画 3D 凸边。

8. 圆角边框

length 由浮点数字和单位标识符组成的长度值，不允许为负值。

语法格式：
border - radius:length {1,4}

（二）外边距

行级元素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute。

语法格式：
margin:length | auto

（三）内边距

内边距用于控制内容与边框之间的距离。padding 属性用于定义元素内容与元素边框之间的空白区域。内边距包括 4 项属性：padding - top（上内边距）、padding - right（右内边距）、padding - bottom（下内边距）、padding - left（左内边距）。

各种元素盒子属性的默认值的区别：

(1) 大部分 html 元素的盒子属性（margin、padding）默认值都为 0。
(2) 有少数 html 元素的盒子属性（margin、padding）在浏览器解析时的默认值不为 0。例如<body>、<p>、<ul>、<li>、<form>标签等，有时有必要先设置它们的这些属性为 0。
(3) <input>元素的边框属性默认不为 0，可以设置为 0，达到美化输入框和按钮的目的。

二、盒子的定位

（一）定位属性

1、定位方式
position 属性可以选择 4 种不同类型的定位方式。

语法格式：

position:static | relative | absolute | fixed

2、左、右、上、下位置

用于设置对象与其最近一个定位的父对象左边相关的位置。

语法格式：
left:auto | length
right:auto | length
top:auto | length
bottom:auto | length

3、宽度

语法格式：
width:auto | length

4、高度

语法格式：
height:auto | length

5、最小高度

元素可以比指定值高，但不能比指定值低，也不允许指定负值。

语法格式：
min - height:auto | length

6、可见性

用于设置是否显示对象，可以使图像只在鼠标指针滑过时才显示。

语法格式：

visibility:inherit | visible | collapse | hidden

7、层叠顺序

设置对象的层叠顺序。如果两个绝对定位对象的此属性具有同样的值，那么将依据它们在 HTML 文档中声明的顺序层叠。

语法格式：
z - index:auto | number

（二）定位方式

1、静态定位

静态定位是 position 属性的默认值，盒子按照标准流（包括浮动方式）进行布局，即该元素出现在文档的常规位置，不会重新定位。

2、相对定位

使用相对定位的盒子会相对于自身原本的位置，通过偏移指定的距离，到达新的位置。使用相对定位，除了要将 position 属性值设置为 relative 外，还需要指定一定的偏移量。其中，水平方向的偏移量由 left 和 right 属性指定；垂直方向的偏移量由 top 和 bottom 属性指定。

3、绝对定位

使用绝对定位的盒子以它的 “最近” 的一个 “已经定位” 的 “祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素，就以浏览器窗口为基准进行定位。“已经定位” 是指定义了除 static 之外的 position。

绝对定位的盒子从标准流中脱离，对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后，生成一个块级框，与原来它在正常流中生成的框无关。

4、固定定位

固定定位（position:fixed）其实是绝对定位的子类别，一个设置了 position:fixed 的元素是相对于视窗固定的，就算页面文档发生了滚动，它也会一直待在相同的地方。

效果图源代码：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
         
      #face{
            width: 500px;
            height: 500px;
            background-color: gray;
            position: absolute;
            left: 600px;
            top: 100px;
        }

      #left_eye{
                width: 50px;
                height: 50px;
                background-color: white;
                position: absolute;
                left: 100px; 
                top: 100px; 
          }  
      
      #right_eye{
            width: 50px;
            height: 50px;
            background-color: white;
            position: absolute;
            left: 350px; 
            top: 100px; 

          } 

      #mouse{
            width: 300px;
            height: 60px;
            background-color: white;
            position: absolute;
            left: 100px; 
            top: 300px; 

          } 

          #nose1{
            width: 60px;
            height: 60px;
            background-color: red;
            position: absolute;
            left: 225px; 
            top: 175px; 
          } 

          #nose2{
            width: 30px;
            height: 30px;
            background-color: green;
            position: absolute;
            left: 15px; 
            top: 15px; 
          }

          p{
            text-align: center;
          }

    </style>

  </head>

  <body>

    <div id="face">
        <div id="left_eye"></div>
        <div id="right_eye"></div>
        <div id="mouse"><p>绝对定位练习</p></div>
        <div id="nose1">
          <div id="nose2"></div>
        </div>
        
    </div>

  </body>
</html>