CSS常用技巧(3) BFC

2022-09-12 08:51:09 字數 615 閱讀 2599

內部的box會在垂直方向,乙個接乙個的放置

每個元素的margin box的左邊,與包含塊border box的左邊相接觸(對於從做往右的格式化,否則相反)

box垂直方向的距離由margin決定,屬於同乙個bfc的兩個相鄰box的margin會發生重疊(兩個bfc之間也會重疊,需要包裹一層bfc解決重疊)

bfc的區域不會與浮動區域的box重疊(兩欄自適應)

bfc是乙個頁面上的獨立的容器,外面的元素不會影響bfc裡的元素,反過來,裡面的也不會影響外面的

計算bfc高度的時候,浮動元素也會參與計算(清除浮動)

我是浮動元素

float屬性不為none(脫離文件流)

position為absolute或fixed

display為inline-block,table-cell,table-caption,flex,inine-flex

overflow不為visible

根元素自適應兩欄布局

清除內部浮動

防止垂直margin重疊

CSS常用技巧

css 使用技巧 1.可以避開css的盒模型考慮問題,指定margin和padding的值的時候在分別另外指定,後面的只將覆蓋前面的值。2.img 可以避免帶鏈結的邊緣出現藍色邊框,將以塊級元素顯示。3 nowrap 有時候我們要在首頁動態列印一列十條文章,要放在乙個css容器div裡面,若每行文字...

css常用技巧

水平居中元素 通用方法,元素的寬高未知 方式一 css3 transform parent child 方式二 flex 布局 parent 適用於子元素為浮動,絕對定位,內聯元素,均可水平居中。居中的元素為常規文件流中的內聯元素 display inline 常見的內聯元素有 span,a,img...

CSS 常用開發技巧

目錄 如何在點文字時也選中核取方塊或單選框?如何讓單行文字在容器內垂直居中?如何使文字溢位邊界顯示為省略號?如何設定內聯元素的寬高?效果如下 如下 方式一 所有主流瀏覽器都支援 label 的 for 屬性值與 input 的 id 屬性值一致 選項一選項二 選項一選項二 方式二 相比方法1更簡潔,...