css網頁布局基礎

2021-07-07 06:50:47 字數 708 閱讀 4175

塊級元素,行級元素都是盒子模型

三種定位機制:標準文件流、浮動(float)及絕對定位

margin auto;

(1)設定了浮動的元素仍然處於標準文件流中

(2)當設定浮動,沒有輸入內容,就會縮成乙個點

(3)浮動會影響接下來的下乙個元素

(4)清除浮動:

clear:both

width:100%;overflow:hidden;

當父塊上的兩個元素設定浮動,把父塊縮成一條的時候,之後用第二種方法清除浮動

static表示正常定位

relative 相對於原來位置偏移,出現堆疊,但仍處在標準文件流中

absolute和fixed都屬於絕對定位,完全脫離了標準文件流,產生堆疊,兄弟元素不再受之影響(1)absolute時,沒有設定寬度,則寬度隨內容(2)帶有偏移量時,absolute參照最近的具有定位祖先元素進行偏移(靜態定位不算,沒有則是html,不是body)(3)不帶偏移量時,以body左上角(4)使用absolute實現列布局時,常用於乙個寬度固定,另乙個寬度自適應

div的高度一般不要設定

網頁布局基礎 css布局學習總結

1.標準文件流 從上到下,從左到右輸出文件內容 2.浮動 3.絕對定位 需要注意的是塊級元素如div p ul 等 行級元素如span strong img input等 塊級元素與行級元素都是盒子模型,下面說下盒子模型 盒子模型是網頁布局的基石,border padding margin 下面給出...

CSS 網頁布局

一些布局 行布局 多列布局 聖杯布局 雙飛翼布局 會使用到 html和css基礎 會使用div css進行排版 熟悉 float屬性 position屬性。1 經典的行布局 基礎的行布局 行布局自適應 行布局自適應限制最大寬 行布局垂直水平居中 container 水平與垂直居中 container...

CSS 網頁布局

頭部區域位於整個網頁的頂部,一般用於設定網頁的標題或者網頁的 logo 鏈結鏈結 鏈結 重置瀏覽器大小檢視效果。鏈結鏈結 鏈結學的不僅是技術,更學的不僅是技術,更是夢想!學的不僅是技術,更是夢想!學的不僅是技術,更是夢想!學的不僅是技術,更是學的不僅是技術,更是夢想 學的不僅是技術,更是夢想!學的不...