css div學習筆記第1天

2021-05-23 04:59:34 字數 905 閱讀 8346

(1)一列固定寬度

#layut

(2)一列自適應寬度

#layout

(3)一列固定寬度居中

#layout

說明:margin屬性用於控制物件的上、右、下、左四個方向的外邊距,當margin使用兩個引數時,第乙個引數表示上下邊距,第二個引數表示左右邊距。除了直接使用數值之外,margin還支援乙個值叫auto,auto值是讓瀏覽器自動判斷邊距,在這裡,我們給當前div的左右邊距設定為auto,瀏覽器就會將div的左右邊距設為相當,並呈現為居中狀態,從而實現了局中效果。

(4)二列固定寬度

左列右列

說明:float屬性是css布局中非常重要的乙個屬性,用於控制物件的浮動布局方式,我們的大部分div布局基本上都通過float的控制來實現布局,float的可選引數為:none/left/right。

float使用none值時表示物件不浮動,而使用left時,物件將向左浮動,例如本例中的div使用了float:left;之後,右側的內容將流到當前物件的右側。使用right時,物件將向右浮動,如果將#left的float值設定為right,將使得#left物件浮動到網頁右側,而#right物件則由於float:left;屬性浮動到網頁左側。

(5)二列寬度自適應

#left

#right

說明:在css布局中,乙個物件的寬度,不僅僅由width值來決定,乙個物件的真實寬度是由物件本身的寬、物件的左右邊距,以及左右邊框,還有內邊距這些屬性相加而成,因此左面的物件不僅僅是瀏覽器視窗的20%的寬度,還應該加上左邊的邊框的寬度。這樣算下來左右欄都超出了自身的百分比寬度,最終的寬度也超過了瀏覽器視窗的寬度,因此右欄將被擠掉第二行顯示,從而失去了左右分欄的效果,因此這裡使用了並非100%的寬度之和,而在實際應用之中,可以通過避免邊框及邊距的使用,而達到左右與瀏覽器填滿的效果。

Linux學習筆記第1天

今天學習了linux的有關目錄的基本命令。ls 檢視當前目錄下的檔案和目錄 a檢視所有檔案和目錄,包括隱藏檔案。l檢視檔案的詳細資訊。d檢視目錄的詳細資訊,與 l一起使用。h轉換成方面人檢視的資訊 mkdir 建立目錄 p遞迴建立,可以建立新目錄的同時再建立乙個子目錄 mkdir root desk...

python學習筆記 第1天

首先就是裝飾器的裝飾和呼叫,直接上 1.首先裝飾器的裝飾順序是從下往上進行裝飾 2.呼叫的時候要從上往下進行呼叫 舉例 def w1 func print 正在裝飾1 def inner print 正在呼叫1 func return inner def w2 func print 正在裝飾2 de...

css div學習筆記

l 載入css樣式有以下四種 1.外部樣式 2.內部樣式 3.行內樣式 4.匯入樣式 l 這種形式是把css單獨寫到乙個css檔案內,然後在源 中以link方式鏈結。它的好處是不但本頁可以呼叫,其它頁面也可以呼叫,是最常用的一種形式。l 這種形式是內部樣式表,它是以結尾,寫在源 的head標籤內。這...