精通css筆記 布局

2021-08-29 19:48:42 字數 473 閱讀 3642

一、居中

1、自動空白邊 margin:0 auto;

2、相對定位加負值空白邊

position:relative;

left:50%;

margin-left:-50%;

二、浮動布局

1、兩列浮動布局 float:left;float:right

2、三列浮動布局,把兩列中的一列再分成兩列

三、流體布局

以百分代替px,要確定最小值以避免過小

四、彈性布局

以em為單位

五、流體-彈性布局

以em設定寬度,以%設定最大寬度

六、非固定布局中影象的處理

1、作為背景

2、設定包含影象的容器overflow:hidden;避免伸縮

3、對於可伸縮的影象,設定max-length防止失真

七、布局的背景

設定background時用百分數定位

精通CSS筆記 第7章 布局

所有css布局技術依賴於三個基本概念 定位 浮動和空白邊margin操縱 主要內容 1.讓設計在頁面中水平居中 2.建立兩列和三列的基於浮動的布局 3.建立固定寬度 流體和彈性布局 4.將列拉長到整個可用的寬度 讓設計居中有兩個基本方法 乙個方法使用自動空白邊 margin auto 另乙個方法使用...

《精通css》筆記

1.要知道常用選擇器 id選擇器,類選擇器,型別選擇器,後代選擇器,偽類選擇器 文件結構之外 通用選擇器 高階選擇器 子選擇器,相鄰同胞選擇器,屬性選擇器 2.選擇器特殊性分級 3.層疊和繼承的區別 4.設計 的結構,使用風格統一的大注釋塊分割每個部分 一般性樣式 輔助樣式 頁面結構 頁面組建 覆蓋...

精通CSS 第8章 布局

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