【零基礎入門】 css學習筆記（4）布局與定位介紹

nevermind 發布于2019-08-30 15:53 / 2939人閱讀

摘要：內聯元素在水平方向上相互挨著，總體上會從左上方流向右下方。，增加元素，設置屬性，兩個內聯元素并排擺放，但只有左右方向有。還能與其它內聯元素并排。

寫在前面：
作為一個剛開始寫技術博客的新手，看到有人收藏了文章，寫作動力又猛增了。這應該就是寫技術博客的好處之一：能給自己增加成就感和驅動力。

最近關于css布局和定位相關內容整理地有點慢，因為同時在做freecodecamp上的題，所以節奏有點慢。

布局與定位

CSS有三種基本的定位機制：普通流、浮動、絕對定位（其中position:fixed;是position:absolute的一個子類）。除非專門指定，否則所有的元素都在普通流中定位，即其位置由元素在html中的位置決定。
實際工作中，經常有元素不僅要并排，而且要能設置寬、高。但是普通流無法滿足要求，因此需要脫離普通流。元素脫離普通流常用的方式：浮動、絕對定位
CSS為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊。

1.1 普通流

1，在普通流中，瀏覽器如何擺放頁面元素
流：是瀏覽器在頁面上擺放html元素所用的方法。瀏覽器從html文件最上面開始，從上到下沿著元素流逐個顯示所遇到的各個元素。

塊元素：瀏覽器先顯示文檔中的第一個元素，然后換行；然后是第二個元素，接下來又是一個換行，如此繼續。
● 占一行
● 能設置寬、高、margin 、padding屬性；
● 如果不設置寬度，那么寬度將默認變為父親的100%。

內聯元素：在水平方向上相互挨著，總體上會從左上方流向右下方。
● 與其他行內元素并排顯示，直到該行排滿。
● 其寬度、高度根據其內容決定，設置寬、高屬性無效果。
● 元素的padding和margin影響左右，不影響上下

display:inline-block; 該元素既具有block的寬、高特性，又具有inline的同行顯示特性

1）瀏覽器并排擺放兩個內聯元素時：
若兩個內聯元素都有外邊距，例如：左邊元素外邊距為10px，右邊元素外邊距為20px，則兩個元素之間有30px空間。

2）瀏覽器上下放置兩個塊元素時：
會把它們共同的外邊距折疊在一起，折疊后的外邊距是兩個外邊距中較大的外邊距。

舉例說明：
1，span div 元素分別設置寬、高、邊框，但span并沒有被撐開。

2，在span中加入文本內容，則邊框才能被撐開。

3，增加a元素，設置margin屬性，兩個內聯元素并排擺放，但只有左右方向有margin。

4，span增加display:inline-block屬性，則寬、高屬性生效。還能與其它內聯元素并排。

GPU云服務器云服務器零基礎入門學習零基礎入門深度學習零基礎入門學習python 學習css布局

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

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

01 【零基礎入門】html學習筆記（2）

摘要：，表單的兩個常見屬性為填寫表單的人提供一個輸入提示。可用于任何表單控件，表示這個域是必要的，如果不填，則無法提交表單。，表格，表格由行中的數據單元格組成，列隱含地定義在行中。，表格應用于表示表格數據，而不是建立頁面布局。 1，如何設計一個頁面 1）先規劃好web頁面的結構，首先畫出一個草圖，然后創建一個略圖，最后再寫html2）規劃頁面時，先設計大的塊元素，再用內聯元素...

kamushin233 2019-08-02 10:39 評論0 收藏0
【零基礎入門】 css學習筆記（2）盒模型

摘要：盒模型，盒模型看待元素的一種方式，它將每個元素看作由一個盒子表示。盒子實際占用的大小是左左右右，屬性細節一個塊元素的默認寬度是，表示它會自動延伸占滿可用的空間。表示元素之間的距離，在邊框外部。不能對和指定顏色，添加任何裝飾。盒模型 1，盒模型： CSS看待元素的一種方式，它將每個元素看作由一個盒子表示。 2，五個屬性：從內往外： width:內容的寬度，而不是盒子的寬度； hei...

mrcode 2019-08-30 15:53 評論0 收藏0
【零基礎入門】 css學習筆記（5）浮動

摘要：浮動元素性質，浮動的元素脫離標準流這個元素像從標準流中被刪除一樣。下圖是左浮動時的顯示效果。，浮動的元素會互相貼靠如果父元素的寬度能顯示所有浮動元素，則浮動的元素會并排顯示。，無論是塊級元素行內元素，一旦浮動了，都可以設置寬高，不需要用。浮動 1.1、語法： float: left; 左浮動，元素往最左邊靠； float: right; 右浮動，元素往最右邊靠 1.2...

clasnake 2019-08-30 15:53 評論0 收藏0
【零基礎入門】css學習筆記（6）清除浮動

摘要：清除浮動，為何要清除浮動浮動效果會帶來不好的影響子元素浮動會帶來父元素高度塌陷。，清除浮動的兩大基本方式，運用清除浮動。元素流入頁面時，在這個元素左邊右邊或兩邊不允許有浮動內容。除了是用來清除浮動的，其它代碼都是為了隱藏掉生成的內容。清除浮動 1，為何要清除浮動浮動效果會帶來不好的影響：子元素浮動會帶來父元素高度塌陷。具體解釋：當浮動框高度超出包含框時，包含框不會自動伸高來閉...

BingqiChen 2019-08-30 15:53 評論0 收藏0
CSS 布局經典問題初步整理

摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理標簽：前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...

Amos 2019-08-29 12:36 評論0 收藏0