css雜項補充

一、塊與內(nèi)聯(lián)

1.塊

• 獨行顯示
• 支持寬高，寬度默認(rèn)適應(yīng)父級，高度默認(rèn)由子級或內(nèi)容撐開
• 設(shè)置寬高后，采用設(shè)置的寬高

2.內(nèi)聯(lián)

• 同行顯示
• 不支持寬高
• margin上下無效果，左右會起作用，padding不會影響它的高度，背景會影響。
• 一般不設(shè)置內(nèi)聯(lián)的margin和padding

3.內(nèi)聯(lián)塊

• 同行顯示，之間有間距(間距產(chǎn)生原因是空格)
• 支持寬高，寬高由內(nèi)容撐開
• 可以設(shè)置寬高，設(shè)置其中一個，另一個等比縮放

二、屬性補充

1.overflow

指定內(nèi)容溢出元素的框，會發(fā)生什么。

三、隱藏

盒子之間會相互影響，可以設(shè)置隱藏

1.以背景顏色透明度隱藏(了解)

background-color: transparent;

盒子還在，內(nèi)容或子級標(biāo)簽會被顯示，例如盒子中有文本，盒子被隱藏，文本會被顯示

2.以盒子透明度隱藏

opacity: 0;值:0~1

盒子真正意義上透明，但盒子區(qū)域占位還在

3.display

display:none;

將盒子從文檔中移除，盒子的區(qū)域占位消失，當(dāng)盒子重新獲得顯示時，該盒子依舊從消失位置顯示。

四、畫圖

1.畫梯形

html:<div class="bd"></div>css:.bd {    width: 100px;    height: 100px;    background-color: transparent;}.bd {    /*border: 50px solid orange;*/    border-top: 50px solid orange;    /*border-right: 50px solid cyan;*/    /*border-bottom: 50px solid yellow;*/    /*border-left: 50px solid blue;*/    border-right: 50px solid transparent;    border-bottom: 50px solid transparent;    border-left: 50px solid transparent;}

通過設(shè)置邊框?qū)崿F(xiàn)

2.畫三角形

.bd {    width: 0;    height: 0;}.bd {    border-top: 50px solid orange;    border-right: 50px solid cyan;    border-bottom: 50px solid yellow;    border-left: 50px solid blue;}