標準流就是標籤按照規定好的順序排列。
標準流布局
塊級元素獨佔一行,從上到下排列
常用元素: **div hr p h1~h6 ul ol dl form table **
行元素會按照順序,從左到右依次排列 碰到父元素邊緣則會自動換行
常用元素: span a i em等等
多個塊元素橫向排列,建議用浮動來做
浮動是用於建立乙個浮動框,將其移到一邊,直到邊緣或右邊緣觸及包含塊或另乙個浮動的邊緣
語法:選擇器
屬性值描述
none
元素不浮動
left
元素向左浮動
right
元素向右浮動
浮動標籤的重要特徵
脫離標準流的控制,直接移動到指定的位置。
浮動的盒子不再保留原先的位置。
示例**:
"utf-8"
>
浮動<
/title>
.box1
.box2
<
/style>
<
/head>
="box1"
>第乙個浮動的盒子<
/div>
="box2"
>第二個未浮動的盒子<
可見給第乙個盒子設定了浮動後,失去了原先的位置,第二個盒子占領了第乙個盒子原先的位置,出現了重疊效果。
多個盒子設定為浮動時的效果
**:"utf-8"
>
浮動<
/title>
div.box2
.box3
.box4
<
/style>
<
/head>
="box1"
>第乙個盒子<
/div>
="box2"
>第二個盒子<
/div>
="box3"
>第三個盒子<
/div>
="box4"
>第四個盒子<
可見四個盒子無縫銜接的排列在一起。 當左右縮放網頁時,盒子的排列會改變。
浮動經常和標準的父盒子一起搭配。
css學習總結(一) 浮動
float屬性可以使塊元素位於頁面同一行內,但也存在以下問題 1.是否每行中所有同級塊元素都要加float屬性 2.當float元素後面的塊元素如何換行 3.當頁面 父元素 寬度縮小得比同行所有塊元素寬度 包括margin和padding 之和要小時,後面的塊元素會自動換行 解決以上問題的方法為 問...
CSS學習總結 基礎篇 背景的修改
css可以使用背景屬性設定背景顏色,背景,背景平鋪,背景位置,背景圖固定等。background color屬性可以定義任意元素的背景顏色。預設值是transparent 透明 示例 utf 8 表單 表單 如果需要設定背景是否平鋪,可以通過background repeat屬性來設定,有四個引數 ...
CSS學習總結 基礎篇 CSS選擇器
選擇器就是根據不同需求把不同的標籤選出來,然後針對性性的進行樣式設定 通過選擇器,我們還可以實現各種複雜的指定,同時也能大量減少樣式表的 書寫量,最終書寫出來的樣式表也會變得簡潔明瞭。即把某個標籤選擇出來 示例 選擇器分為基礎選擇器和復合選擇器兩大類。基礎選擇器就是由單個選擇器構成 基礎選擇器又可以...