1 css 規定的定位機制有三種,分別是
標準文件流(normal folw)
浮動(floats)
絕對定位(absolute positioning)
2 w3c標準:
由全球資訊網制定的一系列標準,包括:
結構化標準語言(html和xml)
表現標準語言(css)
行為標準語言(dom和ecmascript)
倡導結構,樣式,行為分離
3 標準文件流(normal flow)
特點:從上到下,從左到右,輸出文件內容,由塊級元素和行級元素組成
(1) 塊級元素
特點:從左到右撐滿頁面,獨佔一行,觸碰到頁面邊緣時,會自動換行
常見塊級元素:div,ul,li,dl,dt,p...
(2) 行級元素
特點:能在同一行內顯示,不會改變html文件結構
常見行級元素:span,stronng,img,input...
塊級元素呵呵行級元素都是盒子模型
4 盒子模型
盒子模型=網頁布局的基石,由4部分組成
邊框(border)
外邊距(margin)
內邊距(padding)
盒子中的內容(content)
盒子模型的尺寸=邊框+外邊距+內邊距+盒子中的內容尺寸
5.清除浮動
在受到浮動影響的標籤中設定屬性:
(1) clear:both;
(2) width:100%; overflow:hidden; 6.
position屬性有3中定位形式:
1、靜態定位relative(相對定位):2、相對定位
3、絕對定位
可設定4種屬性值:
static(靜態定位)
relative(相對定位)
absolute(絕對定位)
fixed(固定定位)
無定位祖先是參照html,而不是body;
設定絕對定位時,沒設定寬度,那麼它的寬度是由內容決定的;
網頁布局基礎
網頁製作的基礎,在w3c盛行的今天 div css 布局網頁 布局分為 流式布局 浮動布局 絕對定位布局 涉及標準文件流 盒子模型 float屬性 position屬性 1.自動居中 列布局 盒子模型的使用方法 2.浮動布局 float屬性來實現上中下布局和橫向兩列甚至多列布局,解決浮動影響的常用方...
網頁布局基礎
由全球資訊網聯盟指定的一系列標準,包括 機構化標準語言 html和xml 表現標準語言 css 行為標準語言 dom和ecmascript w3c標準倡導結構 樣式 行為分離。css中存在3中定位機制 1 標準文件流 normal flow 特點 從上到下,從左到右,輸出文件內容 由塊級元素和行級元...
網頁布局基礎
網頁布局參照三個方面 標準文件流 float position 1 標準文件流 note 兩個元素都屬於 盒子模型 2 float note 設定浮動後,脫離標準文件流 但不脫離標準文字流 當元素設定浮動屬性後,會對相鄰的元素產生影響,相鄰元素指的是緊鄰後面的元素。消除影響方法 width 100 ...