目錄
很長時間, 浮動元素是所有 web 布局方案的基礎 ( 很大程度上依賴 clear 屬性 )浮動
清除浮動
浮動形狀
使用透明影象定義形狀, shape-image-threshold, 指定透明度為多少時允許內容流入.
為形狀新增外邊距, shape-margin 為形狀新增 "外邊距" , 它可能被margin裁剪掉, 因此shape-margin 要小於等於margin
相對元素框的常規位置定義元素的具體位置基本概念
偏移屬性
寬度和高度
內容溢位和裁剪
元素的可見性
絕對定位
固定定位
相對定位
粘滯定位
彈性盒布局把已完艱鉅的布局任務變得極為簡單彈性盒基礎
彈性容器
布置彈性元素
彈性容器
調整內容
對齊元素
align-self屬性
對齊方式
彈性元素
適用於彈性元素的屬性
flex屬性
flex-grow屬性
flex-shrink屬性
flex-basis屬性
flex 簡寫屬性
order屬性
布局一直是最為重要的功能, float和clear布局方法不恰當. 彈性布局只適用特定情況, 柵格布局最好建立柵格容器
基本的柵格術語
放置柵格線
#grid根據軌道中的內容適配, fit-content(argument), minmax(min-content, max-content)
重複柵格線, grid-template-columns: repeat(3, 2em 1fr 1fr) 2em;
柵格區域, 把柵格畫出來, grid-template-areas, 字元任意
在柵格中附加元素
行和列的簡寫屬性, grid-row, grid-column, 適用於柵格元素和絕對定位的元素, grid-row: r3 / 7; grid-column: col-b / span 2;
隱式柵格
錯誤處理
使用區域, grid-area, 直接引用柵格區域grid-area: header, 柵格線順序, 上左下右,grid-area: 1 / 1 / 2 / 2;只有三個值, 那麼缺少的 grid-column-end 假如是名字, 那麼就和 grid-column-start 的值相同, 如果開始線的值是乙個數字, 那麼結束線的值被設為auto. 如果只有兩個值或乙個值也是這樣處理, 名字和數值是不同處理方案
柵格元素重疊, 重疊時會分層
柵格流
自動增加柵格線
grid簡寫屬性
釋放柵格空間
柵格的對齊方式
縱向對齊和橫向對齊全部元素
分層和排序
通過 css 排布**的方式**格式化
設定顯示方式的值
匿名**物件
如果 table-cell 元素的父元素不是 table -row, 在 table-cell 和其父元素之間插入乙個匿名 table-row 物件. 插入的物件將包含 table-cell 元素的全部後續同輩元素. 父元素為 table-row-group 時上述規則也成立
如果 table-row 元素的父元素不是 table, inline-table 或 table-row-group, 在 table-row 元素和其父元素之間插入乙個匿名 table 元素. 插入的物件將包含 table-row 元素的全部後續同輩元素.
如果 table-column 元素的父元素不是 table, inline-table 或 table-column-group, 在 table-column 元素和其父元素之間插入乙個匿名 table 元素.
如果 table-row-group, table-header-group, table-footer-group, table-column-group 或 table-caption 元素的父元素不是 table, 在這些元素和其父元素之間插入乙個匿名 table 物件
如果 table 或 inline-table 元素的子元素不是 table-row-group, table-header-group, table-footer-group, table-row 或 table-caption, 在 table 元素和其子元素之間插入乙個匿名 table-row 物件. 插入的匿名物件包括 table-row-group, table-header-group, table-footer-group, table-row 或 table-caption 之外的子元素的全部後續同輩元素.
如果 table-row-group, table-header-group 或 table-footer-group 的子元素不是 table-row, 在他們和其子元素之間插入乙個匿名 table-row 物件, 插入的匿名物件包含子元素的全部後續同輩元素 ( table-row 物件自身除外 )
如果 table-row 元素的子元素不是 table-cell, 在元素和其子元素之間插入乙個匿名 table-cell 物件. 插入的匿名物件包含子元素的全部後續同輩元素 (table-cell 元素自身除外)
**中的層
標題, caption-side, 取值 top, bottom
單元格的邊框
摺疊單元格的邊框
**的尺寸
計算一列中每個單元格的最小寬度(換行)和最大寬度(不換行)
計算各列的最小寬度和最大寬度
如果單元格橫跨多列, 那麼所跨的那幾列的最小寬度之和必須等於單元格的最小寬度. 同樣, 列的最大寬度之和也要等於橫跨多列的單元格的最大寬度.
計算**的寬度
如果**的寬度值不是 auto, 比較**寬度的計算值與每一列的寬度之和加上邊框和單元格間距 (使用百分數設定的寬度可能就在此時計算). 兩者之中較大的那個就是**的最終寬度. 如果**寬度的計算值比列寬度, 邊框和間距之和大, 差值除以列數後得到的值將增加到各列上.
如果**寬度的計算值是 auto, **的最終寬度等於列寬度, 邊框和間距之和, 這就意味著, **的寬度正好能放得下內容, 這與傳統的 html **是一樣的. 寬度為百分數的列將以哪個百分數為限, 但使用者**不一樣滿足這個限制.
高度, 最簡單的情況, 通過 height 屬性顯式設定**的高度. 此時, **的高度由 height 屬性的值定義. height 更像是 min-height. 如果**的 height 屬性的值為 auto, 那麼**的高度等於**中每一行的高度之和加上邊框和單元格的間距. 最好不要為**設定高度
對齊方式, 橫向對齊, 使用 text-align 屬性, 縱向對齊, vertical-align 屬性設定, 三個值, top, bottom, middle, baseline, 每種對齊效果都是通過自動增加單元格的內邊距實現的, baseline 由第一行文字的基線定義. vertical-align 的其他值, sub, super, text-top 和 text-bottom, 應用到單元格上被忽略, 視為baseline, 有時被視為 top
掌握css3布局
在傳統的浮動 定位基礎之上，css3提供了一系列新的布局方式，包括彈性盒模型 多列 查詢等，利用這些布局方式我們可以靈活地應對複雜網頁布局，本文通過屬性詳解 實戰案例的方式向您展示這些新興布局方式的強大之處。1.彈性盒模型 彈性盒布局模型 flexible box layout 是 css3 規範中...
css3 布局 文字
它主要應用在文字的多列布局方面，這種布局在報紙和雜誌上都使用了幾十年了，但要在web頁面上實現這樣的效果還是有相當大的難度，慶幸的是，css3的多列布局可以輕鬆實現 語法 columns 多列布局columns屬性引數主要就兩個屬性引數 列寬和列數。引數 引數說明 主要用來定義多列中每列的寬度 主要...
CSS3 彈性布局
掌握傳統布局與css3新增彈性布局方式的實現和應用 彈性布局 彈性伸縮布局 事實上它是一種新型別的盒子模型，也有書上稱作彈性伸縮盒布局。比較新的布局方式 旨在提供乙個更加有效的方式來布置，對齊和分布在容器之間的各項內容，即使它們的大小是未知或者動態變化的。彈性布局的主要思想是讓容器有能力來改變專案的...