拼图开发文档

盒子模型

盒子模型介绍

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型,从里到外,每个盒子都有:内容、填充padding、背景background、边框border[圆角border-radius]、边界margin[阴影shadow]等属性;同时也可以定义盒子的透明度opacity

这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。

每个HTML标记都可看作一个盒子,如最常用的div标签,一个div即为一个盒子,适用于盒子模型:

举个箱子例子,最里面是存放物品的空间由泡沫(填充)保护着、箱子有颜色(背景)、然后箱子(边框)、最后是箱子离你的距离(边界)以及盒子的阴影,这就是一个完整的盒子模型。

盒子模型图示

left top right
边界margin[阴影shadow]
边框border[圆角border-radius]
背景background
填充padding
内容
bottom

通过掌握盒子模型,就可以定义HTML元素的内容、填充、背景、边框[圆角]、边界[阴影]、透明度等相关位置、大小、样式等属性。

内容

内容像盒子的东西,要根据自己的需要,放任何可放的物品,即包罗万象,在HTML中,大部份元素都可放在内容里,如文字、链接、表单、图片、视频及相关的组合等等。

例如内容任意放置想要的文本内容,文本无需定义样式:

内容
    <div>内容</div>
  

默认的文本内容颜色继承body设置,另外框架还有丰富的文本颜色体系,请点击 颜色 查看。

填充

填充为占用内部的空间,样式用.padding定义;位置分为上top、右right、下bottom、左left,用.padding-*定义(*为位置和大小的统称,具体看下文)。

默认填充

默认填充.padding
默认上填充.padding-top
默认右填充.padding-right
默认下填充.padding-bottom
默认左填充.padding-left
    <div class="padding">默认填充</div>
    <div class="padding-top">默认上填充</div>
    <div class="padding-right">默认右填充</div>
    <div class="padding-bottom">默认下填充</div>
    <div class="padding-left">默认左填充</div>
  

填充大小

填充从小到大顺序,含微小填充.padding-mini、小填充.padding-small、默认填充.padding、大填充.padding-big、特大填充.padding-large五个等级。

微小填充.padding-mini
小填充.padding-small
默认.padding
大填充.padding-big
特大填充.padding-large
    <div class="padding-mini">微小填充</div>
    <div class="padding-small">小填充</div>
    <div class="padding">默认</div>
    <div class="padding-big">大填充</div>
    <div class="padding-large">特大填充</div>
  

位置及大小组合

填充位置及大小组合为.padding-位置-大小,位置分别为上top、右right、下bottom、左left,大小分别为微小mini、小small、默认、大big、特大large,如.padding-bottom-small为底部小填充,请看示例:

底部小填充
上-微小,右小,下大,左特大
上默认,右特大、下小、左微小
    <div class="padding-bottom-small">
      下小填充
    </div>
    <div class="padding-top-mini padding-right-small padding-bottom-big padding-left-large">
      上-微小,右小,下大,左特大
    </div>
    <div class="padding-top padding-right-large padding-bottom-small padding-left-mini">
      上默认,右特大、下小、左微小
    </div>
  

清除填充

另外,在已有填充的情况了,框架也预设了.padding-none用来清除已有的填充值,同时也可以用.padding-位置-none清除不同位置的填充值。

清除填充.padding-none
清除上填充.padding-top-none
清除右填充.padding-right-none
清除下填充.padding-bottom-none
清除左填充.padding-left-none
    <div class="padding-none">清除填充</div>
    <div class="padding-top-none">清除上填充</div>
    <div class="padding-right-none">清除右填充</div>
    <div class="padding-bottom-none">清除下填充</div>
    <div class="padding-left-none">清除左填充</div>
  

背景

背景是定义元素显示的背景颜色、背景位置、背景尺寸、背景绘制区域、背景图像、图像重复、图像定位区域、图像显示方式等属性内容。

框架当前仅定义了背景色background-color,样式缩写为.bg,使用方式如下:

