前端设计 最详细的div介绍+效果图+代码图

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