? ? 樓主剛學(xué)不久 ， 學(xué)到css 發(fā)現(xiàn)十分有趣和好玩，今天跟大家分享一下 CSS中，div 標(biāo)簽的介紹，這也是我上課的筆記

div ，用得非常多的標(biāo)簽，也是最重要的標(biāo)簽

本身是一個(gè)html的標(biāo)簽，

• 特點(diǎn)： div默認(rèn)寬度為100%，高度為0.

• 本身不支持高度 寬度屬性，但可以通過css 來設(shè)置

語法： 《div》《/div》

應(yīng)用場(chǎng)景 本身沒有過多的自帶屬性或者樣式，所以div可塑性很高。同時(shí)也是 div+css 布局的核心。

div默認(rèn)單獨(dú)顯示在一行

?

div+css布局

概念：指利用了div+css技術(shù)來對(duì)網(wǎng)頁(yè)進(jìn)行布局并實(shí)現(xiàn)網(wǎng)頁(yè)的一種布局解決方案

核心：

• div

• css基礎(chǔ)

• css 盒模型

• css 浮動(dòng)

• css定位

CSS盒模型

概念在css中，將html的頁(yè)面上的每一個(gè)html標(biāo)簽都看成一個(gè)盒子，可以利用css相關(guān)屬性來控制這個(gè)盒子的尺寸和位置。而我們將這個(gè)盒子及相關(guān)css屬性統(tǒng)稱為盒模型。

相關(guān)CSS屬性

• 盒模型尺寸相關(guān)：

  • width:

  • height:

  • border：

  上右下左都不一樣時(shí)，只能單獨(dú)設(shè)置 border-top/bottom/left/right： 1px solid red;

  • padding： 標(biāo)簽內(nèi)部?jī)?nèi)容和border之間的距離，如下圖

    設(shè)置padding后HTML的標(biāo)簽會(huì)自動(dòng)撐大，盒子也會(huì)被撐大！

    padding：left

    padding：right

    padding：top

    padding：bottom

    可單獨(dú)設(shè)置某一條邊

    （padding）

• ?

  ?

  ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?(padding left)

  • padding快捷設(shè)置方式

    統(tǒng)一設(shè)置：padding: 20px;

  • 上下一樣 左右一樣 padding: 20px 40px;即上下都是20px,左右都是40px.

  • 上右下左都不一樣時(shí)，給4個(gè)值即可。 padding：10px 20px 30px 40px;順時(shí)針進(jìn)行。

  ?

• 盒模型控制位置相關(guān)（html 標(biāo)簽之間的距離）

• margin：控制盒子之間的距離

  統(tǒng)一設(shè)置 margin:20px

?

單獨(dú)設(shè)置

margin-left;

margin-right；

margin-top;

margin-bottom;

統(tǒng)一設(shè)置 統(tǒng)一設(shè)置 margin:20px

上下一樣 左右一樣 margin: 20px 40px;

上右下左都不一樣時(shí)，給4個(gè)值即可。margin: 10px 20px 30px 40px;

float:left;(css浮動(dòng))

?

• 盒子尺寸

  盒子寬度: width+padding(左右)+border(左右)+margin(左右)；

  盒子總高度：width+padding(上下)+border(上下)+margin(上下)；

補(bǔ)充CSS屬性

box-shadow:設(shè)置盒子陰影，(css3以下的屬性)

box-shadow: 0px 0px 10px black;

?

css 浮動(dòng)

概念：css浮動(dòng)指將多個(gè)獨(dú)行顯示的標(biāo)簽可以設(shè)置成同行顯示，本質(zhì)上是指的是css屬性：float 的使用

使用： float: left | right| none|

?

特點(diǎn)：當(dāng)對(duì)HTML標(biāo)簽設(shè)置float時(shí)，該標(biāo)簽就已經(jīng)變成了浮動(dòng)標(biāo)簽，或者浮動(dòng)元素，它會(huì)和其他的浮動(dòng)元素顯示在同一行，如果該行寬度容不下浮動(dòng)元素時(shí)，那么會(huì)自從切換到下一行，如果還不夠會(huì)繼續(xù)切換，直到和屏幕左邊靠攏。

?

3.當(dāng)浮動(dòng)元素遇上非浮動(dòng)元素，會(huì)有一些影響，非浮動(dòng)元素 會(huì)認(rèn)為頁(yè)面上沒有浮動(dòng)元素，會(huì)占用浮動(dòng)元素原本的空間。

?

如果非浮動(dòng)元素中有文本，那么文本會(huì)被浮動(dòng)元素給擠下去（如上圖）。

float:none; 清除浮動(dòng)（取消浮動(dòng)元素對(duì)非浮動(dòng)元素的影響）

給受影響的非浮動(dòng)元素添加一個(gè)CSS屬性

clear:both | left| right |:清除浮動(dòng)元素的影響

?

?

總結(jié)

以上是生活随笔為你收集整理的前端设计 最详细的div介绍+效果图+代码图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。