html最難的地方來了!這個我反覆了很多遍, 包括現在寫部落格, 也對我自己算是一種溫習, 我這塊怕是沒辦法寫的很好懂, 因為我自己還不能把我學到的準確通俗易懂的表達出來, 給自己記個筆記, 以後再來一點一點的改, 新手可以看看, 對於初學這塊的人應該還是有點幫助的.
以下全部是個人初學html的一點理解, **錯了歡迎指正, 我也會改, 因為全程自學, 只能摸著石頭過河, 拜託大神們了.
css布局模型在我看來是和盒模型一樣的最核心的概念, 但是布局模型是依託盒模型的, 它並不是準確意義上的布局樣式或者是布局模板, 再通俗點說, css布局模型就是外在看到的樣子, 而且他不是你看看書就能懂的, 而是需要多多的練習,
布局模型主要有三種:
1, 流動模型(flow)
2, 浮動模型(float)
3, 層模型(layer)
流動模型, 是預設的網頁布局模式. 網頁在預設狀態下的html網頁元素都是根據流動模型來分布網頁內容的.
特點: 塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布, 因為在預設狀態下, 塊狀元素的寬度都為100%, 實際上塊狀元素都會以行的形式佔據位置, 而內聯元素都在在所處的包含元素內從左到右水平分布顯示, 這基本上等同於對前面塊級元素和內聯元素的特性又做了一次總結.
浮動模型在我理解中也就是打破了flow的一切規則, 它不再遵循流動模型的一切規則, 以一種自定義的方式將塊級元素和內嵌元素重新布局. 預設下都是不浮動的, 但是可以定義為浮動, 只需要在css樣式表中加入float這個屬性, **示例:
div{
float:left;
這句話的意思就是將這個塊級元素設定為左浮動, 這個時候這個塊級元素也不再具有塊級元素的那些獨佔一行, 元素寬度等等特點了, 也就是當設定為float的那一刻, 塊級和內嵌的特性就都消失了.
層模型的三種形式:
1, 絕對定位(position:absolute)
2, 相對定位(position:relative)
3, 固定定位(position:fixed)
下面完全不用書本上那種嚴謹的語言, 用我自己的理解給大家說, 絕對的意思就是, 乙個層級放在另乙個層級上面, 也就是一塊放在另一塊上, 子層級在父層級上面的精確座標就是絕對定位, 給它乙個絕對的值讓他不會亂動, 同樣的, 父層級移動了, 子層級也會跟著動, 也就是說這兩個相對的層級用絕對的布局拴住了, 學習這你就使勁的敲就行了. 同時給大家一點層級的概念, 裡面有各種塊, 比如, 那麼一塊就可以理解為乙個層級, 你對這個的屬性做設定, 絕對定位, 那麼就和栓死了, 同樣的裡面有乙個, 也設定絕對定位, 這個時候的層級就是相對了, 動, 也會在裡面乖乖的跟著走, 綜上, 這就是絕對定位!
**示例下
div{
width:200px;
heigth:300px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
p{position:absolute;
這個時候是內部標籤的話, 相對就已經鎖死了, 那麼這個時候我們修改p樣式表, 修改p在布局中的位置, 比如用盒子模型修改外間距, 修改p在div中的布局, 然後再去修改div的布局, 會發現p的層級還會在div上, 緊緊的困在一起了. 感覺這種布局應該是最常用的.
相對定位首先是將這一層級, 類似float方式浮動起來, 然後通過設定left, right, top, bottom屬性來確定這一層級相較於自己原本的位置, 但是這一層級本質上還是在原來那裡, 也就可以理解為視覺看到的是乙個投影, 它本來還在那呢, 所以相對定位是不會影響其他位置元素的布局的, 因為它是單獨浮動出來的. 這個不太好理解, 需要大家自己多寫多練. 感覺這種布局應該是那種動畫什麼的很常用, 或者彈出的視窗? 我不確定啊, 不太敢說了.
這個好解釋效果, 平常看**那些小廣告, 右下角啥的, 你劃著螢幕, 他就在那裡, 不上不下, 這個效果就是固定定位, 它的定位並不是跟著布局走的, 而是跟著相對瀏覽器走的. 嚴謹一點的說法是, 它的相對移動的座標是網頁視窗本身. 由於檢視本身是固定的, 它不會隨瀏覽器視窗的滾動條滾動而變化, 除非你在螢幕中移動瀏覽器視窗的螢幕位置, 或改變瀏覽器視窗的顯示大小, 因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置, 不會受文件流動影響, 這與background-attachment:fixed;(定義背景隨滾動軸的移動方式)屬性功能相同. 這個也不多介紹了, 和相對定位一樣, 多寫就好了.
這三種定位方式是可以混在一起用的, 比如父元素用絕對定位, 子元素用相對定位等等, 是可以很靈活的布局的, 學第一遍可能會懵, 第二遍會好一點, 第三遍基本就能懂了, 我學東西也是這個原則, 乙個東西要學三遍才可以算是學了.
HTML CSS 混合布局
charset utf 8 混合布局title type text css body top main left right foot margin 0auto 的意思就是 上下邊界為0，左右根據寬度自適應！其實就是 水平居中的意思 style head class top div class ma...
html css布局技巧
一 父元素的寬高的變化子元始終素鋪滿父元素 二 子元素位於父元素正中心 三 子元素垂直居中 四 子元素水平居中 五 固定寬高比盒子，padding bottom的取值是參照width，如果width的值是百分比，那麼參照就是父元素的width值 六 文字多於容器寬度顯示省略號 overflow hi...
html css簡單布局
經過幾天的學習漸漸掌握了一部分html和css 下面是用最近幾天學習的html css簡單布局的乙個頁面 這個頁面可以分為 header，middle和foot。其中head分為三部分，需要三個div標籤來進行布局 首先第乙個div標籤布局橙色區域以及整個header區域設定背景顏色，寬，高，外邊距...