咸鱼前端—CSS盒子模型

盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

（图片来源网络，侵删。谢谢）

盒子边框（border）

盒子边框（border）

语法：

border : border-width || border-style || border-color 

边框属性—设置边框样式（border-style）

边框样式用于定义页面中边框的风格，常用属性值如下：

属性	说明
none	没有边框即忽略所有边框的宽度（默认值）
solid	边框为单实线(最为常用的)
dashed	边框为虚线
dotted	边框为点线
double	边框为双实线

圆角边框(CSS3)

语法格式：

border-radius: 左上角  右上角  右下角  左下角; |  border-radius: 全体；

内边距（padding）

padding属性用于设置内边距。 是指 边框与内容之间的距离。

属性	说明
padding-top	上内边距
padding-right	右内边距
padding-bottom	下内边距
padding-left	左内边距

注意： 后面跟几个数值表示的意思是不一样的。

值的个数	表达意思
1个值 padding	上下左右边距 比如padding: 3px; 表示上下左右都是3像素
2个值 padding	上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值 padding	上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值 padding	上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针

外边距（margin）

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。

属性	说明
margin-top	上外边距
margin-right	右外边距
margin-bottom	下外边距
margin-left	上外边距

margin:上外边距 右外边距  下外边距  左外边

取值顺序跟内边距相同。

盒子阴影

1. 前两个属性是必须写的。其余的可以省略。
2. 外阴影 (outset) 但是不能写 默认 想要内阴影 inset