HTML最難的地方來了!這個我反覆了很多遍, 包括現在寫博客, 也對我自己算是一種溫習, 我這塊怕是沒辦法寫的很好懂, 因為我自己還不能把我學到的準確通俗易懂的表達出來, 給自己記個筆記, 以後再來一點一點的改, 新手可以看看, 對於初學這塊的人應該還是有點幫助的. CSS佈局模型 以下全部是個人初
HTML最難的地方來了!這個我反覆了很多遍, 包括現在寫博客, 也對我自己算是一種溫習, 我這塊怕是沒辦法寫的很好懂, 因為我自己還不能把我學到的準確通俗易懂的表達出來, 給自己記個筆記, 以後再來一點一點的改, 新手可以看看, 對於初學這塊的人應該還是有點幫助的.
CSS佈局模型
以下全部是個人初學HTML的一點理解, 哪裡錯了歡迎指正, 我也會改, 因為全程自學, 只能摸著石頭過河, 拜托大神們了.
CSS佈局模型在我看來是和盒模型一樣的最核心的概念, 但是佈局模型是依托盒模型的, 它並不是準確意義上的佈局樣式或者是佈局模板, 再通俗點說, CSS佈局模型就是外在看到的樣子, 而且他不是你看看書就能懂的, 而是需要多多的練習,
佈局模型主要有三種:
1, 流動模型(Flow)
2, 浮動模型(Float)
3, 層模型(Layer)
流動模型, 是預設的網頁佈局模式. 網頁在預設狀態下的HTML網頁元素都是根據流動模型來分佈網頁內容的.
特點: 塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈, 因為在預設狀態下, 塊狀元素的寬度都為100%, 實際上塊狀元素都會以行的形式占據位置, 而內聯元素都在在所處的包含元素內從左到右水平分佈顯示, 這基本上等同於對前面塊級元素和內聯元素的特性又做了一次總結.
浮動模型
浮動模型在我理解中也就是打破了Flow的一切規則, 它不再遵循流動模型的一切規則, 以一種自定義的方式將塊級元素和內嵌元素重新佈局. 預設下都是不浮動的, 但是可以定義為浮動, 只需要在CSS樣式表中加入float這個屬性, 代碼示例:
div{
float:left;
}
這句話的意思就是將這個<div>塊級元素設置為左浮動, 這個時候這個塊級元素也不再具有塊級元素的那些獨占一行, 元素寬度等等特點了, 也就是當設置為float的那一刻, 塊級和內嵌的特性就都消失了.
層模型(這個可以講一天)
層佈局模型在我看來就好像多個重疊的層級結構, 你通過代碼對每個層級的位置進行精確控制, css定位了一組定位屬性來支持佈局模型, 這個我自己理解的也並沒那麼透徹所以只簡單說說, 大家有興趣的去百度百度看看別人的博客, 我個人理解必然不如人家, 只能說給自己寫個學習筆記而已.
層模型的三種形式:
1, 絕對定位(position:absolute)
2, 相對定位(position:relative)
3, 固定定位(position:fixed)
1, 絕對定位
下麵完全不用書本上那種嚴謹的語言, 用我自己的理解給大家說, 絕對的意思就是, 一個層級放在另一個層級上面, 也就是一塊放在另一塊上, 子層級在父層級上面的精確坐標就是絕對定位, 給它一個絕對的值讓他不會亂動, 同樣的, 父層級移動了, 子層級也會跟著動, 也就是說這兩個相對的層級用絕對的佈局拴住了, 學習這你就使勁的敲就行了. 同時給大家一點層級的概念, <body>裡面有各種塊, 比如<div>, 那麼一塊<div>就可以理解為一個層級, 你對這個<div>的屬性做設置, 絕對定位, 那麼<div>就和<body>栓死了, 同樣的<div>裡面有一個<p>, <p>也設置絕對定位, 這個時候<p>的層級就是相對<div>了, <div>動, <p>也會在<div>裡面乖乖的跟著走, 綜上, 這就是絕對定位!
代碼示例下
div{
width:200px;
heigth:300px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
p{
position:absolute;
}
這個時候<p>是<div>內部標簽的話, <p>相對<div>就已經鎖死了, 那麼這個時候我們修改p樣式表, 修改p在佈局中的位置, 比如用盒子模型修改外間距, 修改p在div中的佈局, 然後再去修改div的佈局, 會發現p的層級還會在div上, 緊緊的困在一起了. 感覺這種佈局應該是最常用的.
2, 相對定位
相對定位首先是將這一層級, 類似float方式浮動起來, 然後通過設置left, right, top, bottom屬性來確定這一層級相較於自己原本的位置, 但是這一層級本質上還是在原來那裡, 也就可以理解為視覺看到的是一個投影, 它本來還在那呢, 所以相對定位是不會影響其他位置元素的佈局的, 因為它是單獨浮動出來的. 這個不太好理解, 需要大家自己多寫多練. 感覺這種佈局應該是那種動畫什麼的很常用, 或者彈出的視窗? 我不確定啊, 不太敢說了.
3, 固定定位
這個好解釋效果, 平常看網站那些小廣告, 右下角啥的, 你划著屏幕, 他就在那裡, 不上不下, 這個效果就是固定定位, 它的定位並不是跟著佈局走的, 而是跟著相對瀏覽器走的. 嚴謹一點的說法是, 它的相對移動的坐標是網頁視窗本身. 由於視圖本身是固定的, 它不會隨瀏覽器視窗的滾動條滾動而變化, 除非你在屏幕中移動瀏覽器視窗的屏幕位置, 或改變瀏覽器視窗的顯示大小, 因此固定定位的元素會始終位於瀏覽器視窗內視圖的某個位置, 不會受文檔流動影響, 這與background-attachment:fixed;(定義背景圖片隨滾動軸的移動方式)屬性功能相同. 這個也不多介紹了, 和相對定位一樣, 多寫就好了.
這三種定位方式是可以混在一起用的, 比如父元素用絕對定位, 子元素用相對定位等等, 是可以很靈活的佈局的, 學第一遍可能會懵, 第二遍會好一點, 第三遍基本就能懂了, 我學東西也是這個原則, 一個東西要學三遍才可以算是學了.
