盒子模型
盒子模型介绍
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型,从里到外,每个盒子都有:内容、填充padding、背景background、边框border[圆角border-radius]、边界margin[阴影shadow]等属性;同时也可以定义盒子的透明度opacity。
这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。
每个HTML标记都可看作一个盒子,如最常用的div标签,一个div即为一个盒子,适用于盒子模型:
- 每个盒子模型包含:内容、填充
.padding
、背景.bg
、边框.border
[圆角.radius
]、边界.margin
[阴影.shadow
]、透明度.opacity
八个属性; - 每个属性都包括四个位置:上top、右right、下bottom、左left;这四个位置可同时设置,也可分别设置;
- 每个位置都可定义尺寸:微小mini、小small、大big、特大large和默认的五个大小尺寸等级。
举个箱子例子,最里面是存放物品的空间由泡沫(填充)保护着、箱子有颜色(背景)、然后箱子(边框)、最后是箱子离你的距离(边界)以及盒子的阴影,这就是一个完整的盒子模型。
盒子模型图示
左left | 上top | 右right |
边界margin[阴影shadow]
边框border[圆角border-radius]
背景background
填充padding
内容
|
||
下bottom |
通过掌握盒子模型,就可以定义HTML元素的内容、填充、背景、边框[圆角]、边界[阴影]、透明度等相关位置、大小、样式等属性。
内容
内容像盒子的东西,要根据自己的需要,放任何可放的物品,即包罗万象,在HTML中,大部份元素都可放在内容里,如文字、链接、表单、图片、视频及相关的组合等等。
例如内容任意放置想要的文本内容,文本无需定义样式:
<div>内容</div>
默认的文本内容颜色继承body设置,另外框架还有丰富的文本颜色体系,请点击 颜色 查看。
填充
填充为占用内部的空间,样式用.padding
定义;位置分为上top、右right、下bottom、左left,用.padding-*
定义(*为位置和大小的统称,具体看下文)。
默认填充
<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
五个等级。
<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
清除不同位置的填充值。
<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
,使用方式如下:
<div class="bg">背景色</div>
另外,框架还有丰富的背景颜色体系,请点击 颜色 查看。
边框
边框如同箱子的外壳,用来包住内部填充和空间的,在框架里用.border
定义边框样式;同样位置分为上top、右right、下bottom、左left,用.border-*
定义。
默认边框
<div class="border">默认边框</div> <div class="border-top">默认上边框</div> <div class="border-right">默认右边框</div> <div class="border-bottom">默认下边框</div> <div class="border-left">默认左边框</div>
边框线条
除了实线的边框外,框架还定义了虚线、点的边框样式。
<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
。
<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
-大小,可改变边框的样式。
<div class="border border-big">虚线大边框</div> <div class="border-bottom border-small">底部点线小边框</div>
清除边框
同样,在已有边框的情况了,框架也预设了.border-none
用来清除已有的边框,同时也可以用.border
-位置-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
六个等级。
<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
用来清除所有的圆角。
<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
三个大小等级。
<div class="shadow-small">小阴影</div> <div class="shadow">阴影</div> <div class="shadow-big">大阴影</div>
边界
边界为盒子外部的间距,样式用.margin
定义;位置分为上top、右right、下bottom、左left,用.margin-*
定义。
默认边界
<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
五个等级。
<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
清除不同位置的边界值。
<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
六个大小等级。
<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>
掌握了盒子模型原理,以及灵活应用框架定义的盒子样式,便可以快速、简便的调整标签样式。