盒子模型

盒子模型

网页中一切皆盒子

盒子

• CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里面
• 如果把所有的元素都想象成盒子，那么我们对于网页的布局就相当于摆放盒子
• 我们只需要将相应的盒子拜访在网页中相应的位置即可完成网页的布局

盒子模型

• 组成内容
  1、内容区（content）
  2、内边距（padding）
  3、边框（border）
  4、外边距（margin）

内容区

• 指盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中
• 如果没有为元素设置为内边距和边框，则内容区的大小默认和盒子大小一致的
• 通过width和height两个属性可以设置内容区的大小
• width和heigth属性只适用于块元素

内边距

• 即元素内容与边框以内的空间
  默认情况下width和heigth不包含padding的大小
• 使用padding属性来设置元素的内边距
• 内边距（padding），指的是盒子的内容区与盒子边框之间的距离，一共有四个方向：
  padding-top
  padding-right
  padding-bottom
  padding-left
• 内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
  盒子的大小由内容区、内边距和边框共同决定

盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
盒子可见框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width

padding:10px 20px 30px 40px; 这样会设置元素的上、右、下、左四个方向的内边距

padding:10px 20px 30px; 分别制定上、左右、下四个方向的内边距

padding:10px 20px;分别指定上下、左右四个方向的内边距

padding:10px;同时指定上左下右四个方向的内边距

边框

• 可以在元素周围创建边框，边框是元素可见框的最外部
• 可以使用border属性来设置盒子边框

border:1px red soild; 分别指定了边框的宽度、颜色和样式

• 和padding一样，默认的width和height并包括边框的宽度
• 设置边框
  大部分的浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none
• 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
• 而且没有任何的顺序要求
  border一指定就是同时指定四个边不能分别指定border-top border-right border-bottom border-left
• 可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
• 边框样式

语法	说明
none	没有边框
dotted	点线
dashed	虚线
solid	实线
double	双线
groove	槽线
ridge	脊线
insert	凹边
outset	凸边

外边距

• 外边距是元素边框与周围元素相距的空间
• 使用margin属性可以设置外边距
• 用法和padding类型，同样也提供四个方向的margin-top/right/bottom/left
• 当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以margin:0 auto;可以使元素水平居中
• 外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置
• 外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动
• margin还可以设置为auto，auto一般只设置给水平方向的margin
  如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值垂直方向外边距如果设置为auto，则外边距默认就是0如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中

• 外边距重叠
• 垂直外边距的重叠在网页中相邻的垂直方向的外边距会发生外边距的重叠
• 所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
• 如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

浏览器默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉

*{
            margin: 0;
            padding: 0;
        }

display

• 我们不能为行内元素设置width、height、margin-top和margin-bottom
• 我们可以修改display来修改元素的性质

• block:设置元素为块元素
• inline:设置元素为行内元素
• inline-block:设置元素为行内块元素
• none:隐藏元素（元素将在页码中完全消失）