CSS 盒子模型,絕對定位和相對定位

2021-07-24 18:11:58 字數 716 閱讀 9220

一、盒子模型:

標準模式和混雜模式(ie)。在標準模式下瀏覽器按照規範呈現頁面;在混雜模式下,頁面以一種比較寬鬆的向後相容的方式顯示。混雜模式通常模擬老式瀏覽器的行為以防止老站點無法工作。

css盒子模型具有內容(content)、填充(padding)、邊框(border)、邊界(margin)這些屬性。我們所說的width,height指的是內容(content)的寬高,乙個盒子模型的寬度=:width+ pdding(寬) + border(寬),高度=height + padding(高) + border(高)。

二、絕對定位和相對定位:

relative(相對定位) 物件不可層疊、不脫離文件流,參考自身靜態位置通過 top,bottom,left,right 定位,並且可以通過z-index進行層次分級。

absolute(絕對定位)脫離文件流,通過 top,bottom,left,right 定位。選取其最近乙個最有定位設定的父級物件進行絕對定位,如果物件的父級沒有設定定位屬性,absolute元素將以body座標原點進行定位,可以通過z-index進行層次分級。

CSS 盒子模型,絕對定位和相對定位

一 盒子模型 標準模式和混雜模式 ie 在標準模式下瀏覽器按照規範呈現頁面 在混雜模式下,頁面以一種比較寬鬆的向後相容的方式顯示。混雜模式通常模擬老式瀏覽器的行為以防止老站點無法工作。css盒子模型具有內容 content 填充 padding 邊框 border 邊界 margin 這些屬性。我們...

css盒子模型,絕對定位和相對定位

position absolute relative fixed static inherit absolute 絕對定位 相對於除了static定位以外的第乙個父元素進行定位 relative 相對定位 生成相對定位的元素,相對於其正常位置進行定位。fixed 固定定位 生成絕對定位的元素,相對於...

HTMLCSS小白 盒子模型,絕對定位和相對定位

doctype html title text css width 100px height 100px background color red border 10px solid green padding 100px 150px padding top 200px 乙個值是正方形 兩個值 是 ...