css學習 css浮動

2022-05-15 20:10:47 字數 1313 閱讀 3769

1、文件流介紹

網頁布局的核心就是利用css來擺放盒子,

把盒子擺放在合適的位置。

css的定位機制有以下3種(網頁布局一般需要3種搭配使用):

a、普通流(標準流)

b、浮動

1、浮動只有左右。

2、浮動後找離他最近的父元素靠左/右對齊。

3、!!!乙個父盒子裡的子盒子,如果其中乙個子元素有浮動的話,則其他子元素都需要浮動,這樣才能一行顯示。

4、浮動飄在標準流的上面,壓住標準流。

5、浮動元素有哪些特性?(浮動影響盒子顯示模式)

1、塊級元素浮動後會有行內塊特性

2、行內元素浮動後也具有行內塊特性

6、!!!浮動的使用方式:浮動首先要用標準流父級包裹起來

!!!浮動的元素要用標準流的塊級包裹

浮動的目的:就是為了讓多個塊級元素一行顯示

7、 浮動的特性:

c、定位

後面更新。。。

2、版心和布局流程

版心:布局流程:

注意:先看行再看列,一行一行的做。

常見案例:

一:

二:所有列的必定有個行包裹,類似於**(因為浮動會影響後面的別人)

CSS學習筆記 浮動

float left float right float none css的float 屬性可以使乙個元素脫離正常的文件流,然後被安放到它所在容器的的左端或者右端,並且其他的文字和行內元素圍繞它安放。除了left和right,float還有乙個屬性 none,用來防止元素浮動。有一些列特定規則控制著...

前端學習 Css 浮動

塊元素在文件流中預設垂直排列,所以這個三個div自上至下依次排開,如果希望塊元素在頁面中水平排列,可以使塊元素脫離文件流。使用float來使元素浮動,從而脫離文件流 可選值 none,預設值,元素預設在文件流中排列。left,元素會立即脫離文件流,向頁面的左側浮動。right,元素會立即脫離文件流,...

CSS 浮動 定位 學習

回顧理解塊級元素 address 位址 blockquote 塊引用 center 居中對齊塊 dir 目錄列表 div 常用塊級容器,也是css layout的主要標籤 dl 定義列表 fieldset form控制組 form 互動表單 h1 大標題 h2 副標題 h3 3級標題 h4 4級標題...