背景色.bg
    <div class="bg">背景色</div>
  

另外,框架还有丰富的背景颜色体系,请点击 颜色 查看。

边框

边框如同箱子的外壳,用来包住内部填充和空间的,在框架里用.border定义边框样式;同样位置分为上top、右right、下bottom、左left,用.border-*定义。

默认边框

默认边框.border
默认上边框.border-top
默认右边框.border-right
默认下边框.border-bottom
默认左边框.border-left
    <div class="border">默认边框</div>
    <div class="border-top">默认上边框</div>
    <div class="border-right">默认右边框</div>
    <div class="border-bottom">默认下边框</div>
    <div class="border-left">默认左边框</div>
  

边框线条

除了实线的边框外,框架还定义了虚线、点的边框样式。

虚线边框.border .border-dashed
点线边框.border .border-dotted
    <div class="border border-dashed">虚线边框</div>
    <div class="border border-dotted">点线边框</div>
  
注意:边框线条只对.border有效,上下左右时无效。

边框大小

边框从小到大顺序,含默认边框.border、微小边框.border-mini、小边框.border-small、大边框.border-big、特大边框.border-large五个等级,大小是在.border基础上重置,需要在.border样式上叠加.border-*样式,如.border .border-small

默认.border
微小边框.border .border-mini
小边框.border .border-small
大边框.border .border-big
特大边框.border .border-large
    <div class="border">默认</div>
    <div class="border border-mini">微小边框</div>
    <div class="border border-small">小边框</div>
    <div class="border border-big">大边框</div>
    <div class="border border-large">特大边框</div>
  

边框大小位置组合

在默认边框的基础上,叠加.border-大小,可改变边框的样式。

右大边框.border .border-big
底部小边框.border .border-small
    <div class="border border-big">虚线大边框</div>
    <div class="border-bottom border-small">底部点线小边框</div>
  

清除边框

同样,在已有边框的情况了,框架也预设了.border-none用来清除已有的边框,同时也可以用.border-位置-none清除不同位置的边框。

清除边框.border-none
清除上边框.border-top-none
清除右边框.border-right-none
清除下边框.border-bottom-none
清除左边框.border-left-none
清除上下边框.border-top-none .border-bottom-none
清除左右边框.border-left-none .border-right-none
    <div class="border-none">清除边框</div>
    <div class="border-top-none">清除上边框</div>
    <div class="border-right-none">清除右边框</div>
    <div class="border-bottom-none">清除下边框</div>
    <div class="border-left-none">清除左边框</div>
    <div class="border-top-none border-bottom-none">清除上下边框</div>
    <div class="border-left-none border-right-none">清除左右边框</div>
  

另外,框架还有丰富的边框颜色体系,请点击 颜色 查看。

圆角

框架用.radius来定义元素的圆角样式,同时也分为微小圆角.radius-mini、默认圆角.radius、小圆角.radius-small、大圆角.radius-big、特大圆角.radius-large、圆.radius-circle六个等级。

微小圆角.radius-mini
小圆角.radius-small
默认圆角.radius
大圆角.radius-big
特大圆角.radius-large
.radius-circle
    <div class="radius-mini">微小圆角</div>
    <div class="radius">默认圆角</div>
    <div class="radius-small">小圆角</div>
    <div class="radius-big">大圆角</div>
    <div class="radius-large">特大圆角</div>
    <div class="radius-circle">圆</div>
  

圆角位置

同时也可以用.radius-位置定义不同位置的圆角,在已有圆角的情况了,框架也预设了.radius-none用来清除所有的圆角。

上圆角.radius-top
右圆角.radius-right
下圆角.radius-bottom
左圆角.radius-left
清除圆角.radius-none
    <div class="radius-top">上圆角</div>
    <div class="radius-right">右圆角</div>
    <div class="radius-bottom">下圆角</div>
    <div class="radius-left">左圆角</div>
    <div class="radius-none">清除圆角</div>
  

