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

go4it 發(fā)布于2019-08-30 15:55 / 1367人閱讀

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

文章大綱來源：【Day 3】HTML復(fù)習(xí) + CSS基礎(chǔ)

CSS框模型

寬度和高度

內(nèi)邊距

外邊距

CSS定位

浮動

CSS框模型

內(nèi)容引用：CSS 框模型概述

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

元素的背景應(yīng)用于**由內(nèi)容和內(nèi)邊距(padding)、邊框(border)組成的區(qū)域。

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

內(nèi)邊距、邊框和外邊距都是可選的，默認(rèn)值是零；內(nèi)邊距、邊框和外邊距可以應(yīng)用于一個元素的所有邊，也可以應(yīng)用于多帶帶的邊。

寬度和高度

定義元素的寬高屬性。

寬度 width

高度 height

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

注：行內(nèi)元素不能定義寬高，塊元素和行內(nèi)塊元素可以。

內(nèi)邊距

內(nèi)容引用：CSS 內(nèi)邊距

元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間。

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

h1 { padding: 10px; }

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

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

單邊內(nèi)邊距屬性

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

padding-top

padding-right

padding-bottom

padding-left

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

內(nèi)邊距的百分比

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

內(nèi)邊距的百分?jǐn)?shù)值是相對于父元素的寬度計算的。

/* 段落的內(nèi)邊距設(shè)置為父元素 width 的 10% */
p { padding: 10%; }

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

外邊距

內(nèi)容引用：CSS 外邊距

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

設(shè)置外邊距就是使用 margin 屬性，這個屬性接受任何長度單位（像素、英寸、毫米或 em）、百分?jǐn)?shù)值甚至負(fù)值。

margin 可以設(shè)置為 auto 。

基本上外邊距和內(nèi)邊距padding書寫方式類似，甚至在百分?jǐn)?shù)參考父元素width這一點上也是一樣的。

單邊外邊距屬性

與單邊內(nèi)邊距屬性類似：

margin-top

margin-right

margin-bottom

margin-left

不再更多的說明。

值復(fù)制

有時會輸入一些重復(fù)的值：

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

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

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

CSS 定義了一些規(guī)則，允許為外邊距指定少于 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定位

內(nèi)容引用：CSS 定位 (Positioning)

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

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

一切皆為框

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

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

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

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

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


some text
Some more text.

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

定位機制

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

所有框默認(rèn)都在普通流中定位。

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

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

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

position 屬性

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

static ：元素框正常生成。

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

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

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

相對定位

內(nèi)容引用：CSS 相對定位

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

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

#box_relative {
  position: relative;
  /* 框?qū)⒃谠恢庙敳肯旅?0像素的地方 */
  top: 20px;
  /* 框?qū)⒃谠恢米蟛坑疫?0像素的地方 */
  left: 30px;
}

絕對定位

內(nèi)容引用：CSS 絕對定位

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

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

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

#box_relative {
  position: absolute;
  /* 框?qū)⒃诎瑝K頂部下面20像素的地方 */
  top: 20px;
  /* 框?qū)⒃诎瑝K左部右邊30像素的地方 */
  left: 30px;
}

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

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

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

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

浮動

內(nèi)容引用：CSS 浮動

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

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

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

float屬性

使用浮動的方法：

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

float可能的值：

none ：默認(rèn)值，元素不浮動，并會顯示在其在文本中出現(xiàn)的位置。

left ：元素向左浮動。

right ：元素向右浮動。

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

行框和清理

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

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

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

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

個人靜態(tài)博客：

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

GPU云服務(wù)器云服務(wù)器 css布局 css布局教程學(xué)習(xí)css布局前端css

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/117337.html

發(fā)表評論

登陸后可評論

0條評論

go4it

男|高級講師

我要關(guān)注我要私信

TA的文章

新的 Azure AD 漏洞讓黑客在不被發(fā)現(xiàn)的情況下暴力破解密碼

閱讀 1496·2021-10-11 10:59
ucloud，烏蘭察布快捷共享型云主機測評 – 基于AMD Rome EPYC2

閱讀 1857·2021-09-09 11:36
前端菜鳥筆記 Day-4 CSS布局

閱讀 1368·2019-08-30 15:55
css比較經(jīng)典的例子

閱讀 1321·2019-08-29 11:20
開發(fā)者日報 2019年3月30日

閱讀 3056·2019-08-26 13:39
還不會正則表達(dá)式？看這篇！

閱讀 1457·2019-08-26 13:37
JSONSERVER接口調(diào)試工具安裝配置

閱讀 1950·2019-08-26 12:11
手挽手帶你學(xué)VUE：一檔 VUE簡介以及常用內(nèi)部指令

閱讀 1312·2019-08-23 14:28

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章