一、什么是盒模型?
我们可以将页面中所有的元素都视为盒子,这些盒子中可以盛放我们想要盛放的内容,每个盒子在页面中都占有一定的空间,这些盒子的参数和属性我们可以根据需求来调整,例如它的位置、大小等。
二、盒模型的组成?
盒模型从内到外由content内容区、padding填充区(补白)、border边框、margin外边距组成。
二、盒模型的分类?
盒模型可以分为标准盒模型与怪异盒模型。标准盒模型与怪异盒模型的区别在于:标准盒模型的宽高为盒模型的内容区content,填充区padding、边框border、外边距margin都是不计算在宽高以内的;怪异盒模型的宽高包含了内容区content、填充区padding、边框border,只有外边距margin独立于宽高之外。
三、标准盒模型与怪异盒模型之间是否可以相互转换?
标准盒模型与怪异盒模型可以通过属性box-sizing相互转换,它的属性值有border-box(怪异盒模型)与content-box(标准盒模型)。
四、与盒模型的组成相关的属性常用的有哪些?
1.内容区content:
width:宽度值;
height:高度值;
2.填充区padding:
(1)padding:直接使用padding为复合用法,其属性值为数值型。如果给其设置一个属性值,则该值表示上下左右四个内边距统一的数值;如果给其设置两个属性值,则这两个值依次表示上下内边距与左右内边距;如果给其设置三个属性值,则这三个值依次表示上边距、左右边距与下边距;如果给其设置四个属性值,则这四个值依次表示上边距、右边距、下边距与左边距,即顺时针方向。
(2)padding-top、padding-right、padding-bottom、padding-left:这四个属性用来单独设置四个方向的内边距。
3.边框区border:
(1)border:该属性为复合用法,表示设置该元素四个方向统一的边框,其属性值有三个,分别为颜色、边框的粗细、边框的线型,例如:border:#000 solid 1px;这三个属性值以何种顺序排列均可,其中常用的线型有solid实线型、dashed虚线型、dotted圆点线型、double双线型。也可以通过使用border:none;取消边框,或使用border:hidden;隐藏边框。
(2)border-top、border-right、border-bottom、border-left:这四个属性用于单独设置某一方向的边框,用法同border。
(3)border-color:用于设置边框的颜色,可以设置一到四个属性值,其代表的方向同padding。
(4)border-width:用于设置边框的粗细,可以设置一到四个属性值,其代表的方向同padding。
(5)border-style:用于设置边框的线型,可以设置一到四个属性值,其代表的方向同padding。
(6)也可以单独设置某一方向的边框的某一属性,例如:border-left-color:#000;
4.外边距margin:其用法同padding。