前端菜鳥筆記 Day-4 CSS布局

Honwhy 發布于2019-08-02 14:12 / 1118人閱讀

摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。簡單來說就是，元素不再占用任何文檔流的空間，只剩下相對于包含塊的定位顯示。行框和清理浮動框旁邊的行框會被縮短，使行框圍繞浮動框，所以創建浮動框可以使文本圍繞圖像。

文章大綱來源：【Day 3】HTML復習 + CSS基礎

CSS框模型

寬度和高度

內邊距

外邊距

CSS定位

浮動

CSS框模型

內容引用：CSS 框模型概述

CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。

元素的背景應用于**由內容和內邊距(padding)、邊框(border)組成的區域。

邊框以外是外邊距(margin)，外邊距默認是透明的，因此不會遮擋其后的任何元素。

內邊距、邊框和外邊距都是可選的，默認值是零；內邊距、邊框和外邊距可以應用于一個元素的所有邊，也可以應用于多帶帶的邊。

寬度和高度

定義元素的寬高屬性。

寬度 width

高度 height

可以用px進行數字定義，如1px；也可以用百分比100%等表示，百分比表示占父元素的百分之多少。

注：行內元素不能定義寬高，塊元素和行內塊元素可以。

內邊距

內容引用：CSS 內邊距

元素的內邊距在邊框和內容區之間。

padding 屬性定義元素的內邊距，接受長度值或百分比值，但不允許使用負值。

h1 { padding: 10px; }

還可以按照上、右、下、左的順序分別設置各邊的內邊距，各邊可以使用不同的單位或者百分比值：

h1 { padding: 10px 0.25em 2ex 20%; }

單邊內邊距屬性

也可以使用下面四個多帶帶的屬性分別設置：

padding-top

padding-right

padding-bottom

padding-left

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
}

內邊距的百分比

之前在寬高設置部分使用百分比，可以相對父元素的寬高設置。

內邊距的百分數值是相對于父元素的寬度計算的。

/* 段落的內邊距設置為父元素 width 的 10% */
p { padding: 10%; }

注意上面解釋定義的部分，padding只參考了父元素的width，也就是上下內邊距也是參照的width，而不是參照常理上父元素的height；padding-top/padding-bottom也是一樣參照的width。

外邊距

內容引用：CSS 外邊距

圍繞在元素邊框的透明區域是外邊距。

設置外邊距就是使用 margin 屬性，這個屬性接受任何長度單位（像素、英寸、毫米或 em）、百分數值甚至負值。

margin 可以設置為 auto 。

基本上外邊距和內邊距padding書寫方式類似，甚至在百分數參考父元素width這一點上也是一樣的。

單邊外邊距屬性

與單邊內邊距屬性類似：

margin-top

margin-right

margin-bottom

margin-left

不再更多的說明。

值復制

有時會輸入一些重復的值：

p { margin: 0.5em 1em 0.5em 1em; }

通過值復制，可以不必重復的聲明屬性：

/* 上面的規則與下面的規則是等價的 */
p { margin: 0.5em 1em; }

CSS 定義了一些規則，允許為外邊距指定少于 4 個值：

缺少左，則使用右的值

缺少下，則使用上的值

缺少右，則使用上的值

h1 { margin: 0.25em 1em 0.5em; }
/* 等價于 0.25em 1em 0.5em 1em */
h2 { margin: 0.5em 1em; }
/* 等價于 0.5em 1em 0.5em 1em */
p { margin: 1px; }
/* 等價于 1px 1px 1px 1px */

CSS定位

內容引用：CSS 定位 (Positioning)

CSS 定位 (Positioning) 屬性允許你對元素進行定位。

定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。

一切皆為框

div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即“塊框”。

與之相反，span 和 strong 等元素稱為行內元素，這是因為它們的內容顯示在行中，即“行內框”。

可以使用 display 屬性改變生成的框的類型。

如果一個框的屬性設置為display:none，該框及其所有內容就不再顯示，不占用文檔中的空間。

但是一種情況下，即使沒有顯式定義（包括環繞標簽），也會創建塊級元素，這種情況發生在把一些文本添加到一個塊級元素（比如 div）的開頭。即使沒有把這些文本定義為段落，它也會被當作段落對待：


