div标签

div 标签一般配合CSS 样式,用来对页面进行布局

1）盒子模型

1、将网页上每个HTML元素视为长方形的盒子，是网页设计上的一大创新。

CSS中，所有页面元素都包含在一个矩形框内，这个矩形框就称为盒子。盒子描述了元素及属性在页面布局中所占空间大小，因此盒子可以影响其他元素的位置及大小。

2、盒子模型是由margin（边界）、border（边框）、padding（空白）和content（内容）几个属性组成。

3、 一个盒子的实际高度（宽度）是由content+左右padding+左右border组成。

注：margin: 上 右 下 左;
可以通过设定width和height来控制content的大小，并且对于同一个盒子，都可以分别设定4条边的border,padding和margin。
image.png

2）常用样式

单位 值 作用
width 长度 | 百分比 设置标签宽度
height 长度 | 百分比 设置标签高度
max-width 长度 | 百分比 设置标签最大宽度
max-height 长度 | 百分比 设置标签最大高度
min-width 长度 | 百分比 设置标签最小宽度
min-height 长度 | 百分比 设置标签最小高度
border 边框粗细 边框样式 边框颜色 设置边框显示效果
border-width 长度 设置边框粗细
border-style none | hidden | solid | dashed | dotten | double… 设置边框样式
border-color 颜色 设置边框颜色
border-top 边框粗细 边框样式 边框颜色 设置标签顶部边框
border-left 边框粗细 边框样式 边框颜色 设置标签左边边框
border-right 边框粗细 边框样式 边框颜色 设置标签右边边框
border-bottom 边框粗细 边框样式 边框颜色 设置标签底部边框
margin 上边距 右边距 下边距 左边距 设置标签四边的外延边距
margin-left 长度 | 百分比 设置标签左边的外延边距
margin-right 长度 | 百分比 设置标签右边的外延边距
margin-top 长度 | 百分比 设置标签顶部的外延边距
margin-bottom 长度 | 百分比 设置标签底部的外延边距
padding 上边距 右边距 下边距 左边距 设置标签四边的内部边距
padding-left 长度 | 百分比 设置标签左边的内部边距
padding-right 长度 | 百分比 设置标签右边的内部边距
padding-top 长度 | 百分比 设置标签顶部的内部边距
padding-bottom 长度 | 百分比 设置标签底部的内部边距

box-shadow

添加阴影效果

值 说明
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值
寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

div{
box-shadow:10px10px5px#888888;
}

box-sizing

box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。

值 说明
content-box 默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减 去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
注：border-box 不包含 margin。
inherit 指定 box-sizing 属性的值，应该从父元素继承

1.W3C标准盒模型（content-box），border、padding 的设置会破坏元素宽高，必须得重新计算，非常麻烦（除了在IE浏览器，默认就是标准盒模型，所以可以用 box-sizing 来转换）；
2.IE（怪异）盒模型（border-box），border、padding 的设置不会影响元素的宽高，这非常实用（且因为IE盒模型不是标准，所以才有 box-sizing 这个标准属性来设置，将它标准化）【IE6/5 是怪异模型，IE7开始是标准盒模型】

CSS渐变属性

可以让你在两个或多个指定的颜色之间显示平稳的过渡。

线性渐变

向下/向上/向左/向右/对角方向
background-image: linear-gradient(direction, color-stop1, color-stop2, …);

径向渐变

它们的中心定义
background-image: radial-gradient(shape size at position, start-color, …, last-color);

重复渐变

background-image:repeating-linear-gradient(red, yellow10%, green20%);