首頁 > 開發者 > JavaScript
熟悉HTML CSS布局模型，htmlcss布局模型
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;(定義背景圖片隨捲軸的移動方式)屬性功能相同. 這個也不多介紹了, 和相對定位一樣, 多寫就好了.
這三種定位方式是可以混在一起用的, 比如父元素用絕對位置, 子項目用相對定位等等, 是可以很靈活的布局的, 學第一遍可能會懵, 第二遍會好一點, 第三遍基本就能懂了, 我學東西也是這個原則, 一個東西要學三遍才可以算是學了.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
