盒模型，box-sizing

盒模型組成：content+padding+border+margin ;
在標準盒模型中，css中給元素設定的width和height就是content寬高
在怪異盒模型下:css中給元素設定的width和height=content寬/高+padding+border

box-sizing可以決定盒模型

CSS3新特性，偽類，偽元素，錨偽類

1. 偽類和偽元素的區別：
   兩者的區別在於，有沒有生成抽象的元素；

2. 偽類的例子–錨偽類，即a標籤的偽類，來表達它的不同的狀態，並沒有生成什麼元素

   a:link 表示未訪問的連結

   a:visited 表示已訪問的連結

   a:hover 滑鼠移動到連結上的情況

   a:active 表示選定的連結

3. 偽元素的例子：會生成虛擬的元素，並能給這個元素設定內容和樣式
   :first-line :first-letter :after :before

css隱藏一個元素的方法

將 opacity 設為 0、將 visibility 設為 hidden、將 display 設為 none 或者將 position 設為 absolute 然後將位置設到不可見區域；或者寬高設為0等等很多方法

如何實現水平垂直居中

    1.使用定位
    ```
    .parent{
        position:relative;
    }
    .child{
        position:absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 50%;
        transform: translateX(-50%);
    }

    ```

 2. 使用css3的flex


```
.parent{
    display:flex;
    justify-content:center;
    align-items:center;

}
```

3. 將子元素轉為'inline-block',利用父元素可以設定行內元素水品那個居中的'text-align:center'來進行水平居中；在html中再創造出一個與子元素同級的行內元素，利用'vertical-align:center'進行垂直居中

    html:


```
<div class="parent">
        <span></span>
        <div class="child">hello</div>
</div>
```
css

```
.parent{
          width: 300px;
          height: 400px;
          text-align: center;
          border: 1px solid #000;
        }
        .child{
          display: inline-block;
          vertical-align: middle;
        }
        .parent span{
          width: 0;
          height: 100%;
          vertical-align: middle;
          display: inline-block;
        }
```
 

說說position，display

display屬性值：none、inline、block、inline-block
position屬性的值：static、relative、absolute、fixed

浮動元素引起的問題和解決辦法？絕對定位和相對定位，元素浮動後的display值

浮動元素引起的問題：由於元素浮動後脫離了文件流，會造成父元素的塌陷，也會影響該元素後面元素的結構位置

如何解決?只要觸發了BFC，製造出隔離的空間，就能解決浮動造成的影響
詳情請看我的這篇博文
淺談BFC—CSS的低調大佬

元素浮動後，就算他是內聯元素，實質上的他的dispaly性質已經辦成block了，就是像塊級元素一樣能設定寬高等屬性

相對定位：將一個元素從它在普通流所處的位置上進行移動，並且這種移動不會影響周圍元素的位置，它們還是處於在普通流中所處的位置。

絕對定位：position: absolute；脫離了普通流，也就是說不會影響到周圍任何元素的位置（就像是直接忽略掉它所佔據的空間）。使用絕對定位的元素的位置相對於最近的已定位的祖先元素，如果沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。

link和@import引入css的區別

除了寫法上面的區別之外，最大的區別在於link會和dom結構一同載入渲染，而@import只能能dom結構載入完成以後才能渲染頁面

解釋一下css3的flexbox，以及適用場景

該佈局模型的目的是提供一種更加高效的方式來對容器中的條目進行佈局、對齊和分配空間。這種佈局方式在條目尺寸未知或動態時也能工作。

比如元素居中，僅需要在父級元素css中宣告display:flex;justify-content:center;align-items:center;即可

實現項與項之間的均勻分佈：

.flex-container { display: flex; justify-content: space-around; }

等等

grid佈局

假如有這樣的頁面佈局：兩邊固定寬度，中間自適應的三欄式佈局，
使用grid佈局就能很方便的實現了

.parent {
        width: 100%;
        display: grid;
        grid-template-rows: 200px;    /*行的高度*/
        grid-template-columns: 300px  auto 300px;   /*列的寬度*/
    }

因為存在相容性問題 chrome都要57以上的才支援，所以並沒有常用

實現兩欄佈局有哪些方法？

1.利用float和margin結合：
2.使用grid佈局
3.利用 position:absolute 配合 margin 實現
4.利用 display: flex 實現

css dpi

dpi:就是每英寸的畫素數

你知道attribute和property的區別麼

property 和 attribute中文翻譯意思非常相近，
但是property是DOM中的屬性，是JavaScript裡的物件；在面向物件的思想中，封裝的類中用來表示物件狀態的成員就是property；

attribute是HTML標籤上的特性，在標籤語言面向物件程式設計時候，他的物件狀態成員property,=被包裝成為attribute，但並不是所有attribute都是property。
例如checkbox的checked的狀態，在標籤內它的狀態值可以決定選中的狀態；而在js中的checked可作為property物件，用true或false來決定狀態

流式佈局如何實現，響應式佈局如何實現

流式佈局：按照百分比來適配瀏覽器網頁，有很大的缺陷：不同的螢幕下面，元素寬高是不一樣的，但是問題、圖片依舊是以px為單位不會變的，看起來會有不協調的情況
響應式佈局：根據css3的媒體查詢技術，media query 是響應式設計的核心，他能和瀏覽器進行提前的溝通，給到瀏覽器適合的佈局

移動端佈局方案

使用用rem佈局.：rem是css的單位，是根據根元素即html元素的的字型的font-size的值來等比計算的。

padding百分比是相對於父級寬度還是自身的寬度

margin,padding的百分比是相對與父元素的寬度來進行計算