css的頁面布局

頁面布局，一些塊的布局，文字寫在塊的裡面

元素的浮動

預設的div是乙個塊級元素，乙個div就佔據了一行，可惡的很！！！

.item

class="
item
">1
class="
item
">2
class="
item
">3

佔據了一整行，因為這個塊級元素，他的寬度繼承父元素額（自己沒有定義寬度的情況下），在這個場景下，這個父元素就是body元素，也就是瀏覽器的寬度

而且，即使你定義了寬度，又如何，這個盒子雖然有了寬度，但是他還是佔據了整個寬度，旁邊留白的寬度，照樣不能使用，是不是很噁心！！！

在早期的網頁布局當中，很常見那種文字環繞著的效果，這個該怎麼實現呢？聰明的程式設計師想到了浮動的法子

.box 

class="
box">
class="
item
">
images/input_password.png
">
我是文字

文字跑去了的下一行，這怎麼可以呢

.box 

.item
class="
box">
class="
item
">
images/input_password.png
">
我是文字。。。。。
這個時候是不是可以實現環繞了，來說說為什麼
我們把文字去掉之後發現，我暈死啊，這個父元素的寬度居然沒有了，父元素寬度沒了，但我再次寫入p元素的時候，p元素就按照原來的規則排列
所以這就是浮動帶來了問題，破壞了父元素的高度，父元素的高度崩塌了，浮動的元素跑了，其他的元素，在父元素剩下的空間裡面，繼續按照原來的規則顯示著
浮動還有第二個性質-------包裹性
破壞性是指浮動對父元素的影響，這個包裹性是自己的變化
不出所料，這個class為item的元素，佔據了整個父元素box的大小，父元素box又佔據了body的大小
.box 

.item
class="
box">
class="
item
">11111111
再來看看，出現了什麼變化

可以看到，父元素box的高度已經塌陷了，本來父元素的高度，是由item撐開的，（我們沒有給父元素設定高度），但是父元素高度沒了，這說明，這個浮動的元素，已經不再是父容器box的子元素了，父子關係已經over了
在來看看這個item元素，自己的寬度也變了，包裹起來了，以前佔了那麼大的一塊地兒，現在就是內容撐開的寬度（我們也沒有給item元素設定寬度）
其實想一想，要是item不包裹起來，還是佔據那麼寬的地方，那還文字環繞個毛啊，自己把所有的位置都佔據了，別人壓根都擠不進來好麼？
要是父容器不塌陷，那也別想文字環繞，這就好像韓劇《天國的階梯》，後媽要搬進來，是不是做爸爸的先開啟門歡迎，然後後媽想法子把繼女趕走
浮動把父元素給搞的半死不活了，就出現了拯救父元素的方法--------清除浮動
這個清除浮動，不是說不設定浮動了，而是不要殘害父容器了，不能坑爹！！這個會涉及到新的知識，先放一放，先來看看position屬性
position
定位：元素的定位方式，一共有四種，static/absolute/relative/fixed 
static，就是position的預設值，相當於我們沒有設定position一樣，沒啥好說的 
absolute：絕對定位，相對於某乙個元素絕對的定位，查詢他的父容器，找到第乙個擁有position屬性為absolute/relative/fixed的元素，相對這個元素定位
relative：相對定位，可能會成為某個絕對定位元素的參照點， 
fixed：和絕對定位一樣，但是始終相對於瀏覽器定位的
先來看看相對定位，我們隨便在某個item上面設定乙個
.item3
加入這一行**，發現沒什麼變化啊，給他設定magrin，padding看看，會不會發生什麼變化

可以看到這個item3的上下左右分別有了20px的外邊距，是相對於自己原來定位的位置發生的變化的，而且，父元素的高度也發生了變化，這4個item還是在box元素的下面的
絕對定位absolute
item4覆蓋了別的元素，直接跑到別的上面了，這這裡，是相對於body定位的，就是頁面的左上角
而且！！這個item4收縮了，變小了，和他的兄弟姐妹不一樣了，他的寬度是內容撐開的，而不再是佔據一行了
給這個元素設定了position之後，他脫離了文件流，覆蓋在了別人的上面，而且，自己也具有了包裹的屬性
fixed布局，這個比較的簡單，就是永遠相對於瀏覽器的最左上角定位的下乙個章節，我會好好的弄一弄關於bfc以及清除浮動
 
CSS 頁面布局
幾個實現多欄布局的方法。主要介紹使用內部div來建立浮動的欄。多欄布局有三種基本的實現方案 固定寬度 流動 彈性。固定寬度布局的大小是隨使用者調整瀏覽器視窗大小而變化，一般是900至1100畫素寬。其中960畫素是很常見的，因為這個寬度適合所有的現代瀏覽器，而且能被16 12 10 8 6 5 4和...
css頁面布局
總結 布局1 0 內聯元素對設定寬 width 和高 height 不敏感 1 如果子元素是乙個塊級元素 block 或者被設定為塊級元素，我們可以對子元素使用margin 0 auto居中。class container class sub1 2 如果子元素是乙個內聯元素或者被設定為內聯 內聯塊元...
布局頁面CSS
樣式表 作用 美化網頁，頁面布局。分類 內聯，寫在標籤裡面style 裡面的樣式，優點是控制精確，可重用性差。內嵌，嵌在網頁的head裡面，可重用性高 外部，樣式寫在另乙個檔案裡面，如果要用直接附加過來。link rel styleheet type text css href style.css ...