熟悉HTML CSS布局模型
HTML最難的地方來了!這個我反復了很多遍, 包括現(xiàn)在寫博客, 也對我自己算是一種溫習, 我這塊怕是沒辦法寫的很好懂, 因為我自己還不能把我學到的準確通俗易懂的表達出來, 給自己記個筆記, 以后再來一點一點的改, 新手可以看看, 對于初學這塊的人應該還是有點幫助的.
CSS布局模型
以下全部是個人初學HTML的一點理解, 哪里錯了歡迎指正, 我也會改, 因為全程自學, 只能摸著石頭過河, 拜托大神們了.
CSS布局模型在我看來是和盒模型一樣的最核心的概念, 但是布局模型是依托盒模型的, 它并不是準確意義上的布局樣式或者是布局模板, 再通俗點說, CSS布局模型就是外在看到的樣子, 而且他不是你看看書就能懂的, 而是需要多多的練習,?
布局模型主要有三種:
1, 流動模型(Flow)
2, 浮動模型(Float)
3, 層模型(Layer)
流動模型, 是默認的網(wǎng)頁布局模式. 網(wǎng)頁在默認狀態(tài)下的HTML網(wǎng)頁元素都是根據(jù)流動模型來分布網(wǎng)頁內(nèi)容的.
特點: 塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布, 因為在默認狀態(tài)下, 塊狀元素的寬度都為100%, 實際上塊狀元素都會以行的形式占據(jù)位置, 而內(nèi)聯(lián)元素都在在所處的包含元素內(nèi)從左到右水平分布顯示, 這基本上等同于對前面塊級元素和內(nèi)聯(lián)元素的特性又做了一次總結.
浮動模型
浮動模型在我理解中也就是打破了Flow的一切規(guī)則, 它不再遵循流動模型的一切規(guī)則, 以一種自定義的方式將塊級元素和內(nèi)嵌元素重新布局. 默認下都是不浮動的, 但是可以定義為浮動, 只需要在CSS樣式表中加入float這個屬性, 代碼示例:
div{
float:left;
}
這句話的意思就是將這個<div>塊級元素設置為左浮動, 這個時候這個塊級元素也不再具有塊級元素的那些獨占一行, 元素寬度等等特點了, 也就是當設置為float的那一刻, 塊級和內(nèi)嵌的特性就都消失了.
層模型(這個可以講一天)
層布局模型在我看來就好像多個重疊的層級結構, 你通過代碼對每個層級的位置進行精確控制, css定位了一組定位屬性來支持布局模型, 這個我自己理解的也并沒那么透徹所以只簡單說說, 大家有興趣的去百度百度看看別人的博客, 我個人理解必然不如人家, 只能說給自己寫個學習筆記而已.
層模型的三種形式:
1, 絕對定位(position:absolute)
2, 相對定位(position:relative)
3, 固定定位(position:fixed)
1, 絕對定位
下面完全不用書本上那種嚴謹?shù)恼Z言, 用我自己的理解給大家說, 絕對的意思就是, 一個層級放在另一個層級上面, 也就是一塊放在另一塊上, 子層級在父層級上面的精確坐標就是絕對定位, 給它一個絕對的值讓他不會亂動, 同樣的, 父層級移動了, 子層級也會跟著動, 也就是說這兩個相對的層級用絕對的布局拴住了, 學習這你就使勁的敲就行了. 同時給大家一點層級的概念, <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>內(nèi)部標簽的話, <p>相對<div>就已經(jīng)鎖死了, 那么這個時候我們修改p樣式表, 修改p在布局中的位置, 比如用盒子模型修改外間距, 修改p在div中的布局, 然后再去修改div的布局, 會發(fā)現(xiàn)p的層級還會在div上, 緊緊的困在一起了. 感覺這種布局應該是最常用的.
2, 相對定位
相對定位首先是將這一層級, 類似float方式浮動起來, 然后通過設置left, right, top, bottom屬性來確定這一層級相較于自己原本的位置, 但是這一層級本質(zhì)上還是在原來那里, 也就可以理解為視覺看到的是一個投影, 它本來還在那呢, 所以相對定位是不會影響其他位置元素的布局的, 因為它是單獨浮動出來的. 這個不太好理解, 需要大家自己多寫多練. 感覺這種布局應該是那種動畫什么的很常用, 或者彈出的窗口? 我不確定啊, 不太敢說了.
3, 固定定位
這個好解釋效果, 平常看網(wǎng)站那些小廣告, 右下角啥的, 你劃著屏幕, 他就在那里, 不上不下, 這個效果就是固定定位, 它的定位并不是跟著布局走的, 而是跟著相對瀏覽器走的. 嚴謹一點的說法是, 它的相對移動的坐標是網(wǎng)頁窗口本身. 由于視圖本身是固定的, 它不會隨瀏覽器窗口的滾動條滾動而變化, 除非你在屏幕中移動瀏覽器窗口的屏幕位置, 或改變?yōu)g覽器窗口的顯示大小, 因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置, 不會受文檔流動影響, 這與background-attachment:fixed?(定義背景圖片隨滾動軸的移動方式)屬性功能相同. 這個也不多介紹了, 和相對定位一樣, 多寫就好了.
這三種定位方式是可以混在一起用的, 比如父元素用絕對定位, 子元素用相對定位等等, 是可以很靈活的布局的, 學第一遍可能會懵, 第二遍會好一點, 第三遍基本就能懂了, 我學東西也是這個原則, 一個東西要學三遍才可以算是學了.
轉(zhuǎn)載于:https://www.cnblogs.com/JianweiWang/p/5190262.html
總結
以上是生活随笔為你收集整理的熟悉HTML CSS布局模型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 韩信点兵-中国剩余定理（练习）
- 下一篇： 谷歌浏览器扩展插件