第8章 布局

2022-09-03 22:30:26 字數 1780 閱讀 6962

css布局技術的根本即3個基本概念:定位,浮動,外邊距操縱

一 計畫布局

1 頁面大結構劃分————關注內容區域(尋找共同特徵而不是視覺表現,尋找重複模式)————在內容中尋找不同布局

二 設計基本結構

hack:混雜模式中的ie5和ie6不支援margin:auto;但是ie將text-align: center;誤解為將所有東西居中。因此可以讓標籤中所有元素居中,然後讓容器內容重新左對齊。

body

三 基於浮動的布局

常用的清理浮動的方法是:浮動幾乎所有東西,然後再「戰略點」進行一次或兩次清理,或使用溢位方法。

兩列浮動布局:

/*次要內容將位於左邊,但是將主要內容放在前面一是因為主內容是頁面上最重要的部分,所以應該首先出現。其次可以方便螢幕閱讀器使用者。

iebug :在符合標準的瀏覽器中,如果元素內容太大,會超出框之外;但在ie中,整個元素會擴充套件,迫使一列退到另一列下面。原因是ie考慮元素內容的尺寸而不是元素本身的尺寸。引起內容擴充套件的因素可能是很小的東西引起,比如設定了斜體,在緊密的布局中就會導致浮動元素下退。其他的iebug 如畫素文字偏移和雙外邊距浮動以及各瀏覽器的取整錯誤都會導致浮動元素下降。

因此,可以不使用水平外邊距或內邊距設定隔離帶,而是讓乙個元素左浮動,另乙個右浮動。

.content .content .primary .content .secondary
三列浮動布局:相似於兩列布局,區別在於在主內容div新增了兩個新div.

固定寬度,流式和彈性布局:

流式布局:尺寸以百分數設定,高效使用空間

視窗寬度較大時,行變得較長也難以閱讀----使用百分比設定內邊距或外邊距;只橫跨容器的一部分;設定max-width;

liquid fold工具:計算佔比

彈性布局:以em為單位相對於字型大小設定元素寬度。字型大小增加時布局隨之增大。

缺點:不能充分利用空間,可能導致水平滾動條出現。----容器div新增100%的max-width(ie6中實現用js)

技巧:設定基字型大小,使1em約為10px;例:font-size:62.5%;(瀏覽器預設你字型大小16畫素)

其他:容器寬度em,其他用百分比。方便修改布局總尺寸但不用修改每個畫素寬度。

流式和彈性對固定寬度影象影響問題:1使用背景影象而不是影象元素。2 3 將影象新增到沒有任何尺寸的頁面,設定影象百分比寬度,用max-width避免失真。

四 faux列

///暫空//

五 高度相同的列

設定大的底內邊距,用數值相似的負外邊距消除這個高度,20畫素差值形成底邊;容器overflow:hidden;列將在最高點被裁切。

最後定位底部邊框。

內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容

內容內容內容內容內內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容

內容內容內容內容內容內容內容內容內容

六 css3列

css3 建立等高文字列:column-count;column-width;column-gap;

可用空間小於已定義列寬時,列不會圍繞,而是減少列數。例如用此屬性建立三列布局,如果空間不夠現實三列,就會減少到兩列。

精通CSS 第8章 布局

所有css布局技術的根本都是3個基本概念 定位 浮動和外邊距操作。8.1 計畫布局 要想建立可伸縮且容易維護的css系統,首先應該檢查設計,尋找重複的模式,這包括頁面結構中的模式或在站點中元素反覆出現的方式。8.2 設定基本結構 使用margin auto 讓設計居中 html lang en cl...

CSS總結 第8章 彈性布局 flex

主軸方向 flex direction 元素在主軸的對齊方式 justify content 換行方式 flex wrap 對齊div元素 align items 多項多軸線的對齊方式,乙個軸線沒有作用 align content 預設 軸線佔滿整個交叉軸 stretch 交叉軸起點 flex st...

第8章指標

1.指標 指標是儲存記憶體位址的變數。在記憶體中每一塊儲存單元都有相對應的唯一的位址編號,指標就是一塊儲存這種編號的空間 2.對於乙個變數可以用 符號來獲取它的位址 int a int p a 什麼樣的變數,就需要宣告對應的型別的指標。這是為了告訴系統,我從這個位址開始要讀取多少位的記憶體塊,才能正...