div浮動層與div層有何不同css中有什麼關係

來源:互聯網
上載者:User

標籤:style   http   使用   os   html   代碼   div   ar   

 

div浮動層與div層有何不同css中有什麼關係

首先DIV浮動層與DIV層都是指DIV布局,體感音樂一般使用CSS樣式表加DIV標籤組合進行布局網頁。

div層一般包括div浮動層,div浮動層說明div被加入css浮動樣式所以被稱為div浮動層,而沒有加入float浮動樣式不具有浮動效果,所以如果沒有被加浮動樣式div不被稱為浮動層。當然span、h1、ul、li等標籤也是層,只不過span、h1、ul、li等標籤沒有div使用頻率高,所以一般就將div作為象徵性稱呼。

接下來DIVCSS5通過執行個體告訴大家什麼是一般層,什麼是浮動層?為什麼要使用div css浮動層。

1、完整DIV+CSS執行個體HTML代碼如下體感音樂放鬆椅

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div層與浮動層</title>
<style>
.divcss5{ width:400px; height:100px}
.divcss5-a{ float:left; border:1px solid #F00; width:100px; height:80px}
.divcss5-b{ float:right; border:1px solid #00F; width:100px; height:80px}
</style> 體感音樂放鬆椅
</head>
<body>
<div class="divcss5">
<div class="divcss5-a"></div>
<div class="divcss5-b"></div>
</div>
</body>
</html>

對象".divcss5"沒有設定浮動,“.divcss5-a”設定靠左浮動(float:left),“.divcss5-b”設定靠右浮動(float:right)。

2、普通層與浮動層執行個體

普通層與浮動層CSS案例
普通層與浮動層CSS案例

3、層與浮動層總結體感音樂放鬆椅
在以上執行個體中“.divcss5”對象是普通層,而預設是不具有浮動效果的層,因為網頁內容是居左的所以看到此層居左,實際是沒有浮動樣式的一個DIV盒子層。而對象內子級“.divcss5-a”和“.divcss5-b”是設定float浮動所以變成了浮動層,從上可以看出他倆在“.divcss5”盒子內一個靠左浮動一個靠右浮動。普通層與浮動層區別就是在於是否被設定了css float浮動樣式。

4、為什麼設定浮動樣式
這個是因為想讓DIV對象盒子實現靠左或靠右布局。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.