網頁布局基礎

2021-07-24 00:17:06 字數 1052 閱讀 6095

由全球資訊網聯盟指定的一系列標準， 包括：

機構化標準語言(html和xml)

表現標準語言(css)

行為標準語言(dom和ecmascript)

w3c標準倡導結構、樣式、行為分離。

css中存在3中定位機制：

(1)標準文件流(normal flow)

特點：

從上到下，從左到右，輸出文件內容

由塊級元素和行級元素組成

(2)浮動(floats)

(3)絕對定位(absolute positioning)

網頁布局是網頁製作的基礎。(使用div+css布局網頁)

標準文件流

盒子模型

float屬性

position屬性

案例一：自動居中一列布局案例(盒子模型的使用方法)盒子模型：

在盒子模型的三維立體結構一共有五層。

從第一層到第五層分別為：邊框(border)、內邊距(content+padding)、背景(background-image)、背景顏色(background-color)、外邊距(margin)

自動居中-列布局的三個技能點：

標準文件流

會計元素

margin屬性

注意：

1、如果想讓頁面居中，當設定margin屬性為auto的時候，不能再設定浮動或者絕對定位屬性。

2、自動居中一列布局需要設定 margin 左右值設定為 auto，而且一定要設定width為乙個定值。

栗子：現在頁面中有個紅色的方框，如下。我們要讓它在螢幕中居中顯示。

我們可以對原來**進行修改：



lang="en">


charset="utf-8">


titletitle>
 
網頁布局基礎
網頁製作的基礎，在w3c盛行的今天 div css 布局網頁 布局分為 流式布局 浮動布局 絕對定位布局 涉及標準文件流 盒子模型 float屬性 position屬性 1.自動居中 列布局 盒子模型的使用方法 2.浮動布局 float屬性來實現上中下布局和橫向兩列甚至多列布局，解決浮動影響的常用方...


網頁布局基礎
1 css 規定的定位機制有三種，分別是 標準文件流 normal folw 浮動 floats 絕對定位 absolute positioning 2 w3c標準 由全球資訊網制定的一系列標準，包括 結構化標準語言 html和xml 表現標準語言 css 行為標準語言 dom和ecmascript...


網頁布局基礎
網頁布局參照三個方面 標準文件流 float position 1 標準文件流 note 兩個元素都屬於 盒子模型 2 float note 設定浮動後，脫離標準文件流 但不脫離標準文字流 當元素設定浮動屬性後，會對相鄰的元素產生影響，相鄰元素指的是緊鄰後面的元素。消除影響方法 width 100 ...