前端基礎技術點(CSS相關)

2021-10-01 19:19:31 字數 1458 閱讀 7938

二、盒模型

三、格式化上下文( formatting context)

行內格式化上下文(inline formatting contexts)

層疊順序是瀏覽器渲染顯示的一種規則。

層疊上下文是對html元素的乙個三維構想。html元素基於其元素屬性按照優先順序佔據這個空間。

哪些條件會影響當前節點在自己在層疊上下問的位置?

層疊等級是在同乙個層疊上下文按照層疊規則下所產生的層級關係,也就是同乙個層疊上下文在z軸的層疊順序。

css的盒模型分為ie盒模型w3c標準盒模型

ie盒模型:

width = 內容寬度 + border + padding

box-sizing:border-box;

w3c標準盒模型:

width = 內容寬度

box-sizing:content-box;

格式化上下文包括塊級格式上下文(block formatting context)內聯格式上下文(inlineformatting context)

頁面上的所有內容都是格式化上下文的一部分,或者是已定義為以特定方式布局內容的區域。

塊格式上下文(bfc)將根據塊布局規則布局子元素,每個格式上下文都有關於布局在該上下文中的行為的特定規則。

文件中使用塊布局規則的最外層元素建立第乙個或初始塊格式上下文。這意味著元素塊中的每個元素都是按照正常流程按照塊和內聯布局規則進行布局的。參與bfc的元素使用css框模型概述的規則,該模型定義了元素的邊距、邊框和填充如何與同一上下文中的其他塊互動。

塊格式化上下文浮動定位( float)清除浮動( clear)都很重要。浮動定位和清除浮動時只會應用於同乙個bfc內的元素。浮動不會影響其它bfc中元素的布局,而清除浮動只能清除同一bfc中在它前面的元素的浮動。外邊距摺疊(margin collapsing)也只會發生在屬於同一bfc的塊級元素之間。

應用場景:

如何清楚浮動:

行內格式上下文存在於其他格式上下文中,可以將其視為段落的上下文。段落建立了乙個內聯格式上下文,其中在文字中使用諸如、或元素等內容。

盒子模型不完全適用於參與內聯格式上下文的項。在水平書寫模式行中,水平填充、邊框和邊距將應用於元素,並左右推送文字。但是,不會應用元素上下的邊距。將應用垂直填充和邊框,但可能會在內容的上方和下方重疊,因為在內聯格式上下文中,填充和邊框不會將行框推開。

web 前端技術點

prototype為類定義的方法要先定義後使用,跟js執行原理有關 prototyp只能在類中進行方法和變數的定義,例項中沒有這個屬性 例項對prototyp定義的屬性進行直接賦值是在例項中生成乙個新的屬性,而不是改變prototyp裡的屬性,如果是資料push進去就是各例項共享的。所以protot...

前端CSS基礎

頁面布局要學習三大核心,盒子模型,浮動 和 定位。學習好盒子模型能非常好的幫助我們布局頁面 網頁布局過程 先準備好相關的網頁元素,網頁元素基本都是盒子 box 利用 css 設定好盒子樣式,然後擺放到相應位置。往盒子裡面裝內容 網頁布局的核心本質 就是利用 css 擺盒子 所謂盒子模型 就是把htm...

前端CSS基礎

目錄二 scc 書寫位置 引入方式實戰 三 css注釋管理 四 基本選擇器 重要 五 組合選擇器 重點 六 屬性選擇器 七 分組與巢狀 八 偽類選擇器 一 css 1.什麼是css?css cascading style sheet,層疊樣式表 定義如何顯示html元素。當瀏覽器讀到乙個樣式表,它就...