！！.css盒模型
1.談談你對盒模型的認識?
盒模型簡介：
- 1.box-sizing： content-box （瀏覽器預設方式）類似於W3C定義的盒模型 content = width；
- 2.box-sizing： border-box 類似於IE定義的盒模型 content = width + border + padding；
3、JS如何設定獲取盒模型對應的寬和高
- 1.dom.style.width/height //內聯樣式才可以 = with + 'px'
- 2.dom.currentStyle.width/height //僅IE支援
- 3.原理是渲染後的元素的寬高相對來說比較準確
- 4.window.gteComputedStyle(dom).width/height //相容Firefox與Chrome原理跟上面的一樣，所有瀏覽器都支援
- 5.dom.getBoundingClientRect().width/height 計算元素的絕對位置，相對於視窗來計算的 //dom.getBoundingClientRect() {函式返回一個Object物件，該物件有6個屬性：top,lef,right,bottom,width,height}；
- 55。計算父元素的實際高度 父元素的實際高度是100px
5、BFC（佈局邊距重疊解決方案）
-
基本概念(原理)：BFC(Block formatting context)直譯為"塊級格式化上下文" 原理/特性/渲染規則：
-
處於同一個BFC中的元素相互影響，可能會發生margin collapse(邊距坍塌&邊距重疊)；
-
BFC在頁面上是一個獨立的容器，容器裡面的子元素不會影響到外面的元素，反之亦然；
-
計算BFC的高度時，考慮BFC所包含的所有元素，包括浮動元素也參與計算； 浮動盒的區域不會疊加到BFC上； 建立：怎麼建立或者說哪些元素會生成BFC?
- float屬性不為none
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible
-
使用場景：
- 1、利用BFC可以閉合浮動
- 2、防止與浮動元素重疊
- 3、由於BFC的隔離作用，可以利用BFC包含一個元素，防止這個元素與BFC外的元素髮生margin collapse。
6.flex佈局和grid佈局？
- 1.flex（ flexible box：彈性佈局盒模型）,是2009年w3c提出的一種可以簡潔、快速彈性佈局的屬性。主要思想是給予容器控制內部元素高度和寬度的能力。目前已得到以下瀏覽器支援
- 1使用flex佈局的容器（flex container），它內部的元素自動成為flex專案（flex item）。容器擁有兩根隱形的軸，水平的主軸（main axis），和豎直的交叉軸。主軸開始的位置，即主軸與右邊框的交點，稱為main start；主軸結束的位置稱為main end；交叉軸開始的位置稱為cross start；交叉軸結束的位置稱為cross end。item按主軸或交叉軸排列，item在主軸方向上佔據的寬度稱為main size，在交叉軸方向上佔據的寬度稱為cross size。 此外，需注意使用flex容器內元素，即flex item的float，clear、vertical-align屬性將失效。 三、容器屬性詳述
1.flex-direction
- 決定主軸的方向，即專案排列的方向，有四個可能的值：row(預設)|row-reverse|column|column-reverse
- row:主軸為水平方向，專案沿主軸從左至右排列
- column：主軸為豎直方向，專案沿主軸從上至下排列
- row-reverse：主軸水平，專案從右至左排列，與row反向
- column-reverse：主軸豎直，專案從下至上排列，與column反向
預設情況下，item排列在一條線上，即主軸上，flex-wrap決定當排列不下時是否換行以及換行的方式，可能的值nowrap(預設)|wrap|wrap-reverse
nowrap：自動縮小專案，不換行
wrap：換行，且第一行在上方
wrap-reverse：換行，第一行在下面
是flex-direction和flex-wrap的簡寫形式，如：row wrap|column wrap-reverse等。預設值為row nowrap，即橫向排列 不換行。
4、justify-content
決定item在主軸上的對齊方式，可能的值有flex-start（預設），flex-end，center，space-between，space-around。當主軸沿水平方向時，具體含義為
flex-start：左對齊
flex-end：右對齊
center：居中對齊
space- between：兩端對齊
space-around：沿軸線均勻分佈
效果如下圖
決定了item在交叉軸上的對齊方式，可能的值有flex-start|flex-end|center|baseline|stretch，當主軸水平時，其具體含義為
flex-start：頂端對齊
flex-end：底部對齊
center：豎直方向上居中對齊
baseline：item第一行文字的底部對齊
stretch：當item未設定高度時，item將和容器等高對齊
效果圖如下：
該屬性定義了當有多根主軸時，即item不止一行時，多行在交叉軸軸上的對齊方式。注意當有多行時，定義了align-content後，align-items屬性將失效。align-content可能值含義如下（假設主軸為水平方向）：
flex-start：左對齊
flex-end：右對齊
center：居中對齊
space- between：兩端對齊
space-around：沿軸線均勻分佈
stretch：各行將根據其flex-grow值伸展以充分佔據剩餘空間
效果圖如下
item的屬性在item的style中設定。item共有如下六種屬性
1、order
order的值是整數，預設為0，整數越小，item排列越靠前，如下圖所示程式碼如下
item 1
item 2
item 3
item 4
item 1
item 2
item 3
3、flex-shrink
定義了當容器空間不足時，item是否縮小。預設值為1，表示當空間不足時，item自動縮小，其可能的值為整數，表示不同item的縮小比例。flex-grow
4、flex-basis
表示專案在主軸上佔據的空間，預設值為auto。如下程式碼
item 1
item 2
item 3
flex屬性是flex-grow、flex-shrink和flex-basis三屬性的簡寫總和。
6、align-self
align-self屬性允許item有自己獨特的在交叉軸上的對齊方式，它有六個可能的值。預設值為auto
auto：和父元素align-self的值一致
flex-start：頂端對齊
flex-end：底部對齊
center：豎直方向上居中對齊
baseline：item第一行文字的底部對齊
stretch：當item未設定高度時，item將和容器等高對齊
五.聖盃佈局的四種方法？
- grid佈局
- flex佈局
- float解決方案：
- position解決方案：
六：清除浮動的方法？
CSS3中三種清除浮動（float）的方法
- 方法一：新增新的元素 、應用 clear：both .clear{ clear:both; height: 0; height: 0; overflow:hidden; }
- 方法二：父級div定義 overflow: auto .over-flow{ overflow: auto; zoom: 1; //處理相容性問題 }
- 方法三： 偽類 :after 方法 outer是父div的樣式 .outer {zoom:1;} /==for IE6/7 Maxthon2==/ .outer :after { clear:both; content:'.'; display:block; width: 0; height: 0; visibility:hidden; }
七： 四種居中的方式：
- 方案1：position 元素已知寬度
父元素設定為：position: relative;
子元素設定為：position: absolute;
距上50%，據左50%，然後減去元素自身寬度的距離就可以實現
示例 2：
八.display: none;和visibility: hidden;的區別？
1.display:none是徹底消失，不在文件流中佔位，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了，可以理解為透明度為0的效果，在文件流中佔位，瀏覽器會解析該元素；
2.使用visibility:hidden比display:none效能上要好，display:none切換顯示時visibility，頁面產生迴流（當頁面中的一部分元素需要改變規模尺寸、佈局、顯示隱藏等，頁面重新構建，此時就是迴流。所有頁面第一次載入時需要產生一次迴流），而visibility切換是否顯示時則不會引起迴流。
九，用css寫出一個三角形？
十. 寫出五條相容問題？
- 1.IE6下圖片下有空隙產生 解決這個BUG的技巧有很多,可以是改變html的排版,或者設定img為display:block或者設定vertical-align屬性為vertical-align:top/bottom/middle/text-bottom都可以解決.
- 2.LI中內容超過長度後以省略號顯示 此技巧適用與IE、Opera、safari、chrom瀏覽器，FF暫不支援。
-
3.不同瀏覽器的標籤預設的margin和padding不一樣。 *{margin:0;padding:0;}
-
- IE6雙邊距bug：塊屬性標籤float後，又有橫行的margin情況下，在IE6顯示margin比設定的大。hack：display:inline;將其轉化為行內屬性。 漸進識別的方式，從總體中逐漸排除區域性。首先，巧妙的使用“9”這一標記，將IE瀏覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
{ background-color:#f1ee18;/所有識別/ .background-color:#00deff\9; /IE6、7、8識別/ +background-color:#a200ff;/IE6、7識別/ _background-color:#1e0bd1;/IE6識別/ }
-
- 設定較小高度標籤（一般小於10px），在IE6，IE7中高度超出自己設定高度。hack：給超出高度的標籤設定overflow:hidden;或者設定行高line-height 小於你設定的高度。
-
- IE下，可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性；Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法:統一通過getAttribute()獲取自定義屬性。 Chrome 中文介面下預設會將小於 12px 的文字強制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
-
- 超連結訪問過後hover樣式就不出現了，被點選訪問過的超連結樣式不再具有hover和active了。解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
-
- 為什麼FF下文字無法撐開容器的高度 標準瀏覽器中固定高度值的容器是不會象IE6裡那樣被撐開的,那我又想固定高度,又想能被撐開需要怎樣設定呢？辦法就是去掉height設定min-height:200px; 這裡為了照顧不認識min-height的IE6 可以這樣定義: { height:auto!important; height:200px; min-height:200px; }