css雜項補充

學一點也是好發表於2018-09-27
CSS

css雜項補充

一、塊與內聯

1.塊

  • 獨行顯示
  • 支援寬高，寬度預設適應父級，高度預設由子級或內容撐開
  • 設定寬高後，採用設定的寬高

2.內聯

  • 同行顯示
  • 不支援寬高
  • margin上下無效果，左右會起作用，padding不會影響它的高度，背景會影響。
  • 一般不設定內聯的margin和padding

3.內聯塊

  • 同行顯示，之間有間距(間距產生原因是空格)
  • 支援寬高，寬高由內容撐開
  • 可以設定寬高，設定其中一個，另一個等比縮放

二、屬性補充

1.overflow

指定內容溢位元素的框，會發生什麼。

值 描述
visible 預設值
hidden 內容被修剪，超出內容不可見
scroll 內容被修剪，滾動條顯示
auto 如果內容超出，便修剪，滾動條顯示
inherit 從父元素繼承

三、隱藏

盒子之間會相互影響，可以設定隱藏

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

background-color: transparent;

盒子還在，內容或子級標籤會被顯示，例如盒子中有文字，盒子被隱藏，文字會被顯示

2.以盒子透明度隱藏

opacity: 0;
值:0~1

盒子真正意義上透明，但盒子區域佔位還在

3.display

display:none;

將盒子從文件中移除，盒子的區域佔位消失，當盒子重新獲得顯示時，該盒子依舊從消失位置顯示。

四、畫圖

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;
}

通過設定邊框實現

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;
}

相關文章