1. 首頁 > 生活百科 > >

2 CSS布局秘籍-6脈神劍( 四 )

生活百科


2 CSS布局秘籍-6脈神劍

文章插圖
清除浮動脫離正常的文檔流，并不會占據正常文檔流的位置，如果一個父元素下面都是浮動元素，或正常元素高度低，則會導致父元素的高度坍塌 。從而使得后面的正常元素布局出現不希望的情況，常見三種清除方法：
方法說明? 觸發父元素為BFC overflow: hidden; 比較常用的方式，缺點是文檔超過區域大小后，內容會被隱藏 。display: flow-root;，新特性，創建無副作用的BFC 。? 設置父元素高寬明確設置父元素的高度、寬度，缺點是不能自適應 。? 父級添加偽元素::after，并清空clear::after中添加一個空的塊級盒子，并清除其浮動 。clear: both;使左右兩邊都不允許浮動元素，讓后面的非浮動元素的邊界移動到所有浮動元素的外邊界下方，就強行撐開了高度 。注意，這里并沒有產生BFC ， 詳情參考 MDN-clear/* 恢復父元素上的BFC */.parent {overflow: hidden;}/* 在父元素上使用清除clearfix：clear + 偽元素::after實現 ， 附加一個空的塊元素并清除 */.clearfix::after {content: "";display: block;clear: both;}
不理解float為什么要這么設計？？？坑
04、position定位position 可精準設置盒子的位置，正常布局流中，元素的position默認值為 static 。使用其它值可實現元素不同的定位，結合偏移top, bottom, left, right使用 ， 如果不設置偏移，則元素還是原來的位置 。
定位并不是一種常規的布局方式，主要用于一些特殊位置的實現 。
屬性/值描述值/示例position設置元素定位方式?static靜態定位，就是正常文檔流位置，所有元素的默認值，此時設置偏移無效position: static;?relative相對定位 (relative /?rel?t?v/)，在文檔流的基礎上 ， 相對于自己位置的偏移定位，位置保留 。不影響其他元素，可能會和其他元素重疊 。position: relative;?absolute絕對定位 (/??bs?lu?t/) ， 脫離文檔流，就像單獨一個圖層中，不干擾其他元素布局 。相對于最近一個非**static**定位的父元素（直到根元素），常用于彈出層（消息、菜單）position: absolute;?fixed固定定位 ， 和absolute基本一樣，脫離文檔流，定位的對象是瀏覽器視口 ， 可實現不滾動的固定內容 。position: fixed;?sticky粘性定位 (sticky/?st?ki/ 黏性的)IE，_靜態定位+固定定位 _fixed的結合體，先靜態定位，當元素滿足預定條件時（達到相對于視口的定位） ， 進入固定定位fixed模式 。注意：sticky 元素會“固定”在離它最近的一個擁有“滾動機制”的父元素上position: sticky;top頂部偏移：元素的上外邊距邊界與其包含塊上邊界之間的偏移，只用于定位top: -50px;bottom底部偏移，只用于定位 。若與top同時設置 ， 都會生效 ， 如有固定height則top優先生效bottom: 10px;left左側偏移 ， 只用于定位right右側偏移，只用于定位z-indexz軸坐標，用于元素上下層疊順序控制，默認auto=0 ， 值越大層級越高 。z-index:-1;<style>.btn-top{display: block;font-size: 30px; font-weight: bold;width: 50px; height: 50px; line-height: 50px;border-radius: 50%;opacity: 0.5;text-align: center; text-decoration: none;background-color: #eeb2cb;/* 定位 */position: fixed;bottom: 10px; right: 10px;}.btn-top:hover{opacity: 1; background-color: coral;}</style><a class="btn-top" title="回到頂部"></a>
2 CSS布局秘籍-6脈神劍

文章插圖
? 回到頂部字符：
05、表格布局(display:table)table 表格布局 和<table>元素類似 ， 實現一個行列工整的布局表格 。表格的布局可以用在非表格內容上，使用display: table、table-row、table-cell和相關屬性在非表元素上，可用于表單form的內容布局（好像并不好用-不能跨行？） 。
屬性值描述display: table表格布局display: table-row類似表格的<tr>display:table-row-group類似表格的<tbody>display: table-cell類似表格的單元格<td>vertical-align單元格內容垂直對齊，可應用于垂直居中? 表格布局-表單

推薦閱讀