1、CSS盒子模型與怪異盒模型

1、****標準盒模型中width指的是內(nèi)容區(qū)域content的寬度；height指的是內(nèi)容區(qū)域content**的高度。

標準盒模型下盒子的大小 = content + border + padding + margin

2、****怪異盒模型中的width指的是內(nèi)容、邊框、內(nèi)邊距總的寬度（content + border + padding）；height指的是內(nèi)容、邊框、內(nèi)邊距總的高度

怪異盒模型下盒子的大小=width（content + border + padding） + margin

3、在ie8+瀏覽器中使用哪個盒模型可以由box-sizing（CSS新增的屬性)觸發(fā)，

默認值為content-box，即標準盒模型；如果將box-sizing設為border-box則用的是IE盒模型

4、box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow,v-shadow必須。水平，垂直陰影的位置。允許賦值。blur可選，模糊距離。spread可選，陰影的尺寸。color可選，陰影的顏色。inset可選，將外部陰影（outset）改為內(nèi)部陰影。

2、HTML5在標簽、屬性、存儲、API上的新特性

?標簽：

新增語義化標簽（aside / figure / section / header / footer / nav等），

增加多媒體標簽video和audio，使得樣式和結(jié)構更加分離

?屬性：

增強表單，主要是增強了input的type屬性；

meta增加charset以設置字符集；

script增加async以異步加載腳本

?存儲：增加localStorage、sessionStorage和indexedDB，引入了application cache對web和應用進行緩存

?API：增加拖放API、地理定位、SVG繪圖、canvas繪圖、Web Worker、WebSocket

3、CSS3動畫

一：過渡動畫—Transitions

1：過渡動畫Transitions

含義：在css3中，Transitions功能通過將元素的某個屬性從一個屬性值在指定的時間內(nèi)平滑過渡到另一個屬性值來實現(xiàn)動畫功能。

Transitions屬性的使用方法如下所示：

transition: property | duration | timing-function | delay

transition-property: 表示對那個屬性進行平滑過渡。

transition-duration: 表示在多長時間內(nèi)完成屬性值的平滑過渡。

transition-timing-function 表示通過什么方法來進行平滑過渡。

linear規(guī)定以相同速度開始至結(jié)束的過渡效果（等于 cubic-bezier(0,0,1,1)）。

ease	規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	規(guī)定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	規(guī)定以慢速結(jié)束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	規(guī)定以慢速開始和結(jié)束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數(shù)中定義自己的值。可能的值是 0 至 1 之間的數(shù)值。

transition-delay: 定義過渡動畫延遲的時間。

默認值是 all 0 ease 0

**瀏覽器支持程度：**IE10，firefox4+，opera10+，safari3+及chrome8+

下面是transitions過渡功能的demo如下：

HTML代碼如下：

<div class="transitions">transitions過渡功能</div>

CSS代碼如下：

