CSS学习笔记（三）：CSS之盒模式

什么是盒模式？

内边距padding、外边距margin、边框border

padding、margin和border都有四个方向的值Top、Bottom、Left、Right

盒模式之边框

盒子模式的边框即围绕着内容和补白的线，可以为这条线设置样式、粗细及颜色；

1、border-style 边框样式

     dash 虚线、solid 实线、dotted 点线

2、border-color 边框颜色

     设置为十六进制颜色，例如 span{border-color:#000000;}

3、border-width

     thin、medium、thick，常用像素表示粗细

可以同时设置边框的不同属性，例如p{border-top:1px solid #ccc}，将为<p>标签设置粗细为1px、颜色为#cccccc的实线边框

盒模式之宽度与高度

盒模式中的宽度与高度指的是填充以里内容的高度与宽度（区别于边界的高度与宽度）

                                                        （上图来自慕课网）

元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界

如上图所示，元素的实际宽度为10+1+20+200+20+1+10=262px

                                实际高度为10+1+20+18+20+1+10=80px

盒模式之填充

padding（填充）指的是内容与边框之间的补白（距离）

例如，为<p>标签设置填充

p{

     padding-top:10px;

     padding-right=20px;

     padding-bottom=30px;

     padding-left=40px;

}

也可以一次性设置四个填充：p{padding:10px 20px 30px 40px;}

注意：一次性设置填充（或边框、外边距）时，顺序为上、右、下、左（逆时针）

如果上、右、下、左的填充都为10px，也可以写成p{padding:10px;}

如果上、下填充为10px，左、右填充为20px，也可以写成p{padding:10px 20px;}

盒模式之边界

margin（边界）指的是元素与其他元素之间的距离

同填充，可以同时为边界的四个方向设置值：p{margin:10px 20px 30px 40px;}

如果上、右、下、左的边界都为10px，也可以写成p{margin:10px;}

如果上、下边界为10px，左、右边界为20px，也可以写成p{padding:10px 20px;}