css基礎二

css中em、rem、vm、vw計算尺寸的方式。

1. 1em＝當前元素字體大小，2em＝當前字體兩倍大小
2. 1rem＝當前根元素字體大小，2rem＝當前跟元素字體兩杯大小
3. vm分別有vmin和vmax分別是關于視口寬度和高度兩者的最大或者最小值
4. width:50vw，這里50vm指視口寬度的50％。height：50vh，這里50vh指占視口高度的50%

css中顏色的常用寫法：

1. 顏色關鍵字

a {
  color: white;
  background-color: blue;
}

2. 十六進制值

p {
  background-color: #e0b0ff;
}

3. RGB

p {
  background-color: rgb(224, 176, 255);
}

4. HSL

p {
  background-color: hsl(276, 100%, 85%);
}

5. RGBA & HSLA

p {
  background-color: rgb(224, 176, 255, .5);
}

p {
  background-color: hsla(240, 100%, 50%, 0.5);
}

6. currentColor 關鍵字

表示和當前元素的color一樣的顏色

 <div class="box">box
    <span class="child">child</span>
  </div>

  <style>
    .box {
      color: red;
    }
    .child {
      border: 4px solid currentColor;
    }

  </style>

css中透明色的表示，透明效果的實現，currentcolor的用法

1. 透明色表示：

.box{
    background-color:transparent
}

2. 透明效果：設置元素的透明度為0

.box{
    opacity:0；
}

3. currentColor的用法，如上代碼

表示和當前元素的color一樣的顏色

 <div class="box">box
    <span class="child">child</span>
  </div>

  <style>
    .box {
      color: red;
    }
    .child {
      border: 4px solid currentColor;
    }

  </style>

css 中calc是什么

calc()從字面我們可以把他理解為一個函數function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。為何說是動態值呢?因為我們使用的表達式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度

css3實現垂直居中

.box{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

display的值

1. none 此元素不會被顯示。
2. block 此元素將顯示為塊級元素，此元素前后會帶有換行符。
3. inline 默認。此元素會被顯示為內聯元素，元素前后沒有換行符。
4. inline-block 行內塊元素。（CSS2.1 新增的值）
5. table 此元素會作為塊級表格來顯示（類似 <table>），表格前后帶有換行符。
6. inline-table 此元素會作為內聯表格來顯示（類似 <table>），表格前后沒有換行符。
7. inherit 規定應該從父元素繼承 display 屬性的值。

塊級元素和行內元素的特點

1. 塊級元素

• HTML（超文本標記語言）中元素大多數都是“塊級”元素或行內元素。塊級元素占據其父元素（容器）的整個空間，因此創建了一個“塊”
• 塊級元素標簽：<address>、<article>、<ol>、<footer> 、<p>、<form>、<audio>、 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>、<pre>、<dd>、 <ul>、<video>、 <div>、

  ---

2. 行內元素：

• HTML (超文本標記語言) 元素大多數都是行內元素或塊級元素。一個行內元素只占據它對應標簽的邊框所包含的空間。
• 行內元素標簽：b, big, i, small, tt
  abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
  a, bdo, br, img, map, object, q, script, span, sub, sup
  button, input, label, select, textarea

3. 塊級元素與行內元素有幾個關鍵區別：

• 格式:
  默認情況下，塊級元素會新起一行。
• 內容模型:
  一般塊級元素可以包含行內元素和其他塊級元素。這種結構上的包含繼承區別可以使塊級元素創建比行內元素更”大型“的結構。

CSS3 box-sizing 屬性

box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。例：

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

• content-box：這是由 CSS2.1 規定的寬度高度行為。
  寬度和高度分別應用到元素的內容框。
  在寬度和高度之外繪制元素的內邊距和邊框。
• border-box ：
  為元素設定的寬度和高度決定了元素的邊框盒。
  就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。
  通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
• inherit： 規定應從父元素繼承 box-sizing 屬性的值。