国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端常見知識點匯總（面試）-HTML和CSS部分

DevTTL / 1156人閱讀

摘要：一內聯元素與行元素的區別內聯元素即行內元素。絕對定位，相對于定位以外的第一個父元素進行定位，元素脫離文檔流。

一、內聯元素與行元素的區別

1、內聯元素即行內元素。
2、內聯元素，在文檔流中擠在一行；不能設置寬高（即，即使設置了也不管用，例如a標簽）、margin和padding的top和bottom
塊元素，獨占一行；可以設置寬高、margin、padding
3、可以使用display屬性進行修改：display:block|inline-block|inline
4、inline-block
水平排列；有寬高、margin和padding
1）可置換元素——天生的行內塊

  img input button select textarear label

2）行內塊不同于行內元素，可以設置寬高
3）包裹性

  讓元素inline-block化
  inline-block在添加寬高之前，緊緊包裹內容，添加寬高之后就不是了
  block默認寬度100%，設置absolute，變成包裹內容
二、position屬性

1、static
沒有定位，元素出現在正常的文檔流中，默認屬性。
設置left、right、top、bottom、z-index屬性的設置不起作用
2、relative
相對于元素自己的正常位置進行定位，元素在正常的文檔流中
LRTBZ屬性設置起作用
3、fixed
固定定位，相對于瀏覽器窗口定位，即瀏覽器滾動也不會影響元素的位置，且與文檔流無關，因此不占空間，可能會與其他元素重疊。LRTBZ屬性設置起作用。
4、absolute
絕對定位，相對于static定位以外的第一個父元素進行定位，元素脫離文檔流。
注意：body也是父元素

三、display:none;和visibility:hidden;

聯系：都能讓元素不可見

區別：

display:none; visibility:hidden;
元素從渲染樹中消失，渲染的時候不占空間 元素不從渲染書中消失，渲染的時候仍占空間，只是內容不可見
非繼承屬性，子孫節點的消失是由于元素從渲染樹中消失造成的，修改子孫節點的屬性依然無法顯示 繼承屬性，子孫節點消失由于繼承了hidden，設置visibility:visible;可以讓子孫節點顯示
修改常規流中元素的display會造成文檔的重排（回流） 修改visibility屬性只會造成本元素重繪
讀屏器不會讀取display:none;的元素內容； 會讀取

注意：讀屏器即為瀏覽器渲染

四、回流（重排）和重繪

只要某個改動會影響其他元素，就會造成回流。
回流：修改元素的布局樣式，例如width、height、top、margin等會影響整個頁面的布局，瀏覽器會重新執行layout過程，性能開銷很大。（尺寸、位置、隱藏狀態等布局樣式）
重繪：修改元素的非布局樣式，例如，color、background等，不影響整個頁面的布局，瀏覽器只會對該元素重新繪制，開銷相對較小。
注意：回流必將引起重繪，但是重繪不一定會引起回流。
性能優化

使用visibility:hidden;，而不用display:none;隱藏元素

如果需要頻繁地修改DOM樣式，盡量使用預先定義好的CSS的class修改DOM的className.

為需要添加動畫的HTML元素，添加position:absolute|fixed;屬性值，這樣修改該元素的CSS時不會引起回流（動畫最好用CSS3動畫，只會引起兩次重繪）——分析：這是因為絕對定位和固定定位可以讓元素脫離文檔流。

不要使用table布局。因為可能很小的改動，就會引起整個table的重新布局。

——分析：冗余度 table>div>flex
table元素的作用是顯示表格化的數據，不是作為布局工具設置的。
一般使用div+css實現布局。
為什么不用table布局呢？
1、table比其他HTML標記占更多的字節，造成下載延遲，占用服務器更多流量資源。
2、阻擋瀏覽器渲染引擎的渲染順序，會延遲頁面的生成速度，讓用戶等待更久的時間。
如何最小化重繪和回流？
答：
1）對元素進行復雜操作時，可以先用display:none;隱藏，操作完成后再顯示。
2）盡量避免使用table布局
3）避免使用CSS表達式，因為每次調用都會重新計算值
4）需創建多個DOM節點時，使用DocumentFragment創建完后一次性地加入document。例如，

var frag = document.createDocumentFragment()//文檔碎片節點
//將element通過appendChild添加到frag中，再講frag一次性加入document
五、瀏覽器渲染過程

