楼主刚学不久 ， 学到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 |:清除浮动元素的影响