資訊專欄INFORMATION COLUMN
摘要：目錄展現(xiàn)主流瀏覽器不支持不會(huì)顯示塊級(jí)元素，前后帶換行符內(nèi)聯(lián)元素，前后不帶換行符行內(nèi)塊元素列表如果的后面跟著一個(gè)為水平的，那么這個(gè)應(yīng)用了的將會(huì)變成屬性，同時(shí)內(nèi)容嵌入到后面的為的中否則這個(gè)的維持其本身的屬性。
目錄
1、display展現(xiàn)
dispaly："none | block | inline | inline-block |?list-item |?run-in（主流瀏覽器不支持） |?table |?inline-table |?table-row-group |?table-header-group |?table-footer-group |?table-row |?table-column-group |?table-column |?table-cell |?table-caption |?inherit"；（不會(huì)顯示 | 塊級(jí)元素，前后帶換行符 | 內(nèi)聯(lián)元素，前后不帶換行符 | 行內(nèi)塊元素 | 列表 | 如果display:run-in的box后面跟著一個(gè)display為block水平的box，那么這個(gè)應(yīng)用了display:run-in的box將會(huì)變成display:inline屬性，同時(shí)內(nèi)容嵌入到后面的display為block的box中；否則這個(gè)display:run-in的box維持其本身的block屬性。即當(dāng)前元素跑-進(jìn)(run-in)后面的元素 | 塊級(jí)表格，前后帶換行符 | 內(nèi)聯(lián)表格，前后不帶換行符 | 類似
每個(gè)元素都有兩個(gè)盒子，外在盒子和容器(container)盒子（內(nèi)在盒子）
display："inline"（"inline-inline"）；
display："inline-block"（"inline-block"）；
display："inline-table"（"inline-table"）；
display："inline-flex"（"inline-flex"）；
display："inline-grid"（"inline-grid"）；
display："block"（"block-block"）；
display："table"（"block-table"）；
display："flex"（"block-flex"）；
display："grid"（"block-grid"）；
2、float浮動(dòng)
float："none | left | right | inherit"；（不浮動(dòng) | 左浮動(dòng) | 右浮動(dòng)）
內(nèi)容
1、display展現(xiàn)
1.1概念：每個(gè)元素都有兩個(gè)盒子，外在盒子和容器(container)盒子（內(nèi)在盒子），外在盒子負(fù)責(zé)元素是否獨(dú)占一行（inline：不獨(dú)占一行，block：獨(dú)占一行），容器盒子負(fù)責(zé)寬度、內(nèi)容呈現(xiàn)（內(nèi)聯(lián)、塊、表格、flex、柵格）
將元素的display設(shè)置為gird時(shí)，該元素即為grid container（網(wǎng)格容器），其子元素直接成為grid items（網(wǎng)格項(xiàng)）
注意：text-align：是針對(duì)文本對(duì)齊的方式，對(duì)內(nèi)聯(lián)元素起作用，而對(duì)于塊級(jí)元素不起作用，具體表現(xiàn)為文本居中，元素不居中，如下圖：
CSS Code
div{ width: 200px; height: 200px; background: olive; text-align: center; } p{ width: 100px; height: 100px; background: red; text-align: center; }
HTML Code
<div class="parent"> <p class="child">centerp> div>
Result
2、float浮動(dòng)
?float："none | left | right | inherit"；（不浮動(dòng) | 左浮動(dòng) | 右浮動(dòng)）
待閱讀完CSS世界補(bǔ)充
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1016.html
摘要：那我們舉個(gè)栗子當(dāng)先聲明一個(gè)元素向左浮動(dòng)時(shí)，由于脫離文檔流，這個(gè)元素的右邊就會(huì)空出一片空間，空間的長寬與浮動(dòng)元素長寬相同?？偨Y(jié)總結(jié)下來，浮動(dòng)與清除浮動(dòng)的順序關(guān)系如下設(shè)置元素浮動(dòng)，元素脫離文檔流，不計(jì)算高度。 本文主要探討兩個(gè)問題： 為什么CSS設(shè)置浮動(dòng)會(huì)引起父元素塌陷 為什么設(shè)置clear:both能清除浮動(dòng)，并撐開父元素。 起因 CSS的浮動(dòng)，算是我在寫網(wǎng)頁時(shí)用的最多的屬性之一。但...
摘要：而不會(huì)因?yàn)楦叨人荻浑[藏在內(nèi)部浮動(dòng)的子元素下。若果不考慮的高度塌陷問題，直接在其弟元素處設(shè)置屬性即可。開始我誤認(rèn)為了是將中的內(nèi)容插入至被選元素的弟元素位置上。中的示例從這個(gè)示例可以看出，偽類內(nèi)容的默認(rèn)方式應(yīng)該為內(nèi)聯(lián)。 1. 引子 前段時(shí)間學(xué)習(xí) web 布局的時(shí)候，因?yàn)橐酶?dòng) float 屬性，所以就順理成章地碰到了清除浮動(dòng) clear 屬性。教學(xué)的案例中是用新建一個(gè)空的 div ...
摘要：邊距重疊統(tǒng)一的解決方案設(shè)置或者或者觸發(fā)邊距重疊有一下三種情況首先把所有的格式清空邊距重疊父子元素之間塊級(jí)父元素與第一個(gè)或者最后一個(gè)子元素父元素不存在上邊框上內(nèi)邊距內(nèi)聯(lián)元素清除浮動(dòng)。 邊距重疊 統(tǒng)一的解決方案；設(shè)置padding或者border或者觸發(fā)BFC 邊距重疊有一下三種情況： 首先把所有的margin格式清空 邊距重疊 html *{ margi...
摘要：邊距重疊統(tǒng)一的解決方案設(shè)置或者或者觸發(fā)邊距重疊有一下三種情況首先把所有的格式清空邊距重疊父子元素之間塊級(jí)父元素與第一個(gè)或者最后一個(gè)子元素父元素不存在上邊框上內(nèi)邊距內(nèi)聯(lián)元素清除浮動(dòng)。 邊距重疊 統(tǒng)一的解決方案；設(shè)置padding或者border或者觸發(fā)BFC 邊距重疊有一下三種情況： 首先把所有的margin格式清空 邊距重疊 html *{ margi...
摘要：圣杯布局圣杯布局和雙飛翼布局都是為了解決兩邊定寬，中間自適應(yīng)的三欄布局，中間欄在最前面優(yōu)先渲染，多見于商城類網(wǎng)站布局。雙飛翼布局不用設(shè)置相對(duì)布局，以及對(duì)應(yīng)的和值。 合理的布局是產(chǎn)品的基礎(chǔ)，可以使人感覺整齊大方，提升用戶體驗(yàn)。掌握幾種常見的布局形式也是前端開發(fā)的基礎(chǔ)，對(duì)于快速實(shí)現(xiàn)頁面重構(gòu)有很大幫助。 原文鏈接 單列布局 單列布局通常用于網(wǎng)站的首頁，分為頭部的導(dǎo)航、網(wǎng)頁內(nèi)容、頁腳相關(guān)信息。...
閱讀 1732·2021-09-26 09:55
閱讀 5694·2021-09-22 15:40
閱讀 2075·2019-08-30 15:53
閱讀 1547·2019-08-30 11:15
閱讀 1766·2019-08-29 15:41
閱讀 1925·2019-08-28 18:13
閱讀 3209·2019-08-26 12:00
閱讀 1723·2019-08-26 10:30
