盒子模型

• CSS盒子模型仅仅是一个形象的比喻，HTML中所有的标签都是盒子
  • 宽高 == 指定可以存放内容的区域
  • 内边距 == 填充物
  • 边框 == 手机盒子自己
  • 外边距 == 盒子和盒子之间的间隙

宽度和高度

• 1.内容的宽高
  • 通过width／height设置的
• 2.元素的宽高
  • 宽度 = 左右边框+左右内边距+width
• 3.元素空间的宽高
  • 宽度 = 左右外边距+左右边框+左右内边距+width

注意点:如果增加了内边距或者边框的宽度，还想要保持元素的宽高不变，那么要相应的减去新加的内边距或边框的宽度

box_sizing

• CSS3中新增的属性，可以保证给盒子新增padding和border之后，盒子元素的宽高保持不变
• 原理如上述注意点相同
• 取值:
  • content-box (默认)
    • 元素的宽高 = 边框 + 内边距 + 内容宽高
  • border-box
    • 元素的宽高 = widht/height属性
• 注意点:
  • 1.如果两个盒子是嵌套关系，那么设置了里面盒子顶部的外边距，则外面一个盒子也会被定下来
  • 2.如果外面的盒子不想被顶下来，可以给外面的盒子添加一个边框属性
  • 3.在企业开发中，一般情况如果需要控制嵌套关系盒子之间的距离，应该首先考虑padding，其次考虑margin，margin本质上是用于控制兄弟关系之间的间隙
  • 4.在嵌套关系的盒子中，我们可以利用margin:0 auto;来实现里面的盒子在外面盒子中水平居中
  • 5.margin:0 auto;只对水平方向有效，对垂直方向无效

text-align:center;和margin:0 auto;的区别

• text-align:center;设置盒子中文字和图片的水平居中，对盒子无效
• margin:0 auto;让盒子自身水平居中

清空默认边距

• 格式:

  *{
  margin=0;
  padding=0;
  }
  // 这种写法因为要遍历界面所有标签，所以性能差，企业开发不推荐使用
  

行高

• 在CSS中所有的行都有自己的行高
• 注意点:行高和盒子高不是同一个概念
• 规律:
  • 1.文字在行高中默认是垂直居中的
  • 2.在企业开发中，只有一行文字，通常设置相同的盒子高度和行高来实现文字在盒子垂直居中
  • 3.如果是多行文字，只能通过设置padding实现多行文字的垂直居中,padding-top = (盒子高-行数*行高)/2
  • 4.顶部的内边距并不是边框到文字顶部的距离，而是边框到行高顶部的距离