在網頁中,乙個元素所占用的空間的大小是有四個部分組成的,元素本身的內容(content)、元素的內邊距(padding)、元素的外邊距(margin)、元素的邊框(border)共同組成的。這四個部分有的可以顯示相應的內容,有的部分只能用來分隔相鄰的區域,這四個部分組成了css中的元素的盒模型。
行內元素: a、span、b、img、strong、input、select、lable、em、button、textarea
塊級元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素: br、hr、link、input、img
同步就是阻塞模式,就是指乙個程序在執行某個請求的時候,如果這個請求需要一段時間才能返回這個請求的資料的時候,這個請求的程序會一直的的等待下去,其他的請求需要在後面一直等待,直到上個請求收到返回的資訊,後面的請求才能繼續執行下去。例如:印表機
非同步就是指程序不需要一直等待下去,當執行乙個請求後,不需要等待返回的資訊,繼續執行下一條的請求,不需要管理其他程序的狀態,當有程序的訊息返回到系統模組的時候,會有程序專門的進行處理,這樣可以提供執行的效率。
如果有兩個任務m和n,當採用同步的方式執行程式的時候完成這兩個任務花費的總的時間為m+n。但是採用非同步的方式執行程式的話,最大的執行時間為max。
px和em都是長度單位。
區別: px就是畫素的值是固定不變的,指定的的多少就是多少,計算也比較容易。
em的值是不固定的,em的大小會隨著父級元素的字型·的大小而變化,瀏覽器預設的字型大小都是16px,所以對於未修改的瀏覽器都符合,1em=16px,即0.75em=12px;其他的自行換算即可。
漸進增強:增強意味著擴充,頁面設計的漸進增強,就是在針對低版本的瀏覽器時只保證**的必備的基本功能,保留產品的核心模組,讓後隨著瀏覽器版本的提公升,進行動畫效果、產品互動等方面的增加和追加更多的功能來提高使用者體驗。
優雅降級:降級意味著功能衰減,一開始就針對高版本的瀏覽器進行開發,讓後再對低版本的瀏覽器進行相容。
區別:
a.優雅降級是從複雜的現狀開始,並且通過減少使用者體驗的供給來對瀏覽器的低版本進行相容。
b.漸進增強則是從乙個非常基礎的只附帶有產品的核心模組的版本開始,隨著瀏覽器的不斷公升級而不斷的擴充,以適應產品和時代的發展。
c.降級意味著向回看,而漸進增強意味著朝前看,同時保證其根基處在安全的地帶。
一般來講css hack 就是針對不同的瀏覽器版本寫不同的css,就是css hack。
ie瀏覽器的hack分為三種,條件hack、屬性級hack、選擇符hack。例如:
1.條件hack
只在ie瀏覽器內生效2.屬性hack
.test
3.選擇符hack
html.test
/for ie6 and earlier/
html.test
/for ie7/
主要上面的所有的顏色記得在生產環境中一定要換算成16進製制的數來進行表示,這個只是個demo。
css hack的書寫順序,一般將使用範圍廣的、被識別能力強的css定義在前面。
css hack的利弊:
一般情況下盡量不使用css hack,但是在有些情況下為了顧及使用者的體驗實現優雅降級,不得已的使用hack,例如:**大量使用css3屬性,但是在ie8以下的版本根本不相容css3屬性,在其他的chrom、firefox、ie9等主流瀏覽器下正常渲染。這種情況下就需要ie8以下的hack出馬,來對低版本的瀏覽器進行相容適配 。
雖然使用了hack會讓頁面在各個瀏覽器的顯示一直。但是過多的濫用會造成html文件混亂不堪,在管理和維護方面都會有不小的負擔。希望廠商能夠標準瀏覽器市場,讓標準越來越趨向統一化,拋棄陳舊的ie hack。
行內元素垂直居中:通過在父元素中設定text-align屬性,讓子元素的文字進行居中。通過line-height屬性的值等於父元素的高度即可。
='father'
>
='son'
>
<
/div>
<
/div>
.father
.son
<
/style> 最常用的方法。不定寬高的塊級父級元素的水平垂直居中,通過子絕(絕對定位)父相(相對定位)的的定位方式,讓後用百分比設定top和left的值;再用margin-left、margin-top消除子元素一半偏移量。
前端基礎面試題
padding 內邊距 margin 外邊距 border 邊框 1 外盒尺寸計算 元素空間尺寸 element空間高度 content height padding border margin element 空間寬度 content width padding border margin 2 內...
前端基礎面試題
h5 新特性 c3 的新特性 不常考 答幾個就好了 css3 背景 css3 漸變 css3 文字效果 css3 字型 css3 過渡 css3 動畫 css3 調整尺寸 css3 查詢 先載入主程序再處理任務佇列的任務,先處理巨集任務再處理微任務 微任務 promise 巨集任務 settimeo...
前端面試題 js部分
1 dom操作 怎樣新增 移除 移動 複製 建立和查詢節點?建立新節點 createdocumentframent 建立乙個dom片段 createelement 建立乙個具體的元素 createtextnode 建立乙個文字節點 移除節點 removechild 替換節點 replacechild...