- div的浮動、定位、和框架模型概念介紹
-
2017-04-17 18:14:41
綿陽網站建設,綿陽手機網站制作,綿陽APP開(kāi)發,綿陽微信開(kāi)發,綿陽微網站制作,綿陽微信營銷,綿陽網站優化,綿陽seo,綿陽百度排名優化 ,綿陽網站優化,綿陽做網站,綿陽網站設計,綿陽網站建設工(gōng)作室,綿陽網站制作,綿陽網站改版,綿陽網站制作公司
可視化模型:浮動、定位和框架模型是CSS的3個最重要的概念，這些概念控制在頁面上安排和顯示元素的方式.形成CSS的基本布局。
視覺可視化模型:p、h1、div等元素常常被稱爲塊級元素。這就意味着這些元素顯示爲一(yī)塊内容。即“塊框”。與之相反。strong和span等元素稱爲行内元素，因爲它們的内容顯示在行中(zhōng)。即“行内框”。
可以使用display屬性改變生(shēng)成的框的類型.通過将display屬性設t爲block，可以讓行内元素表現像塊級元素一(yī)樣。還可以将display屬性設none.讓生(shēng)成的元素根本沒有框。這樣這個框及其所有内容就不顯示了，不占用文檔中(zhōng)的空間。
CSS中(zhōng)有3種基本的定位
機制，分(fēn)别是普通流、浮動和絕對定位。除非專門指定，否則所有框都在普通流中(zhōng)定位。
塊級框從上到下(xià).一(yī)個接一(yī)個地排列，框之間的垂宜距離(lí)由框的垂直空白(bái)邊計算出來行内框在一(yī)行中(zhōng)的水平位置，可以使用水平填充、邊框和空白(bái)邊設置，它們之間的水平間距。但是垂直填充、邊框和空白(bái)邊不影響行内框的高度。
由于一(yī)行形成的水平框稱爲行框，行框的高度足以容納它包含的所有行内框，設置行高可以增加這個框的高度。
框可以按照XHTM的嵌套方式包含其他的框。大(dà)多數框由顯示定義的元案形成。但是在一(yī)些情況下(xià)，即使沒有進行顯示定義，也會創建塊級元素。這種情況發生(shēng)在将一(yī)些文本添加到一(yī)些塊級元素(比如DIV)的開(kāi)頭時，即使沒有把這些文本定義爲段落，它也會被認爲是段落:
在這種情況下(xià)，這個框爲無名塊框，因爲它不與專門定義的元素相關聯。塊級元素内的文本行也會發生(shēng)類似的情況。假設有一(yī)個包含3行文本的段落，每行文本形成一(yī)個無名行框.則無法直核對無名框或行框應用樣式，因爲沒有可以應用樣式的地方。但是。這有助于理解在屏幕上看到的所有東西都形成某種框。
浮動定位:還有一(yī)種定位模型爲浮動模型。浮動的框可以左右移動，直到它外(wài)邊緣碰到包含框或另一(yī)個浮動框的邊緣。因爲浮動根不在文檔的普通流中(zhōng)，所以文檔流中(zhōng)的塊框表現得就像浮動框不存在一(yī)樣。
float可選參數有以下(xià)幾個。
inherit:繼承父級元素的浮動屬性。
Lift:元素會移至父元素中(zhōng)的左側。
none：默認值。
right:元素會移至父元素中(zhōng)的右側。
position定位:position定位與float一(yī)樣.也是CSS排版中(zhōng)非常裏要的概念。Position的字面意思是指定塊的位置，即塊相對子其父塊的位置和相對于它自身應該在的位置。
position屬性值有以下(xià)幾種。
absolute:絕對，将對象從文檔流中(zhōng)拖出.通過width、height、left right、toP、bottom等屬性與margin,padding、border進行絕對定位，絕對定位的元素可以有邊界，但這些邊界不壓縮。而其層疊通過z-index屬性定義。
fixed:懸浮，使元素固定在屏幕的某個位置，其包含塊是可視區域本身.因此它不随滾動條的滾動而滾動。 inhert:繼承上級元素position值。
relative:相對，對象不可層疊但将依據left, right、top, bottom等屬性在正常文檔流中(zhōng)偏移位置。
static:靜态(默認)，無特殊定位。
