Day3 2-盒子模型（重点）

Day3 2-盒子模型（重点）

组成

○ 作用：布局网页，摆放盒子和内容

○ 重要组成部分：

   ● 内容区域 - width & height

   ● 内边距 - padding/padding-方位名词
      多值写法：（从最上开始，顺时针赋值，如果当前方向没有数值，则取值与对侧相同）
         ○ 一个值：上下左右
         ○ 四个值：上，右，下，左
         ○ 三个值：上，左右，下
         ○ 两个值：上下，左右

   ● 边框线 - border/border-方位名词
      ○ emmet写法：bd；属性值：边框线粗细 线条样式 颜色，不分先后
      ○ 常用的线条样式有三种：solid（实线）、dashed（虚线）、dotted（点线），剩下两个属性值看设计稿

   ● 外边距 - margin
      ○ 出现在盒子外面，并且其大小不包含在盒子尺寸中
      ○ 与 padding 属性值写法、含义相同

○ 方位名词：top/bottom/right/left

尺寸计算

○ 默认情况：盒子尺寸 = 内容尺寸 + border尺寸 + 内边距尺寸
○ 所以给盒子加 border / padding 会撑大盒子。
○ 解决办法：
   ● 手动做减法
   ● 内减模式：box-sizing: border-box

版心居中

margin的左右属性值设置为auto（这里需要盒子本身有设置宽度，不然没意义）