css部分基礎知識回顧（一）

css盒子模型

css和模型有兩種，第一種是標準盒子模型（content-box），另一種是怪異盒子模型（IE,border-box）。標準盒子模型的盒子寬度width = contentWidth + paddingLeft + paddingRight + borderLeft + borderRgitht + marginLeft + marginRight，height = contentHeight + paddingTop + paddingBottom + borderTop + borderBottom + marginTop + marginBottom；怪異盒子模型的盒子寬度width = contentWdith + marginLeft + marginRight，height = contentHeight + marginTop + marginBottom，而其中contentWidth包含了內容寬度 + padding + border。

link標籤和@import標籤的區別

link：是html中的標籤，跟隨html的加載而加載；
@import：是css中提供的一種引入css的一種方式，最後加載，一般會等待頁面加載完成後再加載；
link和@import優先級，主要看引入的位置，後邊覆蓋前邊的。

垂直居中的方法

垂直居中的方法很多，這裏例舉三種常用的。

/* flex佈局模式： */
.parent {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;  /* 主軸居中顯示 */
  align-items: center;  /* 交叉軸居中顯示 */
}

/* position + transform */
.parent {
  width: 1000px;
  height: 1000px;
  position: relative;
}
.child {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* position + margin */
.parent {
  width: 1000px;
  height: 1000px;
  position: relative;
}
.child {
  position: absolute;
  width: 100px;
  height: 100px;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

opacity=0，visibility=hidden，display:none的區別

opacity=0：在界面上不顯示，但是會佔住自己所在的位置，如果有點擊事件，當點擊該區域時也會觸發事件。
visibility=hidden：在界面上不顯示，但是會佔住自己所在的位置，不會觸發點擊事件。
display:none：在界面上不顯示，而且不會佔位，也不會觸發事件。

清除浮動

因爲在使用float屬性的時候，父元素不會被撐開，很容易造成樣式錯亂，所以很多時候都需要清除浮動，清除浮動的方法主要介紹兩種常用的。

<!-- 在浮動的的元素最後添加div clear:both的方式 -->
<div class="parent">
  <div style="float:left">a</div>
  <div style="float:left">b</div>
  <div style="clear:both"></div>
</div>
<!-- 這樣父級div.parent的高度就能撐開 -->
<!-- 還有另外一種寫法，使用僞元素清除浮動 -->
<style>
.parent::after {
  content: "";
  clear: both;
  height: 0;
  display: block;  /*需要設置塊級元素纔可以*/
}
</style>
<div class="parent">
  <div style="float:left">a</div>
  <div style="float:left">b</div>
</div>

<!-- 使用BFC佈局清除浮動 -->
<style>
.parent {
  overflow: hidden;
}
</style>
<div class="parent">
  <div style="float:left">a</div>
  <div style="float:left">b</div>
</div>
<!-- BFC模式可以獨立開闢一個空間，其空間內的樣式不會影響外部樣式，
而且浮動的元素也會計算高度 -->

css僞類和僞元素

僞類：顧名思義，是一個類，就像.parent .child一樣（只是寫法不一樣），爲其設置樣式，那麼該元素就會顯示特定的樣式。如a:hover表示鼠標移動上a標籤的時候需要顯示的樣式，類似的還有:active :visited :last-child :nth-child(n)等。
僞元素：顧名思義，是一個元素，只是該元素不在文檔樹種。如：::before ::after等。div::after { content: 'abc'; }會在div後邊生成abc字符串，但是並不在文檔樹中，此方法還可以用來清除浮動。

inline block inline-block 的區別

• inline：inline元素不會獨佔一行，設置width height無效，垂直方向margin padding無效。
• block：block元素會獨佔一行，默認自動鋪滿父元素寬度，就算設置寬度，也是獨佔一行，設置margin padding生效。
• inline-block：擁有可以設置的block屬性，同時擁有inline的不會獨佔一行屬性。