前端基础----CSS概要(二)

盒子模型

1.尺寸

　　①宽度　　width:像素；

　　②高度　　width:像素;

2.边框

　　所有边框　　border:颜色 像素 样式;

　　上边框　　　border-top:语法同上

　　下边框　　　border-bottom:语法同上

　　左边框　　　border-left:语法同上

　　右边框　　　border-right:语法同上

　　　　取值 颜色:red black 等英文单词或者十六进制数

　　　　　　 像素: 1px  代表边框的粗细

　　　　　　 样式:  solid(实线) dashed(虚线)

3.外边距

　　所有外边距　　margin:上（像素）右（像素）下（像素）左（像素）

　　　　　　　　　只有一个值代表所有外边距 都一样，两个值代表第一

　　　　　　　　　个代表上下外边距，第二个代表左右外边距，三个值

　　　　　　　　　代表左右外边距一样，上下外边距不同，四个值就不

　　　　　　　　　用很清晰了，各自的数据代表着各自的外边距

　　上外边距　　    margin-top:像素

　　下外边距　　　margin-bottom:像素

　　左外边距　　　margin-left:像素

　　右外边距　　　margin-right:像素

4.内边距

　　所有内边距　　pading:上右下左（像素）这里可以对比着外边距学习，意思是一样的

　　上内边距　　    pading-top:像素

　　下内边距　　    pading-bottom:像素

　　左内边距　　    pading-left:像素

　　右内边距　　    pading-right:像素

5.圆角边框

　　border-radius：数值

　　　　一个值：四个角都一样

　　　　两个值：左上-右下一样 右上-左下一样

　　　　三个值：左上　　右上-左下一样　　右下

　　　　四个值：左上　　右上　　右下　　左下

6.阴影

　　外阴影

　　　　属性box-shadow：x轴　　y轴　阴影半径　　阴影颜色;

　　　　　　height:像素;

　　　　　　width:像素;

　　　　　　background-color:颜色或者16进制数;

　　　　　　border-radius:像素;

　　内阴影

　　　　属性box-shadow：inset x轴　　y轴　　阴影半径　　阴影颜色;