前端入门系列--CSS（3）

盒子模型（重点）

本篇内容主要包括边框border、内边距padding、外边距margin：

1、盒子边框

1、style设置样式有实线（solid）、虚线（dashed）、点线（dotted）以及无边框等
2、也可以将所有属性写到一起 border: 1px solid red; 属性没有先后顺序
3、很多时候我们需要给边框中的单独一边设置样式，则需要如border-top（方位）-属性这样来设置
4、table{ border-collapse:collapse; } 属性可用于表格table设置cellspacing后边框重叠一起变粗的问题，其是将两个边框合并
5、css3中可以利用border写出圆角边框，视觉效果更好，border-radius:length;其中length可以用数值或者百分数，其具体后可以选择四个角单独进行操纵得到半个椭圆形等效果：

6、此外还有盒子阴影效果box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；

具体代码如下：

box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);

一般阴影都是颜色都采用透明的，且外阴影是默认的但不能写上去；上述属性前两个必须写其他看实际情况

2、盒子内边距

内边距padding指的是盒子中内容与盒子边距的距离；

2.1内边距四值

其有上下左右四个属性，分别为padding-top依次类推；
注意其有简写四个写到一起的形式，但有时四个不会全写，所以需记住下表内容：

比如两个值时第一个值是上下内边距，第二个值是左右内边距
实际应用，对于一些导航栏其每个栏目中字数不一致所以盒子大小不同，这时只给定padding值让每个盒子中内容与边框距离一致撑开盒子

2.2内边距计算

• 宽度
  Element Height = content height + padding + border （Height为内容高度）

• 高度
  Element Width = content width + padding + border （Width为内容宽度）

总结：

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

实际问题：
内边距加上后会撑大原来的盒子，若想解决问题则应提前进行计算：如原本想盒子整体宽度（高度一样）为100px，现在若设置了padding为20px后其盒子会变成120px，应将其盒子大小改为80px相加后才能保持100px的总大小；
只有当一个盒子没有指定大小时padding才不会撑开盒子

3、盒子外边距

magin属性与padding一样，也有四值，且其复合写法与padding一致；

3.1块级盒子水平居中

• 盒子必须指定了宽度（width）
• 然后就给左右的外边距都设置为auto，
• 通常可以：margin：0 auto；表示上下margin是0左右margin是auto

注意区别文字谁水平居中text-align与这里的块级盒子水平居中，前者是让盒子中的文字水平居中，而后者是让盒子居中

外边距中另外一个问题是外间距的合并，当上下两个盒子相遇时，此时上盒子有下边距而下盒子有上边距，但两盒子之间的距离不是上下边距之和而是上下边距之中的大者，所以编程时只给一个盒子边距即可；
另一问题出现于嵌套块元素中的塌陷问题，- 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则 父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，解决方法有如下三种：

1. 可以为父元素定义上边框。
2. 可以为父元素定义上内边距
3. 可以为父元素添加overflow:hidden；
4. 将父盒子设置为浮动float：left/right（这种是针对父盒子是别的子盒子的情况）
5. 其实将子盒子或者父盒子设为浮动或者绝对定位后都可克服该问题
   
   

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

1. 插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
2. 背景图片我们一般用于小图标背景（淘宝中一框小图标） 或者 超大背景图片 背景图片只能通过 background-position移动位置

5、盒子稳定性布局

大小、外边距、内边距在布局中根据其稳定性使用的优先顺序如下：大小>内边距>外边距；
理由如下：

• margin 会有外边距合并，且块元素有塌陷
• padding 会影响盒子大小， 需要进行加减计算