盒子模型与PS基本操作

边框

边框三属性:颜色 粗细 样式

1. 颜色:border-color

2. 粗细:border-width(一般情况下,用px做单位)

3. 样式:border-style

   							solid(实线)
   							dashed(虚线)
   							dotted(点线)
   

4.合并相邻边框

						border-collapse:collapse;

5.边框简写

				border:1px solid red(三者无规定顺序)

6.边框分写简写

				border-top:1px solid red(只设定了上边框的样式

7.层叠性

		下面的边框设置会覆盖上面边框的设置

8.边框会影响盒子实际大小

		解决方案:
						1.测量盒子大小的时候,不量边框
						2.如果测量的时候包含了边框,则需要widh/height减去边框宽度

内容

外边距(margin)

				控制盒子与盒子之间的距离
				margin-top:上外边距
				margin-bottom:下外边距
				margin-left:左外边距
				margin-right:右外边距
margin简写与padding简写差不多

外边距合并

	1.相邻块级元素垂直外边距的合并
												当上下相邻的两个块级元素（兄弟关系）相遇时，如果上面的元素有下外边距，
												下面的元素有上外边距，则它们之间的距离不是上外边距加下外边距，而是取两者的**最大值**。
		解决方案：尽量只给一个盒子添加margin值。
	2.嵌套块级元素垂直外边距的塌陷
		对于嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
		解决方案（要想**分开内外**两个**盒子**）：	
				1.可以为父元素定义上边框
				2.可以为父元素定义上内边框
				3.可以为父元素添加overflow:hidden

内边距(padding)

					边框与内容的距离
									padding-top(上内边距)
									padding-left(左内边距)
									padding-bottom(下内边距)
									padding-right(右内边距)

					内边距简写

内边距的值数	表达意思
padding:5px	1个值,代表上下左右都是5px
padding:5px 10px	2个值,代表上下是5px左右是10px
padding:5px 10px 20px	3个值,代表上内边距是5px 左右内边距是10px 下内边距是20px
padding:5px 10px 20px 30px	4个值,上内边距是5px 右内边距是10px 下内边距是20px 左内边距是30px

					注意:
						当盒子本身被指定了宽度和高度:
							内边距 会影响盒子的实际大小(当盒子已经有了宽度和高度,此时再指定内边距,会撑大盒子大小,我们平时设定的width\height都是只包含内容大小)

					解决方法:
									如果要保持盒子跟效果图大小一致,则让width\height减去多出来的内边框大小即可
					导航栏的制作：
									不给每个盒子设定宽度，但是要给每个盒子设定相同的宽度的内边距
					鼠标点到内容上时，文本就改变颜色，背景改变底纹(或者有下划线）：
					可以使用伪标签a:hover

					当当前最近的盒子本身没有被指定宽度和高度:
					(此时padding不会撑大盒子）	

块级盒子水平居中条件

	1.盒子必须指定了宽度(width)
	2.盒子左右的外边距都设为auto
	常见写法:
				1.margin-left:auto;margin-right:auto,
				2.margin:auto;
				3.margin:0 auto

行内元素,行内块元素水平居中

在其父元素中添加text-align:center(盒子内文本对齐)

清楚内外边距

		网页元素很多都带有默认的内外边距，而且不同的浏览器默认的也不一样。
		因此，布局前，要清除下网页元素的内外边距。
		代码：
				* {
						padding:0;*清除内边距
						margin:0;*清除外边距
					}

注意

	行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。
	但是转换为块级和行内块元素就可以了。

PS基本操作

			网页美工大部分效果图都是利用PS来做的，所以大部分切图工作都是在PS里面完成的。
			1.文件→打开：
						可以打开我们要测量的图片
			2.打开标尺
							Ctrl+R或者视图→标尺
			3. 改变标尺单位：
							右击标尺，出现单位选项，然后选像素
			4.Ctrl+加号（放大视图）
				Ctrl+减号（缩小视图）
			5.移动图片：
						按住space键（可以使用抓手工具）
			6.测量图片大小
						 点击选区工具（左边功能栏里），再测量图片
			7.取消选区
					Ctrl+D 或者 旁边空白处点击一下

去掉li前面的小圆点

			list-style:none;