盒子模型（插入图片，外边距，内边距）

盒子模型（Box Model）

• 所谓盒子模型
  就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器
• 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
• 盒子里面的文字和图片的等元素是内容区域
• 盒子的厚度成为盒子的边框
• 盒子内容与边框的距离是内边距（类似单元格的cellpadding）
• 盒子与盒子之间的距离是外边距（类似单元格的cellspacing）

1、盒子边框（Box Boder）

语法：

   border ： border-width ||  border-style || border-color

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

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

/* 实线的 */
border-style: solid;
/* 虚线的 */
border-style: dashed;
/* 点线 */
border-style: dotted;
/* 边框的综合性写法 */
/* 边框粗细   边框 样式 边框颜色 */


简便写法（层叠性原则）：
 /* 四个边框都取消 */
border:none;
border-bottom: 1px solid #000;

上边框	下边框	左边框	右边框
border-top-style：样式；	border-bottom-style：样式；	border-left-style：样式；	border-right-style：样式；
border-top-width：宽度；	border-bottom-width：宽度；	border-left-width：宽度；	border-right-width：宽度；
border-top-color：颜色；	border-bottom-color：颜色；	border-left-color：颜色；	border-right-color：颜色；
border-top：宽度 样式 颜色；	border-bottom： 宽肃 样式 颜色；	border-left：宽度 样式 颜色；	border-right： 宽度 样式 颜色；

2、表格的细线边框

通过CSS属性：

table{border-collapse：collapse；}（表示相邻边框合并在一起）

3、内边距（padding）

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

注意
在改内边距时，盒子会变大

            /* 上下左右都是20像素内边距 */
            padding: 20px;
            /* 上下是10，左右是20的内边距 */
            padding: 10px 20px;
            /* 上10，左右20，下30 */
            padding: 10px 20px 30px;
            /* 顺时针 10 20 30 40  */
            padding: 10px 20px 30px 40px;

4、内盒尺寸计算（元素实际大小）

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

 /* 盒子的实际大小=内容的宽度和高度+内边距+边框 */
 /* 内边距是一定要给的，只能改变内容宽度 让他减去多出来的内边距 */

特殊情况：如果没有给一个盒子指定宽度，此时给这个盒子指定padding，则不会撑开盒子。

5、外边距（margin）

块级盒子实现水平居中

• 盒子必须指定宽度
• 左右设置auto

写法：

1、
        /* 让块级盒子水平居中对齐 */
        margin-left: auto;
        margin-right: auto;

2、     margin: auto;

3、     margin: 0 auto;

6、文字居中和盒子居中区别

1、文字水平居中是text-align：center，而且还可以让行内元素和行内块元素居中对齐
2、块级盒子水平居中 左右margin改为auto

text-align: center;
/* 文字 行内元素 行内块元素水平居中 */
 margin: 10px auto;
/* 块级盒子水平居中 左右margin 改为auto 就可以了 上下margin都可以 */

7、插入图片和背景图片的区别

1、插入图片 应用于如产品展示类 ，移动位置只能靠盒模型padding margin
2、背景图片一般用于小图标背景 超大背景图片 只能通过background-position

img {
        width: 200px;/*插入图片更改大小 width个height*/
        height: 210px;
        margin-top: 30px;/*插入图片更改位置 可以用margin 或padding 盒子模型*/
        margin-left: 50px;/* 插入当图片也是一个模型*/
    }
    div {
        width: 400px;
        height: 400px;
        border: 1px solid purple;
        background: #fff url(images/sun.jpg) no-repeat;
        background-position: 30px 50px;/*背景图片更改位置*/
    }

8、清除元素的默认内外边距

代码（以后写CSS第一句代码）：

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

注意
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距

9、外边距合并

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

1. 相邻块元素垂直外边距合并
   当上下相邻的两个块元素相遇时，如果哦上面的元素有下外边距margin-bottom
   下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom和margin-top之和
   取两个值得较大者这种现象被称相邻块元素垂直外边距的合并（也称外边距塌陷）
   解决方案：尽量只给一个盒子添加margin值
2. 嵌套块元素垂直外边距的合并（塌陷）
   对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
   父元素的上外边距会与子元素的上外边距发生合并
   合并后的外边距为两者中的较大者
   解决方案：

1、可以为父元素定义上边框
2、可以为父元素定义上内边框
3、可以为父元素添加overflower：hidden

        .fathere {
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 嵌套关系 垂直外边距合并 解决方案 */
            /* 1.父亲定义上边框 transparent 透明 */
            /* border-top: 1px solid transparent; */
            /* 2.可以给父亲指定一个上padding值 */
            /* padding-top: 1px; */
            /* 3.给父亲添加overflower：hidden */
            overflow: hidden;

    
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
            margin-top: 100px;
        }

还有其他方法，如浮动，固定，绝对定位

9、盒子模型布局稳定性

根据稳定性来分，按照优先使用 宽度 其次使用内边距 再次使用 外边距

width>padding>margin

原因：

• margin会有外边距合并还有le6下面margin 加倍的bug，所以最后使用
• padding 会影响盒子大小，需要进行加减计算，其次使用
• width没有问题，经常使用宽度剩余法 高度剩余法来做

10、ps基本操作以及常用快捷键

• 文件-打开-- 可以打开要测量的工具
• Ctrl+R可以打开标尺 或者视图
• 右击标尺，把里面的单位改为像素
• Ctrl+加号键 可以放大视图 Ctrl+减号键缩小视图
• 按住空格键，可以拖动视图
• 用选区拖动 可以测量大小
• Ctrl+ d可以取消选区 或者旁边空白处点击一下也可以取消选区