css盒子布局深入

分类 html

盒子深入


一、盒子的尺寸构成:


一个盒子的宽度构成:左外边距 + 左边框宽 + 左内边距 + width值 + 右内边距 +  右边框宽 + 右外边距

一个盒子的高度构成:上外边距 + 上边框宽 + 上内边距 + height值 + 下内边距 +  下边框宽 + 下外边距


二、margin外边距细化:


margin还可以细分为4个方向,每个方向都可以单独控制,如下:

margin-top: 上外边距

margin-right: 右。。。

margin-bottom:下。。。。

margin-left: 左。。。

margin其实是表示上述4个属性的一个“综合属性”:其实它代表的就是指“一下子设置了4个方向的margin”,其详细使用形式和含义如下:

margin: 一个值;——设置上,右,下,左4个方向均为该值;

margin:值1  值2; ——设置上下margin为值1,左右margin为值2;margin:5px  10px;表示上下margin是5px,左右margin是10px

        margin:0 auto;表示上下margin是0,左右margin是auto——auto对标准浏览器就解析为两边相等

margin:值1  值2  值3;——设置上margin为值1,左右margin为值2, 下margin为值3;

margin:值1  值2  值3  值4;——分别设置上,右,下,左4个方向的值;


三、padding内边距细化:同上。


四、border边框细化:边框指的是边框线。线有3个方面的特性:线型,线宽,线色,每个特性都可以单独控制。边框也有4个方向,每个方向都可以单独控制。


于是:

我们立即就有了12个对边框线的控制属性:

border-top-style: 顶部边框的线型。常见线型:solid ,  dashed,  dotted

border-top-width: 顶部边框的线宽;

border-top-color: 顶部边框的线色;

border-right-style,  border-right-width, border-right-color:  。。。。。

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

以上就是12个:

除此之外,我们还有3个设置线的某方面特性的综合属性:

border-style: 可以使用1-4个值,用来设置4个方向的线的线型,其规则同margin值的设置。

        比如:border-style:solid dashed; 表示上下边框为实线,左右边框为虚线;

border-width: 同理,可以设置1-4个值,表示4个方向的线宽。

border-color:同理。

还有:4个设置每个方向边框的所有特性的综合属性:

border-top: 线型  线宽  线颜色;

border-right: 线型  线宽  线颜色;

        border-bottom: 线型  线宽  线颜色;

        border-left: 线型  线宽  线颜色;

        最后,一个最大的综合属性:一次性设置4个方向的3个特性:

        border: 线型  线宽  线颜色;

        盒子还有背景属性。


五、盒子背景:背景分两种


背景颜色:只能是纯色,全平铺——css3里面已经可以设置过度色。background-color:颜色值;

背景图片:需要设置图片路径,还可以设置是否重复(平铺),怎么重复,怎么定位。

background-image:url(图片路径);

background-repeat: repeat  //   no-repeat  //  repeat-x  //  repeat-y;

重复 // 不重复 // 仅x方向重复//仅y方向重复

background-position: 水平定位方式  垂直定位方式;

水平定位方式有: left  //  center  //  right  // 离左边的像素值;

垂直定位方式有: top  //  center  //  bottom // 离顶部的像素值;

背景综合属性:可以一次性设置有关背景的多个数据值:

background:背景色值  背景图值  背景图重复性值  背景图定位值;

以上4个值,几乎可以任意省略(也就是任意使用其中某些)。


六、块盒子和行内盒子的真相


其实块盒子和行内盒子的所谓初始表现,并不是什么决定的东西,而只是一个属性的初始值问题:

对块盒子,其display属性的值默认是block

对行内盒子,其display属性的值默认是inline;

实际上,我们完全可以将html盒子的初始表现使用该属性来设置其其它值——即块盒子和行内盒子可以相互转换。

div{ display: inline;}——此时div就跟span一样。

span{ display: block;}——此时span就跟div一样。

display: inline // block  // none: 显示为:行内盒子//块盒子//不显示


推荐文章:html教程css教程html5教程