本篇內(nèi)容主要講解“DIV+CSS定義及優(yōu)勢(shì)有哪些”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“DIV+CSS定義及優(yōu)勢(shì)有哪些”吧!

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了達(dá)州免費(fèi)建站歡迎大家使用！

Div+css 是一種目前比較流行的網(wǎng)頁(yè)布局技術(shù)

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

表現(xiàn)和內(nèi)容相分離

代碼簡(jiǎn)潔，提高頁(yè)面瀏覽速度

易于維護(hù)和改版

提高搜索引擎對(duì)網(wǎng)頁(yè)的索引效率

我們可以簡(jiǎn)單的這樣理解div+css:

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

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

HTML只是賦予內(nèi)容的手段，大部分HTML標(biāo)簽都有其意義（例如，標(biāo)簽p創(chuàng)建段落，h2標(biāo)簽創(chuàng)建標(biāo)題等等）的，然而div和span標(biāo)簽似乎沒(méi)有任何內(nèi)容上的意義，聽(tīng)起來(lái)就像一個(gè)泡沫做成的錘子一樣無(wú)用。但實(shí)際上，與CSS結(jié)合起來(lái)后，它們被用得十分廣泛。你所需要記住的是span和div是“無(wú)意義”的標(biāo)簽。它們的存在純粹是應(yīng)用樣式，所以當(dāng)樣式表失效時(shí)它就沒(méi)有任何的作用

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

div的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來(lái)構(gòu)成這個(gè)塊的，其中所包含元素的特性由div標(biāo)簽的屬性來(lái)控制，或者是通過(guò)使用樣式表格式化這個(gè)塊來(lái)進(jìn)行控制

（1）盒子模型的相關(guān)屬性

margin（外邊距/邊界）

border（邊框）

padding（內(nèi)邊距/填充 ）

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

以上屬性又分為上、右、下、左四個(gè)方向

問(wèn)題：頁(yè)面元素的寬度width、高度height如何計(jì)算？

答案：元素的實(shí)際占位尺寸=元素尺寸 + padding + 邊框?qū)挾?/p>

比如：元素實(shí)際占位高度=height屬性 + 上下padding + 上下邊框?qū)挾?/p>

（2）盒模型的層次關(guān)系

我們通過(guò)一個(gè)經(jīng)典的盒模型3D立體結(jié)構(gòu)圖來(lái)理解，如圖：

從上往下看，層次關(guān)系如下：

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

第2層：元素的內(nèi)容（content）、內(nèi)邊距（padding）

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

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

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

從這個(gè)層次關(guān)系中可以看出，當(dāng)同時(shí)設(shè)置背景圖和背景色時(shí)，背景

圖將在背景色的上方顯示

例如：

水平居中和垂直居中

水平居中包含兩種情況：

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

文字內(nèi)容的水平居中：text-align: center;

垂直居中：

常見(jiàn)的單行文字的垂直居中可設(shè)置文字所在行的height與

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

div{

width: 400px;

height: 400px;

line-height: 400px;

}

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

文檔流：瀏覽器根據(jù)元素在html文檔中出現(xiàn)的順序，

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

浮動(dòng)屬性是CSS中的定位屬性，用法如下：

float: 浮動(dòng)方向（left、right、none）;

left為左浮動(dòng)、right為右浮動(dòng)、none是默認(rèn)值表示不浮動(dòng)

，設(shè)置元素的浮動(dòng)，該元素將脫離文檔流，向左或向右移動(dòng)

直到它的外邊距碰到父元素的邊框或另一個(gè)浮動(dòng)元素的邊

框?yàn)橹?/p>

浮動(dòng)示例，沒(méi)有使用浮動(dòng)的3個(gè)DIV：

HTML結(jié)構(gòu)代碼：

CSS樣式代碼：

#first, #second, #third{

width:100px;

height:50px;

border:1px #333 solid;

margin:5px;

}

執(zhí)行效果如圖：

樣式中加入 float:left;

執(zhí)行效果如圖：

你再修改為 float: right試試右浮動(dòng)是什么效果

16、讓商品分類(lèi)DIV、內(nèi)容DIV和右側(cè)DIV并排放置

HTML結(jié)構(gòu)代碼：

CSS樣式代碼（在第13節(jié)CSS代碼基礎(chǔ)上加入）：

17、clear清除

clear只對(duì)塊級(jí)元素有效，表示如果前一個(gè)元素存在左浮動(dòng)或右浮動(dòng)，則換行

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

到此，相信大家對(duì)“DIV+CSS定義及優(yōu)勢(shì)有哪些”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！