CSS之定位(很用心全面的總結)

2021-10-24 16:09:29 字數 1335 閱讀 1260

浮動可以讓多個塊級盒子一行沒有縫隙排列顯示,經常用於橫向排列盒子。

定位則是可以讓盒子自由的在某個盒子內移動位置或者固定螢幕中的某個位置,並且可以壓住其他盒子。

定位:將盒子定在某乙個位置,所以定位也是在擺放盒子,按照定位的方式移動盒子。

定位 = 定位模式 + 邊偏移值語義

static;

靜態定位

relative;

相對定位

absolute;

絕對定位

fixed;

固定定位

邊偏移屬性

描述top

頂部偏移量,定義元素相對於其父元素上邊線的距離

bottom

底部偏移量,定義元素相對於其父元素下邊線的距離

left

左側偏移量,定義元素相對於其父元素左邊線的距離

right

右側偏移量,定義元素相對於其父元素右邊線的距離

靜態定位是元素預設定位方式,無定位的意思。

相對定位是元素在移動位置的時候,是相對於它原來的位置來說的。

絕對定位是元素在移動位置的時候,是相對於它祖先元素來說的。

總結:因為父級需要占有位置,因此是相對定位,子盒子不需要占有位置,則是絕對定位。

固定定位是元素固定於瀏覽器可視區的位置。主要使用場景:可以在瀏覽器頁面滾動時元素的位置不會改變。

以瀏覽器的可視視窗為參照點移動元素。

固定定位不再占有原先的位置。

固定在版心右側位置

讓固定定位的盒子left:50%。走到瀏覽器可視區(同版心)的一半位置。

讓固定定位的盒子margin-left:版心寬度的一般距離。多走版心寬度的一般位置就可以讓固定定位的盒子貼著版心右側對齊了。

粘性定位可以被認為相對定位和固定定位的混合。

以瀏覽器的可視串列埠為參照點移動元素(固定定位特點)

粘性定位占有原先的位置(相對定位特點)

必須新增top、left、right、bottom其中乙個才有效

跟頁面滾動搭配使用,相容性較差,ie不支援。

在使用定位布局時,可能會出現盒子重疊的情況,此時,可以使用z-index來控制盒子的前後次序(z軸)

加了絕對定位的盒子不能通過margin:0 auto; 水平居中。可以通過以下計算方法實現水平和垂直居中。

絕對定位和固定定位也和浮動類似。

浮動元素不同,只會壓住他下面標準流的盒子,但是不會壓住下面標準流盒子裡面的文字()。

但是絕對定位(固定定位)會壓住下面標準流所有的內容。

浮動之所以不會壓住文字,因為浮動產生的目的最初是為了做文字環繞效果的。文字會圍繞浮動元素。

定位這一塊比較重要,熟能生巧是真的。創造優秀的布局是必須掌握的。

超全面的CSS居中方法總結

class parent class child contentspan div 方法一 parent 方法二 parent parent class parent class child contentdiv div parent child 方法一 定位 parent child 方法二 計算方...

比較全面的 CSS 選擇器總結

與任何元素匹配 e e 表示 html 的元素名 div first letter 對指定物件內的第乙個字元起作用,僅對塊元素起作用 first line 對指定物件內的第一行內容起作用,僅對塊元素起作用 before afte e attr 表示針對具有 attr 屬性的 e 元素起作用 div ...

CSS總結五之定位

普通流 標準流 浮動 定位在 css 中,通過top bottom left和right屬性定義元素的邊偏移 邊偏移屬性 示例描述 toptop 80px頂端偏移量,定義元素相對於其父元素上邊線的距離。bottombottom 80px底部偏移量,定義元素相對於其父元素下邊線的距離。leftleft...