position的屬性有哪些，區別是什麼？

relative：元素的定位是相對於元素自身位置進行定位，和其它元素沒有關係，也不會影響其它元素

fixed：是相對於window進行定位的，和其它元素沒有關係

absolute：瀏覽器會遞迴查詢該元素的所有父元素，如果找到有一個設定了position:relative/absolute/fixed的元素，就以該元素為基準定位，沒找到就以瀏覽器邊界進行定位

display:none和visibility:hidden的區別？

相同點：都可以實現元素的隱藏，點選該區域不會觸發事件

不同點：

1. display:none不會在頁面中佔據空間位置，切換屬性狀態會觸發迴流

2.visibility:hidden會佔據空間，切換visibility屬性不會有迴流，visibility具有繼承性，如果給父元素設定這個屬性，那麼它的子元素也會繼承

對盒子模型的理解？

css3中的盒模型有兩種：IE盒模型 、W3C標準盒模型

相同點：都是四個部分組成，分別margin、padding、border、conten

不同點：

1. W3C標準盒模型，width和height只包含了content

2. IE盒模型，width和height包含了border、padding和content

3.可以通過設定bix-sizing屬性來改變盒子模型：box-sizeing: content-box：表示標準盒模型box-sizeing: border-box：表示IE盒模型

SCSS、LESS是什麼？ 為什麼要使用它們？

都是css前處理器，是css上的一種抽象層，原始的css寫法都是靜態寫法概念，不具備複用性，less是一種動態樣式語言，將css賦予了動態語言的特性，例如：變數，繼承等

為什麼使用：

1. 結構清晰，便於擴充套件

2.全相容css程式碼，可以方便的應用到老專案中

3.可以遮蔽瀏覽器私有的語法差異，減少無意義是機械勞動

4.可以輕鬆實現多種繼承

對媒體查詢的理解？

媒體查詢主要是由一套表示式組成，最終會被解析成true或者是false

使用@media查詢的時候，能針對不同的媒體型別定義不同的樣式，也可以針對不同的螢幕尺寸設定不同的樣式，特別是設計響應式的頁面

對Flex佈局的理解

設定Flex佈局後，子元素的float、clear和vertical-align屬性都會失效

Flex佈局是CSS3新增的一種佈局方式，可以通過將一個元素的display屬性值設定為flex從而使它成為一個flex容器，它的所有子元素都會成為它的專案。一個容器預設有兩條軸：一個是水平的主軸，一個是與主軸垂直的交叉軸。可以使用flex-direction來指定主軸的方向。可以使用justify-content來指定元素在主軸上的排列方式，使用align-items來指定元素在交叉軸上的排列方式。還可以使用flex-wrap來規定當一行排列不下時的換行方式。對於容器中的專案，可以使用order屬性來指定專案的排列順序，還可以使用flex-grow來指定當排列空間有剩餘的時候，專案的放大比例，還可以使用flex-shrink來指定當排列空間不足時，專案的縮小比例。

什麼是margin重疊問題？如何解決？

計算原則： 摺疊合併後外邊距的計算原則如下：

1.如果兩者都是正數，那麼就去最大者

2.如果是一正一負，就會正值減去負值的絕對值

3.兩個都是負值時，用0減去兩個中絕對值大的那個

解決辦法： 對於摺疊的情況，主要有兩種：兄弟之間重疊和父子之間重疊

（1）兄弟之間重疊：

1.底部元素變為行內盒子：display: inline-block

2.底部元素設定浮動：float

3.底部元素的position的值為：absoulte或者fixed

（2）父子之間重疊：

1.父元素加入：overflow: hidden

2.父元素新增透明邊框：border:1px solid transparent

3.子元素變為行內盒子：display: inline-block

4.子元素加入浮動屬性或定位

兩欄佈局的實現？

1.利用浮動，將左邊元素寬度設定為200px，並且設定向左浮動。將右邊元素的margin-left設定為200px，寬度設定為auto（預設為auto，撐滿整個父元素）

2.利用浮動，左側元素設定固定大小，並左浮動，右側元素設定overflow: hidden; 這樣右邊就觸發了BFC，BFC的區域不會與浮動元素髮生重疊，所以兩側就不會發生重疊。

3.利用flex佈局，將左邊元素設定為固定寬度200px，將右邊的元素設定為flex:1

4.利用絕對定位，將父級元素設定為相對定位。左邊元素設定為absolute定位，並且寬度設定為200px。將右邊元素的margin-left的值設定為200px。

5.利用絕對定位，將父級元素設定為相對定位。左邊元素寬度設定為200px，右邊元素設定為絕對定位，左邊定位為200px，其餘方向定位為0。