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

1、****標準盒模型中width指的是內容區域content的寬度；height指的是內容區域content**的高度。

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

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

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

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

默認值為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）改為內部陰影。

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

?標簽：

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

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

?屬性：

增強表單，主要是增強了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功能通過將元素的某個屬性從一個屬性值在指定的時間內平滑過渡到另一個屬性值來實現動畫功能。

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

transition: property | duration | timing-function | delay

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

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

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

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

ease	規定慢速開始，然后變快，然后慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	規定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	規定以慢速結束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	規定以慢速開始和結束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數中定義自己的值?？赡艿闹凳?0 至 1 之間的數值。

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貝塞爾曲線目前用不到，可以忽略不計，我們現在來理解下 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功能相同，都是通過改變元素的屬性值來實現動畫效果的。

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

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

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

name: 關鍵幀集合名（通過此名創建關鍵幀的集合）

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

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

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

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

如下面的代碼：

@-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：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

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：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
• stretch（默認值）：軸線占滿整個交叉軸。

二、項目的屬性

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

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

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

order屬性定義項目的排列順序。數值越小，排列越靠前，默認為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，則前者占據的剩余空間將比其他項多一倍。

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屬性 將占據固定空間

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

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

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

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)。

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

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、實現一個元素水平垂直居中

1）缺點：如果不知道寬高，這個效果就沒法實現。如果數據除不盡，實現的效果存在誤差。

{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）優點：可以實現一個未知寬高的元素水平垂直居中 缺點：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 特性的元素可以看作是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素

只要元素滿足下面任一條件即可觸發 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 可以阻止元素被浮動元素覆蓋（文字環繞問題），只要設置元素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添加)

? 優點：簡單、代碼少、瀏覽器支持好

? 缺點：不能和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);}};//取消事件監聽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

一、瀏覽器兼容性問題總結

**
**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修復補丁修復之；
若出現寬度被撐開現象，設置overflow:hidden;
若出現莫名padding，設置font-size:0及overflow:hidden;

四、其他技巧

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

9、不同分辨率兼容問題

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

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

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

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

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

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

樣式表

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

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

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

二.采用媒體查詢

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

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

Media所有參數匯總

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

1.根據不同的分辨率，引入不同的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樣式表中，根據不同的分辨率，寫不同的css樣式

這個方法只有一個css演示表，在這個樣式表里面，根據不同的分辨率，寫不同的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的單位，是針對瀏覽器寬度為基礎的百分比單位，與%的區別在于，子元素%是相對于父級元素的寬度來計算的，而vw則是針對瀏覽器的寬度來計算的。打個比方，瀏覽器寬度為1920px，父級元素寬度為100px，子元素寬度寫50%則是50px；而子元素如果寫50vw，則其寬度則為瀏覽器寬度的50%即960px；

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

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

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

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

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

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

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

@1200-1px : 0.625px

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

移動端的布局方案

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

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

3、使用js + rem單位布局

4、使用sass + vw單位布局

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

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

實現步驟：

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

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

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

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

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

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

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

實現步驟：

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

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

html{

font-size: 13.33333333vw

}

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

div{

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

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

height:1rem;

}

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

750px = 100vw

1px = 100 / 750 = 0.133333333333333vw

100px = 0.133333333333333vw *100px = 13.33333333vw

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

最終于得出 100px = 1rem

3、使用js + rem單位布局

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

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

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

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

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

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

4、使用sass + vw單位布局

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

(1)使用sass的函數：

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

(2)頁面中布局

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

postcss-px-to-viewport

10、css選擇器

選擇器的分類與優先級

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

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

• 統計選擇器中 ID 選擇器的個數，然后乘以100。
• 統計選擇器中類選擇器的個數，然后乘以 10。
• 統計選擇器中的標簽選擇器的個數，然后乘以 1。

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

link和@import區別

頁面中使用CSS的方式主要有3種：行內添加定義style屬性值，頁面頭部內嵌調用和外面鏈接調用，其中外面引用有兩種：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的方式，但是存在一定的區別：

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

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

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

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

補充：@import最優寫法
@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”)是最優的選擇，兼容的瀏覽器最多。

從字節優化的角度來看@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

只能獲取內聯樣式

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。