.transitions {-webkit-transition: background-color 1s ease-out;-moz-transition: background-color 1s ease-out;-o-transition: background-color 1s ease-out; }.transitions:hover {background-color: #00ffff; }

效果如下：

transitions過渡功能

如果想要過渡多個屬性，可以使用逗號分割，如下代碼：

div { -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;}

2. 我們可以使用Transitions功能同時平滑過渡多個屬性值。

如下HTML代碼：

<h2>transitions平滑過渡多個屬性值</h2><div class="transitions2">transitions平滑過渡多個屬性值</div>

css代碼如下：

.transitions2 {background-color:#ffff00;color:#000000;width:300px;-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;-moz-transition: background-color 1s linear, color 1s linear, width 1s linear;-o-transition: background-color 1s linear, color 1s linear, width 1s linear; }.transitions2:hover {background-color: #003366;color: #ffffff;width:400px; }

效果如下：

transitions平滑過渡多個屬性值

transitions平滑過渡多個屬性值

**注意：**transition-timing-function 表示通過什么方法來進行平滑過渡。它值有如下：

有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

至于linear 線性我們很好理解，可以理解為勻速運動，至于cubic-bezier貝塞爾曲線目前用不到，可以忽略不計，我們現(xiàn)在來理解下 ease, ease-in, easy-out 和 ease-in-out 等屬性值的含義；

ease: 先快后逐漸變慢；

ease-in: 先慢后快

easy-out: 先快后慢

easy-in-out: 先慢后快再慢

理解上面幾個屬性值，如下demo：

HTML代碼如下:

<div id="transBox" class="trans_box"><div class="trans_list ease">ease</div><div class="trans_list ease_in">ease-in</div><div class="trans_list ease_out">ease-out</div><div class="trans_list ease_in_out">ease-in-out</div><div class="trans_list linear">linear</div></div>

CSS代碼如下：

.trans_box {background-color: #f0f3f9;　　width:100% }.trans_list {width: 30%;height: 50px;margin:10px 0;background-color:blue;color:#fff;text-align:center; }.ease {-webkit-transition: all 4s ease;-moz-transition: all 4s ease;-o-transition: all 4s ease;transition: all 4s ease; }.ease_in {-webkit-transition: all 4s ease-in;-moz-transition: all 4s ease-in;-o-transition: all 4s ease-in;transition: all 4s ease-in; }.ease_out {-webkit-transition: all 4s ease-out;-moz-transition: all 4s ease-out;-o-transition: all 4s ease-out;transition: all 4s ease-out; }.ease_in_out {-webkit-transition: all 4s ease-in-out;-moz-transition: all 4s ease-in-out;-o-transition: all 4s ease-in-out;transition: all 4s ease-in-out; }.linear {-webkit-transition: all 4s linear;-moz-transition: all 4s linear;-o-transition: all 4s linear;transition: all 4s linear; }.trans_box:hover .trans_list{margin-left:90%;background-color:#beceeb;color:#333;-webkit-border-radius:25px;-moz-border-radius:25px;-o-border-radius:25px;border-radius:25px;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg); }

效果如下：

ease

ease-in

ease-out

ease-in-out

linear

二：Animations功能:定義多個關鍵幀

Animations功能與Transitions功能相同，都是通過改變元素的屬性值來實現(xiàn)動畫效果的。

它們的區(qū)別在于：使用Transitions功能是只能通過指定屬性的開始值與結(jié)束值。然后在這兩個屬性值之間進行平滑過渡的方式來實現(xiàn)動畫效果，因此不能實現(xiàn)復雜的動畫效果；

而Animations則通過定義多個關鍵幀以及定義每個關鍵幀中元素的屬性值來實現(xiàn)更為復雜的動畫效果。

**語法：**animations: name duration timing-function iteration-count;

name: 關鍵幀集合名（通過此名創(chuàng)建關鍵幀的集合）

duration: 表示在多長時間內(nèi)完成屬性值的平滑過渡

timing-function: 表示通過什么方法來進行平滑過渡

iteration-count: 迭代循環(huán)次數(shù)，可設置為具體數(shù)值，或者設置為infinite進行無限循環(huán)，默認為1.

用法：@-webkit-keyframes 關鍵幀的集合名 {創(chuàng)建關鍵幀的代碼}

如下面的代碼：

@-webkit-keyframes mycolor {0% {background-color:red;}40% {background-color:darkblue;}70% {background-color: yellow;}100% {background-color:red;}} .animate:hover {-webkit-animation-name: mycolor;-webkit-animation-duration: 5s;-webkit-animation-timing-function:

4、Flex布局

設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。

采用 Flex 布局的元素，稱為 Flex 容器（flex container）

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

4.1.1 flex-direction屬性

flex-direction屬性決定主軸的方向（即項目的排列方向）。

.box { flex-direction: row | row-reverse | column | column-reverse; }

它可能有4個值。

• row（默認值）：主軸為水平方向，起點在左端。
• row-reverse：主軸為水平方向，起點在右端。
• column：主軸為垂直方向，起點在上沿。
• column-reverse：主軸為垂直方向，起點在下沿。

4.1.2 flex-wrap屬性

默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

.box{ flex-wrap: nowrap | wrap | wrap-reverse; }

它可能取三個值。

（1）nowrap（默認）：不換行。

（2）wrap：換行，第一行在上方。

（3）wrap-reverse：換行，第一行在下方。

4.1.3 flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。

.box { flex-flow: <flex-direction> || <flex-wrap>; }

4.1.4 justify-content屬性

justify-content屬性定義了項目在主軸上的對齊方式。

.box { justify-content: flex-start | flex-end | center | space-between | space-around; }

它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸為從左到右。

• flex-start（默認值）：左對齊
• flex-end：右對齊
• center： 居中
• space-between：兩端對齊，項目之間的間隔都相等。
• space-around：每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

4.1.5 align-items屬性

align-items屬性定義項目在交叉軸上如何對齊。

.box { align-items: flex-start | flex-end | center | baseline | stretch; }

它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。

• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• baseline: 項目的第一行文字的基線對齊。
• stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

4.1.6 align-content屬性

align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

該屬性可能取6個值。

• flex-start：與交叉軸的起點對齊。
• flex-end：與交叉軸的終點對齊。
• center：與交叉軸的中點對齊。
• space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
• space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
• stretch（默認值）：軸線占滿整個交叉軸。

二、項目的屬性

以下6個屬性設置在項目上。

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

4.2.1 order屬性:定義項目的排列順序 0

order屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認為0。

.item { order: <integer>; }

4.2.2 flex-grow屬性:定義項目的放大比例 0

flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。

.item { flex-grow: <number>; /* default 0 */ }

如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據(jù)的剩余空間將比其他項多一倍。

4.2.3 flex-shrink屬性:定義了項目的縮小比例 1

flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

.item { flex-shrink: <number>; /* default 1 */ }

如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

負值對該屬性無效。

4.2.4 flex-basis屬性 將占據(jù)固定空間

flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。

.item { flex-basis: <length> | auto; /* default auto */ }

它可以設為跟width或height屬性一樣的值（比如350px），則項目將占據(jù)固定空間。

4.2.5 flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建議優(yōu)先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。

4.2.6 align-self屬性

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。

5、實現(xiàn)一個元素水平垂直居中

1）缺點：如果不知道寬高，這個效果就沒法實現(xiàn)。如果數(shù)據(jù)除不盡，實現(xiàn)的效果存在誤差。

{width：200px； height：200px；position：absolute或者fixed； top：50%； margin-top：-100px； left：50%； margin-left：-100px；}

2）缺點：不適合未知寬高的元素水平垂直居中

{width：333px； height：333px； position：fixed； margin：auto； top：0； left：0； right：0； bottom：0；}

3）優(yōu)點：可以實現(xiàn)一個未知寬高的元素水平垂直居中 缺點：display：flex；css3新增加的；兼容到IE10以上

html{ height：100%；} body{ margin：0； display：flex； height：100%；}div{ margin：auto；}

其中：display：flex給的最近的父元素

4）

body{ margin：0；}div{position：fixed；top：50%； left：50%； transform：translate(-50%，-50%)；}/*top：50%； left：50%； 這個是瀏覽器視口整體寬高的一半 ； transform：translate(-50%，-50%)；是當前元素寬高的一半*/

6、BFC

有 BFC 特性的元素可以看作是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素

只要元素滿足下面任一條件即可觸發(fā) BFC 特性：

• html 根元素
• 浮動元素：float 除 none 以外的值
• 絕對定位元素：position (absolute、fixed)
• display 為 inline-block、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

? 建立BFC的最好方式莫過于overflow:hidden

BFC 特性及應用

1.當元素在同一個BFC中，垂直方向上的margin會重疊，解決方法是將其放在不同的 BFC 容器中。

2.BFC 可以包含浮動的元素（清除浮動），只要設置容器overflow：hidden

3.BFC 可以阻止元素被浮動元素覆蓋（文字環(huán)繞問題），只要設置元素overflow：hidden

7、清除浮動

在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。但是當子元素設置浮動之后，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。

? 解決方案1： after+zoom （最好用的，最推薦的，兼容性也很好）

? 父元素::after{content:""; display:block;height:0;visibility:hidden;clear:both;}

? 父元素:{zoom:1}

? 建議：定義公共類來減少css代碼

? 解決方案2：給父元素添加聲明overflow:hidden; zoom：1；(需要兼容IE6添加)

? 優(yōu)點：簡單、代碼少、瀏覽器支持好

? 缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。**

8、處理瀏覽器兼容

樣式兼容性（css）

交互兼容性（javascript）

1、事件兼容的問題，我們通常需要會封裝一個適配器的方法，過濾事件句柄綁定、移除、冒泡阻止以及默認事件行為處理

var helper = {}//綁定事件helper.on = function(target, type, handler) {if(target.addEventListener) {target.addEventListener(type, handler, false);} else {target.attachEvent("on" + type,function(event) {return handler.call(target, event);}, false);}};//取消事件監(jiān)聽helper.remove = function(target, type, handler) {if(target.removeEventListener) {target.removeEventListener(type, handler);} else {target.detachEvent("on" + type,function(event) {return handler.call(target, event);}, true);}}; 復制代碼

瀏覽器 hack

一、瀏覽器兼容性問題總結(jié)

**
**1、雙倍浮動邊距：
原因：多個并列浮動元素設置了左或右邊界值（x），ie6下第一個浮動元素的左或右的邊界值為2倍(2x);
解決：為第一個浮動元素添加display:inline;樣式；

2、高度不能自適應：
原因：多個并列浮動元素的父級高度不能被撐開。
解決：在最后一個浮動元素后添加

.clear {clear:both;}

3、上下邊界不被識別：
原因：父級元素未指定高度，margin-top和margin-bottom解析錯誤
解決：在該元素的父一級元素上添加樣式：overflow:auto; display:inline-block;
備注：當元素被設置成inline-block時候，最后給該元素指定寬度；

4、IE6不識別微型高度：
原因：IE6不能識別低于當前字高的高度
解決：為該元素設置font-size:0 / overflow:hidden;

5、IE6鏈接偽類的問題：
原因：IE6不識別P:hover,只能識別a:hover
解決：用a:hover替換之。

6、IE6、7階梯列表問題：
原因：浮動元素未指定寬度；
解決：為浮動元素指定確定寬度

二、兼容（HACK）技術

**
**1、屬性過濾：

#nav { _margin:100px; /*只IE6識別*/ *margin:100px; /*只IE6、IE7識別*/ margin:100px\0/; /*只IE8識別*/ \9{IE6-10} }

2、選擇器過濾：

* html #nav {margin:10px; border:1px #f00 solid;} /*僅IE6識別*/ *+html #nav {margin:100px; border:1px #f00 solid;} /*僅IE7識別*/ /*針對Firefox*/ @-moz-document url-prefix() { #nav{ width:200px; } } /*針對Safari & Chrome*/ @media screen and (-webkit-min-device-pixel-ratio:0) { #nav{ width:300px; } }

備注：關于Chrome中文版12號以下的字體不識別，解決方案，設置樣式如下：

html {-webkit-text-size-adjust:none;} /*針對Opera*/ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { #nav{ width:400px; } }

3、樣式表過濾

<!--[if ie 6]> 僅ie6識別的html <![endif]--> <!--[if lt ie 6]> 小于ie6識別的html <![endif]--> <!--[if gt ie 6]> 大于ie6識別的html <![endif]--> <!--[if ie]> 僅ie識別的html <![endif]--> <!--[if lte ie 6]> 小于等于ie6識別的html <![endif]--> <!--[if gte ie 6]> 大于等于ie6識別的html <![endif]-->

三、注意事項

**記得清除漂浮。(在具有float元素的容器底部加入清除漂浮)
漂浮元素盡量給一個確定的寬度。
盡量使用padding代替margin。
若同時有float及margin，加入display:inline。
盡量避免使用絕對定位進行布局；若使用，需明確指定z-index, top, left；
盡量避免使用半透明png圖片(PNG-24)；若使用，用PNG修復補丁修復之；
若出現(xiàn)寬度被撐開現(xiàn)象，設置overflow:hidden;
若出現(xiàn)莫名padding，設置font-size:0及overflow:hidden;

四、其他技巧

1、火狐下給 div 設置 padding 后會導致 width 和 height 增加, 但IE不會.(可用!important解決)
2、 居中問題.
a).垂直居中.將 line-height 設置為 當前 div 相同的高度, 再通過 vertical-align: middle.( 注意內(nèi)容不要換行.)
b).水平居中. margin: 0 auto;(當然不是萬能)
3、若需給 a 標簽內(nèi)內(nèi)容加上 樣式, 需要設置 display: block;(常見于導航標簽)
4、FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題.
5、ul 標簽在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導航標簽和內(nèi)容列表)
6、作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應.
7、關于手形光標. cursor: pointer. 而hand 只適用于 IE.

9、不同分辨率兼容問題

一.根據(jù)不同的分辨率，加載不同的CSS樣式文件

這個方法的思路是，分別針對800、1280、1440、1600、1920等分辨率，創(chuàng)建不同的css文件。然后在各種分辨率下，寫css樣式表。可能你會感覺針對一個頁面，要寫這么多不同的css樣式表，這個工作量肯定很大。其實也不盡然，根據(jù)我在這個項目中的實踐，發(fā)現(xiàn)這個工作量其實是比較小的。

首先，我們在做項目的時候，一般情況下會有一些范圍限制，比如這個項目只需要適配1280~1920分辨率即可。而且各個分辨率之間，我們有的時候只是對頁面上的元素進行寬高、尺寸、位置等進行調(diào)整，整體的一個框架是相似或者說是相同的。

不僅如此，有的時候項目的要求不高，沒有比較1:1高度還原設計稿，那么這個時候，我們在1440分辨率下的樣式表，在1280分辨率下也是實用的，這個時候，我們的工作量又進一步減少。

這個時候，我們可以先完成一個分辨率下的css樣式表。然后在這個基礎之上，對其他分辨率進行調(diào)整即可。這個過程我們只需要調(diào)整一些參數(shù)即可。

比如在我的項目里面，這對不同的分辨率，我只做了三個樣式表

樣式表

這個時候，我們只需要在我們的HTML頁面的標簽中，使用js，根據(jù)不同的電腦分辨率，加載不同的css樣式表。**注意這里的js一定要寫在標簽里面，這樣在加載頁面內(nèi)容之前，可以提前把css樣式表加載出來**

<script>// 分辨率大于等于1680，大部分為1920的情況下，調(diào)用此cssif(window.screen.width >= 1680){document.write('<link rel="stylesheet" href="css/index_1920.css">');}// 分辨率再在1600-1680的情況下，調(diào)用此csselse if(window.screen.width >= 1600){document.write('<link rel="stylesheet" href="css/index_1600.css">');}// 分辨率小于1600的情況下，調(diào)用此csselse{document.write('<link rel="stylesheet" href="css/index.css">');} </script>

這樣的話，就可以根據(jù)不同電腦的分辨率，就在不同的css樣式表。由此我們便完成了頁面使用不同的分辨率。

二.采用媒體查詢

媒體查詢是CSS3的新特性，絕大多數(shù)瀏覽器都可兼容這一特性。這個方法的思路也是根據(jù)不同的分辨率，應用不同的css樣式。

這個思路和和方法一差不多，或者說方法一的思路和這個思路差不多，畢竟這也是官方的做法。我們有兩種使用媒體查詢的方式。

Media所有參數(shù)匯總

width:瀏覽器可視寬度。
height:瀏覽器可視高度。
device-width:設備屏幕的寬度。
device-height:設備屏幕的高度。
orientation:檢測設備目前處于橫向還是縱向狀態(tài)。
aspect-ratio:檢測瀏覽器可視寬度和高度的比例。(例如：aspect-ratio:16/9)
device-aspect-ratio:檢測設備的寬度和高度的比例。
color:檢測顏色的位數(shù)。（例如：min-color:32就會檢測設備是否擁有32位顏色）
color-index:檢查設備顏色索引表中的顏色，他的值不能是負數(shù)。
monochrome:檢測單色楨緩沖區(qū)域中的每個像素的位數(shù)。（這個太高級，估計咱很少會用的到）
resolution:檢測屏幕或打印機的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
grid:檢測輸出的設備是網(wǎng)格的還是位圖設備。

1.根據(jù)不同的分辨率，引入不同的css樣式表

這個方法和方法一相同，也是通過判斷電腦的分辨率，來引入相對應的css樣式表。

<!-- 分辨率低于1280，采用test-01.css樣式表 --> <link rel="stylesheet" media="screen and (max-device-width:1280px)" href="test-01.css"> <!-- 分辨率高于1400，采用test-02.css樣式表 --> <link rel="stylesheet" media="screen and (min-device-width:1440px)" href="test-02.css">

2.在同一個css樣式表中，根據(jù)不同的分辨率，寫不同的css樣式

這個方法只有一個css演示表，在這個樣式表里面，根據(jù)不同的分辨率，寫不同的css樣式。

<style media="screen">/*分辨率低于1280，采用下面的樣式*/@media screen and (max-device-width:1280px){div{width: 200px;height: 200px;background-color: green;}}/*分辨率高于1440，采用下面的樣式*/@media screen and (min-device-width: 1440px){div{width: 300px;height: 300px;background-color: red;}} </style>

PC端頁面適配

以設計圖 1920 寬度為例：
css中存在一種叫vw的單位，是針對瀏覽器寬度為基礎的百分比單位，與%的區(qū)別在于，子元素%是相對于父級元素的寬度來計算的，而vw則是針對瀏覽器的寬度來計算的。打個比方，瀏覽器寬度為1920px，父級元素寬度為100px，子元素寬度寫50%則是50px；而子元素如果寫50vw，則其寬度則為瀏覽器寬度的50%即960px；

弄清楚這點之后，我們可以計算得出：
100vw = 1920px;
1vw = 19.2px
1px = 1 / 19.2vw;

由此，我們可以設置變量 @1px : 1 / 19.2vw;

如此一來，在寫樣式的時候就可以使用到@1px進行計算，如圖：

這樣如果瀏覽器大小發(fā)生變化，對應的vw值也會改變，自然vw計算的px也會發(fā)生改變，就達到了我們兼容各種瀏覽器的目的；
但是，這個方法美中不足的是，當瀏覽器寬度逐漸變小時，margin padding等值也會越來越小，而字體最小是12px，所以大概在800px左右的時候元素會擠在一塊，雖然我們現(xiàn)在不必做800分辨率的PC兼容，一般最小兼容到1200，但是為了嚴謹，我們還是用媒體查詢兼容一下1200以下分辨率的

當然，也不是說按1200設計圖的元素屬性值重寫一遍

重點
1200 / 1920 = 0.625
我們知道了兩者的比例，這時候再設置一個變量，也可以叫常量，因為這時候我們要設置一個固定的值

因為按1920設計圖來的，所以，我們設置1200下的每1px為1920的0.625px；

@1200-1px : 0.625px

這時候?qū)?br /> @media screen and(max-width:1201){
復制以上css代碼，并把@1px全局替換為@1200-1px;
}
如圖：

移動端的布局方案

1、使用 媒體查詢+rem單位

2、使用vw單位 + rem單位布局

3、使用js + rem單位布局

4、使用sass + vw單位布局

1、使用 媒體查詢+rem單位

原理：利用媒體查詢檢測設備的特性，根據(jù)設備來改變根節(jié)點的字體大小

實現(xiàn)步驟：

(1)通過媒體查詢來改變根節(jié)點的字體大小

@media all and (min-width: 320px) {html {font-size: 32px;} } @media all and (min-width: 375px){html{font-size: 37.5px;} }

(2)頁面當中元素的布局都用rem單位，就能達到適配的狀態(tài)

div {width: 10rem;height: 100px;background: red; }

缺點：不能精細的適配到每一個設備，代碼量較大

2、使用vw單位 + rem單位布局

原理：屏幕大小變化的時候，用vw作為單位的值也會跟著改變，用vw作為根節(jié)點的字體大小的單位，所以在不同的屏幕大小或者設備中，根節(jié)點的字體大小的值就不一樣，rem單位得到的值就不一樣

實現(xiàn)步驟：

(1)使用vw單位作為 HTML font-size的單位(計算)

// 如果設計圖為750px，那么我們需要設置一下代碼

html{

font-size: 13.33333333vw

}

(2)頁面所有布局使用rem單位

div{

//這樣我們寫1rem即為設計稿上的100px

width:1rem; // 在頁面中顯示的值為 50px

height:1rem;

}

問題：為什么根節(jié)點字體大小為寫13.33333333vw，為什么100px = 1rem?

750px = 100vw

1px = 100 / 750 = 0.133333333333333vw

100px = 0.133333333333333vw *100px = 13.33333333vw

rem的 值是根據(jù) 跟根節(jié)點的字體大小來計算的，設置根節(jié)點的字體大小為100px，是為了方便計算

最終于得出 100px = 1rem

3、使用js + rem單位布局

原理：通過js獲取設備的寬度，來計算根節(jié)點的字體大小，rem得出來的值就不一樣，就到達不同頁面能適配

我們可以在編輯器里面安裝一個擴展插件來自動計算px---->rem

(1)在vscode的擴展里面安裝插件：cssrem

(2)然后在vscode配置文件中更改：rootfontsize為設計圖 / 10的數(shù)字

(3)在頁面中使用script標簽引入獲取設備的特性更改根節(jié)點地質(zhì)體大小的 js文件

(4)在頁面中的所有布局都用rem作為單位，設計圖量處的值為多少就寫多少，但是要選擇轉(zhuǎn)換成rem的那個值

4、使用sass + vw單位布局

原理：使用vw作為頁面所有元素的布局單位，簡化之前rem + vw結(jié)合的布局

(1)使用sass的函數(shù)：

@function vw($px) {@return ($px / 設計圖的寬度) * 100vw; }

(2)頁面中布局

header {height: vw(量出來的值);background: green;font-size: vw(48); }

postcss-px-to-viewport

10、css選擇器

選擇器的分類與優(yōu)先級

• 標簽選擇器：優(yōu)先級加權值為 1。
• 偽元素或偽對象選擇器：優(yōu)先級加權值為 1。
• 類選擇器：優(yōu)先級加權值為 10。
• 屬性選擇器：優(yōu)先級加權值為 10。
• ID選擇器：優(yōu)先級加權值為 100。
• 其他選擇器：優(yōu)先級加權值為 0，如通配選擇器等。

然后，以上面加權值數(shù)為起點來計算每個樣式中選擇器的總加權值數(shù)。計算的規(guī)則如下：

• 統(tǒng)計選擇器中 ID 選擇器的個數(shù)，然后乘以100。
• 統(tǒng)計選擇器中類選擇器的個數(shù)，然后乘以 10。
• 統(tǒng)計選擇器中的標簽選擇器的個數(shù)，然后乘以 1。

依此方法類推，最后把所有加權值數(shù)相加，即可得到當前選擇器的總加權值，最后根據(jù)加權值來決定哪個樣式的優(yōu)先級大。

link和@import區(qū)別

頁面中使用CSS的方式主要有3種：行內(nèi)添加定義style屬性值，頁面頭部內(nèi)嵌調(diào)用和外面鏈接調(diào)用，其中外面引用有兩種：link和@import。外部引用CSS兩種方式link和@import的方式分別是：

XML/HTML代碼 <link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" /> XML/HTML代碼 <style type="text/css" media="screen"> @import url("CSS文件"); </style>

兩者都是外部引用CSS的方式，但是存在一定的區(qū)別：

區(qū)別1：link是XHTML標簽，除加載CSS外，還可以定義RSS等其他事務；@import屬于CSS范疇只能加載CSS

區(qū)別2：link引用CSS時，在頁面載入時同時加載；@import需要頁面網(wǎng)頁完全載入以后加載。

區(qū)別3：link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

區(qū)別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。

補充：@import最優(yōu)寫法
@import的寫法一般有下列幾種：

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別 @import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不識別 @import url(style.css) //Windows NS4, Macintosh NS4不識別 @import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別 @import url("style.css") //Windows NS4, Macintosh NS4不識別

由上分析知道，@import url(style.css) 和@import url(“style.css”)是最優(yōu)的選擇，兼容的瀏覽器最多。

從字節(jié)優(yōu)化的角度來看@import url(style.css)最值得推薦

11、繪制一像素的線

canvas 、height、hr、偽元素上設置媒體查詢+transfrom scaleY、邊框

ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ctx.stroke();

12、獲取dom元素的寬高

1、Element.style.width/height

只能獲取內(nèi)聯(lián)樣式

var ele = document.getElementById('element'); console.log(ele.style.height); // '100px'

2、window.getComputedStyle(ele).width/height

IE9以上 可獲取實時的style

var ele = document.getElementById('element'); console.log(window.getComputedStyle(ele).width); // '100px' console.log(window.getComputedStyle(ele).height); // '100px'

3、Element.currentStyle.width/height

功能與第二點相同，只存在于舊版本IE中(IE9以下)，除了做舊版IE兼容，就不要用它了。

4、Element.getBoundingClientRect().width/height

除了能夠獲取寬高，還能獲取元素位置等信息

var ele = document.getElementById('element'); console.log(ele.getBoundingClientRect().width); // 100 console.log(ele.getBoundingClientRect().height); // 100

總結(jié)

以上是生活随笔為你收集整理的前端面试超全整理0（html css）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。