如何使用CSS控制頁面元素的位置？

時間 2019-12-06

標籤如何使用 css 控制頁面元素位置欄目 CSS 简体版

原文原文鏈接

本篇不分析常見的佈局方式，而是從同級元素之間的位置關係和父子元素之間的位置關係這兩個方面來示例，理解了這兩個點，就能夠實現任何類型的佈局了。css

父子元素之間的位置關係

<html>
  <head>
    <title></title>
    <script> function buttonHandler() { alert('Hello') } </script>
  </head>
  <body>
    <button onclick="buttonHandler()">
      按鈕
    </button>
  </body>
</html>
複製代碼

又回到最開始的按鈕例子，咱們先忽略head標籤及裏面的內容。影響按鈕展現的節點有 html -> body -> buttonhtml

元素的定位類型是由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這個屬性規定的。它有不少類型，此處解釋最經常使用的幾個：spa

block 塊元素

塊元素會獨佔一行
元素的高度、寬度、行高以及頂和底部的邊距能夠設置
在不設置寬度的狀況下，寬度佔滿父容器的100% div、p、h1到h六、ol、ul等爲塊元素

inline 行內元素

可在同一行內排列
元素的高度、寬度、行高以及頂和底部的邊距不能夠設置 a、span、br、I、em、strong、label等爲內聯元素

inline-block 行內塊元素

可在同一行內排列
元素的高度、寬度、行高以及頂和底部的邊距能夠設置 img、button、input等爲行內塊元素

none 元素隱藏

將a標籤的display屬性設置爲block的時候，它就具備了塊元素的特色code

兩個按鈕排成一行

<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>
複製代碼

它們會擁有塊元素的特色，自動換行。htm

塊元素浮動

<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>
複製代碼