資訊專欄INFORMATION COLUMN
摘要：內(nèi)聯(lián)元素在水平方向上相互挨著，總體上會從左上方流向右下方。，增加元素，設(shè)置屬性，兩個內(nèi)聯(lián)元素并排擺放，但只有左右方向有。還能與其它內(nèi)聯(lián)元素并排。
寫在前面：
作為一個剛開始寫技術(shù)博客的新手，看到有人收藏了文章，寫作動力又猛增了。這應(yīng)該就是寫技術(shù)博客的好處之一：能給自己增加成就感和驅(qū)動力。
最近關(guān)于css布局和定位相關(guān)內(nèi)容整理地有點慢，因為同時在做freecodecamp上的題，所以節(jié)奏有點慢。
CSS有三種基本的定位機制：普通流、浮動、絕對定位（其中position:fixed;是position:absolute的一個子類）。除非專門指定，否則所有的元素都在普通流中定位，即其位置由元素在html中的位置決定。
實際工作中，經(jīng)常有元素不僅要并排，而且要能設(shè)置寬、高。但是普通流無法滿足要求，因此需要脫離普通流。元素脫離普通流常用的方式：浮動、絕對定位
CSS為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊。
1，在普通流中，瀏覽器如何擺放頁面元素
流： 是瀏覽器在頁面上擺放html元素所用的方法。瀏覽器從html文件最上面開始，從上到下沿著 元素流 逐個顯示所遇到的各個元素。
塊元素：瀏覽器先顯示文檔中的第一個元素，然后換行；然后是第二個元素，接下來又是一個換行，如此繼續(xù)。
● 占一行
● 能設(shè)置寬、高、margin 、padding屬性；
● 如果不設(shè)置寬度，那么寬度將默認變?yōu)楦赣H的100%。
內(nèi)聯(lián)元素：在水平方向上相互挨著，總體上會從左上方流向右下方。
● 與其他行內(nèi)元素并排顯示，直到該行排滿。
● 其寬度、高度根據(jù)其內(nèi)容決定，設(shè)置寬、高屬性無效果。
● 元素的padding和margin影響左右，不影響上下
display:inline-block; 該元素既具有block的寬、高特性，又具有inline的同行顯示特性
1）瀏覽器并排擺放兩個內(nèi)聯(lián)元素時：
若兩個內(nèi)聯(lián)元素都有外邊距，例如：左邊元素外邊距為10px，右邊元素外邊距為20px，則兩個元素之間有30px空間。
2）瀏覽器上下放置兩個塊元素時：
會把它們共同的外邊距折疊在一起，折疊后的外邊距是兩個外邊距中較大的外邊距。
舉例說明：
1，span div 元素分別設(shè)置寬、高、邊框，但span并沒有被撐開。
2，在span中加入文本內(nèi)容，則邊框才能被撐開。
3，增加a元素，設(shè)置margin屬性，兩個內(nèi)聯(lián)元素并排擺放，但只有左右方向有margin。
4，span增加display:inline-block屬性，則寬、高屬性生效。還能與其它內(nèi)聯(lián)元素并排。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116755.html
摘要：，表單的兩個常見屬性為填寫表單的人提供一個輸入提示?？捎糜谌魏伪韱慰丶硎具@個域是必要的，如果不填，則無法提交表單。，表格，表格由行中的數(shù)據(jù)單元格組成，列隱含地定義在行中。，表格應(yīng)用于表示表格數(shù)據(jù)，而不是建立頁面布局。 1，如何設(shè)計一個頁面 1） 先規(guī)劃好web頁面的結(jié)構(gòu)，首先畫出一個草圖，然后創(chuàng)建一個略圖，最后再寫html2） 規(guī)劃頁面時，先設(shè)計大的塊元素，再用內(nèi)聯(lián)元素...
摘要：盒模型，盒模型看待元素的一種方式，它將每個元素看作由一個盒子表示。盒子實際占用的大小是左左右右，屬性細節(jié)一個塊元素的默認寬度是，表示它會自動延伸占滿可用的空間。表示元素之間的距離，在邊框外部。不能對和指定顏色，添加任何裝飾。 盒模型 1，盒模型： CSS看待元素的一種方式，它將每個元素看作由一個盒子表示。 2，五個屬性： 從內(nèi)往外： width:內(nèi)容的寬度，而不是盒子的寬度； hei...
摘要：浮動元素性質(zhì)，浮動的元素脫離標準流這個元素像從標準流中被刪除一樣。下圖是左浮動時的顯示效果。，浮動的元素會互相貼靠如果父元素的寬度能顯示所有浮動元素，則浮動的元素會并排顯示。，無論是塊級元素行內(nèi)元素，一旦浮動了，都可以設(shè)置寬高，不需要用。 浮動 1.1、語法： float: left; 左浮動，元素往最左邊靠； float: right; 右浮動，元素往最右邊靠 1.2...
摘要：清除浮動，為何要清除浮動浮動效果會帶來不好的影響子元素浮動會帶來父元素高度塌陷。，清除浮動的兩大基本方式，運用清除浮動。元素流入頁面時，在這個元素左邊右邊或兩邊不允許有浮動內(nèi)容。除了是用來清除浮動的，其它代碼都是為了隱藏掉生成的內(nèi)容。 清除浮動 1，為何要清除浮動 浮動效果會帶來不好的影響： 子元素浮動會帶來父元素高度塌陷。具體解釋：當浮動框高度超出包含框時，包含框不會 自動伸高 來閉...
摘要：布局經(jīng)典問題初步整理標簽前端本文主要對布局中常見的經(jīng)典問題進行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應(yīng)式設(shè)計，布局，等等。 CSS 布局經(jīng)典問題初步整理 標簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經(jīng)典問題進行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應(yīng)式設(shè)計，F(xiàn)l...
閱讀 3564·2023-04-26 00:05
閱讀 954·2021-11-11 16:55
閱讀 3522·2021-09-26 09:46
閱讀 3517·2019-08-30 15:56
閱讀 909·2019-08-30 15:55
閱讀 2934·2019-08-30 15:53
閱讀 1940·2019-08-29 17:11
閱讀 814·2019-08-29 16:52
