浮動 定位及顯示屬性

2021-08-02 12:10:16 字數 756 閱讀 1256

1、最初的思想:文字繞排。

2、延伸:實現多欄布局。

3、清除浮動的方法

(1) 給父元素設定overflow:hidden

(2) 同時浮動父元素

(3) 對要清除浮動的元素增加clear:both樣式

(4) 增加新的元素,給該元素設定clear屬性來清除浮動

(5) 對於浮動的元素增加after偽元素

#div1

::after

note:

浮動之後的元素會脫離常規文件流,但其他元素中的文字會包圍在其四周。

(絕對定位完全不佔據空間)

兩個div如果想讓後面的div在前面div的右側,需要對後面的div也進行浮動。

position:static relative absolute fixed
預設值為static

1、static

按照順序進行布局的方式,在原文件流中的位置。

2、relative

relative相對於原來在文件流中的位置。

3、absolute

相對於上乙個非static定位的父元素進行定位。

4、fixed

相對於視口進行定位。

display屬性的值:block、inline、inline-block、none.

CSS 盒模型 屬性 浮動 定位 顯示

border之外是margin,border之內是padding padding之內是width height.margin垂直外邊距疊加,水平外邊距不疊加。上右下左,如圓形鐘錶,從半夜0點開始 width,預設值 auto,會讓元素的寬度與其父元素同寬 float leftorright 建立多欄...

清除浮動及定位

版心 可視區 是指網頁中主體內容所在的區域。一般在瀏覽器視窗中水平居中顯示,常見的寬度值為960px 980px 1000px 1200px等。清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。1 額外標籤法 2 父級新增overflow屬性方法 3 使用after偽元素清除浮動 4...

浮動及定位 字型

float 浮動的相關屬性 對元素 父容器 脫離文件流,對內容半脫離文件流 display 屬性。該屬性規定了元素應該生成的框的型別。常用屬性 預設值 inline,此時元素被顯示為行內元素。block 此時元素被顯示為塊級元素。inline block 此時元素被顯示為行內塊元素。none 此時元...