2023年辛星解讀css第六節

這一節我們就要講到布局了，事實上布局本身特別簡單。可是要合理的布好局就不那麼簡單了，就像我們寫文章一樣。寫一篇文章非常easy，可是要寫一篇名著就非常難了，這須要我們紮實的功底和對文學的理解，可是。千里之行。始於足下，我們開始吧。

************顯示方式*************

1.有時候我們會設定乙個元素的顯示方式。比方我們在做導航條的時候，就會使用display：inline來使它們成為內聯的樣式。

2.以下先不說這個display，先說一下visibility屬性把，它能夠設定為hidden，即不顯示。那麼該塊區域就顯示一片空白。

有乙個類似的方法就是使用display：none，它也是設定不顯示，可是它的作用卻是讓該元素消失，後面的元素會自己主動占領它的空間。

3.我們能夠使用display：block使得它的顯示成為乙個塊級元素。能夠理解為強制性的換行，而display：inline則是強制性的使其不換行，向右排列。

4.變更元素的顯示型別看該元素怎樣顯示，看它是什麼樣的元素，比方乙個內聯元素設定為display：block是不同意有它的內部巢狀塊元素的。

*************大小***************

1.對於乙個html元素。我們能夠通過設定它的width屬性和height屬性來設定其大小，也就是其寬度和高度。

2.另一些其它設定大小的屬性，感覺不是非經常常使用，即沒列舉。

************定位*****************

1.第一種定位方式就是預設的方式。它是自上而下，從左到右的乙個模式。也是最簡單的一種模式。

2.另外一種就是固定定位。它的位置相對於瀏覽器的窗體位置是固定的，即使窗體滾動，它也不會動。這樣的能夠用來做那種廣告條之類的，我們以下做乙個演示樣例。首先是html檔案裡書寫**例如以下：

辛星，無限溫情

然後就書寫my.css檔案，這裡我們為了看出隨著滾動欄的滾動。該段文字的位置不變的特性，我們須要給瀏覽器窗體一定的大小：

bodyp

3.上面這樣的方式對瀏覽器的相容不好。在ie8下面須要描寫敘述!doctype 才幹夠。這裡的top指的是它的上面到瀏覽器的頂部的距離，left是指它的右端到瀏覽器的右端的距離。

4.相對定位：這裡須要清楚相對「誰」的定位。這裡的相對定位是相對於第一種方式的定位，即預設方式的定位，它會在預設方式的基礎上進行一些改動，能夠設定left等屬性，假設設定left為-20px，則表示它相對於原始位置向左移動二十個畫素，它也須要在postion屬性中賦值為relative。

5.絕對定位：它須要指定position為absolute。也能夠設定left和top或right等屬性，假設該元素沒有父元素，則它的位置是相對整個瀏覽器窗體來說的。

***************小結****************

1.本小節解說了顯示方式和定位方式，為後面的布局打下一定的基礎。

2.我們下一小節將會解說布局方面的問題。