作為一個(gè)多年經(jīng)驗(yàn)的WEB前端愛(ài)好者，我知道好的可視化設(shè)計(jì)可以大大提高工作效率，那么CSS可以實(shí)現(xiàn)可視化設(shè)計(jì)嗎？要如何實(shí)現(xiàn)？

1.有哪些概念

1.塊級(jí)元素（block-level element）和行內(nèi)級(jí)元素（inline-level element）
2.塊級(jí)盒(blcok-level box)和行內(nèi)級(jí)盒(inline-level box)
3.塊容器盒(block containing box)
4.塊盒（block box）和 行內(nèi)盒(inline box)
5.包含塊(containing block)
6.塊級(jí)格式化上下文(bfc)和行內(nèi)級(jí)格式化上下文（ifc）

2.元素類(lèi)型

主要有塊元素和行內(nèi)級(jí)元素，塊級(jí)元素表現(xiàn)為獨(dú)占一行，縱向排列，寬度自適應(yīng)容器，display為block,list-item，table。
行內(nèi)級(jí)元素表現(xiàn)為包裹性，對(duì)寬高不起作用，橫向排列，display為inline,inline-block,inline-table等，以及可替換元素，如img,button。

3.什么是塊級(jí)盒和行內(nèi)級(jí)盒。

塊元素生成的盒，稱為主要塊級(jí)盒，參與bfc，行內(nèi)級(jí)元素生成的盒為行內(nèi)級(jí)盒，參與ifc。

4.什么是塊容器盒

塊容器盒，只包含塊級(jí)盒，或產(chǎn)生ifc，只包含行內(nèi)級(jí)盒。但不能同時(shí)既有塊級(jí)盒又有行內(nèi)級(jí)盒，如果有至少一個(gè)塊級(jí)盒，將只包含塊級(jí)盒，行內(nèi)級(jí)盒將包含在生成的匿名塊盒中。
塊容器盒常見(jiàn)有p,div等塊級(jí)元素。非替換行內(nèi)元素inline-block,table-cell也是塊容器。

5.什么是塊盒和行內(nèi)盒

塊盒是哪些既是塊級(jí)盒同時(shí)又是塊容器盒的盒。如div,p。想display:table，雖然是塊級(jí)盒，但它不是快容器盒。可替換元素也不是塊容器盒，即使display為block。
行內(nèi)盒指參與ifc的同時(shí)，也產(chǎn)生ifc的行內(nèi)級(jí)盒。所有display:inline的非替換元素。
不產(chǎn)生ifc的行內(nèi)級(jí)盒，一般稱為原子行內(nèi)級(jí)盒(atomic inline-level box)，主要有可替換行內(nèi)元素或display為inline-block或inline-table。

6.什么是包含塊

不管什么盒，定位由包含塊決定。

7.bfc和ifc

bfc觸發(fā)方式有：

南通長(zhǎng)牌?(www.szjmswy.com)
1.float不為none;
2.position為absolute或fixed.
3.display為inline-block、table-cell、table-caption、flex或inline-flex.
4.overflow不為visible.

bfc中塊級(jí)盒從包含塊頂部自上到下排列，在同一個(gè)bfc中相鄰的元素垂直方向會(huì)有margin collapse問(wèn)題。
所謂相鄰指的是：

這兩個(gè)或多個(gè)外邊距沒(méi)有被非空內(nèi)容、padding、border 或 clear 分隔開(kāi)。
注意例外情況：
1.浮動(dòng)元素、inline-block 元素、絕對(duì)定位元素的 margin 不會(huì)和垂直方向上其他元素的 margin 折疊

浮動(dòng)元素的 margin 在垂直方向上也不會(huì)發(fā)生 margin 折疊，即使和它相鄰的子元素也不會(huì)。

<div style="margin-bottom:50px; width:50px; height:50px; background-color:green;">A</div><div style="margin-top:50px; width:100px; height:100px; background-color:green; float:left;"><div style="margin-top:50px; background-color:gold;">B</div> </div> A B

2.創(chuàng)建了塊級(jí)格式化上下文1的元素，不和它的子元素發(fā)生 margin 折疊
以 “overflow : hidden” 的元素為例：

若 B 和它的 "overflow:hidden" 包含塊發(fā)生 margin 折疊的話，金色的條應(yīng)該位于綠色塊的最上方，否則，沒(méi)有發(fā)生。

<div style="margin-top:50px; width:100px; height:100px; background-color:green; overflow:hidden;"><div style="margin-top:50px; background-color:gold;">B</div></div> </div> B

bfc作用：
1.阻止外邊距折疊
2.可以包含浮動(dòng)元素
3.可以防止元素被浮動(dòng)元素覆蓋

說(shuō)白了，bfc的作用就是使元素與其他元素不在同一個(gè)上下文中，從而既不對(duì)外部產(chǎn)生影響，同時(shí)外部也不會(huì)影響到內(nèi)部。

個(gè)人理解，難免有錯(cuò)，請(qǐng)指正。



總結(jié)

以上是生活随笔為你收集整理的CSS可以实现可视化设计吗？要如何实现？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。