CSS學習總結 基礎篇 浮動的概念及其使用

2021-10-02 20:29:25 字數 1367 閱讀 2328

標準流就是標籤按照規定好的順序排列。

標準流布局

塊級元素獨佔一行,從上到下排列

常用元素: **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選擇器

選擇器就是根據不同需求把不同的標籤選出來,然後針對性性的進行樣式設定 通過選擇器,我們還可以實現各種複雜的指定,同時也能大量減少樣式表的 書寫量,最終書寫出來的樣式表也會變得簡潔明瞭。即把某個標籤選擇出來 示例 選擇器分為基礎選擇器和復合選擇器兩大類。基礎選擇器就是由單個選擇器構成 基礎選擇器又可以...