前端（css 盒子模型）

盒子模型由内容content 内边距padding 边框border 外边距margin所组成

边框：

边框的宽度border-width（四个值上右下左 三个值上 左右 下 两个值上下 左右）

边框的颜色border-color 默认黑

边框的样式border-style

内边距：

盒子可见区域：内容 边框 内边距

外边距：

影响盒子位置

正值往相反方向移动 负值往相同方向移动

盒子模型的水平布局

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区宽度（必须满足）

利用auto实现水平居中：

1.margin-left width margin-right三个值全部为auto，外边距为0，宽度最大

2.宽度和一个外边距为0，宽度为最大

3.宽度固定值，两个外边距auto，两个外边距对半分相等

盒子模型的垂直布局

子元素在父元素内容区中排列，如果子元素大小超过父元素内容区大小会溢出

用overflow属性代表溢出部分

overflow：visible  默认值，在父元素以外显示

overflow：hidden 隐藏溢出部分

overflow：scroll   生成垂直水平滚动条来查看完整内容

overflow：auto    根据需要生成滚动条

垂直外边距的折叠

兄弟元素之间相邻间距取两者之间的较大值

父子元素之间相邻间距子元素会传递给父元素

行内元素的盒模型

不支持设置宽度和高度，可以设置margin border padding垂直方向不影响页面布局

display显示元素显示类型：

inline行内元素  block块元素  inline-block行内块元素可设置宽度和高度又不会独占一行

none不显示  table设置为表格

visibility显示元素状态：

visible显示  hidden隐藏（占据位置）