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

2021-07-24 00:26:57 字數 570 閱讀 4481

十、css設定元素的定位

css定位可以將乙個元素精確的放在頁面上你所指定的地方。聯合使用定位和float(浮動),可以建立多種高階而精確的布局。

1.絕對定位:

乙個採用絕對定位的元素不獲得任何空間。這就意味著:該元素在被定位後不會留下空位。

value:position:absolute; 然後可以通過屬性left、right、top、bottom來設定盒子放在**。

html檔案如下:

study測試文字資訊study

css檔案如下:

#box1

#box2

2.相對位置:

採用相對位置的元素,其位置是相對於它在文件中的原始位置計算而來的。

相對定位是通過將元素從原來的位置向左、向右、向上或者向下移動來定位的。

採用相對定位的元素會獲得相應的空間。

value:position:relative;

html檔案如下:

study測試文字資訊study

css檔案如下:

#box1

#box2

10 CSS的屬性縮寫

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

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

1.css 定位?position static 預設 relative absolute fixed sticky relative 如果沒有定位偏移量,對元素本身沒有任何影響 不使元素脫離文件流 不影響其他元素布局 left top right bottom是相對於當前元素自身進行偏移的 abs...

前端學習 CSS基礎設定

2.顏色表示 3.字型 4.行間距 7.以上僅為常見,更多搞手冊了解 畫素 px px 是網頁中使用最多的乙個單位,乙個畫素相當於螢幕中的乙個小點。螢幕由這些畫素點構成。畫素點越小,螢幕越清晰。百分比 使用百分比可以根據父元素的值來計算其大小,就永遠為父元素的一定比例大小,比較靈活,可以跟著父元素一...