前端面试超全整理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通信模组方案,智能家居无线物