前端基礎複習 10CSS 定位? PC端的布局?

2021-10-07 23:58:44 字數 650 閱讀 7326

1. css 定位?

position : 

static(預設)

relative

absolute

fixed

sticky

relative:

如果沒有定位偏移量,對元素本身沒有任何影響

不使元素脫離文件流

不影響其他元素布局

left、top、right、bottom是相對於當前元素自身進行偏移的

absolute:

使元素完全脫離文件流

使內聯元素支援寬高 (讓內聯具備塊特性)

使塊元素預設寬根據內容決定(讓塊具備內聯的特性)

如果有定位祖先元素相對於定位祖先元素發生偏移,沒有定位祖先元素相對於整個文件發生偏移(絕對、相對、固定)

fixed:

使元素完全脫離文件流

使內聯元素支援寬高 (讓內聯具備塊特性)

使塊元素預設寬根據內容決定(讓塊具備內聯的特性)

相對於整個瀏覽器視窗進行偏移,不受瀏覽器滾動條的影響

sticky黏性定位:

在指定的位置,進行黏性操作。

z-index定位層級。

2. pc端的布局?

通欄 : 自適應瀏覽器的寬度。

版心 : 固定乙個寬度,並且讓容器居中。  

CSS基礎學習10 CSS設定元素的定位

十 css設定元素的定位 css定位可以將乙個元素精確的放在頁面上你所指定的地方。聯合使用定位和float 浮動 可以建立多種高階而精確的布局。1.絕對定位 乙個採用絕對定位的元素不獲得任何空間。這就意味著 該元素在被定位後不會留下空位。value position absolute 然後可以通過屬...

10 CSS的屬性縮寫

一些css屬性允許使用一串值代替許多屬性,值使用空格分開。margin,pdding和border width允許合併 margin top width,margin right width,margin bottom width等等,形式像這樣 property top right bottom ...

前端複習記錄(前端基礎 CSS)二

修改父元素的color屬性 line height一般是指布局裡面一段文字上下行之間的高度,是針對字型來設定的,height一般是指容器的整體高度,background color設定的背景顏色會填充元素的content padding border區域 margin的外邊緣 聖杯布局是指布局從上到...