CSS（六）---盒子模型（css学习重点之一）

CSS盒子模型

css学习三大重点：css 盒子模型 、浮动、定位

1.盒子模型：

盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。

2.盒子边框：border

border 分为   border-width || border-style || border-color 

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

2.1 border-style的属性值（边框的样式）

• none：没有边框即忽略所有边框的宽度（默认值）
• solid：边框为单实线(最为常用的)
• dashed：边框为虚线
• dotted：边框为点线
  语法：border-style: solid;

2.2 可综合设置border：

   border : border-width || border-style || border-color 
          例如： border: 1px solid red;  没有顺序  

上边框	下边框	左边框	右边框
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:宽度 样式 颜色;

3. 内边距：padding

    padding: 指 边框与内容之间的距离。

设置：

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

简写：
值的个数 表达意思

• 1个值 padding：上下左右 内边距; padding:10px; (上下左右的内边距都是10px)

• 2个值 padding: 上下内边距 左右内边距 ；

• 3个值 padding：上内边距 左右内边距 下内边距；

• 4个值 padding: 上内边距 右内边距 下内边距 左内边距 ；

     当我们给盒子指定padding值时，发生了2件事情：
        1. 内容和边框 有了距离，添加了内边距。
        2. 盒子会变大了。
        3. 
    解决：
    通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小。
    如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。
  

4.外边距：margin

 margin : 控制盒子和盒子之间的距离

设置：

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

5.块级盒子水平居中：

可以让一个块级盒子实现水平居中必须：

• 盒子必须指定了宽度（width）
• 然后就给左右的外边距都设置为auto 常见的写法，以下下三种都可以：
  * margin-left: auto; margin-right: auto;
  * margin: auto;
  * margin: 0 auto;

6.清除元素的默认内外边距(重要)

为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除：
{
padding:0; / 清除内边距 /
margin:0; / 清除外边距 */
}

7.外边距合并

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

7.1 .相邻块元素垂直外边距的合并

• 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是取两个值中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

7.2 嵌套块元素垂直外边距的合并（塌陷）

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框

• 父元素的上外边距会与子元素的上外边距发生合并
• 合并后的外边距为两者中的较大者
  解决方案：
  1. 可以为父元素定义上边框。
  2. 可以为父元素定义上内边距
  3. 可以为父元素添加overflow:hidden。

8.盒子布局稳定性：

建议可以：
优先使用 宽度（width） 其次 使用内边距（padding） 再次使用 外边距（margin）。
width > padding > margin