1、盒子模型也称框模型,方便完成网页的布局。盒子分为四个部分:
内容区:content
内容区的大小可以通过 width和height来进行设置,而整个盒子可见区的大小=内容区的大小+border 的大小+padding的大小
内边距:padding
边框:border:四条边三样式,所有样式都不能继承。
border有三个样式,可以通过一个属性同时设置四条边的样式,包括宽度、样式、颜色,并且没有顺序。
(1)border-width:边框宽度,只设置一个值时它会将四个方向的值都设置为相同的宽度;如果指定四个值时,则分别为上、右、下、左指定宽度;
如果指定三个值时,则为上、左/右、下指定宽度;如果指定两个值,顺序则为上/下,左/右。
也可以通过border-top-width设置上边框宽度,其他边同理。
(2)border-style:边框样式,虚线或者实线,默认值为none。
(border-width和border-color都有默认值,所以指定边框时必须设置border-style,这时其他两个样式使用默认值。但是一般情况下,三个样式都要设置。)
solid:实线
dotted:点状
dashed:虚线
(3)border-color:边框颜色,默认黑色
外边距:margin
2、关于内联元素(如span)
可以设置边框,但是不能设置宽和高,由内容决定宽和高。
并且内联元素支持水平方向的外边距,不支持垂直方向的外边距,即上下边距。
内联元素可以设置水平方向的内边距,也可以设置垂直方向的内边距。
垂直内边距会影响到内联元素的显示大小,但是不会影响其它元素的布局。