如何使用CSS控制页面元素的位置？本篇不分析常见的布局方式，而是从同级元素之间的位置关系和父子元素之间的位置关系这两个方

本篇不分析常见的布局方式，而是从同级元素之间的位置关系和父子元素之间的位置关系这两个方面来示例，理解了这两个点，就可以实现任何类型的布局了。

父子元素之间的位置关系

<html>
  <head>
    <title></title>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button onclick="buttonHandler()">
      按钮
    </button>
  </body>
</html>

又回到最开始的按钮例子，我们先忽略head标签及里面的内容。影响按钮展示的节点有 html -> body -> button

元素的定位类型是由position这个属性来决定的，它可能有五种类型：

static 默认值
absolute 绝对定位，元素会相对于 static 定位以外的第一个父元素进行定位
fixed 绝对定位，始终相对于浏览器窗口进行定位
relative 相对定位，相对于元素原本的位置来定位
inherit 继承父元素的定位类型

对按钮进行绝对定位

<html>
  <head>
    <title></title>
    <style>
      /* 如果希望按钮相对于body进行绝对定位，就需要讲body的定位类型设置为非static类型 */
      body {
        position: relative;
      }
      .button {
        position: absolute;
        left: 50px;
        top: 100px;
      }
    </style>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button class="button" onclick="buttonHandler()">
      按钮1
    </button>
  </body>
</html>

按钮进行相对定位

<html>
  <head>
    <title></title>
    <style>
      .button {
        position: relative;
        left: 50px;
        top: 100px;
      }
    </style>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button class="button" onclick="buttonHandler()">
      按钮1
    </button>
  </body>
</html>

在默认static的情况下，left, top这些位置属性值是无效的。

同级元素之间的位置关系

同级元素之间如何排列，除了可以通过定位进行控制，默认受它的盒模型的类型影响。盒模型的类型是由display这个属性规定的。它有很多类型，此处解释最常用的几个：

block 块元素

块元素会独占一行
元素的高度、宽度、行高以及顶和底部的边距可以设置
在不设置宽度的情况下，宽度占满父容器的100% div、p、h1到h6、ol、ul等为块元素

inline 行内元素

可在同一行内排列
元素的高度、宽度、行高以及顶和底部的边距不可以设置 a、span、br、I、em、strong、label等为内联元素

inline-block 行内块元素

可在同一行内排列
元素的高度、宽度、行高以及顶和底部的边距可以设置 img、button、input等为行内块元素

none 元素隐藏

将a标签的display属性设置为block的时候，它就具有了块元素的特点

两个按钮排成一行

<html>
  <head>
    <title></title>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button class="button" onclick="buttonHandler()">
      按钮1
    </button>
    <button class="button" onclick="buttonHandler()">
      按钮2
    </button>
  </body>
</html>

将按钮变成块元素

<html>
  <head>
    <title></title>
    <style>
      .button {
        display: block;
      }
    </style>
    <script>
      function buttonHandler() {
        alert(‘Hello’)
      }
    </script>
  </head>
  <body>
    <button class=“button” onclick=“buttonHandler()”>
      按钮1
    </button>
    <button class=“button” onclick=“buttonHandler()”>
      按钮2
    </button>
  </body>
</html>

它们会拥有块元素的特点，自动换行。

块元素浮动

<html>
  <head>
    <title></title>
    <style>
      .button {
        display: block;
        /* 设置向左浮动，块元素也可以排列在一行了 */
        float: left;
      }
    </style>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button class="button" onclick="buttonHandler()">
      按钮1
    </button>
    <button class="button" onclick="buttonHandler()">
      按钮2
    </button>
  </body>
</html>

块元素设置了浮动属性之后，会带来一系列的特性，还需要看文档和尝试。

通过外边距控制同级元素之间的距离

<html>
  <head>
    <title></title>
    <style>
      .button {
        /* 设置向右的边距，两个元素之间增加一个距离 */
        margin-right: 20px;
      }
      .button2 {
        display: block;
        /* 设置向上的边距，两个元素之间增加一个距离 */
        margin-top: 20px;
      }
    </style>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button class="button" onclick="buttonHandler()">
      按钮1
    </button>
    <button class="button" onclick="buttonHandler()">
      按钮2
    </button>
    <button class="button button2" onclick="buttonHandler()">
      按钮3
    </button>
  </body>
</html>

除了外边距还有内边距，这里需要了解一下什么是盒模型。

小结

了解了如何控制父子元素之间以及同级元素之间的位置关系，已经可以处理各类布局需求了。本篇例子主要帮助理解CSS是如何布局的，CSS布局的内容远不止例子里提到的这些，不同场景下的布局方式都有各自的最佳实践，后续的例子里也会慢慢补充。