DIV+CSS定義及優勢有哪些

本篇內容主要講解“DIV+CSS定義及優勢有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“DIV+CSS定義及優勢有哪些”吧!

　　Div+css 是一種目前比較流行的網頁布局技術

　　Div 來存放需要顯示的數據（文字，圖表） , css 就是用來指定怎樣顯示， 從而做到數據和顯示相互的效果

　　表現和內容相分離

　　代碼簡潔，提高頁面瀏覽速度

　　易于維護和改版

　　提高搜索引擎對網頁的索引效率

　　我們可以簡單的這樣理解div+css:

　　div 是用于存放內容（文字，圖片，元素）的容器。

　　css 是用于指定放在div中的內容如何顯示，包括這些內容的位置和外觀。

　　HTML只是賦予內容的手段，大部分HTML標簽都有其意義（例如，標簽p創建段落，h2標簽創建標題等等）的，然而div和span標簽似乎沒有任何內容上的意義，聽起來就像一個泡沫做成的錘子一樣無用。但實際上，與CSS結合起來后，它們被用得十分廣泛。你所需要記住的是span和div是“無意義”的標簽。它們的存在純粹是應用樣式，所以當樣式表失效時它就沒有任何的作用

　　它們被用來組合成一大塊的HTML代碼并賦予一定的信息，大部分用類屬性class和標識屬性id與元素聯系起來。span和div的不同之處在于span是內聯的，用在一小塊的內聯HTML中。而div（division）元素是塊級的（簡單地說，它等同于其前后有斷行），用于組合一大塊的代碼，為HTML 文檔內大塊的內容提供結構和背景的元素，可以包含段落、標題、表格甚至其他部分，這使div便于建立不同集成的類。

　　div的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由div標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制

　　（1）盒子模型的相關屬性

　　margin（外邊距/邊界）

　　border（邊框）

　　padding（內邊距/填充 ）

　　我們看圖理解一下各屬性作用：

　　以上屬性又分為上、右、下、左四個方向

　　問題：頁面元素的寬度width、高度height如何計算？

　　答案：元素的實際占位尺寸=元素尺寸 + padding + 邊框寬度

　　比如：元素實際占位高度=height屬性 + 上下padding + 上下邊框寬度

　　（2）盒模型的層次關系

　　我們通過一個經典的盒模型3D立體結構圖來理解，如圖：

　　從上往下看，層次關系如下：

　　第1層：盒子的邊框（border），

　　第2層：元素的內容（content）、內邊距（padding）

　　第3層：背景圖（background-image）

　　第4層：背景色（background-color）

　　第5層：盒子的外邊距（margin）

　　從這個層次關系中可以看出，當同時設置背景圖和背景色時，背景

　　圖將在背景色的上方顯示

　　例如：

　　水平居中和垂直居中

　　水平居中包含兩種情況：

　　塊級元素的水平居中：margin:0px auto;

　　文字內容的水平居中：text-align: center;

　　垂直居中：

　　常見的單行文字的垂直居中可設置文字所在行的height與

　　行高樣式屬性一致，比如：

　　div{

　　width: 400px;

　　height: 400px;

　　line-height: 400px;

　　}

　　理解浮動屬性首先要搞清楚，什么是文檔流？

　　文檔流：瀏覽器根據元素在html文檔中出現的順序，

　　從左向右，從上到下依次排列

　　浮動屬性是CSS中的定位屬性，用法如下：

　　float: 浮動方向（left、right、none）;

　　left為左浮動、right為右浮動、none是默認值表示不浮動

　　，設置元素的浮動，該元素將脫離文檔流，向左或向右移動

　　直到它的外邊距碰到父元素的邊框或另一個浮動元素的邊

　　框為止

　　浮動示例，沒有使用浮動的3個DIV：

　　HTML結構代碼：

　　<div id="first">第1塊div</div>

　　<div id="second">第2塊div</div>

　　<div id="third">第3塊div</div>

　　CSS樣式代碼：

　　#first, #second, #third{

　　width:100px;

　　height:50px;

　　border:1px #333 solid;

　　margin:5px;

　　}

　　執行效果如圖：

　　樣式中加入 float:left;

　　執行效果如圖：

　　你再修改為 float: right試試右浮動是什么效果

　　16、讓商品分類DIV、內容DIV和右側DIV并排放置

　　HTML結構代碼：

　　CSS樣式代碼（在第13節CSS代碼基礎上加入）：

　　17、clear清除

　　clear只對塊級元素有效，表示如果前一個元素存在左浮動或右浮動，則換行

　　clear屬性的取值：rigth、left、both、none

到此，相信大家對“DIV+CSS定義及優勢有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！