some text
Some more text.

在這種情況下，這個框稱為無名塊框，因為它不與專門定義的元素相關聯。

定位機制

CSS 有三種基本的定位機制：普通流、浮動和絕對定位。

所有框默認都在普通流中定位。

塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。

行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。

由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。

position 屬性

通過使用 position 屬性，我們可以選擇 4 種不同類型的定位。

static ：元素框正常生成。

relative ：元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

absolute ：元素框從文檔流完全刪除，并相對于其包含塊定位。

fixed ：類似于將 position 設置為 absolute，不過其包含塊是視窗本身。

相對定位

內容引用：CSS 相對定位

設置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。

簡單來說就是，原來所占位置還是占那個位置，但是元素將會進行偏移顯示。

#box_relative {
  position: relative;
  /* 框將在原位置頂部下面20像素的地方 */
  top: 20px;
  /* 框將在原位置左部右邊30像素的地方 */
  left: 30px;
}

絕對定位

內容引用：CSS 絕對定位

設置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位。

絕對定位使元素的位置與文檔流無關，因此不占據空間，這一點與相對定位不同。

簡單來說就是，元素不再占用任何文檔流的空間，只剩下相對于包含塊的定位顯示。

#box_relative {
  position: absolute;
  /* 框將在包含塊頂部下面20像素的地方 */
  top: 20px;
  /* 框將在包含塊左部右邊30像素的地方 */
  left: 30px;
}

注意以上說明的包含塊的概念是：

絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊（一般情況下是HTML元素）。

上述概念中，已定位指的就是position屬性設置了relative、absolute和fixed之一的元素；最近的已定位指的是元素父子鏈往從本元素向上尋找，其中最近的已定位祖先元素。

提示：因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設置 z-index 屬性來控制這些框的堆放次序。

浮動

內容引用：CSS 浮動

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”。

float屬性

使用浮動的方法：

img {
  /* 把圖像向右浮動 */
  float: right;
}

float可能的值：

none ：默認值，元素不浮動，并會顯示在其在文本中出現的位置。

left ：元素向左浮動。

right ：元素向右浮動。

inherit ：從父元素繼承 float 屬性的值。

行框和清理

浮動框旁邊的行框會被縮短，使行框圍繞浮動框，所以創建浮動框可以使文本圍繞圖像。

注釋：這里說的行框就是之前說的無名塊框。

如果想要阻止行框圍繞浮動框，需要對該框(?)應用clear屬性，屬性值可以是left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。

在這里將不會進一步詳細的說明浮動和清理的深入用法和機制說明（主要是自己暫時不太喜歡用，到時候涉及到的時候再開專題說明吧，咕咕咕）。

個人靜態博客：

氣泡的前端日記： https://rheabubbles.github.io

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53641.html

前端菜鳥筆記 Day-4 CSS布局

摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。簡單來說就是，元素不再占用任何文檔流的空間，只剩下相對于包含塊的定位顯示。行框和清理浮動框旁邊的行框會被縮短，使行框圍繞浮動框，所以創建浮動框可以使文本圍繞圖像。文章大綱來源：【Day 3】HTML復習 + CSS基礎 CSS框模型寬度和高度內邊距外邊距 CSS定位浮動 CSS框模型內容引用：CSS 框模型概述 CSS 框模...

go4it 2019-08-30 15:55 評論0 收藏0
前端菜鳥筆記 Day-3 CSS基礎

摘要：派生選擇器依據元素的位置關系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。文章大綱來源：【Day 3】HTML復習 + CSS基礎初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。內容引用：CSS 簡介樣式解決了什么問題？ HTML...

mingzhong 2019-08-30 15:55 評論0 收藏0
前端菜鳥筆記 Day-3 CSS基礎

摘要：派生選擇器依據元素的位置關系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。文章大綱來源：【Day 3】HTML復習 + CSS基礎初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。內容引用：CSS 簡介樣式解決了什么問題？ HTML...

DangoSky 2019-08-02 14:12 評論0 收藏0
Web前端開發學習推薦--菜鳥必看

Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

JerryWangSAP 2019-08-02 15:21 評論0 收藏0
Web前端開發學習推薦--菜鳥必看

Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

shadajin 2019-08-19 11:45 評論0 收藏0