前端面试超全整理0（html css）
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設(shè)為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é)構(gòu)更加分離
?屬性：
增強表單，主要是增強了input的type屬性；
meta增加charset以設(shè)置字符集；
script增加async以異步加載腳本
?存儲：增加localStorage、sessionStorage和indexedDB，引入了application cache對web和應(yīng)用進行緩存
?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 表示通過什么方法來進行平滑過渡。
| 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功能:定義多個關(guān)鍵幀
Animations功能與Transitions功能相同，都是通過改變元素的屬性值來實現(xiàn)動畫效果的。
它們的區(qū)別在于：使用Transitions功能是只能通過指定屬性的開始值與結(jié)束值。然后在這兩個屬性值之間進行平滑過渡的方式來實現(xiàn)動畫效果，因此不能實現(xiàn)復(fù)雜的動畫效果；
而Animations則通過定義多個關(guān)鍵幀以及定義每個關(guān)鍵幀中元素的屬性值來實現(xiàn)更為復(fù)雜的動畫效果。
**語法：**animations: name duration timing-function iteration-count;
name: 關(guān)鍵幀集合名（通過此名創(chuàng)建關(guān)鍵幀的集合）
duration: 表示在多長時間內(nèi)完成屬性值的平滑過渡
timing-function: 表示通過什么方法來進行平滑過渡
iteration-count: 迭代循環(huán)次數(shù)，可設(shè)置為具體數(shù)值，或者設(shè)置為infinite進行無限循環(huán)，默認為1.
用法：@-webkit-keyframes 關(guān)鍵幀的集合名 {創(chuàng)建關(guān)鍵幀的代碼}
如下面的代碼：
@-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布局
設(shè)為 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個值，具體對齊方式與軸的方向有關(guān)。下面假設(shè)主軸為從左到右。
- 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個值。具體的對齊方式與交叉軸的方向有關(guān)，下面假設(shè)交叉軸從上到下。
- flex-start：交叉軸的起點對齊。
- flex-end：交叉軸的終點對齊。
- center：交叉軸的中點對齊。
- baseline: 項目的第一行文字的基線對齊。
- stretch（默認值）：如果項目未設(shè)置高度或設(shè)為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個屬性設(shè)置在項目上。
- 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 */ }它可以設(shè)為跟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)先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關(guān)值。
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 特性及應(yīng)用
1.當元素在同一個BFC中，垂直方向上的margin會重疊，解決方法是將其放在不同的 BFC 容器中。
2.BFC 可以包含浮動的元素（清除浮動），只要設(shè)置容器overflow：hidden
3.BFC 可以阻止元素被浮動元素覆蓋（文字環(huán)繞問題），只要設(shè)置元素overflow：hidden
7、清除浮動
在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。但是當子元素設(shè)置浮動之后，子元素會完全脫離文檔流，此時將會導(dǎo)致子元素無法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。
? 解決方案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);}}; 復(fù)制代碼瀏覽器 hack
一、瀏覽器兼容性問題總結(jié)
**
**1、雙倍浮動邊距：
原因：多個并列浮動元素設(shè)置了左或右邊界值（x），ie6下第一個浮動元素的左或右的邊界值為2倍(2x);
解決：為第一個浮動元素添加display:inline;樣式；
2、高度不能自適應(yīng)：
原因：多個并列浮動元素的父級高度不能被撐開。
解決：在最后一個浮動元素后添加
3、上下邊界不被識別：
原因：父級元素未指定高度，margin-top和margin-bottom解析錯誤
解決：在該元素的父一級元素上添加樣式：overflow:auto; display:inline-block;
備注：當元素被設(shè)置成inline-block時候，最后給該元素指定寬度；
4、IE6不識別微型高度：
原因：IE6不能識別低于當前字高的高度
解決：為該元素設(shè)置font-size:0 / overflow:hidden;
5、IE6鏈接偽類的問題：
原因：IE6不識別P:hover,只能識別a:hover
解決：用a:hover替換之。
6、IE6、7階梯列表問題：
原因：浮動元素未指定寬度；
解決：為浮動元素指定確定寬度
二、兼容（HACK）技術(shù)
**
**1、屬性過濾：
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; } }備注：關(guān)于Chrome中文版12號以下的字體不識別，解決方案，設(shè)置樣式如下：
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修復(fù)補丁修復(fù)之；
若出現(xiàn)寬度被撐開現(xiàn)象，設(shè)置overflow:hidden;
若出現(xiàn)莫名padding，設(shè)置font-size:0及overflow:hidden;
四、其他技巧
1、火狐下給 div 設(shè)置 padding 后會導(dǎo)致 width 和 height 增加, 但IE不會.(可用!important解決)
2、 居中問題.
a).垂直居中.將 line-height 設(shè)置為 當前 div 相同的高度, 再通過 vertical-align: middle.( 注意內(nèi)容不要換行.)
b).水平居中. margin: 0 auto;(當然不是萬能)
3、若需給 a 標簽內(nèi)內(nèi)容加上 樣式, 需要設(shè)置 display: block;(常見于導(dǎo)航標簽)
4、FF 和 IE 對 BOX 理解的差異導(dǎo)致相差 2px 的還有設(shè)為 float的div在ie下 margin加倍等問題.
5、ul 標簽在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導(dǎo)航標簽和內(nèi)容列表)
6、作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應(yīng).
7、關(guān)于手形光標. cursor: pointer. 而hand 只適用于 IE.
9、不同分辨率兼容問題
一.根據(jù)不同的分辨率，加載不同的CSS樣式文件
這個方法的思路是，分別針對800、1280、1440、1600、1920等分辨率，創(chuàng)建不同的css文件。然后在各種分辨率下，寫css樣式表?？赡苣銜杏X針對一個頁面，要寫這么多不同的css樣式表，這個工作量肯定很大。其實也不盡然，根據(jù)我在這個項目中的實踐，發(fā)現(xiàn)這個工作量其實是比較小的。
首先，我們在做項目的時候，一般情況下會有一些范圍限制，比如這個項目只需要適配1280~1920分辨率即可。而且各個分辨率之間，我們有的時候只是對頁面上的元素進行寬高、尺寸、位置等進行調(diào)整，整體的一個框架是相似或者說是相同的。
不僅如此，有的時候項目的要求不高，沒有比較1:1高度還原設(shè)計稿，那么這個時候，我們在1440分辨率下的樣式表，在1280分辨率下也是實用的，這個時候，我們的工作量又進一步減少。
這個時候，我們可以先完成一個分辨率下的css樣式表。然后在這個基礎(chǔ)之上，對其他分辨率進行調(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ù)不同的分辨率，應(yīng)用不同的css樣式。
這個思路和和方法一差不多，或者說方法一的思路和這個思路差不多，畢竟這也是官方的做法。我們有兩種使用媒體查詢的方式。
Media所有參數(shù)匯總
width:瀏覽器可視寬度。
height:瀏覽器可視高度。
device-width:設(shè)備屏幕的寬度。
device-height:設(shè)備屏幕的高度。
orientation:檢測設(shè)備目前處于橫向還是縱向狀態(tài)。
aspect-ratio:檢測瀏覽器可視寬度和高度的比例。(例如：aspect-ratio:16/9)
device-aspect-ratio:檢測設(shè)備的寬度和高度的比例。
color:檢測顏色的位數(shù)。（例如：min-color:32就會檢測設(shè)備是否擁有32位顏色）
color-index:檢查設(shè)備顏色索引表中的顏色，他的值不能是負數(shù)。
monochrome:檢測單色楨緩沖區(qū)域中的每個像素的位數(shù)。（這個太高級，估計咱很少會用的到）
resolution:檢測屏幕或打印機的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
grid:檢測輸出的設(shè)備是網(wǎng)格的還是位圖設(shè)備。
1.根據(jù)不同的分辨率，引入不同的css樣式表
這個方法和方法一相同，也是通過判斷電腦的分辨率，來引入相對應(yīng)的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端頁面適配
以設(shè)計圖 1920 寬度為例：
css中存在一種叫vw的單位，是針對瀏覽器寬度為基礎(chǔ)的百分比單位，與%的區(qū)別在于，子元素%是相對于父級元素的寬度來計算的，而vw則是針對瀏覽器的寬度來計算的。打個比方，瀏覽器寬度為1920px，父級元素寬度為100px，子元素寬度寫50%則是50px；而子元素如果寫50vw，則其寬度則為瀏覽器寬度的50%即960px；
弄清楚這點之后，我們可以計算得出：
100vw = 1920px;
1vw = 19.2px
1px = 1 / 19.2vw;
由此，我們可以設(shè)置變量 @1px : 1 / 19.2vw;
如此一來，在寫樣式的時候就可以使用到@1px進行計算，如圖：
這樣如果瀏覽器大小發(fā)生變化，對應(yīng)的vw值也會改變，自然vw計算的px也會發(fā)生改變，就達到了我們兼容各種瀏覽器的目的；
但是，這個方法美中不足的是，當瀏覽器寬度逐漸變小時，margin padding等值也會越來越小，而字體最小是12px，所以大概在800px左右的時候元素會擠在一塊，雖然我們現(xiàn)在不必做800分辨率的PC兼容，一般最小兼容到1200，但是為了嚴謹，我們還是用媒體查詢兼容一下1200以下分辨率的
當然，也不是說按1200設(shè)計圖的元素屬性值重寫一遍
重點
1200 / 1920 = 0.625
我們知道了兩者的比例，這時候再設(shè)置一個變量，也可以叫常量，因為這時候我們要設(shè)置一個固定的值
因為按1920設(shè)計圖來的，所以，我們設(shè)置1200下的每1px為1920的0.625px；
@1200-1px : 0.625px
這時候?qū)?br /> @media screen and(max-width:1201){
復(fù)制以上css代碼，并把@1px全局替換為@1200-1px;
}
如圖：
移動端的布局方案
1、使用 媒體查詢+rem單位
2、使用vw單位 + rem單位布局
3、使用js + rem單位布局
4、使用sass + vw單位布局
1、使用 媒體查詢+rem單位
原理：利用媒體查詢檢測設(shè)備的特性，根據(jù)設(shè)備來改變根節(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; }缺點：不能精細的適配到每一個設(shè)備，代碼量較大
2、使用vw單位 + rem單位布局
原理：屏幕大小變化的時候，用vw作為單位的值也會跟著改變，用vw作為根節(jié)點的字體大小的單位，所以在不同的屏幕大小或者設(shè)備中，根節(jié)點的字體大小的值就不一樣，rem單位得到的值就不一樣
實現(xiàn)步驟：
(1)使用vw單位作為 HTML font-size的單位(計算)
// 如果設(shè)計圖為750px，那么我們需要設(shè)置一下代碼
html{
font-size: 13.33333333vw
}
(2)頁面所有布局使用rem單位
div{
//這樣我們寫1rem即為設(shè)計稿上的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é)點的字體大小來計算的，設(shè)置根節(jié)點的字體大小為100px，是為了方便計算
最終于得出 100px = 1rem
3、使用js + rem單位布局
原理：通過js獲取設(shè)備的寬度，來計算根節(jié)點的字體大小，rem得出來的值就不一樣，就到達不同頁面能適配
我們可以在編輯器里面安裝一個擴展插件來自動計算px---->rem
(1)在vscode的擴展里面安裝插件：cssrem
(2)然后在vscode配置文件中更改：rootfontsize為設(shè)計圖 / 10的數(shù)字
(3)在頁面中使用script標簽引入獲取設(shè)備的特性更改根節(jié)點地質(zhì)體大小的 js文件
(4)在頁面中的所有布局都用rem作為單位，設(shè)計圖量處的值為多少就寫多少，但是要選擇轉(zhuǎn)換成rem的那個值
4、使用sass + vw單位布局
原理：使用vw作為頁面所有元素的布局單位，簡化之前rem + vw結(jié)合的布局
(1)使用sass的函數(shù)：
@function vw($px) {@return ($px / 設(shè)計圖的寬度) * 100vw; }(2)頁面中布局
header {height: vw(量出來的值);background: green;font-size: vw(48); }postcss-px-to-viewport
10、css選擇器
選擇器的分類與優(yōu)先級
- 標簽選擇器：優(yōu)先級加權(quán)值為 1。
- 偽元素或偽對象選擇器：優(yōu)先級加權(quán)值為 1。
- 類選擇器：優(yōu)先級加權(quán)值為 10。
- 屬性選擇器：優(yōu)先級加權(quán)值為 10。
- ID選擇器：優(yōu)先級加權(quán)值為 100。
- 其他選擇器：優(yōu)先級加權(quán)值為 0，如通配選擇器等。
然后，以上面加權(quán)值數(shù)為起點來計算每個樣式中選擇器的總加權(quán)值數(shù)。計算的規(guī)則如下：
- 統(tǒng)計選擇器中 ID 選擇器的個數(shù)，然后乘以100。
- 統(tǒng)計選擇器中類選擇器的個數(shù)，然后乘以 10。
- 統(tǒng)計選擇器中的標簽選擇器的個數(shù)，然后乘以 1。
依此方法類推，最后把所有加權(quán)值數(shù)相加，即可得到當前選擇器的總加權(quán)值，最后根據(jù)加權(quán)值來決定哪個樣式的優(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等其他事務(wù)；@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 url(style.css) 和@import url(“style.css”)是最優(yōu)的選擇，兼容的瀏覽器最多。
從字節(jié)優(yōu)化的角度來看@import url(style.css)最值得推薦
11、繪制一像素的線
canvas 、height、hr、偽元素上設(shè)置媒體查詢+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)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 树模型系列之XGBoost算法
- 下一篇： 无线WiFi通信模组方案，智能家居无线物