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