开始学习盒模型
所谓盒子,就是将html网页中的标签在网页版面中所占据的平面范围,抽象出来的一个“视觉形状”。
一个最简单的理解就是:几乎所有标签,都可以看做是一个“矩形盒子”,具有一定的宽高(区域)。
总体上来说,一个盒子,是由若干个部分构成的,从内到外依次包括:
盒子内容区,内边距区,边框,外边距区
记住以下几个单词:
content:内容
padding:内边距,又称为内补白,是一片空白区域
border:边框
margin:外边距,又称为外补白,也是一片空白区域
top,right,bottom,left:上,右,下,左
设置盒子的宽高属性,实际上设置的是盒子内容区的宽高。
比如:
div{
width: 100px;
height: 100px;
}
而盒子实际占据的区域的宽高,可以这样来计算:
盒子所占宽:
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
除了这两个基本宽高属性,还有以下4个范围限定性宽高属性,有时候也会用一用:
min-width:设定最小宽度
max-width:设定最大宽度
边框属性就是设置一个盒子的边框线的具体特性。
边框线的特性有3个:
border-style:
线型,属性值通常有:solid(实线), dashed(虚线), dotted(点线)
border-width:
线的粗细,长度单位,比如1px
border-color:
线的颜色,颜色值,比如red, rgb(255, 0, 0), #FF3366
内边距是指在盒子结构中,盒子的边框线和内容之间的一段空白区域(内容放不进去)。
我们能设置的就是这个空白区域的大小(宽度)。
同样分4个方向,分别可以单独设置:
padding-top:1px;//上内边距
padding-right:2px;//右内边距
padding-bottom:4px;//下内边距
padding-left:8px;//左内边距
还有一个综合属性:
padding:宽度1 [宽度2] [宽度3] [宽度4];//这个用的最多,推荐使用。
这个综合属性可以设置1-4个值,不同个数的值,其含义不同,如下所示:
1个值:表示4个方向都是这个值。
2个值:第1个表示上下边距的值,第2个表示左右边距的值。
3个值:第1个表示上边距的值,第2个表示左右边距的值,第3个表示下边距的值。
4个值:依次代表top, right, bottom, right这4个方向的内边距的值
外边距是指在盒子结构中,盒子的边框线,跟盒子的外部其他元素之间的一段空白区域。
我们能设置的就是这个空白区域的大小(宽度)。
它的属性设置和含义,跟内边距(padding)非常类似:
margin-top:1px;//上外边距
margin-right:2px;//右外边距
margin-bottom:4px;//下外边距
margin-left:8px;//左外边距
margin:宽度1 [宽度2] [宽度3] [宽度4];//同时设置4个方向,用的最多,推荐使用。
背景是指在盒子结构中,衬托在边框线范围以内的背景颜色或背景图。
可以设置背景颜色,或背景图,或同时设置。其中背景图有多项参数可设置。
主要的背景属性设置有:
设置背景颜色:
background-color:yellow;
设置背景图:
background-image:url(图片路径);//注意,图片路径是相对于当前网页或css文件(对外部样式来说)
设置背景图的位置(有背景图的前提下有效)
background-position:水平位置[,垂直位置]
轮廓指的是盒子边框线外面再套一层“修饰性”线条,该线条只有视觉效果,不占版面空间。
实际上,如果有外边距(margin),轮廓线是可以跟margin有重叠的。
轮廓属性主要有:
outline-width:轮廓线宽度
outline-style:轮廓线线型
outline-color:轮廓线颜色
outline-offset:轮廓线距离边框线的距离(间隙)