資訊專欄INFORMATION COLUMN
摘要：目錄展現(xiàn)主流瀏覽器不支持不會顯示塊級元素，前后帶換行符內(nèi)聯(lián)元素，前后不帶換行符行內(nèi)塊元素列表如果的后面跟著一個為水平的，那么這個應用了的將會變成屬性，同時內(nèi)容嵌入到后面的為的中否則這個的維持其本身的屬性。
目錄
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"；（不會顯示 | 塊級元素，前后帶換行符 | 內(nèi)聯(lián)元素，前后不帶換行符 | 行內(nèi)塊元素 | 列表 | 如果display:run-in的box后面跟著一個display為block水平的box，那么這個應用了display:run-in的box將會變成display:inline屬性，同時內(nèi)容嵌入到后面的display為block的box中；否則這個display:run-in的box維持其本身的block屬性。即當前元素跑-進(run-in)后面的元素 | 塊級表格，前后帶換行符 | 內(nèi)聯(lián)表格，前后不帶換行符 | 類似
每個元素都有兩個盒子，外在盒子和容器(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浮動
float："none | left | right | inherit"；（不浮動 | 左浮動 | 右浮動）
內(nèi)容
1、display展現(xiàn)
1.1概念：每個元素都有兩個盒子，外在盒子和容器(container)盒子（內(nèi)在盒子），外在盒子負責元素是否獨占一行（inline：不獨占一行，block：獨占一行），容器盒子負責寬度、內(nèi)容呈現(xiàn)（內(nèi)聯(lián)、塊、表格、flex、柵格）
將元素的display設置為gird時，該元素即為grid container（網(wǎng)格容器），其子元素直接成為grid items（網(wǎng)格項）
注意：text-align：是針對文本對齊的方式，對內(nèi)聯(lián)元素起作用，而對于塊級元素不起作用，具體表現(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浮動
?float："none | left | right | inherit"；（不浮動 | 左浮動 | 右浮動）
待閱讀完CSS世界補充
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1016.html
摘要：那我們舉個栗子當先聲明一個元素向左浮動時，由于脫離文檔流，這個元素的右邊就會空出一片空間，空間的長寬與浮動元素長寬相同?？偨Y(jié)總結(jié)下來，浮動與清除浮動的順序關(guān)系如下設置元素浮動，元素脫離文檔流，不計算高度。 本文主要探討兩個問題： 為什么CSS設置浮動會引起父元素塌陷 為什么設置clear:both能清除浮動，并撐開父元素。 起因 CSS的浮動，算是我在寫網(wǎng)頁時用的最多的屬性之一。但...
摘要：而不會因為高度塌陷而被隱藏在內(nèi)部浮動的子元素下。若果不考慮的高度塌陷問題，直接在其弟元素處設置屬性即可。開始我誤認為了是將中的內(nèi)容插入至被選元素的弟元素位置上。中的示例從這個示例可以看出，偽類內(nèi)容的默認方式應該為內(nèi)聯(lián)。 1. 引子 前段時間學習 web 布局的時候，因為要用浮動 float 屬性，所以就順理成章地碰到了清除浮動 clear 屬性。教學的案例中是用新建一個空的 div ...
摘要：邊距重疊統(tǒng)一的解決方案設置或者或者觸發(fā)邊距重疊有一下三種情況首先把所有的格式清空邊距重疊父子元素之間塊級父元素與第一個或者最后一個子元素父元素不存在上邊框上內(nèi)邊距內(nèi)聯(lián)元素清除浮動。 邊距重疊 統(tǒng)一的解決方案；設置padding或者border或者觸發(fā)BFC 邊距重疊有一下三種情況： 首先把所有的margin格式清空 邊距重疊 html *{ margi...
摘要：邊距重疊統(tǒng)一的解決方案設置或者或者觸發(fā)邊距重疊有一下三種情況首先把所有的格式清空邊距重疊父子元素之間塊級父元素與第一個或者最后一個子元素父元素不存在上邊框上內(nèi)邊距內(nèi)聯(lián)元素清除浮動。 邊距重疊 統(tǒng)一的解決方案；設置padding或者border或者觸發(fā)BFC 邊距重疊有一下三種情況： 首先把所有的margin格式清空 邊距重疊 html *{ margi...
閱讀 1667·2021-09-26 09:55
閱讀 5288·2021-09-22 15:40
閱讀 2027·2019-08-30 15:53
閱讀 1508·2019-08-30 11:15
閱讀 1725·2019-08-29 15:41
閱讀 1879·2019-08-28 18:13
閱讀 3159·2019-08-26 12:00
閱讀 1681·2019-08-26 10:30
