擺放與佈局——普通流、浮動定位、絕對定位、表格

時間 2019-11-09

原文原文鏈接

一·流瀏覽器

流實際上就是瀏覽器從HTML文件最上面開始，從上到下沿着元素逐個顯示所遇到的各個元素。塊元素與塊元素之間會有一個換行，第一個是塊元素，而後是一個換行，而後是第二個元素，以此顯示。內聯元素會在水平方向上相互挨着，整體上從左上方流向右下方。ide

p.s.關於盒模型佈局

瀏覽器並排放置兩個內聯元素時，兩個元素有不一樣的外邊距，則兩個元素之間的外邊距是兩個元素的和。而當上下放置兩個塊元素時，其外邊距的狀況不一樣於前者，兩個元素之間的邊距是最大一個元素外邊距的值，共同的外邊距被摺疊了，所以摺疊的外邊距高度就是最大的外邊距高度。url

2、float元素——如何浮動元素spa

一、指定一個id（如段落<p id="amszing">）設計

二、指定一個寬度width（width指定的是文本寬度，不包括內邊距）blog

#amazing{width:200px;}ci

三、浮動文檔

#amazing{width：200px;it

float:right;}

此時元素位於頁面右方，浮動流再也不是正常流的一部分，所以這個浮動段落會在正常流中刪除，此前這個浮動段落的後面的元素會佔據其本來的位置。不過內聯元素定位時會考慮到浮動元素的邊界，所以會圍繞着浮動元素。

3、流體、凍結、凝膠設計

一、流體佈局：調整瀏覽器寬度，佈局會根據瀏覽器寬度進行調整，填滿整個瀏覽器。（瀏覽器默認）

二、凍結佈局：這種佈局會鎖定元素，調整瀏覽器窗口大小，頁面仍保持其設計佈局。

如<body>

</div>

</body>

可爲「allcontent」設計樣式，allcontent包含頁面中的所用內容。

#allcontent{width:800px; /*將其中包含的全部內容限制在800像素以內，div的寬度老是800px，即便瀏覽器大小調整了，這個寬度也不變，則將div以及其中所包含的內容凍結在頁面上。*/

padding-top:5px;

padding-bottom:5px;

background-color:#675c47;

}

三、凝膠布局

凝膠布局會鎖定頁面中內容區的寬度，會將它在瀏覽器居中。

#allcontent{width:800px;

padding-top:5px;

padding-bottom:5px;

background-color:#675c47;

margin-left：auto；

margin-right：auto；

}

4、絕對定位

一個元素絕對定位時，瀏覽器首先要先將其從流中徹底刪除，而後指定一個位置放置元素。指定一個top和right屬性（或left和bottom）的位置。

如：定位在距頁面右邊200像素，距上面100像素的地方，內容寬度設置爲280px.

#sidebar{position:absilute;

top:100px;

right:200px;

width:280px;

}

因爲元素是絕對定位的，也會從流中刪除，流中的元素會忽略絕對定位元素的存在，所以不像浮動定位會圍繞定位元素。他們甚至不知道頁面上有絕對定位的元素。

p.s.position屬性有：static、absolute、fixed、relative

static（靜態），若是是靜態定位，元素會放在正常的文檔流中，而不是由你來指定位置，由瀏覽器決定這些靜態定位元素放在哪裏。你可使用float屬性將一個元素從流中刪除，可讓其向右向左浮動，但最終仍然是瀏覽器決定將它放在哪裏，沒有指定一個絕對的位置信息，由瀏覽器默認將其放置。與其相對應的absolute則能夠設定一個位置來放置元素，使用絕對定位時，將由你來告訴瀏覽器放置元素的具體位置。fix（固定定位）是將元素放在相對於瀏覽器窗口的一個位置上（而不是相對於頁面），因此固定元素永遠也不會移動。相對（relative）定位會讓元素正常地流入頁面，不過在頁面上顯示以前要進行偏移。相對定位經常使用於更高級的定位和特殊效果。

5、表格定位

一、先建立一個<div>表示整個表格，行和列要嵌套在這個<div>中。

二、對錶格中的每一行要建立一個<div>,其中包含行內容。

三、對於每一列，只須要一個塊元素做爲該列內容。若有兩個塊元素，只有一行的狀況。

div#tableContainer{
display:table;
border-spacing:10px;/*爲表格中的單元格增長10px的邊框間距*/
}
div#tableRow（行）{
display:table-row;}

#main {
display:table-cell;
background:       #efe5d0 url(images/background.gif) top left;
font-size:        105%;
padding:          15px;
vertical-align:top;/*使表格兩個單元格中全部內容相對於單元格上邊對齊，可不用再爲其增長margin了*/
}

#sidebar {display:table-cell;
background:       #efe5d0 url(images/background.gif) bottom right;
font-size:        105%;
padding:          15px;
vertical-align:top;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。