web前端-CSS(display,position,overflow和浮動float)


作者簡介:蘇涼(專註於網絡爬蟲,數據分析,正在學習前端的路上)
博客主頁:蘇涼.py的博客
系列專欄:web前端基礎教程
名言警句:海闊憑魚躍,天高任鳥飛。
要是覺得博主文章寫的不錯的話,還望大傢三連支持一下呀!!!
關註✨點贊收藏

文章目錄

    • display(顯示)
      • 內聯元素
      • 塊級元素
      • 行內塊級元素
        • 三者區別
    • position(定位)
      • position屬性
        • static屬性
        • relative屬性
        • fixed屬性
        • absolute屬性
        • sticky屬性
          • 五個屬性的實例講解
    • overflow(溢出)
      • hidden
      • scroll
      • auto
      • overflow-x和overflow-y
    • float(浮動)
      • none
      • left
      • right
      • inherit

display(顯示)

display屬性指定由元素生成的框的類型,通常用到display對應值有block、none、inline這三個值。

下面我們來看看display的屬性有哪些吧。

屬性 描述
none 此元素不會被顯示。
block 此元素將顯示為塊級元素,此元素前後會帶有換行符。
inline 默認。此元素會被顯示為內聯元素,元素前後沒有換行符。
inline-block 行內塊元素。(CSS2.1 新增的值)
list-item 此元素會作為列表顯示。
run-in 此元素會根據上下文作為塊級元素或內聯元素顯示。
table 此元素會作為塊級表格來顯示(類似

),表格前後帶有換行符。
inline-table 此元素會作為內聯表格來顯示(類似

),表格前後沒有換行符。)。 )。)。)。)。)
table-row-group 此元素會作為一個或多個行的分組來顯示(類似

table-header-group 此元素會作為一個或多個行的分組來顯示(類似

table-footer-group 此元素會作為一個或多個行的分組來顯示(類似

table-row 此元素會作為一個表格行顯示(類似

table-column-group 此元素會作為一個或多個列的分組來顯示(類似

table-column 此元素會作為一個單元格列顯示(類似

table-cell 此元素會作為一個表格單元格顯示(類似

table-caption 此元素會作為一個表格標題顯示(類似
inherit 規定應該從父元素繼承 display 屬性的值。

內聯元素

比如:b、big、i、small、tt、abbr、acronym、cite、code、dfn、em、kbd、strong、samp、var、a、bdo、br、img、map、object、q、script、span、sub、sup、button、input、label、select、textarea等。

內聯元素特點:

  1. 和其他元素都在一行上;

  2. 寬高隻與內容有關;

  3. 行內元素隻能容納文本或者其他行內元素。

塊級元素

比如:address、article、aside、audio、blockquote、canvas、dd、div、dl、fieldset、figcaption、figure、footer、form、h1、header、hgroup、hr、noscript、ol、 output、p pre、 section 、table、 tfoot、ul、video等。

塊級元素特點:

  1. 總是在新行上開始,占據一整行;

  2. 寬高,行高以及外邊距和內邊距都可控制;

  3. 若不設置寬則寬為瀏覽器寬度,與內容無關;

  4. 它可以容納內聯元素和其他塊元素。

行內塊級元素 三者區別

position(定位)

  • static
  • relative
  • fixed
  • absolute
  • sticky

position屬性

屬性 描述
absolute 生成絕對定位的元素,相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
fixed 生成絕對定位的元素,相對於瀏覽器窗口進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
relative 生成相對定位的元素,相對於其正常位置進行定位。因此,“left:20” 會向元素的 LEFT 位置添加 20 像素。
static 默認值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。
inherit 規定應該從父元素繼承 position 屬性的值。

static屬性

HTML 元素默認情況下的定位方式為 static(靜態)。靜態定位的元素不受 top、bottom、left 和 right 屬性的影響。position: static; 的元素不會以任何特殊方式定位;它始終根據頁面的正常流進行定位.

relative屬性

position: relative; 的元素相對於其正常位置進行定位。設置相對定位的元素的 top、right、bottom 和 left 屬性將導致其偏離其正常位置進行調整不會對其餘內容進行調整來適應元素留下的任何空間

fixed屬性

position: fixed; 的元素是相對於視口定位的,這意味著即使滾動頁面,它也始終位於同一位置。 top、right、bottom 和 left 屬性用於定位此元素。固定定位的元素不會在頁面中通常應放置的位置上留出空隙。

absolute屬性

position: absolute; 的元素相對於最近的定位祖先元素進行定位(而不是相對於視口定位,如 fixed)。然而,如果絕對定位的元素沒有祖先,它將使用文檔主體(body),並隨頁面滾動一起移動。
註意:“被定位的”元素是其位置除 static 以外的任何元素。

sticky屬性

粘性元素根據滾動位置在相對(relative)和固定(fixed)之間切換。起先它會被相對定位,直到在視口中遇到給定的偏移位置為止 ,然後將其“粘貼”在適當的位置

五個屬性的實例講解

1.static

2.relative

3.fixed
fixed就是根據當前窗口來定位的,當滑動頁面時,不隨頁面下拉而變動。

4.absolute

5.sticky

在沒有滑動窗口或還有有滑動到粘貼位置的時候,采用的是相對定位(relative),滑動到粘貼位置是則采用的是fixed定位。於是就有瞭如下效果

css和html

overflow(溢出)

overflow屬性

屬性 描述
visible 默認。溢出沒有被剪裁。內容在元素框外渲染
hidden 溢出被剪裁,其餘內容將不可見
scroll 溢出被剪裁,同時添加滾動條以查看其餘內容
auto 與 scroll 類似,但僅在必要時添加滾動條

hidden

如果使用 hidden 值,溢出會被裁剪,其餘內容被隱藏。

scroll

如果將值設置為 scroll,溢出將被裁剪,並添加滾動條以便在框內滾動。請註意,這將在水平和垂直方向上添加一個滾動條。

auto

auto 值類似於 scroll,但是它僅在必要時添加滾動條.

overflow-x和overflow-y

overflow-x 和 overflow-y 屬性規定是僅水平還是垂直地(或同時)更改內容的溢出

  • overflow-x 指定如何處理內容的左/右邊緣。
  • overflow-y 指定如何處理內容的上/下邊緣。

float(浮動)

浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文檔的普通流中,所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
float屬性

屬性 描述
left 元素向左浮動。
right 元素向右浮動。
none 默認值。元素不浮動,並會顯示在其在文本中出現的位置。
inherit 規定應該從父元素繼承 float 屬性的值。

none

left

right

inherit

本文來自網絡,不代表程式碼花園立場,如有侵權,請聯系管理員。https://www.codegarden.cn/article/31193/