摘要:包含塊是一個相對的概念,比如子元素的初始化布局總是在父元素的左上角,這就是一個相對的概念。每個元素都會生成一個包含塊,但這個包含塊是虛無的,你看不到也摸不著,只是一個概念。這個屬性在新的版本中已經(jīng)移除了,可以不用關(guān)注該屬性了。
替換元素與非替換元素
替換元素:是指瀏覽器根據(jù)元素的標簽和屬性來決定元素的具體內(nèi)容。
例如"瀏覽器會根據(jù)標簽的src屬性的值來讀取圖片信息并顯示,瀏覽器會根據(jù)input標簽的type屬性來決定是顯示輸入框還是單選按鈕
非替換元素:其內(nèi)容直接顯示在客戶端的元素叫非替換元素
包含塊shizai
shashi
在css中,有時一個元素的位置和尺寸的計算都相對于一個矩形,這個矩形被稱作包含塊。包含塊是一個相對的概念,比如子元素的初始化布局總是在父元素的左上角,這就是一個相對的概念。每個元素都會生成一個包含塊,但這個包含塊是虛無的,你看不到也摸不著,只是一個概念。包含塊吧并不會限制它里面元素的大小,如果里面的元素比包含塊大,那么超出的部分就會被溢出。一個元素的位置和尺寸與它的包含塊息息相關(guān),而元素會為它的子孫元素創(chuàng)建包含塊,但這并不代表這個包含塊就是它的父元素(不過這個父元素確實和包含塊有著一些聯(lián)系)。在某些情況下,我們可以將包含塊理解為父元素。
包含塊的創(chuàng)建在HTMl中,根元素的包含塊叫作初始包含塊,具體創(chuàng)建由客戶端決定
當定位置為fixed,則包含塊由視口創(chuàng)建
當定位值為relative,static或沒有設(shè)置定位屬性,則包含塊由最近的父元素或祖先元素創(chuàng)建
當定位值為absolute,則包含塊由最近的定位值relative、absolute、fixed創(chuàng)建。如果沒有定位的祖先元素,則包含塊為初始包含塊(具體由客戶端決定)
當祖先元素時行內(nèi)元素時,那么包含塊取決于父元素或祖先元素的direction屬性
?
當定位值為absolute,父元素沒有設(shè)置定位時,包含塊為初始包含塊。而如果指定了其定位值,則包含塊由其定位了的父元素或祖先元素創(chuàng)建
父元素或祖先元素沒有定位時父元素或祖先元素定位值為relative父元素或祖先元素定位值為absolute父元素或祖先元素定位值為fixed
當祖先元素時行內(nèi)元素時,若direction值為ltr則右邊補空白,若direction值為rtl則左邊補空白
控制框direction:ltrdirection:rtl
控制框主要指display的屬性所形成的框,包括塊框,匿名塊框,行內(nèi)框,匿名行內(nèi)框,插入框(run-in).
display的一些屬性:
block生成一個塊框
inline-block生成一個塊框,元素內(nèi)部按照塊框格式化,但元素本身按照一個行內(nèi)元素的形式來格式化(初始化)
inline生成一個或多個行內(nèi)框
list-item生成一個塊框和一個列表行內(nèi)框
none將不在結(jié)構(gòu)中顯示,不產(chǎn)生任何框,并且子孫元素也不產(chǎn)生任何框
run-in將根據(jù)后一個元素來選擇要生成的框
1.塊級元素與塊框
其中可以產(chǎn)生塊元素的值為block,list-item,run-in,table。塊級元素除了table外都會形成一個主塊框,并且這個主塊框只包含一個類型的框,就是說里面要么是塊框,要么是行內(nèi)框。主塊框會為子孫元素建立包含塊,生成內(nèi)容。主塊框參與塊級格式化上下文。某些塊級元素還會在主塊框之外生成額外的框,比如當某個元素的display值為list-item時,它會生成一個額外的框用來放置那些標志,比如li元素前面的標志
2.匿名塊框
這是一段內(nèi)容
div包括了一段文本和一個塊框(p),此時div似乎既包括了行內(nèi)框,又包括了一個塊框,那么它會將所有的行內(nèi)框都包含在一個匿名塊框之中
3.行內(nèi)框
可以產(chǎn)生行內(nèi)元素的值為inline,inline-table,run-in
4.匿名行內(nèi)框
這是一段內(nèi)容
div包括了一段文本和一個em元素,此時div似乎包含的都是一個行內(nèi)框,那么它會為這段文本生成一個匿名行內(nèi)框。在格式化table時,會形成更多的匿名行內(nèi)框。
5.插入框(run-in)
如果一個元素的display值為run-in,那么它會根據(jù)后面的元素來確定它的類型應(yīng)該是什么。這個屬性在新的Chrome版本中已經(jīng)移除了,可以不用關(guān)注該屬性了。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/108013.html
摘要:包含塊是一個相對的概念,比如子元素的初始化布局總是在父元素的左上角,這就是一個相對的概念。每個元素都會生成一個包含塊,但這個包含塊是虛無的,你看不到也摸不著,只是一個概念。這個屬性在新的版本中已經(jīng)移除了,可以不用關(guān)注該屬性了。 替換元素與非替換元素 替換元素:是指瀏覽器根據(jù)元素的標簽和屬性來決定元素的具體內(nèi)容。 例如瀏覽器會根據(jù)標簽的src屬性的值來讀取圖片信息并顯示,瀏覽器會根據(jù)i...
摘要:與響應(yīng)不同的是,身份驗證并不能提供任何幫助,而且這個請求也不應(yīng)該被重復(fù)提交。 JavaScript中幾個最重要的大知識點 面向?qū)ο?DOM事件 異步交互ajax AJAX AJAX是異步的javascript和xml(Asynchronous Javascript And XML)的縮寫,用于網(wǎng)頁局部刷新,提升用戶瀏覽體驗 通常前端程序員關(guān)于AJAX的掌握僅僅停留在會用AJAX發(fā)送...
摘要:中幾個最重要的大知識點面向?qū)ο笫录惒浇换ッ嫦驅(qū)ο笤谥锌梢园讶我獾囊煤妥兞慷伎闯墒且粋€對象。我們可以寫一個通用方法來模擬面向?qū)ο笳Z言的多態(tài) JavaScript中幾個最重要的大知識點 面向?qū)ο?DOM事件 異步交互ajax 面向?qū)ο?在JS中可以把任意的引用和變量都看成是一個對象。面向?qū)ο蟮闹饕齻€表現(xiàn)形式: 封裝 繼承 多態(tài) 1. 封裝 1.1 單例模式 var obj={...
摘要:使用來移除事件,參數(shù)必須與要移除的事件處理函數(shù)地址指針相同。在低版本瀏覽器中,綁定級事件的方法為中的級事件的事件處理程序都是在冒泡階段執(zhí)行的。 JavaScript中幾個最重要的大知識點 面向?qū)ο?DOM事件 異步交互ajax 事件 事件就是文檔和瀏覽器的瞬間交互行為 1.事件類型 點擊: click 滾輪: scroll 滑動: move 進入: enter 加載: load ...
閱讀 2964·2023-04-26 02:04
閱讀 1277·2021-11-04 16:07
閱讀 3699·2021-09-22 15:09
閱讀 678·2019-08-30 15:54
閱讀 1899·2019-08-29 14:11
閱讀 2524·2019-08-26 12:19
閱讀 2255·2019-08-26 12:00
閱讀 752·2019-08-26 10:27