css中div的用法

概念介紹：

創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)尚義,十年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

CSS

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化。CSS 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力。

DIV

DIV是層疊樣式表中的定位技術(shù)，全稱DIVision，即為劃分。有時(shí)可以稱其為圖層。DIV在編程中又叫做整除，即只得商的整數(shù)。 DIV元素是用來為HTML(標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用)文檔內(nèi)大塊(block-level)的內(nèi)容提供結(jié)構(gòu)和背景的元素。

定義

可定義文檔中的分區(qū)或節(jié)(division/section)。

標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。

如果用 id 或 class 來標(biāo)記

，那么該標(biāo)簽的作用會(huì)變得更加有效。

注釋:

是一個(gè)塊級(jí)元素，也就是說，瀏覽器通常會(huì)在 div 元素前后放置一個(gè)換行符。

提示:請(qǐng)使用

元素來組合塊級(jí)元素，這樣就可以使用樣式對(duì)它們進(jìn)行格式化。

實(shí)現(xiàn)下圖的加號(hào)效果：

css中div的用法

若想實(shí)現(xiàn)這個(gè)效果，只需一個(gè)div元素即可搞定。

需要用到css的為了before和after，以及border特性。

先設(shè)置一個(gè)div便簽

再設(shè)置一個(gè)邊框：

.add {
  border: 1px solid;
  width: 100px;
  height: 100px;
  color: #ccc;
  transition: color .25s;
  position: relative;
}

此時(shí)邊框是這樣的：

css中div的用法

我們可以利用偽類before和其border-top來設(shè)置一個(gè)“橫”：

.add::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  margin-left: -40px;
  margin-top: -5px;
  border-top: 10px solid;

}

注意我們使了絕對(duì)定位。此時(shí)變成了這樣：

css中div的用法

參照上面，我們可以使用after偽類和border-bottom設(shè)置一個(gè)“豎”：

.add::after {
 content: '';
 position: absolute;
 left: 50%;
 top: 50%;
 height: 80px;
 margin-left: -5px;
 margin-top: -40px;
 border-left: 10px solid;
}

在加上hover偽類，設(shè)置鼠標(biāo)懸浮上去的顏色：

最終的樣式：

css中div的用法