【web初步】盒子模型（Box Model）

盒子边框（border）

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

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

• 边框的样式：
  • none：没有边框即忽略所有边框的宽度（默认值）
  • solid：边框为单实线(最为常用的)
  • dashed：边框为虚线
  • dotted：边框为点线

边框综合设置

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

例如：

 border: 1px solid red;  没有顺序  

top，bottom，left，right可以对四边分别进行设置

内边距（padding）

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

padding- top，bottom，left，right可以对四边分别进行设置

值的个数	表达意思
1个值	padding：上下左右内边距;
2个值	padding: 上下内边距 左右内边距 ；
3个值	padding：上内边距 左右内边距 下内边距；
4个值	padding: 上内边距 右内边距 下内边距 左内边距 ；

给盒子指定padding值之后：

1. 内容和边框 有了距离，添加了内边距。
2. 盒子变大了。

盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

外边距（margin）

margin属性用于设置外边距。margin就是控制盒子和盒子之间的距离

margin- top，bottom，left，right可以对四边分别进行设置

margin值的简写 （复合写法）代表意思 跟 padding 完全相同。

块级盒子水平居中 左右margin 改为 auto

清除元素的默认内外边距

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

圆角边框(CSS3)

border-radius:length;  

• 其中每一个值可以为 数值或百分比的形式。

• 技巧： 让一个正方形 变成圆圈

  border-radius: 50%;

盒子阴影(CSS3)

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

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

div {
			width: 200px;
			height: 200px;
			border: 10px solid red;
			/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
			/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
			
}