1、解析HTML標簽，構建DOM樹
2、解析CSS文件，構建CSS Rule Tree
3、根據DOM樹和CSS規則書，構建render tree。DOM Tree中一些節點不會被放入到Render Tree中。例如，header、display為none的節點。
4、構建出render tree后，瀏覽器已經知道頁面中有哪些節點以及對應的樣式、從屬關系等。在layout過程中計算每個節點在頁面中的位置，最后繪制到頁面上。


圖片來源

六、盒模型

可以通過box-sizing:border-box|content-box;來設置盒模型。
HTML文檔中各元素被渲染描述成矩形盒子。
盒模型表示每個元素盒子所占空間大小的模型。
分類：

W3C標準盒模型（IE6及以上版本）content-box:width=content

IE怪異盒模型（IE6以下版本）border-box：width=content+padding——不能用padding撐開盒子

七、CSS解析規則

1、先遍歷內嵌樣式，接著頭部樣式，最后外鏈樣式（外鏈樣式放在頭部樣式之后，對于同一元素而言，外鏈樣式則會覆蓋頭部樣式）
2、CSS優先級（!important>內嵌樣式>頭部樣式）
3、同一優先級文件內，ID>class、屬性選擇器、偽類>div、偽元素
4、同一優先級內，后面樣式覆蓋前面樣式

（一）選擇器類型

4個基礎選擇器，5個復合選擇器
選擇器是一種模式，用于選擇需要添加樣式的元素。
（1）4種基礎選擇器
類選擇器；ID選擇器；通配符選擇器（*）；元素選擇器
（2）5種復合選擇器
交集選擇器：標簽+類/id選擇器{屬性:值;}
并集選擇器：例如：h1,h2,p（也叫選擇器分組）
后代選擇器：選擇器+空格+選擇器（兩個選擇器必須滿足嵌套關系，父元素在前，子元素在后，無限制隔代）
子代選擇器：選擇器>選擇器（選中直接下一代元素，也叫子選擇器，子元素選擇器）
相鄰兄弟選擇器：例如：h1+p（兩者具有相同父元素）
補充：屬性選擇器：ahref{color:red;}
CSS偽類：向某些選擇器添加特殊效果。例如a:link|visited|hover|active;:focus（擁有鍵盤輸入焦點，無法再IE中工作）;:first-child（元素的第一個子元素）;:lang（帶有指定lang屬性）
CSS偽元素：向某些選擇器設置特殊效果。例如，p:first-line|first-letter;h1:before|after。在CSS3中變成了::，增加了::selection

（二）CSS權重
用于計算優先級，優先級計算無視DOM樹中的距離
內聯樣式 1000
ID選擇器 100
類=偽類=屬性選擇器 10
元素選擇器=偽元素選擇器 1
八、CSS布局

具體見淺談CSS布局

九、CSS Hack

簡單來講，CSS Hack就是針對不同的瀏覽器或同一瀏覽器的不同版本編寫特定的CSS樣式，以獲得統一的頁面效果。
CSS Hack包括：

屬性Hack
IE6能識別下劃線“_”和星號“*”
IE7能識別星號“*”，但不能識別下劃線“_”

選擇器Hack
IE6能識別*html .class{}
IE7能識別*+html .class

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117144.html

相關文章

  • 前端常見知識點匯總（面試）-HTML和CSS部分

    摘要：一內聯元素與行元素的區別內聯元素即行內元素。絕對定位，相對于定位以外的第一個父元素進行定位，元素脫離文檔流。 一、內聯元素與行元素的區別 1、內聯元素即行內元素。2、內聯元素，在文檔流中擠在一行；不能設置寬高（即，即使設置了也不管用，例如a標簽）、margin和padding的top和bottom 塊元素，獨占一行；可以設置寬高、margin、padding3、可以使用displa...

    wuyangnju 評論0 收藏0

  • 前端資源系列（4）-前端學習資源分享&前端面試資源匯總

    摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

    princekin 評論0 收藏0

  • 前端最強面經匯總

    摘要：獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。 花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續更新中……，可以關注下github 項目地址 https:...

    wangjuntytl 評論0 收藏0

  • Web前端面試題目匯總

    摘要：前端面試題目匯總一部分什么是盒子模型盒子模型包含內容內邊距外邊距和邊框四部分。第四步本地服務器再向上一步返回的域名服務器發送請求，然后接受請求的服務器查詢自己的緩存，如果沒有該記錄項，則返回相關的下級的域名服務器的地址。 Web前端面試題目匯總 一、HTML/CSS部分 1.什么是盒子模型？ 盒子模型包含內容(content)、內邊距(pandding)、外邊距(margin)和邊...

    golden_hamster 評論0 收藏0

發表評論

0條評論

DevTTL

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<