CSS盒子

盒子就是一个元素(标签)的所辖范围，简单来说，基本就是一个“矩形区域”。

一个盒子由四部分构成：盒子内容区，内边距区（内填充），边框，外边距区

单词：padding 内边距    border：边框     margin:外边框    top right  bottom  

min-width: 设定最小宽度   max_width:设定最大高度   min_height:设定最小高度   max_height : 设定最大高度

1. 边框属性border

 边框线的特征有3个：

   border-style: 线型，通常的属性值有:  solid(实线)    dashed(虚线)   dotted(点线)

   border-width: 线的粗细，长度单位，例如1px

   border-color: 线的颜色，颜色值，例如red 

   Border:  border-top(上边框)   border-right(右边框)  border-bottom(下边框)  border-left(左边框)

   又由于一个盒子的边框有4个方位(top,right,bottom,left)，则总体上就至少有12个边框属性，形式为：

   border - 方位 - 特性 ，例如：

  border-top-style   border-top-width    border-top-color    border-right-width   border-left-color,等等

  示例:    border-top-style:solid    border-right-color:#FF0000     border-left-width:2px

    2. 内边距(内填充)

       含义：内边距是指在盒子结构中，盒子的边框线和内容之间的一段空白区域（内容放不进去）。

        同样分为4个方向，分为可以单独设置：

        padding-top: 1px;   //上内边距    padding-right:2px; //右内边距   padding-bottom:4px;   //下内边距    padding-left:8px;  //做内边距

        pading: 上  右  下  左

   3.  外边距

        含义：外边距是指在盒子结构中，盒子的边框线，跟盒子的外部其他元素之间的一段空白区域。

        我们能设置的就是这个空白区域的大小(宽度)

        它的属性设置和含义，跟内边距(padding)非常类似：

         margin-top : 1px  //上外边距   margin-right:2px;  //右外边距   margin-bottom:4px;  //下外边距     margin-left:8px;  //左外边距

         margin: 上    右   下   左

          外边距的"重叠性"  

           当两个垂直方向的外边距挨在一起的时候（即margin-top和margin-bottom）挨在一起的时候，则选择更大的那个外边距高度。

           当两个左右方向的外边距挨在一起的时候(  即margin-left和margin-right) 挨在一起的时候，则会选择相加的。

           盒子居中： 必须设置宽度   margin: 0 auto

            如何计算盒子：

            盒子宽：margin-left + border-left + padding-left +width+ padding-right + border-right + margin-right

            盒子高：margin-top + border-top + padding -top + height + padding -bottom + border-bottom + margin-bottom

            3. 背景属性

            含义：背景是指在盒子结构中，存托在边框线范围以内的背景颜色或者背景图。

            可以设置背景颜色，或者背景图，或者同时设置。

             background-color:yellow;   backgroud-image:url(图片路径)  background-position: 水平位置 垂直  background-repeat：

             no-repeat(不平铺)  repeat(平铺)  x-repeat(垂直平铺)  y-repeat(水平平铺)

             4. 轮廓属性outline

             含义：轮廓指的是盒子边框线外边在套上一层"修饰性"线条，该线条只有视觉效果，不占版面空间。

             实际上，如果有外边距(margin),郭廓线是可以根据margin有重叠的。

             outline-width:  轮廓线宽度    outline-style: 轮廓线线条    outline-color: 轮廓线颜色   outline-offset  轮廓线距离边框线的距离

             5. display属性： display: inline  block   inline-block

             6. 溢出的属性 Overflow:  auto自动    scroll: 滚动    hidden: 隐藏     visible: 显示（默认）

             7.  可见性属性 visibility  设置元素的可见性。主要有两个值：  visible：可见   hidden：隐藏

                  特别注意：visibility为hidden，虽然元素不可见，但元素原来所占的空间任然存在（效果是一片空白）

                  对比：设置display为none，也是隐藏，但此时该元素不但不可见，而且不占版面空间。

           8. 浮动 ：left(左浮动)  right(右浮动)    清除浮动：父元素(overflow:hidden)   清除的盒子:clear :left(right)  both(清除所有浮动)

           9：定位属性: 定位就是通过有关的属性来明确设定一个盒子的以下两个方面的位置：

           （1）在(x,y)平面上所处位置   在高度(z轴)方向的位置

             定位方式：position : static(静态定位)       fixed（固定定位）

           relative(相对定位) -(相对自己,占空间)             absolute(绝对定位)  --->父元素(祖先定位)

           10. 层叠属性 z-index（-999-999）

            含义：就是将一个元素(盒子)默认情况下所展示在那个平面(就是屏幕所在面)的垂直线当做Z轴方向（就是眼睛盯屏幕时的那个"视线"方向), 朝眼睛方向为z轴的正方向。则z-index可以设定一个元素(盒子)在z轴方向的"叠放层次"的高低，用整数表示。越大值表示越高，也就是离眼睛越近，自然会覆盖比其他低的盒子。