CSS盒子模型

1.7 外边距(margin)

外边距的使用方式

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

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

外边距典型应用

外边距可以让块级盒子水平居中的两个条件:
·盒子必须指定了宽度(width)。
·盒子左右的外边距都设置为 auto。
常见的写法，以下三种都可以:

margin-left: auto;  
margin-right:auto;
margin:auto;
margin:0 auto;

注意:以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

1.8 外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。
主要有两种情况:
1、相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下外边距 margin-botom，下面的元素有上外边距 margin-top则他们之间的垂直间距不是 margin-botom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案:

尽量只给一个盒子添加 margin 值。
2、嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案:

·可以为父元素定义上边框。
·可以为父元素定义上内边距。
·可以为父元素添加 overflow:hidden.

overflow:hidden(溢出隐藏)

如果是父子关系，子元素超出父元素所限制的大小可以使用overfow:hidden，它可以强行将子元素溢出的那一部分给隐藏掉，但是并不会改变子元素的原先大小。

1.9 清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

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

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

PS 基本操作

因为网页美工大部分效果图都是利用 PS(Photoshop)来做的，所以以后我们大部分切图工作都是在 PS 里面完成部分操作:
文件一打开:可以打开我们要测量的图片

Ctr+R:可以打开标尺，或者 视图一标尺右击标尺，把里面的单位改为像素
Ctrl+ 加号(+)可以放大视图， Ctrl+ 减号(-)可以缩小视图按住空格键，鼠标可以变成小手，拖动 PS 视图
用选区拖动 可以测量大小
Ctrl+D 可以取消选区，或者在旁边空白处点击一下也可以取消选区

border-radius(圆角切割)

可以设置百分比(%)或者数值(单位px)一个参数:四个角切一样的大小;
两个参数:左上/右下、右上/左下
三个参数:左上、右上/左下、右下

四个参数:顺序为左上、右上、右下、左下

正圆:设置为50%即可