阴影

框架用.shadow定义元素的阴影部份,分为小阴影.shadow-small、默认阴影.shadow、大阴影.shadow-big三个大小等级。

小阴影.shadow-small
默认阴影.shadow
大阴影.shadow-big
    <div class="shadow-small">小阴影</div>
    <div class="shadow">阴影</div>
    <div class="shadow-big">大阴影</div>
  

边界

边界为盒子外部的间距,样式用.margin定义;位置分为上top、右right、下bottom、左left,用.margin-*定义。

默认边界

默认边界.margin
默认上边界.margin-top
默认右边界.margin-right
默认下边界.margin-bottom
默认左边界.margin-left
    <div class="margin">默认边界</div>
    <div class="margin-top">默认上边界</div>
    <div class="margin-right">默认右边界</div>
    <div class="margin-bottom">默认下边界</div>
    <div class="margin-left">默认左边界</div>
  

边界大小

边界从小到大顺序,含微小边界.margin-mini、小边界.margin-small、默认边界.margin、大边界.margin-big、特大边界.margin-large五个等级。

微小边界.margin-mini
小边界.margin-small
默认.margin
大边界.margin-big
特大边界.margin-large
右自动边界.margin-right-auto
左自动边界.margin-left-auto
左右自动边界.margin-center-auto
    <div class="margin-mini">微小边界</div>
    <div class="margin-small">小边界</div>
    <div class="margin">默认</div>
    <div class="margin-big">大边界</div>
    <div class="margin-large">特大边界</div>
    <div class="margin-right-auto">右自动边界</div>
    <div class="margin-center-auto">左右自动边界</div>
    <div class="margin-left-auto">左自动边界</div>
  

位置及大小组合

边界位置及大小组合为.margin-位置-大小,位置分别为上top、右right、下bottom、左left,大小分别为微小mini、小small、默认、大big、特大large,如.margin-bottom-small为底部小边界,请看示例:

底部小边界
上-微小,右小,下大,左特大
上默认,右特大、下小、左微小
    <div class="margin-bottom-small">
      下小边界
    </div>
    <div class="margin-top-mini margin-right-small margin-bottom-big margin-left-large">
      上-微小,右小,下大,左特大
    </div>
    <div class="margin-top margin-right-large margin-bottom-small margin-left-mini">
      上默认,右特大、下小、左微小
    </div>
  

清除边界

另外,在已有边界的情况了,框架也预设了.margin-none用来清除已有的边界值,同时也可以用.margin-位置-none清除不同位置的边界值。

清除边界.margin-none
清除上边界.margin-top-none
清除右边界.margin-right-none
清除下边界.margin-bottom-none
清除左边界.margin-left-none
    <div class="margin-none">清除边界</div>
    <div class="margin-top-none">清除上边界</div>
    <div class="margin-right-none">清除右边界</div>
    <div class="margin-bottom-none">清除下边界</div>
    <div class="margin-left-none">清除左边界</div>
  

不透明度

框架用.opacity定义元素的不透明度,分为含微小透明度.opacity-mini、小透明度.opacity-small、默认透明度.opacity、大透明度.opacity-big、超透明度.opacity-large、完全透明.opacity-full六个大小等级。

微小透明度.opacity-mini
小透明度.opacity-small
默认透明度.opacity
大透明度.opacity-big
特大透明度.opacity-large
完全透明.opacity-full
清除不透明度.opacity-none
    <div class="opacity-mini">微小透明度</div>
    <div class="opacity-small">小透明度</div>
    <div class="opacity">透明度</div>
    <div class="opacity-big">大透明度</div>
    <div class="opacity-large">特大透明度</div>
    <div class="opacity-full">完全透明</div>
    <div class="opacity-none">清除不透明度</div>
  

掌握了盒子模型原理,以及灵活应用框架定义的盒子样式,便可以快速、简便的调整标签样式。