盒模型属性
盒模型有五个属性分别为:
1、Width 内容宽度
2、Height 内容高度
3、Border 边框
4、Padding 内边距(即边框到内容之间的距离)
5、Margin 外边距(即一个盒子到另一个盒子之间的距离)
一、Width与Height
指盒子的宽和高(盒子的体积或者容积,显示内容位置大小)
例:
Width:500px (盒子宽为500像素)
Height:300px (盒子高为300像素)
二、Border
指设置盒子的边框样式
边框属性中有三个属性值分别为:粗细 样式 颜色,并且有两种写法
第一种是指定属性进行设置
例:
Border-width:1px (设置边框大小)
Border-style:solid (设置边框样式)
Border-color:red (设置边框颜色)
其中边框样式有四种分别为:
Solid 实线
Double 双实线
Dotted 点线
Dashed 虚线
第二种可以简写为
Border:1px solid red (中间用空格隔开)
三、Padding
指内容到边框之间的距离
一般标签都有默认padding值,所以我们一般都会在CSS中加入个通配符
*{margin:0;padding:0}(清除所有margin与padding值)
Padding是有盒子内的背景色的,也就是background-color的属性回填充盒子内的所有区域
Padding属性有四个方向,分别设置四个方向的距离,也有两种描述方法
第一种是指定一个方向的分别设置属性
例:
Padding-top:10px (上边距为10像素)
Padding-right:20px (右边距为20像素)
Padding-bottom:30px (下边距为30像素)
Padding-left:40px (左边距为40像素)
第二种是综合属性,中间要用空格隔开
例:
Padding:10px 20px 30px 40px 属性为上右下左的数值
其次设置1-4个值的分别代表不同属性
设置一个值为:上下左右
设置两个值为:上下、左右
设置三个值为:上、左右、下
设置四个值为:上、右、下、左
四、Margin
指当前盒子到最近盒子的距离
Margin与padding差不多只是一个设置盒子内边距一个设置盒子外边距,设置方法与padding类似
例:
Margin:10px (上下左右各移动10像素,即四周边距各为10)
Margin-left:20px (盒子向右移动20像素,即左边距为20)
Margin-top:30px (盒子向下移动30像素,即上边距为30)