? ? 樓主剛學不久 ， 學到css 發現十分有趣和好玩，今天跟大家分享一下 CSS中，div 標簽的介紹，這也是我上課的筆記

div ，用得非常多的標簽，也是最重要的標簽

本身是一個html的標簽，

• 特點： div默認寬度為100%，高度為0.

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

語法： 《div》《/div》

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

div默認單獨顯示在一行

?

div+css布局

概念：指利用了div+css技術來對網頁進行布局并實現網頁的一種布局解決方案

核心：

• div

• css基礎

• css 盒模型

• css 浮動

• css定位

CSS盒模型

概念在css中，將html的頁面上的每一個html標簽都看成一個盒子，可以利用css相關屬性來控制這個盒子的尺寸和位置。而我們將這個盒子及相關css屬性統稱為盒模型。

相關CSS屬性

• 盒模型尺寸相關：

  • width:

  • height:

  • border：

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

  • padding： 標簽內部內容和border之間的距離，如下圖

    設置padding后HTML的標簽會自動撐大，盒子也會被撐大！

    padding：left

    padding：right

    padding：top

    padding：bottom

    可單獨設置某一條邊

    （padding）

• ?

  ?

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

  • padding快捷設置方式

    統一設置：padding: 20px;

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

  • 上右下左都不一樣時，給4個值即可。 padding：10px 20px 30px 40px;順時針進行。

  ?

• 盒模型控制位置相關（html 標簽之間的距離）

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

  統一設置 margin:20px

?

單獨設置

margin-left;

margin-right；

margin-top;

margin-bottom;

統一設置 統一設置 margin:20px

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

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

float:left;(css浮動)

?

• 盒子尺寸

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

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

補充CSS屬性

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

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

?

css 浮動

概念：css浮動指將多個獨行顯示的標簽可以設置成同行顯示，本質上是指的是css屬性：float 的使用

使用： float: left | right| none|

?

特點：當對HTML標簽設置float時，該標簽就已經變成了浮動標簽，或者浮動元素，它會和其他的浮動元素顯示在同一行，如果該行寬度容不下浮動元素時，那么會自從切換到下一行，如果還不夠會繼續切換，直到和屏幕左邊靠攏。

?

3.當浮動元素遇上非浮動元素，會有一些影響，非浮動元素 會認為頁面上沒有浮動元素，會占用浮動元素原本的空間。

?

如果非浮動元素中有文本，那么文本會被浮動元素給擠下去（如上圖）。

float:none; 清除浮動（取消浮動元素對非浮動元素的影響）

給受影響的非浮動元素添加一個CSS屬性

clear:both | left| right |:清除浮動元素的影響

?

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。