CSS笔记之盒子模型(四)

五，盒子模型

1.简介

盒子模型是网页布局的基础，将页面中所有的元素都看作成一个盒子，盒子都包含以下几个属性：

• width 宽度

• height 高度

• border 边框

• padding 内边距

• margin 外边距

2、盒子模型

2.1 brder

表示盒子的边框

分为四个方向：

                 上top、右right、下bottom、左left

                  border-­top、border­-right、border­-bottom、border-­left

每个边都包含三种样式：

                    颜色color、粗细width、样式style

                    border­top­-color、border­top­-width、border­top-­style

                   border-right­-color、border­-right­-width、border­-right-­style

                   border-­bottom­-color、border-­bottom­-width、border-­bottom­-style

                   border­-left­-color、border­-left­-width、border­-left-­style

样式style的取值：

solid实线、dashed虚线、dotted点线、double双线、inset内嵌3D线、outset外嵌3D线

简写，三种方式:

• 按方向简写
  border-top，border-right，border-bottom，border-left
  书写顺序:
  border-方向:width style  color

• 按样式简写
  border­color、border­width、border­style
  书写顺序:
          border-样式:top right bottom left
  必须按顺序针方向书写，同时可以缩写

                       border­width：2px; ———>四个边的宽度都为2px

                       border­width：2px 4px;

                  border­width：1px 2px 4px;

                   规则：如果省略，则认为上下一样，左右一样

• 终极简写
  如果四个边样式完成相同，border：width style color;

2.2 padding

表示盒子的内边距，即内容与边框之间的距离

同样也分为四个方向，也可以简写（按顺序针方向，默认上下一样，左右一样）

注：如果上下冲突，则以上为准，如果左右冲突，则以左为准

2.3 margin

表示盒子的外边距，即盒子与盒子之间的距离

同样也分为四个方向，也可以简写（按顺序针方向，默认上下一样，左右一样）

居中对齐：

/*
元素的居中
*/
/* 1.块级元素水平居中 */
margin:0 auto;
/* 2.文本水平居中 */
text­align:center;
/* 3.垂直居中：将height和line­height设置为相同 */
height:100px;
line­height:100px;

3.其他

3.1元素所占空间

页面中的元素实际所占空间

• 宽=width+左右padding+左右border+ 左右margin

• 高=height+上下padding+上下border+上下margin

3.2 盒子属性默认值

不同标签的盒子属性默认值可能不同，需要自己设置

   body,ul,ol,dl,li,p,h1,h2,h3,h4,h5,h6,form{
    margin:0;
    padding:0
}

3.3 外边距合并

   也称为外边距折叠，指的是两个块级元素垂直外边距相遇时，它们将合并为一个外边距，合并后的外边距值为其中的较大的那个外边距值

两种情况：

• 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二元素的上外边距会发生合并

• 当一个元素包含在另一个元素中时，并且没有内边距或边框把外边距分隔开时，两个元素的上外边距会
  发生合并

外边距合并的好处：让排版在视觉上显得更美观