css盒模型

CSS盒模型

CSS3弹性盒模型

   display:box或者display:inline-box;

   box-orient 定义盒模型的布局方向

         horizontal 水平显示  默认值

         vertical 垂直方向

   box-direction 元素排列顺序

         normal  正序  默认值

         reverse  反序

   box-ordinal-group  设置元素的具体位置

   box-flex 定义盒子的弹性空间

      子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有  子素的box-flex属性值的和box-pack 对盒子水平方向富裕的空间进行管理

        start 所有子元素在盒子左侧显示，富裕空间在右侧

        end 所有子元素在盒子右侧显示，富裕空间在左侧

        center 所有子元素居中

        justify 富余空间在子元素之间平均分布

  box-align 在垂直方向上对元素的位置进行管理

       start 所有子元素在居顶

       end 所有子元素在居底

       center 所有子元素居中

       resize 自由缩放
       both 水平垂直都可以缩放

       horizontal 只有水平方向可以缩放

       vertical 只有垂直方向可以缩放

注意：一定要配合overflow:auto 一块使用

CSS3盒模型阴影

  box-shadow:inset x y blur spread color

      inset：投影方式

       inset：内投影

       outset：外投影 默认

  x、y：阴影偏移

  blur：模糊半径（灰度）

  spread：扩展阴影半径

  先扩展原有形状，再开始画阴影

  color

CSS3盒模型倒影

box-reflect 倒影

direction 

方向     above|below|left|right;

距离

 渐变（可选）

CSS3其他盒模型

box-sizing 盒模型解析模式

    content-box  标准盒模型 width/height=border+padding+content

    border-box 怪异盒模型 width/height=认为设置的宽高度